使用ShowcaseView定位操作栏菜单项

Question

使用ShowcaseView定位操作栏菜单项

5

我正在尝试将 ShowcaseView（v5.2.3）集成到应用程序中，但是当我尝试定位操作栏菜单项时，应用程序会崩溃，并显示运行时异常消息“insertShowcaseViewWithType不能在没有ActionBar的主题下使用”。该活动绝对具有带有菜单项的操作栏。这在Android v5.1.1和v4.4.2上都发生。

来自崩溃的堆栈跟踪如下...

java.lang.RuntimeException: insertShowcaseViewWithType cannot be used when the theme has no ActionBar
     at com.github.amlcurran.showcaseview.targets.ActionBarReflector.getHomeButton(ActionBarReflector.java:43)
     at com.github.amlcurran.showcaseview.targets.ActionBarReflector.getActionBarView(ActionBarReflector.java:36)
     at com.github.amlcurran.showcaseview.targets.ActionItemTarget.setUp(ActionItemTarget.java:49)
     at com.github.amlcurran.showcaseview.targets.ActionItemTarget.getPoint(ActionItemTarget.java:43)
     at com.github.amlcurran.showcaseview.ShowcaseView$1.run(ShowcaseView.java:176)
     at android.os.Handler.handleCallback(Handler.java:739)
     at android.os.Handler.dispatchMessage(Handler.java:95)
     at android.os.Looper.loop(Looper.java:135)
     at android.app.ActivityThread.main(ActivityThread.java:5254)
     at java.lang.reflect.Method.invoke(Native Method)
     at java.lang.reflect.Method.invoke(Method.java:372)
     at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:903)
     at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:698)

应用程序模块的 build.gradle 如下...

apply plugin: 'com.android.application'

android {
    compileSdkVersion 23
    buildToolsVersion "23.0.1"

    defaultConfig {
        applicationId "com.d60402.myappname"
        minSdkVersion 15
        targetSdkVersion 23
        versionCode 1
        versionName "1.0"
    }
    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
        }
    }
}

dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    testCompile 'junit:junit:4.12'
    compile 'com.android.support:appcompat-v7:23.1.0'
    compile 'com.github.amlcurran.showcaseview:library:5.2.3'
}

我的活动如下...

package com.d60402.myappname;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.Menu;

import com.github.amlcurran.showcaseview.ShowcaseView;
import com.github.amlcurran.showcaseview.targets.ActionItemTarget;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu
        getMenuInflater().inflate(R.menu.main_menu, menu);

        boolean ret = super.onCreateOptionsMenu(menu);

        ActionItemTarget target = new ActionItemTarget(this, R.id.action_settings);

        new ShowcaseView.Builder(this)
                .setTarget(target)
                .setContentTitle("Settings menu")
                .setContentText("Tap here to view and set the app settings")
                .hideOnTouchOutside()
                .build();

        return ret;
    }
}

主菜单的XML如下...

<?xml version="1.0" encoding="utf-8"?>

<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <item android:id="@+id/action_settings"
        android:title="@string/action_settings"
        android:orderInCategory="100"
        app:showAsAction="always|withText"/>
</menu>

AndroidManifest.xml如下...

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.d60402.myappname" >

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:supportsRtl="true"
        android:theme="@style/AppTheme" >
        <activity android:name=".MainActivity" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>

而 styles.xml 如下所示...

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>

</resources>

- d60402

9个回答

3

来自 ShowcaseView 开发者（amicurran）...

你可能已经意识到，AppCompat 中没有 API 可以获取 MenuItem 视图的引用，因此这个调用需要反射。而且每当 Google 更改 AppCompat 时，ShowcaseView 就会出现问题。

我目前没有计划支持新的 AppCompat（这就是这个崩溃的原因）。但是，如果您使用 AppCompat 工具栏，则可以很容易地展示其中的项目。请参见演示活动和新目标以了解更多信息。

- d60402

2

在您的清单中检查，您将发现当前活动没有应用noactionbar主题。所以尝试这个方法，希望能解决您的问题！

Target target = new ViewTarget(R.id.action_settings, this);

new ShowcaseView.Builder(this)
            .setTarget(target)
            .setContentTitle("Settings menu")
            .setContentText("Tap here to view and set the app settings")
            .hideOnTouchOutside()
            .build();

- Madhur

1

清单中的活动没有定义主题。我还尝试使用您的ViewTarget代码而不是ActionItemTarget，但我得到以下异常：“java.lang.NullPointerException：尝试在空对象引用上调用虚拟方法'void android.view.View.getLocationInWindow（int []）'” - d60402

1

这对我有效。你可以尝试一下

new Handler().postDelayed(new Runnable() {

        @Override
        public void run() {
    if(toolbar.getMenu().size()==0){
        return;
    }
    MenuItem item=toolbar.getMenu().getItem(0);
     try {
           // ViewTarget navigationButtonViewTarget = navigationButtonViewTarget(toolbar); use this for back or up button
            new ShowcaseView.Builder(TrainRoute.this)
                    .withMaterialShowcase()
                    .setTarget(new ViewTarget(item.getItemId(),TrainRoute.this))
                    .setContentText("Here's how to highlight items on a toolbar")
                    .setStyle(R.style.CustomShowcaseTheme)
                    .build()
                    .show();
        } catch (Exception e) {
            e.printStackTrace();
        }
        }
    },
1000);

- DILSHAD AHMAD

0

像这样使用

new ShowcaseView.Builder(activity)
           // .withMaterialShowcase()
         //  .setStyle(R.style.CustomShowcaseTheme3)
            .setTarget(Target.NONE)
            .setOnClickListener(this)
            //.withMaterialShowcase()
            .blockAllTouches()
            .useDecorViewAsParent() //this is the difference
            .build();

