Tablayout：选择/取消选择时使用的图标的不透明度答案

【问题标题】：Tablayout: opacity of icons used on selection / deselectionTablayout：选择/取消选择时使用的图标的不透明度
【发布时间】：2016-04-24 00:10:40
【问题描述】：

这是whatsapp 应用程序。请注意，当您选择一个选项卡时，“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);

这是我的 tabLayout 的 xml：

<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" />

我也读过这个帖子：How do I change a tab background color when using TabLayout?，但这并不是我想要的。

线程说当你选择或取消选择它时它会改变整个标签的颜色。这意味着您会将图标后面的整个背景更改为不同的颜色，而我只希望图标具有较低的不透明度，而不是背景和图标具有较低的不透明度。

Whatsapp 没有这样做 - 您只能看到“呼叫”这个词被设置为较低的不透明度，而不是这个词背后的背景。

【问题讨论】：

“他们是怎么做到的？” -- a ColorStateList 的文字颜色是我的猜测。 “我只是希望图标具有较低的不透明度”——StateListDrawable 将是图像的等效方法。
我尝试使用 StateListDrawable 但结果太复杂了。我改用了 Avinash 的提示，它成功了。
当然，Whatsapp 使用的是文本，而不是图标，所以他们可以使用setTabTextColors()

标签： android android-tablayout

【解决方案1】：

类似于 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) {

        }
    });

【讨论】：

如何通过自定义的图标和文本布局来实现这一点？
@SahilShokeen 如果您正在使用，那么我有一个文本和图标的解决方案。

【解决方案2】：

在您的 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)

【讨论】：

【解决方案3】：

为了将来参考，Avinash 对文本的回答实际上是不正确的。 tabLayout.getTabAt(0).getText() 不返回 Tab 的 TextView，它只是将其文本作为字符串返回。所以，调用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）。

【讨论】：

我实际上找到了比这更好的方法：只需根据需要设置 TabLayout_tabTextColor 和 TabLayout_tabSelectedTextColor 属性。请记住，android 中的颜色可以具有指定的 alpha。因此，例如，tabTextColor（所有未选定选项卡的选项卡颜色）可以是“#80FFFFFF”，50% 白色，tabSelectedTextColor 可以是 100% 白色，“#FFFFFF”

【解决方案4】：

在你的 tabLayout.getTabAt(0).getText().setAlpha(88);

【讨论】：

谢谢 - 您的回答让我找到了为图标设置 alpha 的最终答案。 +1

【解决方案5】：

这是西蒙答案的更好版本

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)
    }
})

【讨论】：