Android TabLayout使用
假设场景:有三个页面新闻,主页,个人中心
1.新建三个Fragment
因为分别创建三个碎片java代码比较繁琐,所以在此我们选择创建一个TabLayoutFragments 接口里面存放三个Fragment,这样把Fragment进行了分类存放,以便之后出现其他的Fragments不会乱。
这边先用view去接收一下视图然后返回,因为之后如果涉及到控件可以借助这个view变量去声明
public interface TabLayoutFragments {
class NewsFragment extends Fragment {
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.fragment_tab1, container, false);
return view;
}
}
class IndexFragment extends Fragment {
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.fragment_tab2, container, false);
return view;
}
}
class CenterFragment extends Fragment {
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.fragment_tab3, container, false);
return view;
}
}
}
2.新建三个简单布局
分别在layout目录下新建R.layout.fragment_tab1,R.layout.fragment_tab2,R.layout.fragment_tab3布局。布局这里就不做展示。
3.布局主页面
tablayout的切换是依托于viewpager进行展示,所以这边还需要用到viewpager2组件去展示fragment
如果想展示不止三个可以下拉tablayout增加tabitem的数量,上面显示的文字我们在java代码里进行声明
4.新建viewpager适配器
新建一个ViewPager2Adapter 文件让他继承自FragmentStateAdapter
重写createFragment接受position参数 pos从0开始
做switch判断:0表示在第一个页面加载NewsFragment碎片,以此类推
以及重写getItemCount()方法
你有几个tab你就写几
public class ViewPager2Adapter extends FragmentStateAdapter {
public ViewPager2Adapter(@NonNull FragmentActivity fragmentActivity) {
super(fragmentActivity);
}
@NonNull
@Override
public Fragment createFragment(int position) {
switch (position) {
case 0:
return new TabLayoutFragments.NewsFragment();
case 1:
return new TabLayoutFragments.IndexFragment();
case 2:
return new TabLayoutFragments.CenterFragment();
default:
return null;
}
}
@Override
public int getItemCount() {
return 3;
}
}
5.MainActivity.java
public class MainActivity extends AppCompatActivity {
//声明三个标题
String[] title = new String[]{"新闻","主页","个人中心"};
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
// 获取 TabLayout 和 ViewPager2 实例
TabLayout tabLayout = findViewById(R.id.tab1);
ViewPager2 viewPager2 = findViewById(R.id.vp1);
// 创建适配器用于管理 ViewPager2 中的页面
ViewPager2Adapter adapter = new ViewPager2Adapter(this);
viewPager2.setAdapter(adapter);
// 将 TabLayout 和 ViewPager2 绑定在一起
// 第三个参数是用匿名函数的写法 获取到tab和pos参数 设置每个tab的文字
new TabLayoutMediator(tabLayout, viewPager2,
(tab, position) -> tab.setText(title[position])
).attach();
}
}
页面展示