自定义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

您可以使用此库CircularIndicatorTabLayout。

安装

• 您可以从这里下载库的 aar 文件
• 将circular-idicator-tab-layout-1.0.0.aar移动到app/libs
• 在项目 build.gradle 文件中添加存储库{ flatDir { dirs 'libs' } }
• 在应用程序 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);