前面呢，有写过TabLayout的博客，最近开发用到了AndroidX来解决前面的问题，不要工具类设置下划线的问题了，来总结一下
Android--------TabLayout实现新闻客户端顶部导航栏
Android中Tablayout设置下划线宽度 和 dp和px之间进行相互转换
AndroidX效果图
首先添加依赖：
以前的是
implementation 'com.android.support:design:28.0.0'
换成
implementation "com.google.android.material:material:1.0.0"
现在的TabLayout有2种添加Item的方式
第一种和以前的差不多
android:id="@+id/tab_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabGravity="fill"
app:tabMaxWidth="0dp"
app:tabIndicatorColor="@color/colorAccent"
app:tabSelectedTextColor="@color/colorPrimary"
app:tabTextColor="@color/colorPrimary"
app:tabIndicatorFullWidth="false"
app:tabBackground="@color/transparent"
app:tabRippleColor="@color/transparent"
>
android:layout_width="match_parent"
android:layout_height="0.5dp"
android:background="#E4E4E4"
>
android:id="@+id/viewPager"
android:layout_width="match_parent"
android:layout_height="match_parent" >
Java代码
public class MainActivityB extends AppCompatActivity {
static final int NUM_ITEMS = 4;
private List fragmentList = new ArrayList();
private String[] strings = new String[]{"A","B","C","D"};
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_mainb);
fragmentList.add(new FragmentA());
fragmentList.add(new FragmentB());
fragmentList.add(new FragmentC());
fragmentList.add(new FragmentD());
initView();
}
private void initView(){
TabLayout tab_layout = findViewById(R.id.tab_layout);
ViewPager viewPager = findViewById(R.id.viewPager);
MyAdapter fragmentAdater = new MyAdapter(getSupportFragmentManager());
viewPager.setAdapter(fragmentAdater);
tab_layout.setupWithViewPager(viewPager);
}
public class MyAdapter extends FragmentPagerAdapter {
public MyAdapter(FragmentManager fm) {
super(fm);
}
@Override
public int getCount() {
return NUM_ITEMS;
}
@Override
public Fragment getItem(int position) {
return fragmentList.get(position);
}
@Nullable
@Override
public CharSequence getPageTitle(int position) {
return strings[position];
}
}
}
如果你不需要点击后的阴影动画效果,可以使用下面2个属性取消
app:tabBackground="@android:color/transparent"
app:tabRippleColor="@android:color/transparent"
看布局里面有一个这样的属性
tabIndicatorFullWidth (boolean)
默认为true ，是否使选择指示器的宽度适合选项卡项目的整个宽度(意思就是将选择指示器宽度将设置为最小宽度值，就是字体的宽度)
这样就解决了之前的问题了，
属性详细介绍请看文档：https://developer.android.google.cn/reference/com/google/android/material/tabs/TabItem
第二种写法
android:id="@+id/tab_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabGravity="fill"
app:tabMaxWidth="0dp"
app:tabIndicatorColor="@color/colorAccent"
app:tabSelectedTextColor="@color/colorPrimary"
app:tabTextColor="@color/colorPrimary"
app:tabIndicatorFullWidth="false"
>
android:id="@+id/tabItem1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="A"
/>
android:id="@+id/tabItem2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="B"
/>
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="C"
/>
android:text="D"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
这种是TabLayout 增加了一个TabItem控件，直接把Item写在里面了
这种也是很方便的，需要添加一个TabLayout的选中回调
tab_layout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
@Override
public void onTabSelected(TabLayout.Tab tab) {
//选中某个tab
}
@Override
public void onTabUnselected(TabLayout.Tab tab) {
//当tab从选择到未选择
}
@Override
public void onTabReselected(TabLayout.Tab tab) {
//已经选中tab后的重复点击tab
}
});
其他属性
app:tabIndicatorColor ：指示线的颜色
app:tabIndicatorHeight ： 指示线的高度
app:tabIndicatorFullWidth="false" 指示线是否铺满宽度
app:tabSelectedTextColor ： tab选中时的字体颜色
app:tabTextColor="@color/colorPrimary" ：未选中字体颜色
app:tabBackground="color" ： 整个tablayout颜色
app:tabMode="scrollable" ： 默认是fixed，固定的；scrollable：可滚动的
我用两种方式实现了上面效果图，有需要代码的请star 谢谢
代码地址