前面呢,有写过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的方式
第一种和以前的差不多
<com.google.android.material.tabs.TabLayout 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" > </com.google.android.material.tabs.TabLayout> <View android:layout_width="match_parent" android:layout_height="0.5dp" android:background="#E4E4E4" ></View> <androidx.viewpager.widget.ViewPager android:id="@+id/viewPager" android:layout_width="match_parent" android:layout_height="match_parent" > </androidx.viewpager.widget.ViewPager>
Java代码
public class MainActivityB extends AppCompatActivity { static final int NUM_ITEMS = 4; private List<Fragment> fragmentList = new ArrayList<Fragment>(); 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
第二种写法
<com.google.android.material.tabs.TabLayout 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" > <com.google.android.material.tabs.TabItem android:id="@+id/tabItem1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="A" /> <com.google.android.material.tabs.TabItem android:id="@+id/tabItem2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="B" /> <com.google.android.material.tabs.TabItem android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="C" /> <com.google.android.material.tabs.TabItem android:text="D" android:layout_width="wrap_content" android:layout_height="wrap_content" /> </com.google.android.material.tabs.TabLayout>
这种是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 谢谢
代码地址
参考的官方详细文档地址: https://developer.android.google.cn/reference/com/google/android/material/tabs/TabLayout