MenuItem tinting บน AppCompat Toolbar

Question 1

เมื่อฉันใช้ drawables จากAppCompatไลบรารีสำหรับToolbarรายการเมนูของฉันการย้อมสีจะทำงานตามที่คาดไว้ แบบนี้:

<item
    android:id="@+id/action_clear"
    android:icon="@drawable/abc_ic_clear_mtrl_alpha"  <-- from AppCompat
    android:title="@string/clear" />

แต่ถ้าฉันใช้ drawables ของฉันเองหรือแม้แต่คัดลอก drawables จากAppCompatไลบรารีไปยังโปรเจ็กต์ของฉันเองมันจะไม่ย้อมสี

<item
    android:id="@+id/action_clear"
    android:icon="@drawable/abc_ic_clear_mtrl_alpha_copy"  <-- copy from AppCompat
    android:title="@string/clear" />

มีเวทมนตร์พิเศษบางอย่างในAppCompat Toolbarสีที่วาดได้จากห้องสมุดนั้นหรือไม่? มีวิธีใดบ้างที่จะทำให้สิ่งนี้ใช้งานได้กับ drawables ของฉันเอง?

เรียกใช้สิ่งนี้บนอุปกรณ์ API ระดับ 19 ด้วยcompileSdkVersion = 21และtargetSdkVersion = 21และยังใช้ทุกอย่างจากAppCompat

abc_ic_clear_mtrl_alpha_copyเป็นสำเนาที่ถูกต้องของabc_ic_clear_mtrl_alphapng จากAppCompat

แก้ไข:

การย้อมสีจะขึ้นอยู่กับค่าที่ฉันตั้งไว้android:textColorPrimaryในธีมของฉัน

เช่น<item name="android:textColorPrimary">#00FF00</item>จะให้สีโทนเขียวแก่ฉัน

ภาพหน้าจอ

การย้อมสีทำงานตามที่คาดไว้ด้วย AppCompat

การย้อมสีไม่ทำงานกับ drawable ที่คัดลอกมาจาก AppCompat

Question 2

เพราะถ้าคุณดูซอร์สโค้ดของ TintManager ใน AppCompat คุณจะเห็น:

/**
 * Drawables which should be tinted with the value of {@code R.attr.colorControlNormal},
 * using the default mode.
 */
private static final int[] TINT_COLOR_CONTROL_NORMAL = {
        R.drawable.abc_ic_ab_back_mtrl_am_alpha,
        R.drawable.abc_ic_go_search_api_mtrl_alpha,
        R.drawable.abc_ic_search_api_mtrl_alpha,
        R.drawable.abc_ic_commit_search_api_mtrl_alpha,
        R.drawable.abc_ic_clear_mtrl_alpha,
        R.drawable.abc_ic_menu_share_mtrl_alpha,
        R.drawable.abc_ic_menu_copy_mtrl_am_alpha,
        R.drawable.abc_ic_menu_cut_mtrl_alpha,
        R.drawable.abc_ic_menu_selectall_mtrl_alpha,
        R.drawable.abc_ic_menu_paste_mtrl_am_alpha,
        R.drawable.abc_ic_menu_moreoverflow_mtrl_alpha,
        R.drawable.abc_ic_voice_search_api_mtrl_alpha,
        R.drawable.abc_textfield_search_default_mtrl_alpha,
        R.drawable.abc_textfield_default_mtrl_alpha
};

/**
 * Drawables which should be tinted with the value of {@code R.attr.colorControlActivated},
 * using the default mode.
 */
private static final int[] TINT_COLOR_CONTROL_ACTIVATED = {
        R.drawable.abc_textfield_activated_mtrl_alpha,
        R.drawable.abc_textfield_search_activated_mtrl_alpha,
        R.drawable.abc_cab_background_top_mtrl_alpha
};

/**
 * Drawables which should be tinted with the value of {@code android.R.attr.colorBackground},
 * using the {@link android.graphics.PorterDuff.Mode#MULTIPLY} mode.
 */
private static final int[] TINT_COLOR_BACKGROUND_MULTIPLY = {
        R.drawable.abc_popup_background_mtrl_mult,
        R.drawable.abc_cab_background_internal_bg,
        R.drawable.abc_menu_hardkey_panel_mtrl_mult
};

/**
 * Drawables which should be tinted using a state list containing values of
 * {@code R.attr.colorControlNormal} and {@code R.attr.colorControlActivated}
 */
private static final int[] TINT_COLOR_CONTROL_STATE_LIST = {
        R.drawable.abc_edit_text_material,
        R.drawable.abc_tab_indicator_material,
        R.drawable.abc_textfield_search_material,
        R.drawable.abc_spinner_mtrl_am_alpha,
        R.drawable.abc_btn_check_material,
        R.drawable.abc_btn_radio_material
};

/**
 * Drawables which contain other drawables which should be tinted. The child drawable IDs
 * should be defined in one of the arrays above.
 */
private static final int[] CONTAINERS_WITH_TINT_CHILDREN = {
        R.drawable.abc_cab_background_top_material
};

ซึ่งค่อนข้างมากหมายความว่าพวกเขามี resourceIds เฉพาะที่จะย้อมสี

แต่ฉันเดาว่าคุณสามารถเห็นได้เสมอว่าพวกเขากำลังย้อมสีภาพเหล่านั้นอย่างไรและทำแบบเดียวกัน ง่ายพอ ๆ กับการตั้งค่า ColorFilter บน drawable

Question 3

หลังจากไลบรารี Support v22.1 ใหม่คุณสามารถใช้สิ่งที่คล้ายกับสิ่งนี้:

  @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.menu_home, menu);
        Drawable drawable = menu.findItem(R.id.action_clear).getIcon();

        drawable = DrawableCompat.wrap(drawable);
        DrawableCompat.setTint(drawable, ContextCompat.getColor(this,R.color.textColorPrimary));
        menu.findItem(R.id.action_clear).setIcon(drawable);
        return true;
    }

Question 4

การตั้งค่าColorFilter(tint) บน a MenuItemนั้นง่ายมาก นี่คือตัวอย่าง:

Drawable drawable = menuItem.getIcon();
if (drawable != null) {
    // If we don't mutate the drawable, then all drawable's with this id will have a color
    // filter applied to it.
    drawable.mutate();
    drawable.setColorFilter(color, PorterDuff.Mode.SRC_ATOP);
    drawable.setAlpha(alpha);
}

โค้ดด้านบนมีประโยชน์มากหากคุณต้องการรองรับธีมที่แตกต่างกันและคุณไม่ต้องการมีสำเนาเพิ่มเติมเพียงเพื่อให้ได้สีหรือความโปร่งใส

คลิกที่นี่เพื่อดูคลาสตัวช่วยเพื่อตั้งค่าColorFilterบน drawables ทั้งหมดในเมนูรวมถึงไอคอนโอเวอร์โฟลว์

ในonCreateOptionsMenu(Menu menu)เพียงโทรMenuColorizer.colorMenu(this, menu, color);หลังจากพองเมนูและ voila ของคุณ ไอคอนของคุณถูกย้อมสี

Question 5

app:iconTintแอ็ตทริบิวต์ถูกนำมาใช้SupportMenuInflaterจากไลบรารีการสนับสนุน (อย่างน้อยใน 28.0.0)

ทดสอบสำเร็จด้วย API 15 ขึ้นไป

ไฟล์ทรัพยากรเมนู:

<menu
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <item
        android:id="@+id/menu_settings"
        android:icon="@drawable/ic_settings_white_24dp"
        app:iconTint="?attr/appIconColorEnabled"        <!-- using app name space instead of android -->
        android:menuCategory="system"
        android:orderInCategory="1"
        android:title="@string/menu_settings"
        app:showAsAction="never"
        />

    <item
        android:id="@+id/menu_themes"
        android:icon="@drawable/ic_palette_white_24dp"
        app:iconTint="?attr/appIconColorEnabled"
        android:menuCategory="system"
        android:orderInCategory="2"
        android:title="@string/menu_themes"
        app:showAsAction="never"
        />

    <item
        android:id="@+id/action_help"
        android:icon="@drawable/ic_help_white_24dp"
        app:iconTint="?attr/appIconColorEnabled"
        android:menuCategory="system"
        android:orderInCategory="3"
        android:title="@string/menu_help"
        app:showAsAction="never"
        />

</menu>

(ในกรณีนี้?attr/appIconColorEnabledคือแอตทริบิวต์สีที่กำหนดเองในธีมของแอปและทรัพยากรไอคอนเป็นแบบเวกเตอร์ที่วาดได้)

Question 6

ฉันชอบแนวทางนี้เป็นการส่วนตัวจากลิงค์นี้

สร้างเค้าโครง XML ดังต่อไปนี้:

<?xml version="1.0" encoding="utf-8"?>
<bitmap
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:src="@drawable/ic_action_something"
    android:tint="@color/color_action_icons_tint"/>

และอ้างอิงจากเมนูของคุณ:

<item
    android:id="@+id/option_menu_item_something"
    android:icon="@drawable/ic_action_something_tined"

Question 7

ที่สุดของการแก้ปัญหาในหัวข้อนี้อย่างใดอย่างหนึ่งใช้ API MenuItemใหม่หรือการใช้การสะท้อนหรือใช้การค้นหามุมมองอย่างเข้มข้นที่จะได้รับที่สูงเกินจริง

