Android：AppCompat 21，如何将后退图标和溢出图标更改为自定义？

Question

直到几天前，在我的项目中，我还使用了 sherlock 操作栏，但我决定将整个操作栏样式更改为新的材料设计。在我的背部和溢出图标的旧主题上，我在我的主题上设置了一些自定义图标。但是在 appcompat 上，我尝试在我的主题上定义它，我在工具栏上使用它，但它不起作用。有谁知道如何做到这一点？

我在工具栏上使用的主题（使用asset studio生成）：

<style name="Theme.Themewiz" parent="@style/Theme.AppCompat.Light.DarkActionBar">
    <item name="android:actionBarStyle">@style/ActionBar.Solid.Themewiz</item>

    <item name="android:actionBarItemBackground">@drawable/selectable_background_themewiz</item>
    <item name="android:popupMenuStyle">@style/PopupMenu.Themewiz</item>
    <item name="android:dropDownListViewStyle">@style/DropDownListView.Themewiz</item>
    <item name="android:actionBarTabStyle">@style/ActionBarTabStyle.Themewiz</item>
    <item name="android:actionDropDownStyle">@style/DropDownNav.Themewiz</item>
    <item name="android:actionModeBackground">@drawable/cab_background_top_themewiz</item>
    <item name="android:actionModeSplitBackground">@drawable/cab_background_bottom_themewiz</item>
    <item name="android:actionModeCloseButtonStyle">@style/ActionButton.CloseMode.Themewiz</item>

            <!-- Light.DarkActionBar specific -->
    <item name="android:actionBarWidgetTheme">@style/Theme.Themewiz.Widget</item>

    <item name="android:actionOverflowButtonStyle">@style/Theme.AppCompat.Overflow</item>

</style>

<style parent="@style/Widget.AppCompat.ActionButton.Overflow" name="Theme.AppCompat.Overflow">

    <item name="android:src">@drawable/ic_action_overflow</item>

</style>

工具栏 xml：

<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/my_awesome_toolbar"
    android:layout_height="wrap_content"
    android:layout_width="match_parent"
    android:minHeight="?attr/actionBarSize"
    android:background="?attr/colorPrimaryDark"
    app:theme="@style/Theme.Themewiz"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>

Answer 1

使用 appcompat 21 来实现这些非常容易。

要更改后退图标，您必须改用支持工具栏作为操作栏。 This post by Chris Banes 应该可以帮助您入门。

添加工具栏后，您所要做的就是：

Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar_id);
toolbar.setNavigationIcon(R.drawable.back_icon);

另一方面，要更改溢出图标，最简单的方法是在主主题声明中添加自定义样式。比如：

<resources>
    <!-- Base application theme. -->
    <style name="Your.Theme" parent="@style/Theme.AppCompat">
        <!-- Your theme items go here -->

        <item name="actionOverflowButtonStyle">@style/OverFlow</item>
    </style>

    <!-- Styles -->
    <style name="OverFlow" parent="@android:style/Widget.AppCompat.ActionButton.Overflow">
        <item name="android:src">@drawable/overflow_icon</item>
    </style>

</resources>

希望对您有所帮助。

Answer 2

我已经这样做了，它对我有用

<style name="AppTheme.Base" parent="Theme.AppCompat.Light">
    <item name="actionOverflowButtonStyle">@style/OverFlow</item>
</style>

<style name="OverFlow" parent="Widget.AppCompat.ActionButton.Overflow">
    <item name="android:src">@drawable/custom_button</item>
</style>

Answer 3

获取视图本身有点棘手，但可以使用工具栏的功能设置它们的图标和/或颜色。示例：

toolbar.setNavigationIcon(R.drawable.abc_ic_ab_back_mtrl_am_alpha);
final Drawable navigationIcon = toolbar.getNavigationIcon();
toolbar.setNavigationIcon(getTintedDrawable(this, navigationIcon, 0xffff0000));
final Drawable overflowIcon = toolbar.getOverflowIcon();
toolbar.setOverflowIcon(getTintedDrawable(this, overflowIcon, 0xffff0000));

public static Drawable getTintedDrawable(@NonNull Context context, @NonNull Drawable inputDrawable, @ColorInt int color) {
    Drawable wrapDrawable = DrawableCompat.wrap(inputDrawable);
    DrawableCompat.setTint(wrapDrawable, color);
    DrawableCompat.setTintMode(wrapDrawable, Mode.SRC_IN);
    return wrapDrawable;
}

Answer 4

<style name="AppTheme">
    <item name="windowActionBar">false</item>
    <item name="windowNoTitle">true</item>
    <item name="homeAsUpIndicator">@drawable/back_white1</item>
</style>

Answer 5

对于更改导航箭头，请检查以下代码

final Drawable upArrow = getResources().getDrawable(R.drawable.abc_ic_ab_back_mtrl_am_alpha);
upArrow.setColorFilter(Color.parseColor("#FFFFFF"), PorterDuff.Mode.SRC_ATOP);
getSupportActionBar().setHomeAsUpIndicator(upArrow);

首先我们需要在styles.xml文件的溢出菜单图标中添加内容描述属性。它可以是任何字符串，只是需要稍后在代码中通过它的描述找到合适的视图。

<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.MyTheme">
    <!-- Customize your theme here. -->
    <item name="android:actionOverflowButtonStyle">@style/Widget.ActionButton.Overflow</item>
</style>

<style name="Widget.ActionButton.Overflow" parent="@android:style/Widget.Holo.ActionButton.Overflow">
    <item name="android:contentDescription">@string/accessibility_overflow</item>
</style>

其次，我们实现负责查找溢出图标并为其着色的方法：

  /* It's important to set overflowDescription atribute in styles, so we cangrab the reference
* to the overflow icon. Check: res/values/styles.xml
* @param activity
* @param colorFilter
*/
private static void setOverflowButtonColor(final Activity activity, final PorterDuffColorFilter colorFilter) {
    final String overflowDescription = activity.getString(R.string.abc_action_menu_overflow_description);
    final ViewGroup decorView = (ViewGroup) activity.getWindow().getDecorView();
    final ViewTreeObserver viewTreeObserver = decorView.getViewTreeObserver();
    viewTreeObserver.addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
        @Override
        public void onGlobalLayout() {
            final ArrayList<View> outViews = new ArrayList<View>();
            decorView.findViewsWithText(outViews, overflowDescription,
                    View.FIND_VIEWS_WITH_CONTENT_DESCRIPTION);
            if (outViews.isEmpty()) {
                return;
            }
            TintImageView overflow=(TintImageView) outViews.get(0);
            overflow.setColorFilter(colorFilter);
            removeOnGlobalLayoutListener(decorView,this);
        }
    });
}

/***Use below code in your activity screen for apply color*/

 final PorterDuffColorFilter colorFilter= new PorterDuffColorFilter(Color.WHITE, PorterDuff.Mode.MULTIPLY);
setOverflowButtonColor(this,colorFilter);

请查看以下链接以了解更多信息 https://snow.dog/blog/how-to-dynamicaly-change-android-toolbar-icons-color/