android ------ AndroidX的 Tablayout(com.google.android.material.tabs.TabLayout) 的使用

≡放荡痞女 提交于 2019-12-03 12:03:42

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

 

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!