利用ViewPager实现用户引导界面
2013-03-15 22:50
197 查看
利用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
下面是布局main.xml
![](http://img.my.csdn.net/uploads/201303/15/1363356757_1782.jpg)
本文参考链接:
Android
ViewPager控件的使用(基于ViewPager的横向相册)!!!
ViewPager谷歌官方介绍
本文相关代码:
guideDemo
我相信有很多朋友在装完软件首次打开时,有很多软件都有一个软件功能介绍,
例如刚装完微信打开它,有很多介绍微信功能的图片,并且在屏幕下方有很多小圆
点提示你当前图片的位置。
今天我就来实现这么个功能
所实现的功能:
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 LE***E_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(LE***E_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 == LE***E_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>运行效果:
![](http://img.my.csdn.net/uploads/201303/15/1363356757_1782.jpg)
本文参考链接:
Android
ViewPager控件的使用(基于ViewPager的横向相册)!!!
ViewPager谷歌官方介绍
本文相关代码:
guideDemo
相关文章推荐
- 利用ViewPager实现用户引导界面
- 利用ViewPager实现用户引导界面
- Android利用ViewPager实现用户引导界面效果的方法
- 利用viewpager实现引导界面demo
- 利用ViewPager实现引导界面+底部小圆点
- 利用Viewpager实现引导界面
- ViewPager之引导界面---实现欢迎引导页面
- 简单利用viewpagerindicator的两个类,而非整个工程实现程序引导页
- Android开发使用Viewpager实现程序引导界面
- android利用viewgroup实现应用引导界面的实现
- 【android】ViewPager实现引导界面以及进入下一个activity解决办法
- ViewPager实现带引导小圆点与自动跳转的引导界面
- 利用ViewPager实现欢迎引导页面
- 【Android UI设计与开发】第02期:引导界面(二)使用ViewPager实现欢迎引导页面
- 利用 ViewPager 等,实现带小圆球的图片滑动,并且只有第一次安装app时才出现欢迎界面(图片)
- 利用 ORMLite 数据库,ViewPager 等实现简易的登陆界面
- 督促学习——ViewPager实现滑动引导界面
- 【Android 界面效果27】利用ViewPager、Fragment、PagerTabStrip实现多页面滑动效果
- 仿zaker最新版本引导界面的视图联动效果(修改viewpager实现)
- 【Android UI设计与开发】第02期:引导界面(二)使用ViewPager实现欢迎引导页面