Question

我有一个问题是否可以使TabLayout中的Tabs看起来像这样：

我有这段代码：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:local="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="@color/main_light_gray">
    <include
        layout="@layout/toolbar_layout_filter_sales" />
    <android.support.design.widget.TabLayout
        android:layout_marginTop="10dp"
        android:layout_marginBottom="10dp"
        android:id="@+id/tabs"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        local:tabIndicatorColor="@color/main_red"
        local:tabIndicatorHeight="0dp"
        local:tabGravity="center"
        local:tabBackground="@drawable/tab_background_selector"
        local:tabMode="fixed"
        local:tabPaddingStart="20dp"
        local:tabPaddingEnd="20dp"
        local:tabTextColor="@color/main_dark_text"
        local:tabSelectedTextColor="@color/white" />
    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="fill_parent"
        local:layout_behavior="@string/appbar_scrolling_view_behavior" />
</LinearLayout>

tab_background_selector：

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

  <item android:drawable="@drawable/tab_rounded_pressed" android:state_selected="true"/>
  <item android:drawable="@drawable/tab_rounded_base"/>

</selector>

tab_rounded_pressed：

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

  <corners
    android:radius="50dp"/>

  <solid
    android:color="#FFE32C0C"/>

  <gradient
    android:angle="45"
    android:endColor="#FFA4000F"
    android:startColor="#FFE32C0C"
    android:type="linear" />

</shape>

tab_rounded_base：

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

  <corners
    android:radius="50dp"/>

  <solid
    android:color="@color/white"/>


</shape>

但它看起来像这样：

当我有圆形背景时，我不知道如何在一侧制作白色背景....我知道我可以在Listener中改变drawable，如TabSelected或TabUnselected，但我如何为此制作drawable？

Answer 1

您已使用local:tabBackground设置了标签项的背景，现在您只需使用TabLayout设置android:background的背景：

在drawable文件夹中创建tablayout_background.xml：

<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="#FFFFFF"/>
    <corners android:radius="50dp"/>
    <padding android:left="0dp" android:top="0dp" android:right="0dp" android:bottom="0dp" />
</shape>

设置tablayout的android:background：

<android.support.design.widget.TabLayout
    android:layout_height="wrap_content"
    android:layout_width="match_parent"
    android:background="@drawable/tablayout_background"
    app:tabIndicatorHeight="0dp"
    ...>

注意：app:tabIndicatorHeight="0dp"将删除下划线。

TabLayout自定义风格圆角的Xamarin Androit Tab

1 个答案: