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
相关推荐
avi911116 小时前
Unity打包崩溃SRP-URP-管线的问题:Shader::SRPBatcherInfoSetup()
unity·android studio·调试·crash·崩溃
Yang-Never1 天前
Open GL ES ->模型矩阵、视图矩阵、投影矩阵等变换矩阵数学推导以及方法接口说明
android·矩阵·kotlin·android studio
千里马学框架2 天前
android studio调试aosp手机userdebug版本无法查看局部变量和参数问题如何解决?
android·智能手机·车载系统·android studio·debug·调试·系统开发
愤怒的代码2 天前
Android 11 SystemUI 导入 Android studio 编译打包过程
android·android studio
我命由我123453 天前
Android Gradle 插件问题:The option ‘android.useDeprecatedNdk‘ is deprecated.
android·java·java-ee·android studio·android jetpack·android-studio·android runtime
Mr_万能胶3 天前
要失业了!写在 Android “不再开源”之后
android·android studio·android jetpack
8931519603 天前
Android开发检查是否是各大厂商手机的工具类
android·android开发·android教程·android检查手机厂商
火龙映天3 天前
AGP与Android Studio版本的兼容对照表
android·android studio·agp
8931519604 天前
Android开发BasePagerAdapter
android·android开发·viewpager·android教程·viewpageradapte
YJlio4 天前
Android Studio 常见问题解决
android·ide·android studio