android 设置选项卡布局中未选定选项卡指示符的颜色

agxfikkp  于 2023-02-06  发布在  Android
关注(0)|答案(5)|浏览(383)

我使用的是google提供的tablayout,除了未选中的标签指示器的颜色外,一切都很好。我无法设置未选中的标签指示器的颜色。

android:layout_width="match_parent"
 android:layout_height="match_parent">

 <android.support.design.widget.AppBarLayout
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
     android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

     <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
         android:layout_width="match_parent"
         android:layout_height="?attr/actionBarSize"
         android:background="?attr/colorPrimary"
         app:layout_scrollFlags="scroll|enterAlways"
         app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

     <android.support.design.widget.TabLayout
         android:id="@+id/tabs"
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
         app:tabMode="fixed"
         style="@style/MyCustomTabLayout"

         />
 </android.support.design.widget.AppBarLayout>

 <android.support.v4.view.ViewPager
     android:id="@+id/viewpager"
     android:layout_width="match_parent"
     android:layout_height="match_parent"
     app:layout_behavior="@string/appbar_scrolling_view_behavior" /> </android.support.design.widget.CoordinatorLayout>
dly7yett

dly7yett1#

**1.app:**

    tabBackground="@drawable/tablayout_selector"

**2.tablayout_selector.xml**

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <item>
        <shape android:shape="rectangle">
            <solid android:color="@color/shl_common_default_color" />
        </shape>
    </item>
    <item>
        <inset android:insetBottom="1.5dp">
            <shape android:shape="rectangle">
                <solid android:color="@color/white" />
            </shape>
        </inset>
    </item>
</layer-list>

or

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <item>
        <shape android:shape="rectangle">
            <solid android:color="@color/white" />
        </shape>
    </item>
    <item android:gravity="bottom">
        <shape android:shape="rectangle">
            <solid android:color="@color/shl_common_default_color" />
            <size android:height="1.5dp" />
        </shape>
    </item>
</layer-list>
1aaf6o9v

1aaf6o9v2#

尝试这改变这颜色如你所愿:
在可绘制文件夹中创建此文件

选项卡_指示器_颜色.xml

<?xml version="1.0" encoding="utf-8"?>
    <selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- UNSELECTED TAB STATE -->
    <item android:state_selected="false" android:state_pressed="false">
        <layer-list>
            <!-- Bottom indicator color for the UNSELECTED tab state -->
            <item android:top="-5dp" android:left="-5dp" android:right="-5dp">
                <shape android:shape="rectangle">
                    <stroke android:color="#65acee" android:width="2dp"/>
                </shape>
            </item>
        </layer-list>
    </item>
</selector>

然后在app:tab背景中设置.xml文件,如下所示:

<android.support.design.widget.TabLayout
        android:id="@+id/tabs"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabMode="fixed"
        style="@style/MyCustomTabLayout"
        app:tabBackground="@drawable/tab_indicator_color" />
zzwlnbp8

zzwlnbp83#

ic选项卡指示符默认值.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle" />
    </item>
    <item android:gravity="bottom">
        <shape android:shape="rectangle">
            <size android:height="1dp" />
            <solid android:color="@color/steel_blue" />
        </shape>
    </item>
</layer-list>

ic_选项卡_指标_选定.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle" />
    </item>
    <item android:gravity="bottom">
        <shape android:shape="rectangle">
            <size android:height="3dp" />
            <solid android:color="@color/congress_blue" />
        </shape>
    </item>
</layer-list>

选择器选项卡指示符.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/ic_tab_indicator_selected" android:state_selected="true" />
    <item android:drawable="@drawable/ic_tab_indicator_default" />
</selector>

选项卡布局

<com.google.android.material.tabs.TabLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabIndicator="@android:color/transparent"
        app:tabBackground="@drawable/selector_tab_indicator">
r6hnlfcb

r6hnlfcb4#

对于使用新的com.google.android.material.tabs.TabLayout的人来说,如果你应用本文中作为正确答案给出的解决方案,标签的四个边都会有角
要解决这个问题,请使用以下“黑客”

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- UNSELECTED TAB STATE -->
    <item android:state_selected="false" android:state_pressed="false">
        <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
            <!-- Bottom indicator color for the UNSELECTED tab state -->
            <item  android:top="-10dp" android:left="-1000dp" android:right="-1000dp">
                <shape android:shape="rectangle" >
                    <stroke android:color="#4cffffff" android:width="1dp"/>
                </shape>
            </item>
        </layer-list>
    </item>
</selector>
55ooxyrt

55ooxyrt5#

如果您的TabLayout不需要标题,但需要未选中颜色的指示符。
你可以像

<com.google.android.material.tabs.TabLayout
    android:id="@+id/tab_layout"
    android:layout_width="match_parent"
    android:layout_height="10dp"
    app:tabBackground="@drawable/tab_normal"
    app:tabIndicator="@drawable/tab_indicator"
    app:tabIndicatorColor="@null"
    app:tabIndicatorHeight="10dp" />

这里的解决方法是

  • 同时使用tabBackgroundtabIndicator
  • 指示器高度等于TabLayout高度
    • 选项卡_正常. xml**
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="#aaaaaa" />
    <corners android:radius="5dp" />
</shape>
    • 选项卡_指标. xml**
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="#ff0000" />
    <corners android:radius="5dp" />
</shape>
  • 如果您需要在指示器之间填充,您可以使用带有一些填充的layer-list drawable(而不是使用shape
  • 如果你只需要一个选项卡指示器的颜色,而不需要定义形状可绘制,可以使用
  • app:tabBackground="@color/gray"
  • app:tabIndicatorColor="@color/red"

相关问题