然后在操作栏中定位您的视图

- Reza

0

这段代码对我有效，但这段代码是我项目中的“happy path”。

为了获得正确的宽度位置，您需要实时遍历所有项以检查根据您的代码或工具栏大小显示或隐藏的项数。

ShowCaseUtil.showForToolbar(getActivity(),
            ((MainActivity) getActivity()).toolbar, //instance of my toolbar
            R.string.showcase_fragment_message,
            menu.findItem(R.id.action_scan_barcode));


public static void showForToolbar(FragmentActivity activity, final Toolbar toolbar, int message, final MenuItem menuItem) {
    Target homeTarget = new Target() {
        @Override
        public Point getPoint() {
            int actionBarWidth = toolbar.getWidth();
            int y = actionBarWidth - (menuItem.getIcon().getIntrinsicWidth() * menuItem.getOrder());
            return new Point(y, toolbar.getHeight());
        }
    };
    new ShowcaseView.Builder(activity)
            .withMaterialShowcase()
            .setStyle(R.style.CustomShowcaseTheme2)
            .setTarget(homeTarget)
            .setContentText(message)
            .build()
            .show();
}

- lucasddaniel

0

对于 Kotlin，我添加了一个内部类如下所示，以便将目标指向底部导航菜单项。对于我来说，BottomNavigation 有 5 个菜单项。navItemPosition 的范围从 0 到 4。

class ViewTargetPoint(
    screenWidth: Int,
    screenHeight: Int,
    navItemPosition: Int,
    midPointOfBottomNav: Int
) : Target {

    var x: Int = 0
    var y: Int = 0

    init {
        Log.e("TAG", "screenWidth px = $screenWidth")
        Log.e("TAG", "screenHeight px = $screenHeight")
        Log.e("TAG", "midPointOfBottomNav = $midPointOfBottomNav}")
        x = (screenWidth / 10) + ((screenWidth / 5) * navItemPosition)
        y = screenHeight - midPointOfBottomNav
        Log.e("TAG", "Point X = $x")
        Log.e("TAG", "Point Y = $y")
    }

    override fun getPoint(): Point {
        Log.e("TAG", "Point X = $x")
        Log.e("TAG", "Point Y = $y")
        return Point(x, y)
    }
}

targetPoint = ViewTargetPoint(screenWidth, screenHeight, navItemPosition, midPointOfBottomNav)

ShowcaseView.Builder(this)
        .withMaterialShowcase()
        .setTarget(targetPoint)
        .setContentTitle("ShowcaseView 2")
        .setContentText("This is highlighting the Some button")
        .hideOnTouchOutside()
        .setShowcaseEventListener(
            object : SimpleShowcaseEventListener() {
                override fun onShowcaseViewDidHide(showcaseView: ShowcaseView) {
                    Log.e("TAG", "onShowcaseViewDidHide 2")
                }
            }
        )
        .build()

- Jayesh Nair

0

我得到了一个解决方案...... 用于Appcompat工具栏的代码

toolbar = (Toolbar) findViewById(R.id.department_name);
    toolbar.setTitle(R.string.catagory_one);
    toolbar.setSubtitle(getText(R.string.lwebsite));
    toolbar.inflateMenu(R.menu.all_articles);// add this line catching menu items
    setSupportActionBar(toolbar);

然后使用您喜欢的目标视图库。我在这里使用了两个不同的库。其中一个是

 new MaterialTapTargetPrompt.Builder(CatagoryOne_HOME.this)//library link:https://github.com/sjwall/MaterialTapTargetPrompt
            .setTarget(R.id.sync)//this is yours
            .setPrimaryText("Send your first email")
            .setSecondaryText("Tap the envelope to start composing your first email")
            .show();

    ViewTarget target = new ViewTarget(toolbar.findViewById(R.id.sync));//this is yours
    new ShowcaseView.Builder(this)
            .setContentTitle("Its My Navigation Drawer")
            .setContentText("Click here and you will get options to navigate to other sections.")
            .useDecorViewAsParent() 
            .setTarget(target)
            .build();

就这些了。愉快编程......

- Shahriar Nasim Nafi

0

public void startTourGuide() {
    mToolbar.getViewTreeObserver().addOnDrawListener(new ViewTreeObserver.OnDrawListener() {
        @Override
        public void onDraw() {
            if (!isFinishing()) {
                if (prefs.getInt("guide_upload_sign_in_up", 0) == 0) {

                    final FancyShowCaseView fancyShowCaseViewVideo = new FancyShowCaseView.Builder(MainActivity.this)
                            .title("Upload Video, Sign In, Register...")
                            .focusBorderColor(getResources().getColor(R.color.color_primary))
                            .focusBorderSize(5)
                            .focusOn(findViewById(R.id.main_upload))
                            .build();



                    new FancyShowCaseQueue()
                            .add(fancyShowCaseViewVideo)
                            .show();
                    editor.putInt("guide_upload_sign_in_up", 1);
                    editor.apply();
                }
            }
        }
    });
}

- Smeet

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- RatneZ · Accepted Answer

使用这段代码，它对我有效。这里的"toolbar"是我的工具栏的ID。

      Target homeTarget = new Target() {
        @Override
        public Point getPoint() {
            // Get approximate position of home icon's center
            int actionBarSize = toolbar.getHeight();
            int x = actionBarSize / 2;
            int y = actionBarSize / 2;
            return new Point(x, y);
        }
    };
    new ShowcaseView.Builder(this)
            .setContentTitle("Its My Navigation Drawer")
            .setContentText("Click here and you will get options to navigate to other sections.")
            .setTarget(homeTarget)
            .build();
}