使用 ShowcaseView 定位操作栏菜单项

Question

我正在尝试将 ShowcaseView (v5.2.3) 集成到应用程序中，但是当我尝试定位操作栏菜单项时，应用程序崩溃并显示运行时异常消息“insertShowcaseViewWithType 在主题没有 ActionBar 时不能使用”。 activity 绝对有一个带有菜单项的操作栏。这发生在 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.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'
}

我的activity如下...

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>

Answer 1

检查您的清单，您会发现没有应用到当前 activity 的操作栏主题。所以试试这个，希望它能解决你的问题！

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

Answer 2

来自 ShowcaseView 开发者 (amicurran)...

As you might realise, there is no API in AppCompat for getting a reference to a MenuItem view, and as such this call requires reflection. And basically every time Google change AppCompat, this breaks ShowcaseView.

I don't have any current plans to support the new AppCompat (which is what this crash is coming from). However, if you use an AppCompat Toolbar, then you can quite easily showcase an item on it. See the demo activity, and the new target for more info.

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

Answer 4

此代码对我有用，但此代码是 "happy path" 我的项目。

您需要实时遍历所有项目以根据您的代码检查显示或隐藏了多少项目，或者toolbar_size以获得正确的宽度位置。

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

Answer 5

这样使用

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

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

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

Answer 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 library.I 在这里写两个不同的 library.One 是

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

那是all.Happy编码……

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

Answer 9

对于 Kotlin，我添加了一个内部 class，如下所示，以使目标指向底部导航菜单项。对我来说，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()

使用 ShowcaseView 定位操作栏菜单项

Using ShowcaseView to target action bar menu item

android

showcaseview