อย่างไรก็ตามมีวิธีการที่หรูหรากว่าในการทำเช่นนั้น คุณต้องมีแถบเครื่องมือที่กำหนดเองเนื่องจากกรณีการใช้งาน "ใช้โทนสีที่กำหนดเอง" ของคุณไม่สามารถใช้งานได้ดีกับ API รูปแบบ / ธีมสาธารณะ

public class MyToolbar extends Toolbar {
    ... some constructors, extracting mAccentColor from AttrSet, etc

    @Override
    public void inflateMenu(@MenuRes int resId) {
        super.inflateMenu(resId);
        Menu menu = getMenu();
        for (int i = 0; i < menu.size(); i++) {
            MenuItem item = menu.getItem(i);
            Drawable icon = item.getIcon();
            if (icon != null) {
                item.setIcon(applyTint(icon));
            }
        }
    }
    void applyTint(Drawable icon){
        icon.setColorFilter(
           new PorterDuffColorFilter(mAccentColor, PorterDuff.Mode.SRC_IN)
        );
    }

}

ตรวจสอบให้แน่ใจว่าคุณโทรในรหัสกิจกรรม / ชิ้นส่วน:

toolbar.inflateMenu(R.menu.some_menu);
toolbar.setOnMenuItemClickListener(someListener);

ไม่มีการสะท้อนไม่มีการค้นหามุมมองและรหัสไม่มากนักใช่มั้ย?

และตอนนี้คุณสามารถเพิกเฉยต่อสิ่งไร้สาระonCreateOptionsMenu/onOptionsItemSelectedได้

Question 8

นี่คือวิธีแก้ปัญหาที่ฉันใช้ คุณสามารถเรียกมันหลังจาก onPrepareOptionsMenu () หรือสถานที่ที่เทียบเท่า สาเหตุของการกลายพันธุ์ () คือถ้าคุณใช้ไอคอนในตำแหน่งมากกว่าหนึ่งแห่ง หากไม่มีการกลายพันธุ์พวกเขาทั้งหมดจะใช้สีเดียวกัน

public class MenuTintUtils {
    public static void tintAllIcons(Menu menu, final int color) {
        for (int i = 0; i < menu.size(); ++i) {
            final MenuItem item = menu.getItem(i);
            tintMenuItemIcon(color, item);
            tintShareIconIfPresent(color, item);
        }
    }

    private static void tintMenuItemIcon(int color, MenuItem item) {
        final Drawable drawable = item.getIcon();
        if (drawable != null) {
            final Drawable wrapped = DrawableCompat.wrap(drawable);
            drawable.mutate();
            DrawableCompat.setTint(wrapped, color);
            item.setIcon(drawable);
        }
    }

    private static void tintShareIconIfPresent(int color, MenuItem item) {
        if (item.getActionView() != null) {
            final View actionView = item.getActionView();
            final View expandActivitiesButton = actionView.findViewById(R.id.expand_activities_button);
            if (expandActivitiesButton != null) {
                final ImageView image = (ImageView) expandActivitiesButton.findViewById(R.id.image);
                if (image != null) {
                    final Drawable drawable = image.getDrawable();
                    final Drawable wrapped = DrawableCompat.wrap(drawable);
                    drawable.mutate();
                    DrawableCompat.setTint(wrapped, color);
                    image.setImageDrawable(drawable);
                }
            }
        }
    }
}

สิ่งนี้จะไม่ดูแลการล้น แต่คุณสามารถทำได้:

เค้าโครง:

<android.support.v7.widget.Toolbar
    ...
    android:theme="@style/myToolbarTheme" />

รูปแบบ:

<style name="myToolbarTheme">
        <item name="colorControlNormal">#FF0000</item>
</style>

ใช้งานได้กับ appcompat v23.1.0

Question 9

สิ่งนี้ใช้ได้ผลสำหรับฉัน:

override fun onCreateOptionsMenu(menu: Menu?): Boolean {

        val inflater = menuInflater
        inflater.inflate(R.menu.player_menu, menu)

        //tinting menu item:
        val typedArray = theme.obtainStyledAttributes(IntArray(1) { android.R.attr.textColorSecondary })
        val textColor = typedArray.getColor(0, 0)
        typedArray.recycle()

        val item = menu?.findItem(R.id.action_chapters)
        val icon = item?.icon

        icon?.setColorFilter(textColor, PorterDuff.Mode.SRC_IN);
        item?.icon = icon
        return true
    }

หรือคุณสามารถใช้ tint ใน xml ที่วาดได้:

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:tint="?android:textColorSecondary"
    android:viewportWidth="384"
    android:viewportHeight="384">
    <path
        android:fillColor="#FF000000"

        android:pathData="M0,277.333h384v42.667h-384z" />
    <path
        android:fillColor="#FF000000"
        android:pathData="M0,170.667h384v42.667h-384z" />
    <path
        android:fillColor="#FF000000"
        android:pathData="M0,64h384v42.667h-384z" />
</vector>