【基于Java语言的Android个人开发笔记，开屏引导页】利用ViewPagerFragment实现引导页

尊韶

已于 2022-07-05 14:19:22 修改

阅读量785

点赞数

分类专栏：安卓移动应用开发文章标签： java 开发语言 android-studio android 个人开发

于 2022-07-05 11:29:40 首次发布

本文链接：https://blog.csdn.net/GOOUTOUT/article/details/125616285

版权

安卓移动应用开发专栏收录该内容

3 篇文章 0 订阅

订阅专栏

在这里插入图片描述

第一步：填充ViewPager

因为要实现的的是引导页，故将ViewPager填充满整个页面

   <androidx.viewpager.widget.ViewPager
            android:id="@+id/myViewPager"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />
    </LinearLayout>

第二步：准备引导页内容

这里使用了Fragment作为内容
在这里插入图片描述
可以自行选择为Fragment添加相关内容
例如：

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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:background="@drawable/sp1"
    tools:context=".welcome.yidaoFragment.YindaoOneFragment">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <Button
            android:id="@+id/btn_yindaof"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="16dp"
            android:layout_marginEnd="16dp"
            android:background="@drawable/div_btn_selector"
            android:text="跳过"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintTop_toTopOf="parent" />
    </androidx.constraintlayout.widget.ConstraintLayout>

</FrameLayout>

在这里插入图片描述

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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:background="@drawable/sp5"
    tools:context=".welcome.yidaoFragment.YindaoFiveFragment">

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/gl_fiveFragment"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.55" />

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginStart="32dp"
        android:layout_marginEnd="32dp"
        android:background="@drawable/border_on"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="@+id/gl_fiveFragment">

        <TextView
            android:id="@+id/tv_ip_fiveFragment"
            android:layout_width="70dp"
            android:layout_height="wrap_content"
            android:layout_marginStart="8dp"
            android:layout_marginTop="20dp"
            android:text="ip地址："
            android:textSize="16sp"
            android:textStyle="bold"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <EditText
            android:id="@+id/et_ip_fiveFragment"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginEnd="8dp"
            android:layout_weight="1"
            android:text="192.168.1.10"
            app:layout_constraintBottom_toBottomOf="@+id/tv_ip_fiveFragment"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="0.0"
            app:layout_constraintStart_toEndOf="@+id/tv_ip_fiveFragment"
            app:layout_constraintTop_toTopOf="@+id/tv_ip_fiveFragment" />


        <TextView
            android:id="@+id/tv_port_fiveFragment"
            android:layout_width="70dp"
            android:layout_height="wrap_content"
            android:layout_marginTop="24dp"
            android:text="ip地址："
            android:textSize="16sp"
            android:textStyle="bold"
            app:layout_constraintEnd_toEndOf="@+id/tv_ip_fiveFragment"
            app:layout_constraintStart_toStartOf="@+id/tv_ip_fiveFragment"
            app:layout_constraintTop_toBottomOf="@+id/et_ip_fiveFragment" />

        <EditText
            android:id="@+id/et_port_fiveFragment"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginEnd="8dp"
            android:layout_weight="1"
            android:text="8080"
            app:layout_constraintBottom_toBottomOf="@+id/tv_port_fiveFragment"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toEndOf="@+id/tv_port_fiveFragment"
            app:layout_constraintTop_toTopOf="@+id/tv_port_fiveFragment" />

        <Button
            android:id="@+id/btn_fiveFragment"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginStart="32dp"
            android:layout_marginTop="8dp"
            android:layout_marginEnd="32dp"
            android:layout_marginBottom="16dp"
            android:background="@drawable/div_btn_selector"
            android:text="进入主页"
            android:textSize="16sp"
            android:textStyle="bold"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/et_port_fiveFragment" />

    </androidx.constraintlayout.widget.ConstraintLayout>

</androidx.constraintlayout.widget.ConstraintLayout>

第三部：自定义FragmentViewPage适配器

/*
 * Fragment的适配器，提供数据源
 */
public class MyFragmentPagerAdapter extends FragmentPagerAdapter {

    //定义属性：Fragment列表
    private List<Fragment> fragmentList;

    //构造方法
    public MyFragmentPagerAdapter(FragmentManager fm) {
        super(fm);
    }

    public MyFragmentPagerAdapter(FragmentManager fm, List<Fragment> fragmentList) {
        super(fm);
        this.fragmentList = fragmentList;
    }

    //显示那个页面
    @Override
    public Fragment getItem(int position) {
        return fragmentList.get(position);
    }

    //页面个数
    @Override
    public int getCount() {
        return fragmentList.size();
    }
}

第四步：将Fragment填充到ViewPager

