Question

这是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没有这样做 - 你只能看到“CALLS”这个词被设置为较低的不透明度，而不是单词背后的背景。

Answer 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) {

        }
    });

Answer 2

在你的身上做到这一点 tabLayout.getTabAt(0).getText().setAlpha(88);

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()不返回Tab的TextView，它只是将其文本作为String返回。因此，调用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

这是西蒙答案的更好版本

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：选择/取消选择时使用的图标的不透明度

5 个答案: