当前市面上比较流行的应用，用户引导页已经是一个必不可缺的功能点了，简单的介绍下应用的基础功能或者版本升级功能点介绍。
那么常用的用户引导页是如何实现的呢？这篇文章就说说我个人用到的，并且觉得使用不错的效果。
1、首先定义布局文件guide_layout.xml文件，主要使用ViewPager做页面显示，使用一个圆点布局显示圆点，圆点根据图片数目动态添加。
guide_layout.xml文件的代码如下：
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@mipmap/start_bg">
<android.support.v4.view.ViewPager
android:id="@+id/vp_guide"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
<Button
android:id="@+id/btn_skip"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="30dp"
android:text="@string/jump_to_begin"
android:textSize="16sp"
android:padding="10dp"
android:background="@color/light_gray"
android:layout_alignParentTop="true"
android:layout_alignParentRight="true"/>
<Button
android:id="@+id/btn_start"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:visibility="invisible"
android:text="@string/begin_use"
android:textSize="16sp"
android:padding="10dp"
android:background="@color/light_gray"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginBottom="60dp"/>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginBottom="30dp">
<!-- 线性布局用来显示引导页的圆点，使用代码给布局中添加圆点 -->
<LinearLayout
android:id="@+id/ll_point_group"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal">
</LinearLayout>
<!-- 表示当前显示的引导页，覆盖在待选中的圆点之上 -->
<View
android:id="@+id/view_guide_point"
android:layout_width="12dp"
android:layout_height="12dp"
android:background="@drawable/shape_point_white"/>
</RelativeLayout>
</RelativeLayout>
2、使用android中shape属性，定义圆点的背景资源。shape_point_gray.xml的代码如下：
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval" >
<solid android:color="@android:color/white" />
</shape>
3、activity文件中，定义引导页加载的图片数组，根据数组的长度动态添加知识圆点。
GuideActivity的代码如下：
package com.study.tracy.activity;
import android.content.Intent;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.util.Log;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.ViewTreeObserver.OnGlobalLayoutListener;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.LinearLayout.LayoutParams;
import android.widget.RelativeLayout;
import com.study.tracy.R;
import com.study.tracy.adapter.GuideAdapter;
import com.study.tracy.base.BaseActivity;
import com.study.tracy.constants.FlagConstants;
import com.study.tracy.utils.DensityUtils;
import com.study.tracy.utils.SharedPrefUtils;
import java.util.ArrayList;
public class GuideActivity extends BaseActivity {
private ViewPager vpGuide;
private LinearLayout llPointGroup; //引导圆点的父控件
private View guidePoint; //选中的圆点
private Button startBtn; //开始体验按钮
private Button skipBtn; //跳过按钮
// 引导页背景图片的id数组
private static final int[] mImageIds = new int[] {R.mipmap.user_guide01,
R.mipmap.user_guide02, R.mipmap.user_guide03 , R.mipmap.user_guide04, R.mipmap.user_guide05};
private int mPointWidth = 0;// 圆点间的距离
private ArrayList<ImageView> mImageViewList;
private String from;
@Override
public void initViews() {
this.setContentView(R.layout.guide_layout);
// 获取从哪里进来的入口
from = getIntent().getStringExtra("from");
vpGuide = (ViewPager) findViewById(R.id.vp_guide);
llPointGroup = (LinearLayout) findViewById(R.id.ll_point_group);
guidePoint = findViewById(R.id.view_guide_point);
startBtn = (Button) findViewById(R.id.btn_start);
skipBtn = (Button) findViewById(R.id.btn_skip);
}
@Override
public void initDatas() {
BaseActivity.isOpenDistanceBack = false;
mImageViewList = new ArrayList<ImageView>();
// 初始化引导页的三个页面
ImageView imageView = null;
for (int i = 0; i < mImageIds.length; i++) {
imageView = new ImageView(this);
imageView.setBackgroundResource(mImageIds[i]); // 设置引导页的背景图片
mImageViewList.add(imageView);
}
for (int i = 0; i < mImageIds.length; i++) {
Log.d("Point View", "第" + i + "个圆点");
View point = new View(this);
// 设置引导页默认圆点背景
point.setBackgroundResource(R.drawable.shape_point_gray);
LayoutParams params = new LayoutParams(DensityUtils.dp2px(this, 12), DensityUtils.dp2px(this, 12));
if(i > 0){
params.leftMargin = DensityUtils.dp2px(this, 10); //从第二个圆点开始设置左间距
}
point.setLayoutParams(params);
llPointGroup.addView(point); //将圆点添加到线性布局中
}
// 获取视图树, 对layout绘制结束事件进行监听
llPointGroup.getViewTreeObserver().addOnGlobalLayoutListener(
new OnGlobalLayoutListener() {
public void onGlobalLayout() {
Log.d("llPointLayout", "llPointLayout绘制结束！");
llPointGroup.getViewTreeObserver().removeGlobalOnLayoutListener(this);
if(mPointWidth == 0){
mPointWidth = llPointGroup.getChildAt(1).getLeft()
- llPointGroup.getChildAt(0).getLeft();
Log.d("圆点需要移动的距离：", mPointWidth + "");
}
}
});
}
@Override
public void initListeners() {
vpGuide.setAdapter(new GuideAdapter(mImageViewList));
vpGuide.setOnPageChangeListener(new GuidePageListener());
startBtn.setOnClickListener(new OnClickListener() {
public void onClick(View v) {
skipToActivity();
}
});
skipBtn.setOnClickListener(new OnClickListener() {
public void onClick(View v) {
skipToActivity();
}
});
}
private void skipToActivity() {
// 更新引导页是否显示为true，下次进入就不显示
SharedPrefUtils.getInstance().setBoolean(FlagConstants.USER_GUIDE, true);
// 跳转到登录的Activity中
Intent intent = null;
// if("setting".equals(from)){
// intent = new Intent(GuideActivity.this, SettingActivity.class);
// }else {
intent = new Intent(GuideActivity.this, LoginActivity.class);
// }
startActivity(intent);
finish();
}
class GuidePageListener implements OnPageChangeListener {
// 滑动状态发生变化
public void onPageScrollStateChanged(int arg0) {}
/**
* position : 当前的位置
* positionOffset : 位置移动的百分比
* positionOffsetPixels: 位置移动的px像素点
*/
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
int len = (int) (mPointWidth * positionOffset + position * mPointWidth);
RelativeLayout.LayoutParams params = (RelativeLayout.LayoutParams) guidePoint.getLayoutParams();
params.leftMargin = len; //设置选中圆点在父控件中的左间距
guidePoint.setLayoutParams(params); //重新给选中圆点设置布局参数
}
public void onPageSelected(int position) {
if(position == mImageIds.length - 1){
// 最后一个页面，设置开始体验按钮显示
startBtn.setVisibility(View.VISIBLE);
}else{
startBtn.setVisibility(View.INVISIBLE);
}
}
}
}
4、viewpager的适配器adapter，给每个pager页面添加对应位置的图片资源
package com.study.tracy.adapter;
import android.support.v4.view.PagerAdapter;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import java.util.ArrayList;
public class GuideAdapter extends PagerAdapter {
private ArrayList<ImageView> mImageViewList;
public GuideAdapter(ArrayList<ImageView> mImageViewList) {
this.mImageViewList = mImageViewList;
}
@Override
public int getCount() {
return mImageViewList.size();
}
@Override
public boolean isViewFromObject(View view, Object object) {
return view == object;
}
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView((View)object);
}
@Override
public Object instantiateItem(ViewGroup container, int position) {
container.addView(mImageViewList.get(position));
return mImageViewList.get(position);
}
}
时间： 2024-10-10 06:15:12