在引导页的主活动页的onCreate()方法中：

        private ViewPager vpYindao;
        vpYindao = (ViewPager) findViewById(R.id.vp_yindao);
        // 新建Fragment对象
        YindaoOneFragment yindaoOneFragment = new YindaoOneFragment();
        YindaoTwoFragment yindaoTwoFragment = new YindaoTwoFragment();
        YindaoThreeFragment yindaoThreeFragment = new YindaoThreeFragment();
        YindaoFourFragment yindaoFourFragment = new YindaoFourFragment();
        YindaoFiveFragment yindaoFiveFragment = new YindaoFiveFragment();
        // 建立ArrayList<Fragment>()列表对象
        fragmentArrayList = new ArrayList<Fragment>();
        // 将Fragment对象填充到Arraylist对象中
        fragmentArrayList.add(yindaoOneFragment);
        fragmentArrayList.add(yindaoTwoFragment);
        fragmentArrayList.add(yindaoThreeFragment);
        fragmentArrayList.add(yindaoFourFragment);
        fragmentArrayList.add(yindaoFiveFragment);
        // 新建适配器
        myViewPageAdap = new MyViewPageAdap(getSupportFragmentManager(), FragmentPagerAdapter.BEHAVIOR_RESUME_ONLY_CURRENT_FRAGMENT, YindaoActivity.this, fragmentArrayList);
        // 设置适配器
        vpYindao.setAdapter(myViewPageAdap);

引导页优化修改

带引导圆圈表示的：

第一步：在引导页的主活动页添加RadioGroup和RadioButton

如图所示：
在这里插入图片描述

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 
												   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"
                                                   tools:context=".welcome.YindaoActivity">
  
  <androidx.viewpager.widget.ViewPager
                                       android:id="@+id/vp_yindao"
                                       android:layout_width="match_parent"
                                       android:layout_height="match_parent"
                                       app:layout_constraintBottom_toBottomOf="parent"
                                       app:layout_constraintEnd_toEndOf="parent"
                                       app:layout_constraintHorizontal_bias="1.0"
                                       app:layout_constraintStart_toStartOf="parent"
                                       app:layout_constraintTop_toTopOf="parent"
                                       app:layout_constraintVertical_bias="1.0" />
  
  <androidx.constraintlayout.widget.Guideline
                                              android:id="@+id/gl_yindao"
                                              android:layout_width="wrap_content"
                                              android:layout_height="wrap_content"
                                              android:orientation="horizontal"
                                              app:layout_constraintGuide_percent="0.9" />
  
  <RadioGroup
              android:id="@+id/rg_yidao"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:orientation="horizontal"
              app:layout_constraintEnd_toEndOf="parent"
              app:layout_constraintStart_toStartOf="parent"
              app:layout_constraintTop_toBottomOf="@+id/gl_yindao">
    
    <RadioButton
                 android:id="@+id/rb_yindao_0"
                 android:layout_width="26dp"
                 android:layout_height="26dp"
                 android:layout_marginHorizontal="16dp"
                 android:background="@drawable/point_selsect"
                 android:button="@null" />
    
    <RadioButton
                 android:id="@+id/rb_yindao_1"
                 android:layout_width="26dp"
                 android:layout_height="26dp"
                 android:layout_marginHorizontal="16dp"
                 android:background="@drawable/point_selsect"
                 android:button="@null" />
    
    <RadioButton
                 android:id="@+id/rb_yindao_2"
                 android:layout_width="26dp"
                 android:layout_height="26dp"
                 android:layout_marginHorizontal="16dp"
                 android:background="@drawable/point_selsect"
                 android:button="@null" />
    
    <RadioButton
                 android:id="@+id/rb_yindao_3"
                 android:layout_width="26dp"
                 android:layout_height="26dp"
                 android:layout_marginHorizontal="16dp"
                 android:background="@drawable/point_selsect"
                 android:button="@null" />
    
    <RadioButton
                 android:id="@+id/rb_yindao_4"
                 android:layout_width="26dp"
                 android:layout_height="26dp"
                 android:layout_marginHorizontal="16dp"
                 android:background="@drawable/point_selsect"
                 android:button="@null" />
  </RadioGroup>
  
</androidx.constraintlayout.widget.ConstraintLayout>

第二步：实现滑动效果和圆圈引导效果

在引导页的主活动页的onCreate()方法中：


    // 声明
    private RadioGroup rgYidao;
    private RadioButton rbYindao0;
    private RadioButton rbYindao1;
    private RadioButton rbYindao2;
    private RadioButton rbYindao3;
    private RadioButton rbYindao4;

        // 初始化
        rgYidao = (RadioGroup) findViewById(R.id.rg_yidao);
        rbYindao0 = (RadioButton) findViewById(R.id.rb_yindao_0);
        rbYindao1 = (RadioButton) findViewById(R.id.rb_yindao_1);
        rbYindao2 = (RadioButton) findViewById(R.id.rb_yindao_2);
        rbYindao3 = (RadioButton) findViewById(R.id.rb_yindao_3);
        rbYindao4 = (RadioButton) findViewById(R.id.rb_yindao_4);

        // 设置监听滑动
        vpYindao.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

            }

            // 页面选中时调用
            @Override
            public void onPageSelected(int position) {
                rgYidao.check(rbtnArrayList.get(position));
            }

            @Override
            public void onPageScrollStateChanged(int state) {

            }
        });