Tablayout:选择/取消选择时使用的图标的不透明度
Tablayout: opacity of icons used on selection / deselection
这是 whatsapp 应用程序。请注意,当您 select 一个选项卡时,单词 'CONTACTS' 是白色的,换句话说,CALLS 和 CHATS 的 alpha 可能为 50%:
他们是怎么做到的?
我想做类似的事情,但用图标代替文字,但原理应该是一样的。我用我的 TabLayout 完成了以下操作:
TabLayout tabLayout = (TabLayout) findViewById(R.id.sliding_tabs);
tabLayout.setTabGravity(tabLayout.GRAVITY_FILL);
tabLayout.setupWithViewPager(viewPager);
tabLayout.getTabAt(0).setIcon(R.drawable.icon1);
tabLayout.getTabAt(1).setIcon(R.drawable.icon2);
tabLayout.getTabAt(2).setIcon(R.drawable.icon3);
这是我的 xml tabLayout:
<android.support.design.widget.TabLayout
android:id="@+id/sliding_tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#cccccc"
app:tabPaddingStart="-1dp"
app:tabPaddingEnd="-1dp" />
我也读过这个帖子:但这不是我想要的。
线程说当您 select 或取消 select 时它会改变整个选项卡的颜色。这意味着您会将图标后面的整个背景更改为不同的颜色,而我只是希望图标具有较低的不透明度,而不是背景和图标具有较低的不透明度。
Whatsapp 没有这样做 - 你只能看到单词 "CALLS" 设置为较低的不透明度,而不是单词后面的背景。
在你的
tabLayout.getTabAt(0).getText().setAlpha(88);
类似于 Avinash 的回答,您必须对图标执行以下操作:
//on first open of app, the icons will be set to alpha of 50% for all other icons besides the current selected icon
tabLayout.getTabAt(0).getIcon().setAlpha(128);
tabLayout.getTabAt(2).getIcon().setAlpha(128);
viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
@Override
public void onPageSelected(int position) {
switch (position) {
case 0:
tabLayout.getTabAt(0).getIcon().setAlpha(255);
tabLayout.getTabAt(1).getIcon().setAlpha(128);
tabLayout.getTabAt(2).getIcon().setAlpha(128);
break;
case 1:
tabLayout.getTabAt(0).getIcon().setAlpha(128);
tabLayout.getTabAt(1).getIcon().setAlpha(255);
tabLayout.getTabAt(2).getIcon().setAlpha(128);
break;
case 2:
tabLayout.getTabAt(0).getIcon().setAlpha(128);
tabLayout.getTabAt(1).getIcon().setAlpha(128);
tabLayout.getTabAt(2).getIcon().setAlpha(255);
break;
}
}
@Override
public void onPageScrollStateChanged(int state) {
}
});
在 style.xml 中定义以下内容:
<style name="TabLayout" parent="Widget.Design.TabLayout">
<item name="tabIndicatorColor">@color/white</item>
<item name="tabSelectedTextColor">@color/white</item>
<item name="tabTextColor">@color/whiteAlpha</item>
</style>
或以编程方式:
TablLayout.setTabTextColors(int normalColor, int selectedColor)
为了将来参考,Avinash 对文本的回答实际上是不正确的。
tabLayout.getTabAt(0).getText()
不是 return 选项卡的 TextView,它只是 return 将其文本作为字符串。所以,调用 setAlpha(float)
只会给你一个编译错误。
正确的做法有点混乱。我们这样获取Tab的TextView:
LinearLayout tabLayout = (LinearLayout)((ViewGroup)
myTabLayout.getChildAt(0)).getChildAt(positionOfMyTab);
TextView tabTextView = (TextView) tabLayout.getChildAt(1);
tabTextView.setAlpha(myAlphaValue);
它很乱,但它有效。我不知道为什么 Google 没有为 TabLayout 提供 getTextView() 或类似的方法。
此外,setAlpha(float)
中提供的值现在是介于 0.0f
和 1.0f
之间的浮点数。使用 1.0f
以获得完全不透明度(类似于之前的 255
)。
这是 Simon 回答的更好版本
private fun setCurrentTab(position: Int) {
val values = arrayListOf(0, 1, 2)
tabs_vp_pocha.getTabAt(position)?.icon?.alpha = 225
values.remove(position)
tabs_vp_pocha.getTabAt(values[0])?.icon?.alpha = 128
tabs_vp_pocha.getTabAt(values[1])?.icon?.alpha = 128
}
并从您的 ChangePageListener
调用上述方法
vp_pocha.addOnPageChangeListener(object : ViewPager.OnPageChangeListener{
override fun onPageScrollStateChanged(state: Int) {
}
override fun onPageScrolled(position: Int, positionOffset: Float, positionOffsetPixels: Int) {
}
override fun onPageSelected(position: Int) {
setCurrentTab(position)
}
})
这是 whatsapp 应用程序。请注意,当您 select 一个选项卡时,单词 'CONTACTS' 是白色的,换句话说,CALLS 和 CHATS 的 alpha 可能为 50%:
他们是怎么做到的?
我想做类似的事情,但用图标代替文字,但原理应该是一样的。我用我的 TabLayout 完成了以下操作:
TabLayout tabLayout = (TabLayout) findViewById(R.id.sliding_tabs);
tabLayout.setTabGravity(tabLayout.GRAVITY_FILL);
tabLayout.setupWithViewPager(viewPager);
tabLayout.getTabAt(0).setIcon(R.drawable.icon1);
tabLayout.getTabAt(1).setIcon(R.drawable.icon2);
tabLayout.getTabAt(2).setIcon(R.drawable.icon3);
这是我的 xml tabLayout:
<android.support.design.widget.TabLayout
android:id="@+id/sliding_tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#cccccc"
app:tabPaddingStart="-1dp"
app:tabPaddingEnd="-1dp" />
我也读过这个帖子:
线程说当您 select 或取消 select 时它会改变整个选项卡的颜色。这意味着您会将图标后面的整个背景更改为不同的颜色,而我只是希望图标具有较低的不透明度,而不是背景和图标具有较低的不透明度。
Whatsapp 没有这样做 - 你只能看到单词 "CALLS" 设置为较低的不透明度,而不是单词后面的背景。
在你的
tabLayout.getTabAt(0).getText().setAlpha(88);
类似于 Avinash 的回答,您必须对图标执行以下操作:
//on first open of app, the icons will be set to alpha of 50% for all other icons besides the current selected icon
tabLayout.getTabAt(0).getIcon().setAlpha(128);
tabLayout.getTabAt(2).getIcon().setAlpha(128);
viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
@Override
public void onPageSelected(int position) {
switch (position) {
case 0:
tabLayout.getTabAt(0).getIcon().setAlpha(255);
tabLayout.getTabAt(1).getIcon().setAlpha(128);
tabLayout.getTabAt(2).getIcon().setAlpha(128);
break;
case 1:
tabLayout.getTabAt(0).getIcon().setAlpha(128);
tabLayout.getTabAt(1).getIcon().setAlpha(255);
tabLayout.getTabAt(2).getIcon().setAlpha(128);
break;
case 2:
tabLayout.getTabAt(0).getIcon().setAlpha(128);
tabLayout.getTabAt(1).getIcon().setAlpha(128);
tabLayout.getTabAt(2).getIcon().setAlpha(255);
break;
}
}
@Override
public void onPageScrollStateChanged(int state) {
}
});
在 style.xml 中定义以下内容:
<style name="TabLayout" parent="Widget.Design.TabLayout">
<item name="tabIndicatorColor">@color/white</item>
<item name="tabSelectedTextColor">@color/white</item>
<item name="tabTextColor">@color/whiteAlpha</item>
</style>
或以编程方式:
TablLayout.setTabTextColors(int normalColor, int selectedColor)
为了将来参考,Avinash 对文本的回答实际上是不正确的。
tabLayout.getTabAt(0).getText()
不是 return 选项卡的 TextView,它只是 return 将其文本作为字符串。所以,调用 setAlpha(float)
只会给你一个编译错误。
正确的做法有点混乱。我们这样获取Tab的TextView:
LinearLayout tabLayout = (LinearLayout)((ViewGroup)
myTabLayout.getChildAt(0)).getChildAt(positionOfMyTab);
TextView tabTextView = (TextView) tabLayout.getChildAt(1);
tabTextView.setAlpha(myAlphaValue);
它很乱,但它有效。我不知道为什么 Google 没有为 TabLayout 提供 getTextView() 或类似的方法。
此外,setAlpha(float)
中提供的值现在是介于 0.0f
和 1.0f
之间的浮点数。使用 1.0f
以获得完全不透明度(类似于之前的 255
)。
这是 Simon 回答的更好版本
private fun setCurrentTab(position: Int) {
val values = arrayListOf(0, 1, 2)
tabs_vp_pocha.getTabAt(position)?.icon?.alpha = 225
values.remove(position)
tabs_vp_pocha.getTabAt(values[0])?.icon?.alpha = 128
tabs_vp_pocha.getTabAt(values[1])?.icon?.alpha = 128
}
并从您的 ChangePageListener
vp_pocha.addOnPageChangeListener(object : ViewPager.OnPageChangeListener{
override fun onPageScrollStateChanged(state: Int) {
}
override fun onPageScrolled(position: Int, positionOffset: Float, positionOffsetPixels: Int) {
}
override fun onPageSelected(position: Int) {
setCurrentTab(position)
}
})