自定义 TabLayout 指示器。如何使选项卡指示器变为圆角？

Question

我想只将选项卡指示器的边角设置为圆角，而不是整个选项卡。我已经尝试过设置自定义视图，但没有帮助我。任何帮助将不胜感激。谢谢。

- Jagjit Singh

---

检查它是否有效 https://dev59.com/XVsX5IYBdhLWcg3wFsTV#34432781 - karanatwal.github.io

@KarandeepAtwal 它不起作用。 - Jagjit Singh

嘿，你找到任何解决方案了吗？ - Anudeep

Anu，请查看此链接 https://github.com/ngima/CircularIndicatorTabLayout - Ngima Sherpa

@NgimaSherpa 不，这是不同的，它不会起作用。 - Jagjit Singh

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"，而不是将边距设置为形状项。

- FinalDark

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>

- Manju Mathew

Answer 3

这其实很简单，你只需要创建一个带有圆角的自定义形状，并将其设置为标签指示器即可。

这里是名为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中这样使用。

<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" />

那样可以让边缘呈现出圆角效果。

- Yonatan Dawit

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>

- Manisha Saini

Answer 5

你可以使用这个库 CircularIndicatorTabLayout。

安装

• 你可以从这里下载该库的aar文件
• 将circular-idicator-tab-layout-1.0.0.aar移动到app/libs
• 在项目的build.gradle文件中添加repositories：{ 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);
  

- Ngima Sherpa