Android TabLayout怎么画两条下划线

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

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

希望对您有所帮助！ :)

Answer 2

创建具有底部黑线的背景可绘制对象。即 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>

然后将此可绘制对象应用于 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 它会适合你:)

Android TabLayout怎么画两条下划线

Android TabLayout how to make two underlines

android

android-layout

android-tablayout