Question

在我的应用中，我想更改为所选标签的图标。

我有一个选中的图标和未选中的图标。当我选择一个标签时，它将替换为所选图标。

并且如图所示更改tabcolor。与所选标签的图标颜色相同。

我的问题是我该怎么做？请问任何建议或示例代码？

这是我的tablayout代码

public class HomeActivity extends BaseActivity {

    /**
     * Activity class name holder variable
     */
    private static final String CLASS_NAME = HomeActivity.class.getSimpleName();
    /**
     * Variables
     */
    private Toolbar toolbar;
    private TabLayout tabLayout;
    private ViewPager viewPager;

    @Override
    protected int getLayoutResourceId() {
        return R.layout.activity_home;
    }

    @Override
    protected Activity getActivity() {
        return this;
    }

    @Override
    protected void initView() {

        toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);

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

        tabLayout = (TabLayout) findViewById(R.id.tabs);
        tabLayout.setupWithViewPager(viewPager);

        setupTabIcons();
    }

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        initView();
    }


    @Override
    protected void onPause() {
        super.onPause();
        JZVideoPlayer.releaseAllVideos();
    }


    @Override
    public void onBackPressed() {

        if(JZVideoPlayer.backPress()){
            return;
        }
        super.onBackPressed();
    }

    private void setupTabIcons() {
        int[] tabIcons = {
                R.drawable.menu_join,
                R.drawable.menu_rate,
                R.drawable.menu_winners
        };

        tabLayout.getTabAt(0).setIcon(tabIcons[0]);
        tabLayout.getTabAt(1).setIcon(tabIcons[1]);
        tabLayout.getTabAt(2).setIcon(tabIcons[2]);
    }

    private void setupViewPager(ViewPager viewPager) {
        ViewPagerAdapter adapter = new ViewPagerAdapter(getSupportFragmentManager());
        adapter.addFrag(new JoinFragment(),  "join");
        adapter.addFrag(new RateFragment(),  "rate");
        adapter.addFrag(new WinnerFragment(),"winner");
        viewPager.setAdapter(adapter);
    }



    class ViewPagerAdapter extends FragmentPagerAdapter {
        private final List<Fragment> mFragmentList = new ArrayList<>();
        private final List<String> mFragmentTitleList = new ArrayList<>();

        public ViewPagerAdapter(FragmentManager manager) {
            super(manager);
        }

        @Override
        public Fragment getItem(int position) {
            return mFragmentList.get(position);
        }

        @Override
        public int getCount() {
            return mFragmentList.size();
        }

        public void addFrag(Fragment fragment,String title){
            mFragmentList.add(fragment);
            mFragmentTitleList.add(title);
        }

        @Override
        public CharSequence getPageTitle(int position) {
            // return null to display only the icon
            return null;
        }
    }

}

Answer 1

在drawable / mipmap中保留两个图标。

一个用于标签选择图标
和另一个用于标签未选中的图标... （R.drawable.green供选择）， （R.drawable.blackfor unselection）

如果您有3个图标，则需要总计6个

    tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() 
      {
        @Override
        public void onTabSelected(TabLayout.Tab tab) {

            switch (tab.getPosition())
            {

                case 0:
                    tab.setIcon(R.drawable.green);
                    tabLayout.getTabAt(1).setIcon(R.drawable.black);
                    tabLayout.getTabAt(2).setIcon(R.drawable.black);

                    break;
                 case 1:
                    tab.setIcon(R.drawable.green);
                     tabLayout.getTabAt(2).setIcon(R.drawable.black);
                     tabLayout.getTabAt(0).setIcon(R.drawable.black);

                    break;
                 case 2:
                    tab.setIcon(R.drawable.green);
                     tabLayout.getTabAt(0).setIcon(R.drawable.black);
                     tabLayout.getTabAt(1).setIcon(R.drawable.black);
                    break;





            }



        }

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

        }

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

        }
    });

Answer 2

分别执行以下步骤。％100精确溶液

app / src / main / res / values / colors.xml（添加到colors.xml）

<color name="icon_enabled">#F3D65F</color>
<color name="icon_disabled">#FFFFFF</color>

app / src / main / res / color / custom_tab_icon.xml（在res中创建一个名为color的文件夹。在该文件夹中创建一个自定义标签icon.xml。）

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

app / src / main / res / drawable / ic_action_settings.png（创建）

双击action_settings进行添加

<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"
android:viewportWidth="21.6"
android:viewportHeight="21.6"
android:tint="@color/custom_tab_icon">
<group android:translateX="-1.2"
  android:translateY="-1.2">
  <path
      android:fillColor="#FF000000"
 android:pathData="M19.1,12.9a2.8,2.8 0,0 0,0.1 -0.9,2.8 2.8,0 0,0 -0.1,-0.9l2.1,-1.6a0.7,0.7 0,0 0,0.1 -0.6L19.4,5.5a0.7,0.7 0,0 0,-0.6 -0.2l-2.4,1a6.5,6.5 0,0 0,-1.6 -0.9l-0.4,-2.6a0.5,0.5 0,0 0,-0.5 -0.4H10.1a0.5,0.5 0,0 0,-0.5 0.4L9.3,5.4a5.6,5.6 0,0 0,-1.7 0.9l-2.4,-1a0.4,0.4 0,0 0,-0.5 0.2l-2,3.4c-0.1,0.2 0,0.4 0.2,0.6l2,1.6a2.8,2.8 0,0 0,-0.1 0.9,2.8 2.8,0 0,0 0.1,0.9L2.8,14.5a0.7,0.7 0,0 0,-0.1 0.6l1.9,3.4a0.7,0.7 0,0 0,0.6 0.2l2.4,-1a6.5,6.5 0,0 0,1.6 0.9l0.4,2.6a0.5,0.5 0,0 0,0.5 0.4h3.8a0.5,0.5 0,0 0,0.5 -0.4l0.3,-2.6a5.6,5.6 0,0 0,1.7 -0.9l2.4,1a0.4,0.4 0,0 0,0.5 -0.2l2,-3.4c0.1,-0.2 0,-0.4 -0.2,-0.6ZM12,15.6A3.6,3.6 0,1 1,15.6 12,3.6 3.6,0 0,1 12,15.6Z"/>
</group>
</vector>

Answer 3

首先以编程方式或在资源selector_color_tab.xml上创建ColorStateList

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

使用此方法创建一个从资源或drawable着色可绘制的方法

private Drawable tintDrawable(Context context, @DrawableRes int resId, ColorStateList stateList) {
    Drawable drawable = DrawableCompat.wrap(ContextCompat.getDrawable(context, resId)).mutate();
    DrawableCompat.setTintList(drawable, stateList);
    DrawableCompat.setTintMode(drawable, PorterDuff.Mode.SRC_IN);
    return drawable;
}

然后使用此代码

导入ColorStateList

ColorStateList stateList = ContextCompat.getColorStateList（context，resId）;

然后最后使用for循环更改选项卡的图标

    for (int i = 0; i < tabLayout.getTabCount(); i++) {
        TabLayout.Tab tabAt = tabLayout.getTabAt(i);
        if (tabAt != null) {
            tabAt.setIcon(tintDrawable(this, tabIcons[i], stateList));
        }
    }

可选：

如果您想添加标签选择监听器，只需注册

tabLayout.addOnTabSelectedListener（..听者）

或使用

viewPager.addOnPageChangeListener（..听者）

如何更改选定的标签图标？

3 个答案:

分别执行以下步骤。％100精确溶液