TabLayout两种添加tab方式,结合ViewPager+Fragment实现常见界面视图

版权声明:本文为 code小生 原创文章,未经允许不得其他任何形式的转载。 https://blog.csdn.net/wufeng55/article/details/53064763

今天一哥们问我是否使用过TabLayout,他的项目中用到了TabLayout,他之前没有使用过,对用法和一些属性不太熟悉……为此,总结一些它的基本用法和常用属性。

先上效果图

tablayout第1种添加tab方式.gif

tablayout第2种添加tab方式.gif

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <android.support.design.widget.TabLayout
        android:id="@+id/tabLayout"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        app:tabGravity="center"
        app:tabIndicatorColor="@android:color/holo_red_light"
        app:tabMode="scrollable"
        app:tabSelectedTextColor="@android:color/holo_red_light" />

    <android.support.v4.view.ViewPager
        android:id="@+id/viewPager"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:background="@android:color/white" />
</LinearLayout>

MainActivity.java

public class MainActivity extends AppCompatActivity {

    private ViewPager viewPager;
    private TabLayout tabLayout;
    private List<String> tabList = new ArrayList<>(); // 第一种添加方式时使用

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        //TabLayout
        tabLayout = (TabLayout) findViewById(R.id.tabLayout);

//        for (int i = 0; i < 5; i++) {
//            tabList.add("add方式添加 " + i);
//        }

        //为TabLayout添加tab名称
//        tabLayout.addTab(tabLayout.newTab().setText(tabList.get(0)));
//        tabLayout.addTab(tabLayout.newTab().setText(tabList.get(1)));
//        tabLayout.addTab(tabLayout.newTab().setText(tabList.get(2)));
//        tabLayout.addTab(tabLayout.newTab().setText(tabList.get(3)));

        viewPager = (ViewPager) findViewById(R.id.viewPager);
        // 第一种方式添加tab时使用
//        MyFragmentPagerAdapter adapter = new MyFragmentPagerAdapter(getSupportFragmentManager(),
//                tabList,this);
        // 第二种方式添加tab时使用
        MyFragmentPagerAdapter adapter = new MyFragmentPagerAdapter(getSupportFragmentManager(),
                this);
        viewPager.setAdapter(adapter);

        // 一站式管理方式:setupWithViewPager()方法底部会调用FragmentPagerAdapter中的getPageTitle()方法.
        tabLayout.setupWithViewPager(viewPager);
    }
}

其他的都比较简单,没有什么可看的,再介绍一下常用的属性。

tabIndicatorColor:Tab下面的横线颜色
tabTextColor:tab默认的文字颜色
tabSelectedTextColor:选中的tab的字体颜色
tabMode:模式(Scrollable fixed). 其中的fixed模式需要和tabGravity属性配合使用,此时tabGravity属性值为fill.
tabIndicatorHeight:设置tab底部的横线高度.为0dp时,不显示.

关注微信公众号,下载demo,欢迎交流

个人微信公众号.jpg

没有更多推荐了,返回首页