【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.ViewPagerandroid:id="@+id/vp_launch"android:layout_width="match_parent"android:layout_height="match_parent"></androidx.viewpager.widget.ViewPager><RadioGroupandroid: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"><!-- 这是引导图片的图像视图 --><ImageViewandroid:id="@+id/iv_launch"android:layout_width="match_parent"android:layout_height="match_parent"android:adjustViewBounds="true"android:scaleType="fitXY" /><!-- 这是最后一页的入口按钮 --><Buttonandroid: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};@Overridepublic 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() {@Overridepublic 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() {@Overridepublic void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {}@Overridepublic void onPageSelected(int position) {switchPotStatus(position);}@Overridepublic 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() {@Overridepublic 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 wellfloat 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文件里有的可能会报错，记得自己改一下内容
希望可以帮到需要帮助的兄弟们