使用 ShowcaseView 定位操作栏菜单项答案

【问题标题】：Using ShowcaseView to target action bar menu item使用 ShowcaseView 定位操作栏菜单项
【发布时间】：2016-01-27 12:32:05
【问题描述】：

我正在尝试将ShowcaseView (v5.2.3) 集成到应用程序中，但是当我尝试定位操作栏菜单项时，应用程序崩溃并出现运行时异常消息“insertShowcaseViewWithType cannot be used when when主题没有 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)

app模块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;
    }
}

main_menu.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>

【问题讨论】：

标签： android showcaseview

【解决方案1】：

在那里检查您的清单，您会发现 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();

【讨论】：

清单中的活动没有定义主题。我还尝试使用您的 ViewTarget 代码而不是 ActionItemTarget，但出现以下异常：“java.lang.NullPointerException: Attempt to invoke virtual method 'void android.view.View.getLocationInWindow(int[])' on a空对象引用”

【解决方案2】：

来自 ShowcaseView 开发人员 (amicurran)...

您可能意识到，AppCompat 中没有用于获取对 MenuItem 视图的引用的 API，因此此调用需要反射。而且基本上每次 Google 更改 AppCompat 时，都会破坏 ShowcaseView。

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

【讨论】：

【解决方案3】：

使用此代码。它为我工作。这里的“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();
}

【讨论】：

【解决方案4】：

这段代码对我有用，但这段代码是我项目的“快乐之路”。

您将需要实时迭代所有项目，以根据您的代码或工具栏大小检查有多少项目正在显示或隐藏，以获得正确的宽度位置。

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();
}

【讨论】：

【解决方案5】：

这样使用

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

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

【讨论】：

【解决方案6】：

这对我有用。你可以试试

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);

【讨论】：

【解决方案7】：

我有一个解决方案..... 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);

然后使用你喜欢的targetview库。我在这里用两个不同的库写这个。一个是

 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();

就是这样。快乐的编码......

【讨论】：

【解决方案8】：

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();
                }
            }
        }
    });
}

【讨论】：

【解决方案9】：

对于 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()

【讨论】：