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
相关推荐
我命由我123451 小时前
Android 开发问题:getLeft、getRight、getTop、getBottom 方法返回的值都为 0
android·java·java-ee·android studio·android jetpack·android-studio·android runtime
Jeled2 小时前
Android 网络层最佳实践:Retrofit + OkHttp 封装与实战
android·okhttp·kotlin·android studio·retrofit
nvvas4 小时前
Android Studio JAVA开发按钮跳转功能
android·java·android studio
Jeled11 小时前
Android 集成指南:Google 登录、Facebook 登录 与 Firebase 深入接入(实战)
android·kotlin·android studio·memcached·facebook
Jeled1 天前
Kotlin 实现社交 App 音视频模块:语音录制、播放、暂停与进度控制全流程封装
android·kotlin·android studio·音视频
撩得Android一次心动2 天前
Android studio 高效使用
android·ide·android studio
Jeled2 天前
协程工具类
android·android studio
豆豆豆大王2 天前
Android的Activity与intent知识点
android studio
珹洺2 天前
Java-Spring入门指南(二十六)Android Studio下载与安装
java·spring·android studio
wei8440678722 天前
本地项目第一次推送到gitee上的完整命令
java·android studio