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 ... ...><RelativeLayoutandroid:layout_width="match_parent"android:layout_height="match_parent"><androidx.appcompat.widget.Toolbarandroid:layout_width="match_parent"android:layout_height="50dp"android:id="@+id/toolBar"android:background="@color/purple_200"><RelativeLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"><com.google.android.material.tabs.TabLayoutandroid: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.ViewPagerandroid: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) {//选中//设置翻页视图positionviewPager.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