ViewPager实现引导界面，引导的指针点（Dot）带移动动画

近期在用许多软件时发现，很多软件都有用户引导画面，基本上就是几张图片用来滑动，并且每张图片上都有一个引导的指针点，但是很多软件（包括一些大公司的软件）引导的指针都是没有动画的，甚至是画在图片上的，每次看到这都感觉对用户很不好，今天就打算写一个指针带移动动画的引导界面，以后拿来就用。

</pre><pre name="code" class="java">package com.example.tiyan_test;import java.util.ArrayList;import java.util.List;import android.app.Activity;import android.os.Bundle;import android.os.Handler;import android.support.v4.view.PagerAdapter;import android.support.v4.view.ViewPager;import android.support.v4.view.ViewPager.OnPageChangeListener;import android.view.View;import android.view.View.OnClickListener;import android.view.ViewGroup;import android.view.ViewTreeObserver.OnPreDrawListener;import android.view.Window;import android.view.animation.AnimationSet;import android.view.animation.TranslateAnimation;import android.widget.ImageView;import android.widget.ImageView.ScaleType;import android.widget.LinearLayout;import android.widget.Toast;/** * @author jiantoa88 *  */public class MainActivity extends Activity implements OnPageChangeListener {// 动态添加图片，只需将图片保存在数组中即可private int[] guides = { R.drawable.g1, R.drawable.g2, R.drawable.g3,R.drawable.g4 };private static final int TO_END = 0;// 设置标记 当到达最后一张时private static final int LEAVE_FROAM_END = 1;// 当离开最后一张时private List<View> guider_views = new ArrayList<View>();private ViewPager viewPager;private ImageView iv_start;private ImageView iv_currentDot;// 当前的坐标点private LinearLayout dotLayout;// 储存点的容器private int offset;// 记录坐标点的位移量private int currentPos = 0;// 记录当前的位置private GuidePaperAdapter adapter;@Overrideprotected void onCreate(Bundle savedInstanceState) {// TODO Auto-generated method stubsuper.onCreate(savedInstanceState);requestWindowFeature(Window.FEATURE_NO_TITLE);setContentView(R.layout.activity_main);initView();}private void initView() {// TODO Auto-generated method stubdotLayout = (LinearLayout) findViewById(R.id.dot_contain);viewPager = (ViewPager) findViewById(R.id.viewPager);iv_currentDot = (ImageView) findViewById(R.id.cur_dot);iv_start = (ImageView) findViewById(R.id.open);iv_start.setOnClickListener(new OnClickListener() {@Overridepublic void onClick(View v) {// TODO Auto-generated method stubToast.makeText(MainActivity.this, "点击了体验", Toast.LENGTH_SHORT).show();}});initDot();initGuide();// 当iv_currentDot的所在的树形层次将要被绘出时 此方法被调用iv_currentDot.getViewTreeObserver().addOnPreDrawListener(new OnPreDrawListener() {@Overridepublic boolean onPreDraw() {// TODO Auto-generated method stub// 获取点图片的宽度，点的移动动画时用offset = iv_currentDot.getWidth();return true;}});adapter = new GuidePaperAdapter(guider_views);viewPager.setAdapter(adapter);viewPager.setOnPageChangeListener(this);}private void initGuide() {// TODO Auto-generated method stubguider_views.clear();ImageView view = null;for (int i = 0; i < guides.length; i++) {view = buildImageView(guides[i]);guider_views.add(view);}}/** * @param id * @return 初始化guide的 view */private ImageView buildImageView(int id) {ImageView iv = new ImageView(this);iv.setImageResource(id);ViewGroup.LayoutParams params = new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT,ViewGroup.LayoutParams.MATCH_PARENT);iv.setLayoutParams(params);iv.setScaleType(ScaleType.FIT_XY);return iv;}/** * * 初始化点 ImageVIew *  * @return 返回true说明初始化点成功，否则实例化失败 */private boolean initDot() {if (guides.length > 0) {ImageView dotView;for (int i = 0; i < guides.length; i++) {dotView = new ImageView(this);dotView.setImageResource(R.drawable.dot1_w);dotView.setLayoutParams(new LinearLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT,ViewGroup.LayoutParams.WRAP_CONTENT, 1.0f));dotLayout.addView(dotView);}return true;} else {return false;}}class GuidePaperAdapter extends PagerAdapter {private List<View> views;public GuidePaperAdapter(List<View> views) {super();this.views = views;}@Overridepublic int getCount() {// TODO Auto-generated method stubreturn views.size();}@Overridepublic Object instantiateItem(ViewGroup container, int position) {// TODO Auto-generated method stubView view = views.get(position);container.addView(view);return view;}@Overridepublic void destroyItem(ViewGroup container, int position, Object object) {// TODO Auto-generated method stub// super.destroyItem(container, position, object);container.removeView(views.get(position));}@Overridepublic boolean isViewFromObject(View arg0, Object arg1) {// TODO Auto-generated method stubreturn arg0 == arg1;}}/** * 用handler通知iv_start 显示 */private Handler handler = new Handler() {public void handleMessage(android.os.Message msg) {if (msg.what == TO_END) {iv_start.setVisibility(View.VISIBLE);} else if (msg.what == LEAVE_FROAM_END) {iv_start.setVisibility(View.GONE);}};};@Overridepublic void onPageScrollStateChanged(int arg0) {// TODO Auto-generated method stub}@Overridepublic void onPageScrolled(int arg0, float arg1, int arg2) {// TODO Auto-generated method stub}@Overridepublic void onPageSelected(int position) {// 在此设置dot的移动动画moveCursorTo(position);// 当到最后一张时if (position == guides.length - 1) {handler.sendEmptyMessage(TO_END);} else {handler.sendEmptyMessage(LEAVE_FROAM_END);}currentPos = position;}/** * 滑动时 坐标点点移动动画 *  * @param position */private void moveCursorTo(int position) {AnimationSet animationSet = new AnimationSet(true);TranslateAnimation translateAnimation = new TranslateAnimation(offset* currentPos, offset * position, 0, 0);animationSet.addAnimation(translateAnimation);animationSet.setDuration(300);animationSet.setFillAfter(true);iv_currentDot.startAnimation(animationSet);}}

代码下载：http://download.csdn.net/detail/a_tao123/8331975

GitHub : https://github.com/jiantao88/Guide