Android TabLayout的使用详解_路宇_android tablayout

大大的周 02-07 4602

效果图：

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时为隐藏app:tabRippleColor="@android:color/transparent" :去除点击水波纹效果

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; } }

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