自定義 TabLayout 指示器。 制作標簽指示器圓角？

Question

我只想制作選項卡指示器圓角而不是整個選項卡。 我曾嘗試設置自定義視圖，但它沒有幫助我。 任何幫助，將不勝感激。 謝謝

Answer 1

在支持庫 28 中，您可以使用app:tabIndicator來設置您的自定義可繪制形狀。

因此，您可以執行以下操作：

創建帶有圓角的自定義形狀指示器，除此之外，您還可以設置形狀左側、右側和底部的邊距，以便更正確地呈現圓角（因此指示器不會接觸屏幕或視圖的邊緣）

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:end="2dp"
        android:start="2dp"
        android:bottom="2dp">
        <shape android:shape="rectangle">
            <corners android:radius="20dp" />
            <solid android:color="@color/colorAccent" />
        </shape>
    </item>
</layer-list>

然后在你的 TabLayout xml 中設置 drawable app:tabIndicator="@drawable/shape_tab_indicator"

您還可以設置app:tabIndicatorFullWidth="false"而不是設置為形狀項的邊距。

Answer 2

您可以嘗試使用自定義矢量圖像為 TabLayout 設置 tabIndicator。

<com.google.android.material.tabs.TabLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentStart="true"
        app:tabIndicator="@drawable/custom_tab_indicator"
        app:tabTextAppearance="?textAppearanceH3"
        app:tabMode="auto">

以下是您的 custom_tab_indicator.xml：

<vector
    android:height="4dp"
    android:width="24dp"
    android:viewportHeight="4.0"
    android:viewportWidth="24.0"
    xmlns:android="http://schemas.android.com/apk/res/android">
    <path
        android:strokeWidth="4"
        android:fillColor="@color/red"
        android:strokeColor="@color/red"
        android:strokeLineCap="round"
        android:pathData="M12,4 H12, 4 z"/>
</vector>

Answer 3

這實際上很簡單，您要做的就是制作一個帶有圓角的自定義形狀並將其設置為您的 tabIndicator。

這是名為custom_tab_indicator.xml的圓角形狀

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="@color/colorAccent" />
    <corners
        android:bottomLeftRadius="0dp"
        android:bottomRightRadius="0dp"
        android:topLeftRadius="10dp"
        android:topRightRadius="10dp" />
</shape>

然后將其設置為 tabLayout 中的 tabIndicator 像這樣。

<com.google.android.material.tabs.TabLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:tabIndicator="@drawable/custom_tab_indicator"
    app:tabIndicatorFullWidth="false"
    app:tabIndicatorHeight="3dp" />

這應該會給你邊緣的圓形效果。

Answer 4

這是我的代碼：

<com.google.android.material.tabs.TabLayout
        android:id="@+id/viewPagerTab"
        android:layout_width="wrap_content"
        android:layout_height="@dimen/_10sdp"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="@dimen/_25sdp"
        android:minWidth="@dimen/_16sdp"
        android:backgroundTint="@color/white_40"
        android:translationZ="@dimen/_80sdp"
        app:layout_constraintBottom_toTopOf="@id/tvAnswerLater"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        android:layout_marginBottom="@dimen/_5sdp"
        app:tabBackground="@drawable/tab_selector"
        app:tabGravity="center"
        app:tabIndicatorFullWidth="true"
        app:tabIndicatorHeight="0sp"
        app:tabMaxWidth="@dimen/_18sdp"
        app:tabMode="fixed"
        app:tabPaddingEnd="@dimen/_15sdp"
        app:tabPaddingStart="@dimen/_15sdp" />

要將 tablayout 附加到您的 viewpager：

TabLayoutMediator(binding.viewPagerTab, binding.vQuizPager) { _, _ ->
    }.attach()

選項卡選擇器：

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

<item android:drawable="@drawable/default_tab_indicator"/>

默認指標可能如下所示：

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
    android:start="@dimen/_1sdp"
    android:end="@dimen/_7sdp">
    <shape android:shape="oval">
        <solid android:color="@color/tab_color" />
    </shape>
</item>

Answer 5

您可以使用這個庫CircularIndicatorTabLayout 。

安裝

• 你可以從這里下載圖書館的 aar 文件
• 將circle-idicator-tab-layout-1.0.0.aar 移動到app/libs
• 在項目 build.gradle 文件中添加存儲庫{ flatDir { dirs 'libs' } }
• 在app build.gradle文件中添加compile(name: 'circular-idicator-tab-layout-1.0.0', ext: 'aar')

例子

• 在您的布局文件中添加

  <np.com.ngimasherpa.citablayout.CircularIndicatorTabLayout android:id="@+id/tab_monitoring_criteria" android:layout_width="match_parent" android:layout_height="@dimen/spacing_72" app:iconColor="@color/colorPrimaryDark" app:indicatorColor="@color/colorAccent" app:indicatorPosition="bottom" app:lineColor="@android:color/holo_red_dark" app:lineEnabled="true" app:mode="fixed" app:selectedIconColor="@color/colorAccent" app:tabViewIconId="@+id/iconTabViewLayout" app:tabViewLayoutId="@layout/tab_layout" app:tabViewTextViewColor="@color/colorPrimaryDark" app:tabViewTextViewId="@+id/textTabViewLayout" app:tabViewTextViewSelectedColor="@color/colorAccent" app:tab_gravity="fill" />

• 在你的java文件中

  SectionPagerAdapter mSectionsPagerAdapter = new SectionsPagerAdapter(getSupportFragmentManager()); ViewPager mViewPager = (ViewPager) findViewById(R.id.container); CircularIndicatorTabLayout tabLayout = (CircularIndicatorTabLayout) findViewById(R.id.tab_monitoring_criteria); mViewPager.setAdapter(mSectionsPagerAdapter); tabLayout.setupWithViewPager(mViewPager); tabLayout.setIcons(R.drawable.ic_arrow_drop_down, R.drawable.ic_audiotrack, R.drawable.ic_beach);