【Androidstudio学习笔记】设计引导页功能

主目录

功能描述

此功能用于新用户第一次进入应用时在部分较为复杂的功能使用前展示的操作流程，当然也可以在后续的其他功能键重新查看引导流程

1. 展示指定数量的引导页，并且在下面有固定的小圆点记录引导进度，可通过点击圆点切换引导页面（圆点配套颜色提醒，如果圆点和当前页面的索引相同，则显示红色，不同则显示白色，有利于提醒用户当前所在引导页面的位置）
2. 也可通过左右滑动进行页面的切换，滑动/点击圆点都会触发颜色提醒
3. 在划至最后一页时，提示用户可退出该引导
4. 用户第一次打开应用并使用需要引导页引导的功能时，弹出引导页
5. 点击最后一页的按钮可退出引导功能

大致思路

1. activity主要用来获取组件，然后传给adapter适配器做剩下的工作
2. adapter获取到RadioGroup在该节点下创建指定数量的RadioButton组件，并给RadioButton组件添加点击事件，用于切换小圆点和引导页的状态
3. 给RadioGroup添加监听页面切换状态的回调，用于保证在滑动时小圆点和引导页的索引保持一致

准备工作

1. 下载/截几张图用来当测试用的引导页
2. 组件：ViewPager、RadioGroup，Radiobutton
3. 在res的drawable文件夹中把1.里的图放进去（最好不要用中文）
4. 在res的layout文件夹中创建两个xml，一个是放viewpager的，一个是放引导图的

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".LaunchSimpleActivity">

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

    </androidx.viewpager.widget.ViewPager>
    <RadioGroup
        android:id="@+id/rg_group"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:orientation="horizontal"
        android:layout_marginBottom="20dp"/>
</RelativeLayout>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <!-- 这是引导图片的图像视图 -->
    <ImageView
        android:id="@+id/iv_launch"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:adjustViewBounds="true"
        android:scaleType="fitXY" />



    <!-- 这是最后一页的入口按钮 -->

    <Button
        android:id="@+id/btn_start"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:text="退出引导,进入应用"
        android:background="@color/white"
        android:textColor="#499c54"
        android:textSize="22sp"
        android:visibility="gone" />"
</RelativeLayout>

代码

Activity

public class LaunchSimpleActivity extends AppCompatActivity {
    // 声明引导页面的图片数组
    private int[] lanuchImageArray = {R.drawable.guide_bg1,
            R.drawable.guide_bg2, R.drawable.guide_bg3, R.drawable.guide_bg4};

    @Override
    public void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_launch_simple);
        // 从布局视图中获取名叫vp_launch的翻页视图
        ViewPager vp_launch = findViewById(R.id.vp_launch);
        RadioGroup radioGroup = findViewById(R.id.rg_group);
        // 构建一个引导页面的翻页适配器
        LaunchSimpleAdapter adapter = new LaunchSimpleAdapter(vp_launch,radioGroup, this, lanuchImageArray);
        vp_launch.setAdapter(adapter); // 设置翻页视图的适配器
        vp_launch.setCurrentItem(0); // 设置翻页视图显示第一页
    }
    
}

Adapter

public class LaunchSimpleAdapter extends PagerAdapter {
    List<View> mViewList = new ArrayList<View>(); // 声明一个引导页的视图列表
    ViewPager viewPager; //装载引导页的viewpager容器
    RadioGroup radioGroup; // 装载底部小圆点的容器

    Context mContext; // activity,用于创建新的组件

    int[] introImages; // 需要展示的引导图的数组

    // 引导页适配器的构造方法，传入上下文与图片数组
    public LaunchSimpleAdapter(ViewPager vp_launch,RadioGroup radioGroup, final Context context, int[] imageArray) {
        this.viewPager = vp_launch;
        this.introImages = imageArray;
        this.mContext = context;
        this.radioGroup = radioGroup;
        // 根据布局文件item_launch.xml生成视图对象
        initViewPager();
        for (int i = 0; i < imageArray.length; i++) {
            View tem_intro_view = LayoutInflater.from(context).inflate(R.layout.item_launch, null);
            ImageView iv_launch = tem_intro_view.findViewById(R.id.iv_launch);
//            RadioGroup rg_indicate = intro_view.findViewById(R.id.rg_indicate);
            Button btn_start = tem_intro_view.findViewById(R.id.btn_start);
            iv_launch.setImageResource(imageArray[i]); // 设置引导页的全屏图片
            // 如果是最后一个引导页，则显示入口按钮，以便用户点击按钮进入主页
            if (i == imageArray.length - 1) {
                btn_start.setVisibility(View.VISIBLE);
                btn_start.setOnClickListener(new View.OnClickListener() {
                    @Override
                    public void onClick(View v) {
                        // 这里要跳到应用主页
                        Toast.makeText(context, "欢迎您开启美好生活",
                                Toast.LENGTH_SHORT).show();
                    }
                });
            }
            mViewList.add(tem_intro_view); // 把该图片对应的页面添加到引导页的视图列表
        }
        initPots();
        switchPotStatus(0);
    }

