Android TabLayout的使用详解

Posted 2021-07-31 路 宇

效果图：

TabLayout一般是结合ViewPager+Fragment的使用实现滑动的标签选择器。

我这个是在Toolbar中实现的标签切换，接下来我会讲解主要实现步骤：
1.布局界面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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <androidx.appcompat.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        >
        <ImageView
            android:id="@+id/image_view"
            android:layout_width="30dp"
            android:layout_height="30dp"
            android:src="@drawable/ic_back"
            />
        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            >

            <com.google.android.material.tabs.TabLayout
                android:id="@+id/tab_title"
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:layout_centerInParent="true"
                app:tabIndicatorColor="@color/red"
                app:tabIndicatorHeight="2dp"
                app:tabSelectedTextColor="@color/red"
                app:tabTextAppearance="@style/TabText"
                app:tabTextColor="@color/gray"
                />
        </RelativeLayout>
    </androidx.appcompat.widget.Toolbar>

    <View
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:background="#808080" />

    <androidx.viewpager.widget.ViewPager
        android:id="@+id/vp_pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</LinearLayout>

属性介绍：

• app:tabTextColor="@color/gray" : 未选中的字体颜色
• app:tabSelectedTextColor="@color/red" ：选中后的字体颜色
• app:tabTextAppearance="@style/TabText" ：
  设置字体大小样式的属性，因为TabLayout并没有直接设置字体大小样式的属性，所以需要在style中设置。
• app:tabIndicatorColor="@color/red" ： 设置底部下划线颜色
• app:tabIndicatorHeight=“2dp” ：设置底部下划线的高度 值为0dp时为隐藏

2.MainActivity代码如下：

public class MainActivity extends AppCompatActivity implements TabLayout.OnTabSelectedListener, View.OnClickListener {
    private TabLayout tab_title;
    private ViewPager vp_pager;
    private ArrayList<String> list = new ArrayList<>();
    private ImageView image_view;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        image_view=findViewById(R.id.image_view);
        androidx.appcompat.widget.Toolbar toolbar = findViewById(R.id.toolbar);
        //替换系统自带的toolbar
        setSupportActionBar(toolbar);
        list.add("商品1");
        list.add("商品2");
        list.add("商品3");
        initTabLayout();
        //初始化标签翻页
        initTabViewpager();
        image_view.setOnClickListener(this);
    }

    private void initTabViewpager() {
        vp_pager = findViewById(R.id.vp_pager);
        //构建商品翻页的适配器
        PageAdapter pagerAdapter = new PageAdapter(getSupportFragmentManager(),list);
        //设置商品翻页适配器
        vp_pager.setAdapter(pagerAdapter);
        //添加页面变更监听器
        vp_pager.addOnPageChangeListener(new ViewPager.SimpleOnPageChangeListener(){
            @Override
            public void onPageSelected(int position) {
                //选中tab_title指定的标签
                tab_title.getTabAt(position).select();
            }
        });
    }

    private void initTabLayout() {
        tab_title = findViewById(R.id.tab_title);
        //添加指定的文字标签
        tab_title.addTab(tab_title.newTab().setText(list.get(0)));
        tab_title.addTab(tab_title.newTab().setText(list.get(1)));
        tab_title.addTab(tab_title.newTab().setText(list.get(2)));
        //标签选中监听器
        tab_title.addOnTabSelectedListener(this);
    }
    //在标签选中时触发
    @Override
    public void onTabSelected(TabLayout.Tab tab) {
        //让viewpager显示指定位置的页面
        vp_pager.setCurrentItem(tab.getPosition());
    }
    //在标签取消选中时触发
    @Override
    public void onTabUnselected(TabLayout.Tab tab) {

    }
    //在标签被重复选中时触发
    @Override
    public void onTabReselected(TabLayout.Tab tab) {

    }
    //退出本页面
    @Override
    public void onClick(View v) {
        finish();
    }

3.其中创建了PagerAdapter适配器，需要继承FragmentPagerAdapter

/**
 *viewpager加载fragment的时候使用，viewpager的pageradapter适配器
 */
public class PageAdapter extends FragmentPagerAdapter {
    //声明标题文本队列
    private ArrayList<String> list;
    //碎片页适配器的构造函数，传入碎片管理器与标题队列
    public PageAdapter(@NonNull FragmentManager fm, ArrayList<String> list) {
        super(fm);
        this.list = list;
    }
    //获取指定位置的碎片fragment
    @NonNull
    @Override
    public Fragment getItem(int position) {
        if (position == 0){
            return new Commodity1Fragment();
        }else if (position == 1){
            return new Commodity2Fragment();
        }else if (position == 2){
            return new Commodity3Fragment();
        }
        return new Commodity1Fragment();
    }
    //获取fragment的个数
    @Override
    public int getCount() {
        return list.size();
    }
    //获取指定碎片页的标题文本
    @Nullable
    @Override
    public CharSequence getPageTitle(int position) {
        return list.get(position);
    }
}

FragmentPagerAdapter是专门用来给支持包中出现的ViewPager进行数据适配的。

我用这个适配器来实现Fragment在ViewPager里面进行滑动切换的。
FragmentPagerAdapter拥有自己的缓存策略，当和ViewPager配合使用的时候，会缓存当前Fragment以及左边一个、右边一个，一共三个Fragment对象。

对于当前我这个来说， 最适合使用FragmentPagerAdapter来实现。

FragmentPagerAdapter会对我们浏览过Fragment进行缓存，保存这些界面的临时状态，这样当我们左右滑动的时候，界面切换更加的流畅。但是，这样也会增加程序占用的内存。如果应用场景是更多的Fragment，请使用FragmentStatePagerAdapter。

4.里面的Fragment.java 我抽出一个来写一下：

public class Commodity1Fragment extends Fragment {
    private View view;

    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        if (view == null) {
            view = inflater.inflate(R.layout.commodity1_fragment, container, false);
        }
        return view;
    }
}

以上就是实现标签切换效果的实现，在新闻频道用的也是比较多的，希望对各位道友有帮助~