web-dev-qa-db-ja.com

TabLayoutの選択したタブのアイコンの色を変更するにはどうすればよいですか？

TabLayoutでViewPagerを使用していますが、TabLayoutで選択したタブのアイコンの色を最も効率的に変更する方法を疑問に思っています。

これがどのように実装されるかについての完全なリファレンスは、GoogleのYoutubeアプリです。メインページには、濃い灰色の4つのアイコンがあります。特定のタブが選択されると、タブのアイコンは白になります。

サードパーティのライブラリなし、同じ効果を得るにはどうすればよいですか？

1つの可能な解決策はセレクタを使用することですしかし、その場合、アイコンの白バージョンとグレーバージョンの両方を見つけ、タブが選択または選択解除されたときにアイコンを切り替える必要があります。アイコンの色などを強調表示するだけのより効果的な方法があるかどうか疑問に思っています。どのチュートリアルでもこれを見つけることができませんでした。

編集

上記で直接言及したソリューションでは、各タブのアイコンに2つのドロウアブルを使用する必要があります。各タブのアイコンにONE drawableを使用してプログラムで実行できる方法があるかどうか疑問に思っています。

javaandroidmobilematerial-designandroid-tablayout
61
wayway

簡単にできる方法を見つけました。

    viewPager = (ViewPager) findViewById(R.id.viewpager);
    setupViewPager(viewPager);

    tabLayout = (TabLayout) findViewById(R.id.tabs);
    tabLayout.setupWithViewPager(viewPager);
    tabLayout.setOnTabSelectedListener(
            new TabLayout.ViewPagerOnTabSelectedListener(viewPager) {

                @Override
                public void onTabSelected(TabLayout.Tab tab) {
                    super.onTabSelected(tab);
                    int tabIconColor = ContextCompat.getColor(context, R.color.tabSelectedIconColor);
                    tab.getIcon().setColorFilter(tabIconColor, PorterDuff.Mode.SRC_IN);
                }

                @Override
                public void onTabUnselected(TabLayout.Tab tab) {
                    super.onTabUnselected(tab);
                    int tabIconColor = ContextCompat.getColor(context, R.color.tabUnselectedIconColor);
                    tab.getIcon().setColorFilter(tabIconColor, PorterDuff.Mode.SRC_IN);
                }

                @Override
                public void onTabReselected(TabLayout.Tab tab) {
                    super.onTabReselected(tab);
                }
            }
    );
77
Cristian Hoyos
private void setupTabIcons() {
    tabLayout.getTabAt(0).setIcon(tabIcons[0]);
    tabLayout.getTabAt(1).setIcon(tabIcons[1]);
    tabLayout.getTabAt(2).setIcon(tabIcons[2]);
    tabLayout.getTabAt(3).setIcon(tabIcons[3]);

    tabLayout.getTabAt(0).getIcon().setColorFilter(Color.GREEN, PorterDuff.Mode.SRC_IN);
    tabLayout.getTabAt(1).getIcon().setColorFilter(Color.parseColor("#a8a8a8"), PorterDuff.Mode.SRC_IN);
    tabLayout.getTabAt(2).getIcon().setColorFilter(Color.parseColor("#a8a8a8"), PorterDuff.Mode.SRC_IN);
    tabLayout.getTabAt(3).getIcon().setColorFilter(Color.parseColor("#a8a8a8"), PorterDuff.Mode.SRC_IN);


    tabLayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
        @Override
        public void onTabSelected(TabLayout.Tab tab) {
            tab.getIcon().setColorFilter(Color.GREEN, PorterDuff.Mode.SRC_IN);

        }

        @Override
        public void onTabUnselected(TabLayout.Tab tab) {
            tab.getIcon().setColorFilter(Color.parseColor("#a8a8a8"), PorterDuff.Mode.SRC_IN);
        }

        @Override
        public void onTabReselected(TabLayout.Tab tab) {

        }
    });
}
38
Nurcahyadin

ColorStateListを使用できます。

最初に、次のようなXMLファイル（/color/tab_icon.xmlなど）を作成し、状態ごとに異なる色合いを定義します。

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:Android="http://schemas.Android.com/apk/res/Android">
    <item Android:color="@color/icon_light"
        Android:state_selected="true" />

    <item Android:color="@color/icon_light_inactive" />
</selector>

次に、これをコードに追加します。

ColorStateList colors;
if (Build.VERSION.SDK_INT >= 23) {
    colors = getResources().getColorStateList(R.color.tab_icon, getTheme());
}
else {
    colors = getResources().getColorStateList(R.color.tab_icon);
}

for (int i = 0; i < tabLayout.getTabCount(); i++) {
    TabLayout.Tab tab = tabLayout.getTabAt(i);
    Drawable icon = tab.getIcon();

     if (icon != null) {
        icon = DrawableCompat.wrap(icon);
        DrawableCompat.setTintList(icon, colors);
    }
}

