android ------ AndroidX的 Tablayout（com.google.android.material.tabs.TabLayout）的使用

前面呢，有写过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

巴特西

android ------ AndroidX的 Tablayout（com.google.android.material.tabs.TabLayout）的使用

最新文章

热门文章

巴特西

android ------ AndroidX的 Tablayout（com.google.android.material.tabs.TabLayout） 的使用

最新文章

热门文章

android ------ AndroidX的 Tablayout（com.google.android.material.tabs.TabLayout）的使用