TabLayout 中的 Xamarin Android Tab 自定义样式圆角

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 中更改可绘制对象，例如 TabSelected 或 TabUnselected 但我如何为此制作可绘制对象？

Answer 1

您已经使用 local:tabBackground 设置了选项卡项的背景，您现在需要做的只是使用 android:background:

设置 TabLayout 的背景

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

设置 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 Android Tab 自定义样式圆角

Xamarin Androit Tab in TabLayout custom style round corners

android

xamarin.android

android-tabs

xamarin

android-tablayout