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

Question

这是 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" 设置为较低的不透明度，而不是单词后面的背景。

Answer 1

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

Answer 2

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

        }
    });

Answer 3

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

Answer 4

为了将来参考，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）。

Answer 5

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

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

Tablayout: opacity of icons used on selection / deselection

android

android-tablayout