标签：
当前市面上比较流行的应用，用户引导页已经是一个必不可缺的功能点了，简单的介绍下应用的基础功能或者版本升级功能点介绍。
那么常用的用户引导页是如何实现的呢？这篇文章就说说我个人用到的，并且觉得使用不错的效果。
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); } }
标签：
原文地址：http://www.cnblogs.com/qu-xinyang/p/5414883.html