まず、XMLからColorStateListを取得します（テーマのないメソッドは非推奨ですが、マシュマロ以前のデバイスには必要です）。次に、各タブのアイコンにTintListをColorStateListに設定します。 DrawableCompat（サポートライブラリ）を使用して、古いバージョンもサポートします。

それでおしまい！

33
Felix Edelmann

これは非常に簡単に、すべてXMLで実行できます。

以下のように、xmlのTabLayoutにapp:tabIconTint="@color/your_color_selector"を1行追加します。

 <Android.support.design.widget.TabLayout
     Android:id="@+id/tab_layout"
     Android:layout_width="match_parent"
     Android:layout_height="wrap_content"
     app:tabIconTint="@color/your_color_selector"
     app:tabIndicatorColor="@color/selected_color"/>

次に、res/colorディレクトリにカラーセレクタファイル（上記の「your_color_selector.xml」という名前）を作成します。

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:Android="http://schemas.Android.com/apk/res/Android">
    <item Android:color="@color/selected_color" Android:state_selected="true"/>
    <item Android:color="@color/unselected_color"/>
</selector>

これは、colors.xmlファイルに「selected_color」と「unselected_color」の2色があることを前提としています。

13
Vin Norman

そのためには、各タブのセレクタークラスを使用してタブアイコンをカスタマイズする必要があります。

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:Android="http://schemas.Android.com/apk/res/Android">
<item Android:drawable="@drawable/advisory_selected" Android:state_selected="true" />
<item Android:drawable="@drawable/advisory_normal" Android:state_selected="false" />
13
Anshul Tyagi

次のコードを確認してください。アイコンをカスタマイズします。1つは色で、もう1つは色なしです。

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:Android="http://schemas.Android.com/apk/res/Android">
<item Android:drawable="@drawable/mybookings_select" Android:state_selected="true"/><!-- tab is selected(colored icon)-->
<item Android:drawable="@drawable/mybookings" /><!-- tab is not selected(normal no color icon)-->
3
Prathap Badavath

アイコンにアイコンフォント（素晴らしいフォントなど）を使用しないのはなぜですか？次に、タブテキストのフォントを目的のフォントアイコン.ttfに変更し、選択したテキストの色をタブアイコンに変更します。

私自身、この方法を使用しましたが、本当にすてきできれいです:)

まず、目的のアイコンフォントからタイトルを設定します。

string.xml内：

    <string name="ic_calculator">&#xf1ec;</string>
    <string name="ic_bank">&#xf19c;</string>

次に、MainActivity.Javaで：

    private void setupViewPager(ViewPager viewPager) {
    ViewPagerAdapter adapter = new ViewPagerAdapter(getSupportFragmentManager());
    adapter.addFragment(new FragmentBank(), getString(R.string.ic_bank));
    adapter.addFragment(new FragmentCalculate(), getString(R.string.ic_calculator));
    viewPager.setAdapter(adapter);
    }

次に、Tabタイトルのフォントをfont-awesomeに変更する必要があります。

    Typeface typeFaceFont = Typeface.createFromAsset(getAssets(), "fontawesome-webfont.ttf");

    TabLayout tabLayout = (TabLayout) findViewById(R.id.tabs);
    tabLayout.setupWithViewPager(viewPager);
    ViewGroup vg = (ViewGroup) tabLayout.getChildAt(0);
    int tabsCount = vg.getChildCount();
    for (int j = 0; j < tabsCount; j++) {
        ViewGroup vgTab = (ViewGroup) vg.getChildAt(j);
        int tabChildsCount = vgTab.getChildCount();
        for (int i = 0; i < tabChildsCount; i++) {
            View tabViewChild = vgTab.getChildAt(i);
            if (tabViewChild instanceof TextView) {
                ((TextView) tabViewChild).setTypeface(typeFaceFont);
            }
        }
    }

最後に、関連する.xmlファイルで、tabTextColorおよびtabSelectedTextColorの色を設定します。

<Android.support.design.widget.TabLayout
        Android:id="@+id/tabs"
        Android:layout_width="match_parent"
        Android:layout_height="wrap_content"
        Android:scrollbars="horizontal"
        Android:background="@color/colorPrimaryDark"
        app:tabSelectedTextColor="@color/colorAccent"
        app:tabTextColor="@color/textColorPrimary"
        app:tabIndicatorColor="@color/colorAccent"
        app:tabMode="fixed"
        app:tabGravity="fill"/>
</Android.support.design.widget.AppBarLayout>

そして、colors.xmlで：

