Android利用ViewPager实现用户引导界面效果的方法

本文实例讲述了Android利用ViewPager实现用户引导界面效果。分享给大家供大家参考，具体如下：
我相信有很多朋友在装完软件首次打开时，有很多软件都有一个软件功能介绍，
例如刚装完微信打开它，有很多介绍微信功能的图片，并且在屏幕下方有很多小圆点提示你当前图片的位置。
今天我就来实现这么个功能
所实现的功能：
1.可以左右滑动功能图片。
2.图片的索引看出当前图片所在的位置。
3.可循环滑动。
4.图片的索引带有动画效果。
本次学习主要是利用ViewPager实现用户引导界面
在这里，我们需要用到google提到的一个支持包——Android-support-v4.jar，这个包包含了一些非常有用的类，其中就是ViewPager类来实现页面之间的切换操作，可以去官网下载这个包使用谷歌提供的支持库（Android）
关于android-support-v4.jar的详细信息，大家可以访问google官方网站：http://developer.android.com/sdk/compatibility-library.html
下面是我的实现
GuideActivity.Java

/** * @author manymore13 */public class GuideActivity extends Activity {// 到达最后一张private static final int TO_THE_END = 0;// 离开最后一张private static final int LEAVE_FROM_END = 1;// 如果想直接应用到你的项目中，只需在这里添加删除图片id即可private int[] ids = { R.drawable.guide_1,R.drawable.guide_3, R.drawable.guide_5,R.drawable.guide_6,R.drawable.guide_7 };private List<View> guides = new ArrayList<View>（）;private ViewPager pager;private ImageView start; // 点击体验private ImageView curDot;private LinearLayout dotContain; // 存储点的容器private int offset; // 位移量private int curPos = 0; // 记录当前的位置/** Called when the activity is first created. */@Overridepublic void onCreate（Bundle savedInstanceState） {super.onCreate（savedInstanceState）;requestWindowFeature（Window.FEATURE_NO_TITLE）;setContentView（R.layout.main）;init（）;}private ImageView buildImageView（int id）{ImageView iv = new ImageView（this）;iv.setImageResource（id）;ViewGroup.LayoutParams params = new ViewGroup.LayoutParams（ViewGroup.LayoutParams.FILL_PARENT,ViewGroup.LayoutParams.FILL_PARENT）;iv.setLayoutParams（params）;iv.setScaleType（ScaleType.FIT_XY）;return iv;}// 功能介绍界面的初始化private void init（）{this.getView（）;initDot（）;ImageView iv = null;guides.clear（）;for （int i = 0; i < ids.length; i++） {iv = buildImageView（ids[i]）;guides.add（iv）;}System.out.println（"guild_size="+guides.size（））;// 当curDot的所在的树形层次将要被绘出时此方法被调用curDot.getViewTreeObserver（）.addOnPreDrawListener（new OnPreDrawListener（） {public boolean onPreDraw（） {// 获取ImageView的宽度也就是点图片的宽度offset = curDot.getWidth（）;return true;}}）;final GuidePagerAdapter adapter = new GuidePagerAdapter（guides）;// ViewPager设置数据适配器，这个类似于使用ListView时用的adapterpager.setAdapter（adapter）;pager.clearAnimation（）;// 为Viewpager添加事件监听器 OnPageChangeListenerpager.setOnPageChangeListener（new ViewPager.SimpleOnPageChangeListener（）{@Overridepublic void onPageSelected（int position）{int pos = position % ids.length;moveCursorTo（pos）;if （pos == ids.length-1） {// 到最后一张了handler.sendEmptyMessageDelayed（TO_THE_END, 500）;} else if （curPos == ids.length - 1） {handler.sendEmptyMessageDelayed（LEAVE_FROM_END, 100）;}curPos = pos;super.onPageSelected（position）;}}）;}/** * 在layout中实例化一些View */private void getView（）{dotContain = （LinearLayout）this.findViewById（R.id.dot_contain）;pager = （ViewPager） findViewById（R.id.contentPager）;curDot = （ImageView） findViewById（R.id.cur_dot）;start = （ImageView） findViewById（R.id.open）;start.setOnClickListener（new OnClickListener（）{public void onClick（View v）{// 点击体验}}）;}/** * 初始化点 ImageVIew * @return 返回true说明初始化点成功，否则实例化失败 */private boolean initDot（）{if（ids.length > 0）{ImageView dotView ;for（int i=0; i<ids.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））;dotContain.addView（dotView）;}return true;}else{return false;}}/** * 移动指针到相邻的位置 动画 * @param position * 指针的索引值 * */private void moveCursorTo（int position） {AnimationSet animationSet = new AnimationSet（true）;TranslateAnimation tAnim =new TranslateAnimation（offset*curPos, offset*position, 0, 0）;animationSet.addAnimation（tAnim）;animationSet.setDuration（300）;animationSet.setFillAfter（true）;curDot.startAnimation（animationSet）;}Handler handler = new Handler（） {@Overridepublic void handleMessage（Message msg） {if （msg.what == TO_THE_END）start.setVisibility（View.VISIBLE）;else if （msg.what == LEAVE_FROM_END）start.setVisibility（View.GONE）;}};// ViewPager 适配器class GuidePagerAdapter extends PagerAdapter{private List<View> views;public GuidePagerAdapter（List<View> views）{this.views=views;}@Overridepublic void destroyItem（View arg0, int arg1, Object arg2） {（（ViewPager） arg0）.removeView（views.get（arg1 % views.size（）））;}@Overridepublic void finishUpdate（View arg0） {}@Overridepublic int getCount（） {// 注意这里一定要返回一个稍微大点值,不然滑到顶就滑不动了return views.size（）*20;}@Overridepublic Object instantiateItem（View arg0, int arg1） {Log.e（"tag", "instantiateItem = "+arg1）;（（ViewPager） arg0）.addView（views.get（arg1 % views.size（））,0）;return views.get（arg1 % views.size（））;}@Overridepublic boolean isViewFromObject（View arg0, Object arg1） {return arg0 == （arg1）;}@Overridepublic void restoreState（Parcelable arg0, ClassLoader arg1） {}@Overridepublic Parcelable saveState（） {return null;}@Overridepublic void startUpdate（View arg0） {}}}

下面是布局main.xml

<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="fill_parent"android:layout_height="fill_parent"android:orientation="vertical" ><android.support.v4.view.ViewPagerandroid:id="@+id/contentPager"android:layout_width="fill_parent"android:layout_height="fill_parent"android:layout_gravity="center"android:flipInterval="30"android:persistentDrawingCache="animation" /><FrameLayoutandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_alignParentBottom="true"android:layout_centerHorizontal="true"android:gravity="center"android:layout_marginBottom="22.0dip"><LinearLayoutandroid:id="@+id/dot_contain"android:layout_width="wrap_content"android:layout_height="wrap_content"android:gravity="center"android:orientation="horizontal" ></LinearLayout><ImageViewandroid:id="@+id/cur_dot"android:layout_width="wrap_content"android:layout_height="wrap_content"android:src="@drawable/dot2_w" /></FrameLayout><ImageViewandroid:id="@+id/open"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_alignParentTop="true"android:layout_alignParentRight="true"android:clickable="true"android:src="@drawable/ic_open"android:visibility="gone" /></RelativeLayout>

运行效果：

更多关于Android相关内容感兴趣的读者可查看本站专题：《Android编程之activity操作技巧总结》、《Android资源操作技巧汇总》、《Android文件操作技巧汇总》、《Android操作SQLite数据库技巧总结》、《Android操作json格式数据技巧总结》、《Android数据库操作技巧总结》、《Android编程开发之SD卡操作方法汇总》、《Android开发入门与进阶教程》、《Android视图View技巧总结》及《Android控件用法总结》
希望本文所述对大家Android程序设计有所帮助。