Question

我尝试创建TabLayout，看起来像this。

我想在like this下再做一次。

这是我自己的黄线，我想制作黑色的一条，当我改变标签黄线改变自己的位置。也许我需要做一些背景线，但我不明白如何

XML：

<android.support.design.widget.TabLayout
    android:id="@+id/tabs"
    style="@style/AppTabLayout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:visibility="gone"
    app:tabGravity="fill"
    app:tabMaxWidth="0dp"
    app:tabMode="fixed" />

<style name="AppTabLayout" parent="Widget.Design.TabLayout">
    <item name="tabIndicatorColor">@color/visit_tabs_indicator</item>
    <item name="tabIndicatorHeight">4dp</item>
    <item name="tabPaddingStart">6dp</item>
    <item name="tabPaddingEnd">6dp</item>
    <item name="tabBackground">@android:color/white</item>
    <item name="tabTextAppearance">@style/AppTabTextAppearance</item>
    <item name="tabSelectedTextColor">@color/visit_tabs_text</item>
</style>

Answer 1

创建具有底部黑线的背景可绘制。即tab_ract_border.xml

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle" >
            <solid android:color="#ffffff" />
        </shape>
    </item>

    <item android:top="-2dp" android:right="-2dp" android:left="-2dp">
        <shape>
            <solid android:color="@android:color/transparent" />
            <stroke
                android:width="2dp"
                android:color="#000000" />
        </shape>
    </item>
</layer-list>

然后将此drawable应用于Tablayout的背景即app:tabBackground="@drawable/tab_ract_border"

<android.support.design.widget.TabLayout
    android:id="@+id/content_main_tab_bar"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="#ffffff"
    app:tabIndicatorColor="#F3CD84"
    app:tabBackground="@drawable/tab_ract_border"
    app:tabMode="scrollable"
    app:tabSelectedTextColor="@color/colorAccent"
    app:tabTextAppearance="@android:style/TextAppearance.Widget.TabWidget"
    app:tabTextColor="#000000" />

njoe它适合你：）

Answer 2

在你style.xml代码中：

<style name="AppTabLayout" parent="Widget.Design.TabLayout">
    <item name="tabIndicatorColor">@color/visit_tabs_indicator</item>
    <item name="tabIndicatorHeight">4dp</item>
    <item name="tabPaddingStart">6dp</item>
    <item name="tabPaddingEnd">6dp</item>
    <item name="tabBackground">@drawable/myTabBackground</item>
    <item name="tabTextAppearance">@style/AppTabTextAppearance</item>
    <item name="tabSelectedTextColor">@color/visit_tabs_text</item>
</style>

然后在Drawable文件夹下创建新的xml资源文件：myTabBackground.xml

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:drawable="@android:color/white"
        android:state_selected="true"/>
    <item android:drawable="@android:color/black"/>
</selector>

希望有所帮助！：）

Android TabLayout如何制作两个下划线

2 个答案: