TabLayout与ToolBar、ViewPager的使用

目录

1. 在ToolBar中添加TabLayout

2. 将工具栏设为活动栏

3. 初始化TabLayout

4. TabLayout监听器

---

可以在ToolBar工具栏中添加TabLayout配合，效果如下图。

1. 在ToolBar中添加TabLayout

TabLayout的常用属性有：

tabBackground  指定标签的背景

tabIndicatorColor  指定下划线颜色

tabIndicatorHeight  指定下划线高度

tabTextColor  指定标签文字颜色

tabSelectedTextColor  指定选中文字的颜色

tabTextAppearance  指定标签文字的风格

//在XML文件中添加包含TabLayout的ToolBar和ViewPager

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 
    ... ...>
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">


        <androidx.appcompat.widget.Toolbar
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:id="@+id/toolBar"
            android:background="@color/purple_200">
            <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content">

                <com.google.android.material.tabs.TabLayout
                    android:layout_marginLeft="20dp"
                    android:layout_marginRight="20dp"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:id="@+id/tabLayout"

                    app:tabTextColor="@color/black"
                    app:tabBackground="@color/white"
                    app:tabIndicatorColor="@color/black"
                    app:tabSelectedTextColor="@color/purple_200"
                    app:tabIndicatorHeight="5dp"

                    />

            </RelativeLayout>
        </androidx.appcompat.widget.Toolbar>

        <androidx.viewpager.widget.ViewPager
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_below="@id/toolBar"
            android:id="@+id/viewPager"
            android:background="@color/white"/>


    </RelativeLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

2. 将工具栏设为活动栏

//清单文件
android:theme="@style/Theme.Design.NoActionBar"

//Activity的onCreate()方法

//工具栏
Toolbar toolbar=findViewById(R.id.toolBar);
setSupportActionBar(toolbar);

3. 初始化TabLayout

TabLayout对象常用方法：

newTab()  创建标签(TabLayout.Tab)

addTab( TabLayout.Tab tab )  添加标签

selectTab( TabLayout.Tab tab )  选中标签

Tab对象常用方法：

setIcon( int drawableId )  设置标签图标

setText( String text )  设置标签文本

getPosition()  获取标签位置

//初始化TabLayout

//TabLayout
TabLayout tabLayout=findViewById(R.id.tabLayout);
//Tab
TabLayout.Tab tab1=tabLayout.newTab();
tab1.setIcon(R.drawable.icon);
TabLayout.Tab tab2=tabLayout.newTab();
tab2.setText("tab2");
tabLayout.addTab(tab1);
tabLayout.addTab(tab2);

//初始化ViewPager

//翻页视图适配器
private  class MyAdapter extends PagerAdapter{
    private ArrayList<View> data;

    public MyAdapter(){
        //准备数据
        View v1= LayoutInflater.from(MainActivity.this).inflate(R.layout.my_item_layout,null,false);
        View v2= LayoutInflater.from(MainActivity.this).inflate(R.layout.my_item_layout2,null,false);
        data=new ArrayList<>();
        data.add(v1);
        data.add(v2);
    }

    public int getCount() {
        return data.size();
    }

    public Object instantiateItem(@NonNull ViewGroup container, int position) {
        //插入
        container.addView(data.get(position));
        return data.get(position);
    }

    public void destroyItem(@NonNull ViewGroup container, int position, @NonNull Object object) {
        //移出
        container.removeView(data.get(position));
    }

    public boolean isViewFromObject(@NonNull View view, @NonNull Object object) {
        if(view.equals(object)){
            return true;
        }
        return false;
    }
}

//ViewPager
ViewPager viewPager=findViewById(R.id.viewPager);
viewPager.setAdapter(new MyAdapter());

4. TabLayout监听器

可以为TabLayout设置监听器，以达到点击标签时ViewPager改变；同时可以为ViewPager设置监听器，以达到ViewPager翻页时标签改变。

//TabLayout监听器
tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
    public void onTabSelected(TabLayout.Tab tab) {
        //选中
        //设置翻页视图position
        viewPager.setCurrentItem(tab.getPosition());
    }

    public void onTabUnselected(TabLayout.Tab tab) {
        //未选中
    }

    public void onTabReselected(TabLayout.Tab tab) {
        //再次选中
    }
});

//Tab数组
ArrayList<TabLayout.Tab> tabs=new ArrayList<>();
tabs.add(tab1);
tabs.add(tab2);
        
//ViewPager监听器
viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
        //在翻页过程中触发
        //第一个参数表示当前页面序号；第二个参数表示当前页面偏移量，取值在0到1之间；第三个参数表示当前页面的偏移距离
    }

    public void onPageSelected(int position) {
        //翻页
        //TabLayout变化
        tabLayout.selectTab(tabs.get(position));
    }

    public void onPageScrollStateChanged(int state) {
        //在翻页状态改变时触发
        //参数为翻页状态：0为静止 1为正在滑动 2为滑动完毕
        //滑动状态依次为：正在滑动(1) -> 滑动完毕(2) -> 静止(0)
    }
});

tag：翻页视图，ViewPager，工具栏，活动栏，ToolBar，标签，Tab，TabLayout