Android,拖动时TabLayout图标颜色不变
Android, TabLayout icon color doesn't change when dragging
所以,我有这样的代码:
tabLayout.setOnTabSelectedListener(
new TabLayout.ViewPagerOnTabSelectedListener(tabViewPager) {
@Override
public void onTabSelected(TabLayout.Tab tab) {
super.onTabSelected(tab);
//set selected icon color
Drawable icon = tab.getIcon();
icon = DrawableCompat.wrap(icon);
DrawableCompat.setTint(icon, ContextCompat.getColor(MainActivity.this,
R.color.colorAccent));
tab.setIcon(icon);
}
@Override
public void onTabUnselected(TabLayout.Tab tab) {
super.onTabUnselected(tab);
//set unselected icon color
Drawable icon = tab.getIcon();
icon = DrawableCompat.wrap(icon);
DrawableCompat.setTint(icon, ContextCompat.getColor(MainActivity.this,
R.color.white));
tab.setIcon(icon);
}
@Override
public void onTabReselected(TabLayout.Tab tab) {
super.onTabReselected(tab);
}
});
当我点击TabLayout图标换页时,一切正常,但是当我拖动viewPager时,图标的颜色没有改变,看起来像这样:
不应该这样做。 TabLayout
can choose the icon based on state_selected
from StateListDrawable
有两种创建方式StateListDrawable
:
1. API 21+唯一解
像这样创建标签:
mTabLayout = (TabLayout) findViewById(R.id.tab_layout);
for (int i = 0; i < 4; ++i) {
TabLayout.Tab tab = mTabLayout.newTab();
tab.setIcon(R.drawable.icon);
mTabLayout.addTab(tab, i);
}
其中 R.drawable.icon
是可绘制状态:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/drawable_unselected" android:state_selected="false"/>
<item android:drawable="@drawable/drawable_selected" android:state_selected="true"/>
</selector>
R.drawable.drawable_unselected
是你的形象,R.drawable.drawable_selected
看起来像这样:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<bitmap
android:src="@drawable/drawable_unselected"
android:tint="@color/answer_color"/>
</item>
</layer-list>
2。 API 4+ 兼容解决方案
不幸的是,android:tint
inside bitmap
drawable xml 中的标记已在 API 21 中引入。在较低的 API 上,编程解决方案是需要。
这里修改之前的代码:
mTabLayout = (TabLayout) findViewById(R.id.tab_layout);
for (int i = 0; i < 4; ++i) {
TabLayout.Tab tab = mTabLayout.newTab();
StateListDrawable stateDrawable = new StateListDrawable();
Drawable unSelectedDrawable = ContextCompat.getDrawable(this, R.drawable.drawable_unselected);
Drawable selectedDrawable = createdSelectedDrawable(this, R.drawable.drawable_unselected);
stateDrawable.addState(new int[]{-android.R.attr.state_selected}, unSelectedDrawable);
stateDrawable.addState(new int[]{android.R.attr.state_selected}, selectedDrawable);
tab.setIcon(stateDrawable);
mTabLayout.addTab(tab, i);
}
创建state_selected
的函数:
private Drawable createdSelectedDrawable(Context context, int iconResource) {
Bitmap one = BitmapFactory.decodeResource(getResources(), iconResource);
Bitmap oneCopy = Bitmap.createBitmap(one.getWidth(), one.getHeight(), Bitmap.Config.ARGB_8888);
Canvas c = new Canvas(oneCopy);
Paint p = new Paint();
p.setColorFilter(new PorterDuffColorFilter(ContextCompat.getColor(context, android.R.color.holo_red_dark), PorterDuff.Mode.SRC_ATOP));
c.drawBitmap(one, 0, 0, p);
return new BitmapDrawable(getResources(), oneCopy);
}
所以,我有这样的代码:
tabLayout.setOnTabSelectedListener(
new TabLayout.ViewPagerOnTabSelectedListener(tabViewPager) {
@Override
public void onTabSelected(TabLayout.Tab tab) {
super.onTabSelected(tab);
//set selected icon color
Drawable icon = tab.getIcon();
icon = DrawableCompat.wrap(icon);
DrawableCompat.setTint(icon, ContextCompat.getColor(MainActivity.this,
R.color.colorAccent));
tab.setIcon(icon);
}
@Override
public void onTabUnselected(TabLayout.Tab tab) {
super.onTabUnselected(tab);
//set unselected icon color
Drawable icon = tab.getIcon();
icon = DrawableCompat.wrap(icon);
DrawableCompat.setTint(icon, ContextCompat.getColor(MainActivity.this,
R.color.white));
tab.setIcon(icon);
}
@Override
public void onTabReselected(TabLayout.Tab tab) {
super.onTabReselected(tab);
}
});
当我点击TabLayout图标换页时,一切正常,但是当我拖动viewPager时,图标的颜色没有改变,看起来像这样:
不应该这样做。 TabLayout
can choose the icon based on state_selected
from StateListDrawable
有两种创建方式StateListDrawable
:
1. API 21+唯一解
像这样创建标签:
mTabLayout = (TabLayout) findViewById(R.id.tab_layout);
for (int i = 0; i < 4; ++i) {
TabLayout.Tab tab = mTabLayout.newTab();
tab.setIcon(R.drawable.icon);
mTabLayout.addTab(tab, i);
}
其中 R.drawable.icon
是可绘制状态:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/drawable_unselected" android:state_selected="false"/>
<item android:drawable="@drawable/drawable_selected" android:state_selected="true"/>
</selector>
R.drawable.drawable_unselected
是你的形象,R.drawable.drawable_selected
看起来像这样:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<bitmap
android:src="@drawable/drawable_unselected"
android:tint="@color/answer_color"/>
</item>
</layer-list>
2。 API 4+ 兼容解决方案
不幸的是,android:tint
inside bitmap
drawable xml 中的标记已在 API 21 中引入。在较低的 API 上,编程解决方案是需要。
这里修改之前的代码:
mTabLayout = (TabLayout) findViewById(R.id.tab_layout);
for (int i = 0; i < 4; ++i) {
TabLayout.Tab tab = mTabLayout.newTab();
StateListDrawable stateDrawable = new StateListDrawable();
Drawable unSelectedDrawable = ContextCompat.getDrawable(this, R.drawable.drawable_unselected);
Drawable selectedDrawable = createdSelectedDrawable(this, R.drawable.drawable_unselected);
stateDrawable.addState(new int[]{-android.R.attr.state_selected}, unSelectedDrawable);
stateDrawable.addState(new int[]{android.R.attr.state_selected}, selectedDrawable);
tab.setIcon(stateDrawable);
mTabLayout.addTab(tab, i);
}
创建state_selected
的函数:
private Drawable createdSelectedDrawable(Context context, int iconResource) {
Bitmap one = BitmapFactory.decodeResource(getResources(), iconResource);
Bitmap oneCopy = Bitmap.createBitmap(one.getWidth(), one.getHeight(), Bitmap.Config.ARGB_8888);
Canvas c = new Canvas(oneCopy);
Paint p = new Paint();
p.setColorFilter(new PorterDuffColorFilter(ContextCompat.getColor(context, android.R.color.holo_red_dark), PorterDuff.Mode.SRC_ATOP));
c.drawBitmap(one, 0, 0, p);
return new BitmapDrawable(getResources(), oneCopy);
}