<resources>
    <color name="colorPrimary">#3F51B5</color>
    <color name="colorPrimaryDark">#303F9F</color>
    <color name="colorAccent">#FF4081</color>
    <color name="colorHighlight">#FFFFFF</color>
    <color name="textColorPrimary">#E1E3F3</color>
</resources>
3
par4301

色を個別に設定する方法を示す2番目の回答を参照すると、多くの人は次のアイコンに切り替えるときに最初のアイコンの色を削除する方法について疑問に思っているかもしれません。あなたができることはこのように行くことです：

private void setupTabIcons() {
tabLayout.getTabAt(0).setIcon(tabIcons[0]);
tabLayout.getTabAt(1).setIcon(tabIcons[1]);
tabLayout.getTabAt(2).setIcon(tabIcons[2]);
tabLayout.getTabAt(3).setIcon(tabIcons[3]);

tabLayout.getTabAt(0).getIcon().setColorFilter(Color.GREEN, PorterDuff.Mode.SRC_IN);
tabLayout.getTabAt(1).getIcon().setColorFilter(Color.WHITE, PorterDuff.Mode.SRC_IN);
tabLayout.getTabAt(2).getIcon().setColorFilter(Color.WHITE, PorterDuff.Mode.SRC_IN);
tabLayout.getTabAt(3).getIcon().setColorFilter(Color.WHITE, PorterDuff.Mode.SRC_IN);


tabLayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
    @Override
    public void onTabSelected(TabLayout.Tab tab) {
        tab.getIcon().setColorFilter(Color.GREEN,PorterDuff.Mode.SRC_IN);

    }

    @Override
    public void onTabUnselected(TabLayout.Tab tab) {
        //for removing the color of first icon when switched to next tab
        tablayout.getTabAt(0).getIcon().clearColorFilter();
        //for other tabs
        tab.getIcon().clearColorFilter();

    }

    @Override
    public void onTabReselected(TabLayout.Tab tab) {

    }
});}

私は2番目の答えにコメントしたでしょうが、そのための十分な評判を持っていませんでした！ごめんなさい。ただし、時間と頭痛の種を節約できることに注意してください。ハッピーラーニング

1
Alok

アイコンを「強調表示」する方法の1つは、画像ビューにアクセスし、カラーフィルターを設定することです。 setColorFilter（int color）ImageViewメソッドを使用して、白を適用してください。

1
Yaw Asare

タブレイアウトの次のxml属性を使用して、選択したタブのテキストの色を変更できます。

app:tabSelectedTextColor="your desired color"

選択したタブのアイコンの色をカスタマイズするには、セレクターを使用する必要があります描画可能なフォルダーの下にxmlファイルを作成します。

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:Android="http://schemas.Android.com/apk/res/Android">
   <item Android:color="selected_item_color" Android:state_activated="true" />
   <item Android:color="unselected_item_color" />
</selector>

以下のように、このセレクターをタブレイアウトxml属性に追加します。

app:tabIconTint="@drawable/name_of_file"
0
Shrinivasan

tabLayout.setOnTabSelectedListener(new TabLayout.ViewPagerOnTabSelectedListener(viewPager) {...}は非推奨になりました。むしろ使用

tabLayout.addOnTabSelectedListener(new TabLayout.BaseOnTabSelectedListener() {
        @Override
        public void onTabSelected(TabLayout.Tab tab) {
            int tabIconColor = ContextCompat.getColor(context, R.color.tabSelectedIconColor);
            tab.getIcon().setColorFilter(tabIconColor, PorterDuff.Mode.SRC_IN);
        }

        @Override
        public void onTabUnselected(TabLayout.Tab tab) {
            int tabIconColor = ContextCompat.getColor(context, R.color.tabUnselectedIconColor);
            tab.getIcon().setColorFilter(tabIconColor, PorterDuff.Mode.SRC_IN);
        }

        @Override
        public void onTabReselected(TabLayout.Tab tab) {

        }
    });
0
Ememobong AkpanEkpo

次のコードを確認してください。

tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
    @Override
    public void onTabSelected(TabLayout.Tab tab) {
        if(tab.getPosition() == 0){
            tabLayout.getTabAt(0).setIcon(tabIcons1[0]);
        }
        if(tab.getPosition() == 1){
            tabLayout.getTabAt(1).setIcon(tabIcons1[1]);
        }
        if(tab.getPosition() == 2){
            tabLayout.getTabAt(2).setIcon(tabIcons1[2]);
        }
    }
    @Override
    public void onTabUnselected(TabLayout.Tab tab) {
        tabLayout.getTabAt(0).setIcon(tabIcons[0]);
        tabLayout.getTabAt(1).setIcon(tabIcons[1]);
        tabLayout.getTabAt(2).setIcon(tabIcons[2]);
    }
    @Override
    public void onTabReselected(TabLayout.Tab tab) {
    }
});
0
Karunya Nepolian