Android开发,使用TabLayout+ViewPager2实现校园健康安全宣传

文章目录

    • [1. 编写布局文件](#1. 编写布局文件)
    • [2. 代码逻辑实现](#2. 代码逻辑实现)
    • [3. 运行效果](#3. 运行效果)
    • [3. 关于作者其它项目视频教程介绍](#3. 关于作者其它项目视频教程介绍)

1. 编写布局文件

  1. fragment_home.xml
xml 复制代码
<?xml version="1.0" encoding="utf-8"?>
<androidx.appcompat.widget.LinearLayoutCompat 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">

    <!--
     设置选中时字体颜色
     app:tabSelectedTextColor="@color/purple_200"
     设置默认时字体颜色
     app:tabTextColor="#222222"
     设置指示器的宽度自适应文字的宽度
     app:tabIndicatorFullWidth="false"
     设置指示器的颜色
     app:tabIndicatorColor="@color/purple_200"
     设置超出字体内容超出一屏,可以滑动
     app:tabMode="scrollable"
    -->

    <com.google.android.material.tabs.TabLayout
        android:id="@+id/tab_layout"
        android:background="@color/teal_200"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabIndicatorColor="@color/white"
        app:tabIndicatorFullWidth="false"
        app:tabSelectedTextColor="@color/white"
        app:tabTextColor="#222222" />

    <View
        android:layout_width="match_parent"
        android:layout_height="4dp"
        android:background="@color/teal_200"/>

    <androidx.viewpager2.widget.ViewPager2
        android:id="@+id/viewPager"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</androidx.appcompat.widget.LinearLayoutCompat>

这里注意:在布局预览效果中,并没有实际效果,原因是TabLayout并没有设置任何数据

2. 代码逻辑实现

HomeFragment.java

java 复制代码
public class HomeFragment extends Fragment {
    private View rootView;
    private String[] titles = {"健康知识宣传", "防诈骗安全知识宣传"};
    private List<Fragment> fragmentList =new ArrayList<>();
    private TabLayout tab_layout;
    private ViewPager2 viewPager;

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        // Inflate the layout for this fragment
        rootView = inflater.inflate(R.layout.fragment_home, container, false);

        //初始化控件
        tab_layout = rootView.findViewById(R.id.tab_layout);
        viewPager = rootView.findViewById(R.id.viewPager);

        //初始化数据
        fragmentList.add(new TabFirstFragment());
        fragmentList.add(new TabSecondFragment());

        //设置适配器
        viewPager.setAdapter(new FragmentStateAdapter(getActivity()) {
            @NonNull
            @Override
            public Fragment createFragment(int position) {
                return fragmentList.get(position);
            }

            @Override
            public int getItemCount() {
                return fragmentList.size();
            }
        });

        //tab_layout点击事件
        tab_layout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
            @Override
            public void onTabSelected(TabLayout.Tab tab) {
                //设置viewPager选中当前页
                viewPager.setCurrentItem(tab.getPosition(),false);
            }

            @Override
            public void onTabUnselected(TabLayout.Tab tab) {

            }

            @Override
            public void onTabReselected(TabLayout.Tab tab) {

            }
        });

        //viewPager和tab_layout关联在一起
        TabLayoutMediator tabLayoutMediator = new TabLayoutMediator(tab_layout, viewPager, new TabLayoutMediator.TabConfigurationStrategy() {
            @Override
            public void onConfigureTab(@NonNull TabLayout.Tab tab, int position) {
                tab.setText(titles[position]);
            }
        });

        //这几话不能少
        tabLayoutMediator.attach();

        return rootView;
    }
}

注意事项:

  • 这里我是在Fragment里面去实现的,不是在Activity中,如果你想在Activity中去实现,初始化控件直接findViewById(R.id.xxx)就可以了
  • viewPager.setAdapter(new FragmentStateAdapter(getActivity())在Fragment中使用getActivity() 在Activity中请使用this即可
  • TabFirstFragment TabSecondFragment就是Fragment页面,自己创建就好,没有逻辑代码

3. 运行效果

3. 关于作者其它项目视频教程介绍

本人在b站录制的一些视频教程项目,免费供大家学习

  1. Android新闻资讯app实战:https://www.bilibili.com/video/BV1CA1vYoEad/?vd_source=984bb03f768809c7d33f20179343d8c8
  2. Androidstudio开发购物商城实战:https://www.bilibili.com/video/BV1PjHfeXE8U/?vd_source=984bb03f768809c7d33f20179343d8c8
  3. Android开发备忘录记事本实战:https://www.bilibili.com/video/BV1FJ4m1u76G?vd_source=984bb03f768809c7d33f20179343d8c8&spm_id_from=333.788.videopod.sections
  4. Androidstudio底部导航栏实现:https://www.bilibili.com/video/BV1XB4y1d7et/?spm_id_from=333.337.search-card.all.click&vd_source=984bb03f768809c7d33f20179343d8c8
  5. Android使用TabLayout+ViewPager2实现左右滑动切换:https://www.bilibili.com/video/BV1Mz4y1c7eX/?spm_id_from=333.337.search-card.all.click&vd_source=984bb03f768809c7d33f20179343d8c8
相关推荐
用户237390331471 天前
Android Studio一个模板左侧文件的作用
android studio
老帅不老3 天前
视频feed流框架-原创
android studio·android things
过-眼-云-烟3 天前
新版Android Studio能打包但无法run ‘app‘,编译通过后手机中没有安装,顶部一直转圈
android·ide·android studio
AIOT魔法师3 天前
修复Android studio的adb无法连接手机问题
adb·智能手机·android studio
雨声不在4 天前
使用android studio分析cpu开销
android·ide·android studio
AI视觉网奇5 天前
android studio 断点无效
android·ide·android studio
jiaxi的天空5 天前
android studio gradle 访问不了
android·ide·android studio
柳岸风5 天前
Android Studio Meerkat | 2024.3.1 Gradle Tasks不展示
android·ide·android studio
郭庆汝5 天前
Windows安装java流程
java·windows·android studio
尚久龙5 天前
安卓学习 之 SeekBar(音视频播放进度条)
android·java·学习·手机·android studio