    // 获取页面项的个数
    public int getCount() {
        return mViewList.size();
    }

    // 判断当前视图是否来自指定对象
    public boolean isViewFromObject(View view, Object object) {
        return view == object;
    }

    // 从容器中销毁指定位置的页面
    public void destroyItem(ViewGroup container, int position, Object object) {
        container.removeView(mViewList.get(position));
    }

    // 实例化指定位置的页面，并将其添加到容器中
    public Object instantiateItem(ViewGroup container, int position) {
        container.addView(mViewList.get(position));
        return mViewList.get(position);
    }

    private void initViewPager() {
        //初始化viewpager的页面变化监听事件
        viewPager.addOnPageChangeListener(onPageChangeListener);
        viewPager.setPageTransformer(true,new ZoomOutPageTransformer());
    }

    private ViewPager.OnPageChangeListener onPageChangeListener = new ViewPager.OnPageChangeListener() {
        @Override
        public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

        }

        @Override
        public void onPageSelected(int position) {
            switchPotStatus(position);
        }

        @Override
        public void onPageScrollStateChanged(int state) {

        }
    };
    private void initPots(){
        for (int i = 0; i < introImages.length; i++) {
            //需要依次排序
            RadioButton radio = new RadioButton(mContext); // 创建一个单选按钮
            radio.setLayoutParams(new ViewGroup.LayoutParams(
                    ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT));
            radio.setButtonDrawable(R.mipmap.unselected_pot); // 设置单选按钮的图标
            radio.setPadding(10, 0, 10, 0); // 设置单选按钮的四周间距
            radioGroup.addView(radio); // 把单选按钮添加到页面底部的单选组
            int index = i;
            radio.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View view) {
                    viewPager.setCurrentItem(index);
                    switchPotStatus(index);
                }
            });
        }
    }

    private void switchPotStatus(int position){
        int count = radioGroup.getChildCount();
        for (int i = 0; i < count; i++) {
            ((RadioButton)radioGroup.getChildAt(i)).setButtonDrawable(R.mipmap.unselected_pot);
        }
        ((RadioButton)radioGroup.getChildAt(position)).setButtonDrawable(R.mipmap.selected_pot);
        radioGroup.invalidate();
    }

}

我在网上查找对应的功能脚本时，发现没有我想要的小圆点保持悬浮状态在屏幕下方的功能，因此我的代码添加了一些细节

滑动动画

import android.annotation.SuppressLint;


import android.util.Log;

import android.view.View;

import androidx.viewpager.widget.ViewPager;

public class ZoomOutPageTransformer implements ViewPager.PageTransformer {
    private static final float MIN_SCALE = 0.85f;

    private static final float MIN_ALPHA = 0.5f;


    @SuppressLint("NewApi")

    public void transformPage(View view, float position) {

        int pageWidth = view.getWidth();

        int pageHeight = view.getHeight();

        if (position < -1) { // [-Infinity,-1)

            // This page is way off-screen to the left.

            view.setAlpha(0);
        } else if (position <= 1) //a页滑动至b页 ； a页从 0.0 -1 ；b页从1 ~ 0.0

        { // [-1,1]

            // Modify the default slide transition to shrink the page as well

            float scaleFactor = Math.max(MIN_SCALE, 1 - Math.abs(position));

            float vertMargin = pageHeight * (1 - scaleFactor) / 2;

            float horzMargin = pageWidth * (1 - scaleFactor) / 2;

            if (position < 0) {

                view.setTranslationX(horzMargin - vertMargin / 2);

            } else {

                view.setTranslationX(-horzMargin + vertMargin / 2);

            }


            // Scale the page down (between MIN_SCALE and 1)

            view.setScaleX(scaleFactor);

            view.setScaleY(scaleFactor);


            // Fade the page relative to its size.

            view.setAlpha(MIN_ALPHA + (scaleFactor - MIN_SCALE)

                    / (1 - MIN_SCALE) * (1 - MIN_ALPHA));


        } else { // (1,+Infinity]

            // This page is way off-screen to the right.

            view.setAlpha(0);

        }

    }
}

总结

代码量不大，逻辑也不复杂，当前还只是demo阶段，放在正式环境下的话还需要商讨引导页的获取是通过本地直接获取还是从服务器下拉资源。后者的话则还需要添加接入网络部分的代码
xml文件里有的可能会报错，记得自己改一下内容
希望可以帮到需要帮助的兄弟们