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. */ @Override public 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时用的adapter pager.setAdapter(adapter); pager.clearAnimation(); // 为Viewpager添加事件监听器 OnPageChangeListener pager.setOnPageChangeListener(new ViewPager.SimpleOnPageChangeListener(){ @Override public 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() { @Override public 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; } @Override public void destroyItem(View arg0, int arg1, Object arg2) { ((ViewPager) arg0).removeView(views.get(arg1 % views.size())); } @Override public void finishUpdate(View arg0) { } @Override public int getCount() { // 注意这里一定要返回一个稍微大点值,不然滑到顶就滑不动了 return views.size()*20; } @Override public 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()); } @Override public boolean isViewFromObject(View arg0, Object arg1) { return arg0 == (arg1); } @Override public void restoreState(Parcelable arg0, ClassLoader arg1) { } @Override public Parcelable saveState() { return null; } @Override public 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.ViewPager android:id="@+id/contentPager" android:layout_width="fill_parent" android:layout_height="fill_parent" android:layout_gravity="center" android:flipInterval="30" android:persistentDrawingCache="animation" /> <FrameLayout android: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"> <LinearLayout android:id="@+id/dot_contain" android:layout_width="wrap_content" android:layout_height="wrap_content" android:gravity="center" android:orientation="horizontal" > </LinearLayout> <ImageView android:id="@+id/cur_dot" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/dot2_w" /> </FrameLayout> <ImageView android: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程序设计有所帮助。