logo
搜索
我的图书馆

发文章

发文工具

其他工具

留言交流
搜索
分享

android 欢迎引导页面 ViewPager实现

 东茹阁 2013-07-05
发表于 2012-10-25 13:43:32 |只看该作者 |倒序浏览
0
ViewPager需要android-support-v4.jar这个包的支持，来自google提供的一个附加包。大家搜下即可。
ViewPager主要用来组织一组数据，并且通过左右滑动的方式来展示。
现在的大多数应用都会有一个欢迎引导页面，如图所示，通过左右滑动来告知用户一些功能特性。

1334221992_9936.png

这个引导图效果用ViewPager可以很轻松的实现。
正如前面所说，ViewPager是用来展示一组数据的，所以肯定需要Adapter来绑定数据和view。先写一个Adapter：

  2. package com.notice.viewpagerd;
  3. import java.util.List;
  4. import android.os.Parcelable;
  5. import android.support.v4.view.PagerAdapter;
  6. import android.support.v4.view.ViewPager;
  7. import android.view.View;
  8. public class ViewPagerAdapter extends PagerAdapter{

  10. //界面列表
  11. private List<View> views;

  13. public ViewPagerAdapter (List<View> views){
  14.   this.views = views;
  15. }
  16. //销毁arg1位置的界面
  17. @Override
  18. public void destroyItem(View arg0, int arg1, Object arg2) {
  19.   ((ViewPager) arg0).removeView(views.get(arg1));  
  20. }
  21. @Override
  22. public void finishUpdate(View arg0) {
  23.   // TODO Auto-generated method stub
  24.   
  25. }
  26. //获得当前界面数
  27. @Override
  28. public int getCount() {
  29.   if (views != null)
  30.   {
  31.    return views.size();
  32.   }
  33.   
  34.   return 0;
  35. }

  37. //初始化arg1位置的界面
  38. @Override
  39. public Object instantiateItem(View arg0, int arg1) {
  40.   
  41.   ((ViewPager) arg0).addView(views.get(arg1), 0);
  42.   
  43.   return views.get(arg1);
  44. }
  45. //判断是否由对象生成界面
  46. @Override
  47. public boolean isViewFromObject(View arg0, Object arg1) {
  48.   return (arg0 == arg1);
  49. }
  50. @Override
  51. public void restoreState(Parcelable arg0, ClassLoader arg1) {
  52.   // TODO Auto-generated method stub
  53.   
  54. }
  55. @Override
  56. public Parcelable saveState() {
  57.   // TODO Auto-generated method stub
  58.   return null;
  59. }
  60. @Override
  61. public void startUpdate(View arg0) {
  62.   // TODO Auto-generated method stub
  63.   
  64. }
  65. }
复制代码
这里我们要绑定的每一个item就是一个引导界面，我们用一个list来保存。
通过继承PagerAdapter，并实现几个我写注释的方法即可。
布局界面比较简单，加入ViewPager组件，以及底部的引导小点：

  2. <?xml version="1.0" encoding="utf-8"?>
  3. <RelativeLayout xmlns:android="http://schemas./apk/res/android"
  4.     android:layout_width="fill_parent"
  5.     android:layout_height="fill_parent"
  6.     android:orientation="vertical" >
  7. <android.support.v4.view.ViewPager
  8.      android:id="@+id/viewpager"
  9.      android:layout_width="fill_parent"
  10.      android:layout_height="fill_parent"
  11.      />   
  12.    
  13.    
  14.     <LinearLayout
  15.         android:id="@+id/ll"
  16.      android:orientation="horizontal"
  17.      android:layout_width="wrap_content"
  18.      android:layout_height="wrap_content"
  19.      android:layout_marginBottom="24.0dip"
  20.      android:layout_alignParentBottom="true"
  21.      android:layout_centerHorizontal="true">
  22.      
  23.      <ImageView
  24.             android:layout_width="wrap_content"
  25.             android:layout_height="wrap_content"
  26.             android:layout_gravity="center_vertical"
  27.             android:clickable="true"
  28.             android:padding="15.0dip"
  29.             android:src="@drawable/dot" />
  30.         <ImageView
  31.             android:layout_width="wrap_content"
  32.             android:layout_height="wrap_content"
  33.             android:layout_gravity="center_vertical"
  34.             android:clickable="true"
  35.             android:padding="15.0dip"
  36.             android:src="@drawable/dot" />
  37.         <ImageView
  38.             android:layout_width="wrap_content"
  39.             android:layout_height="wrap_content"
  40.             android:layout_gravity="center_vertical"
  41.             android:clickable="true"
  42.             android:padding="15.0dip"
  43.             android:src="@drawable/dot" />
  44.         <ImageView
  45.             android:layout_width="wrap_content"
  46.             android:layout_height="wrap_content"
  47.             android:layout_gravity="center_vertical"
  48.             android:clickable="true"
  49.             android:padding="15.0dip"
  50.             android:src="@drawable/dot" />
  51.     </LinearLayout>
  52. </RelativeLayout>
复制代码
其中小点的图片用一个selector来控制颜色（设置item的enable为true或者false）

dot.xml:

  2. <?xml version="1.0" encoding="UTF-8"?>
  3. <selector
  4.   xmlns:android="http://schemas./apk/res/android">
  5.     <item android:state_enabled="true" android:drawable="@drawable/dark_dot" />
  6.     <item android:state_enabled="false" android:drawable="@drawable/white_dot" />
  7. </selector>
复制代码
下面就是写Activity了。

  2. package com.notice.viewpagerd;
  3. import java.util.ArrayList;
  4. import java.util.List;
  5. import android.app.Activity;
  6. import android.os.Bundle;
  7. import android.support.v4.view.ViewPager;
  8. import android.support.v4.view.ViewPager.OnPageChangeListener;
  9. import android.view.View;
  10. import android.view.View.OnClickListener;
  11. import android.widget.ImageView;
  12. import android.widget.LinearLayout;
  13. public class ViewPagerDemoActivity extends Activity implements OnClickListener, OnPageChangeListener{

  15. private ViewPager vp;
  16. private ViewPagerAdapter vpAdapter;
  17. private List<View> views;

  19. //引导图片资源
  20. private static final int[] pics = { R.drawable.whatsnew_00,
  21.    R.drawable.whatsnew_01, R.drawable.whatsnew_02,
  22.    R.drawable.whatsnew_03 };

  24. //底部小店图片
  25. private ImageView[] dots ;

  27. //记录当前选中位置
  28. private int currentIndex;

  30.     /** Called when the activity is first created. */
  31.     @Override
  32.     public void onCreate(Bundle savedInstanceState) {
  33.         super.onCreate(savedInstanceState);
  34.         setContentView(R.layout.main);
  35.         
  36.         views = new ArrayList<View>();
  37.       
  38.         LinearLayout.LayoutParams mParams = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT,
  39.           LinearLayout.LayoutParams.WRAP_CONTENT);
  40.         
  41.         //初始化引导图片列表
  42.         for(int i=0; i<pics.length; i++) {
  43.          ImageView iv = new ImageView(this);
  44.          iv.setLayoutParams(mParams);
  45.          iv.setImageResource(pics[i]);
  46.          views.add(iv);
  47.         }
  48.         vp = (ViewPager) findViewById(R.id.viewpager);
  49.         //初始化Adapter
  50.         vpAdapter = new ViewPagerAdapter(views);
  51.         vp.setAdapter(vpAdapter);
  52.         //绑定回调
  53.         vp.setOnPageChangeListener(this);
  54.         
  55.         //初始化底部小点
  56.         initDots();
  57.         
  58.     }
  59.    
  60.     private void initDots() {
  61.   LinearLayout ll = (LinearLayout) findViewById(R.id.ll);
  62.   dots = new ImageView[pics.length];
  63.   //循环取得小点图片
  64.   for (int i = 0; i < pics.length; i++) {
  65.    dots[i] = (ImageView) ll.getChildAt(i);
  66.    dots[i].setEnabled(true);//都设为灰色
  67.    dots[i].setOnClickListener(this);
  68.    dots[i].setTag(i);//设置位置tag，方便取出与当前位置对应
  69.   }
  70.   currentIndex = 0;
  71.   dots[currentIndex].setEnabled(false);//设置为白色，即选中状态
  72.     }
  73.    
  74.     /**
  75.      *设置当前的引导页
  76.      */
  77.     private void setCurView(int position)
  78.     {
  79.   if (position < 0 || position >= pics.length) {
  80.    return;
  81.   }
  82.   vp.setCurrentItem(position);
  83.     }
  84.     /**
  85.      *这只当前引导小点的选中
  86.      */
  87.     private void setCurDot(int positon)
  88.     {
  89.   if (positon < 0 || positon > pics.length - 1 || currentIndex == positon) {
  90.    return;
  91.   }
  92.   dots[positon].setEnabled(false);
  93.   dots[currentIndex].setEnabled(true);
  94.   currentIndex = positon;
  95.     }
  96.     //当滑动状态改变时调用
  97. @Override
  98. public void onPageScrollStateChanged(int arg0) {
  99.   // TODO Auto-generated method stub
  100.   
  101. }
  102. //当当前页面被滑动时调用
  103. @Override
  104. public void onPageScrolled(int arg0, float arg1, int arg2) {
  105.   // TODO Auto-generated method stub
  106.   
  107. }
  108. //当新的页面被选中时调用
  109. @Override
  110. public void onPageSelected(int arg0) {
  111.   //设置底部小点选中状态
  112.   setCurDot(arg0);
  113. }
  114. @Override
  115. public void onClick(View v) {
  116.   int position = (Integer)v.getTag();
  117.   setCurView(position);
  118.   setCurDot(position);
  119. }
  120. }
复制代码
注意实现OnClickListener, OnPageChangeListener接口，监听小点的点击事件以及viewPager的滑动，在相应的回调方法中设置小点的enable状态，我相信这个部分代码比我讲的清楚，就是判断当前选中的位置对相应的小点进行设置～

可以看到ViewPager还是一个非常简单，也非常实用的一个控件。


取自：http://blog.csdn.net/notice520/article/details/7454568

本主题由 jiayouhe123 于 2012-10-25 14:23 移动

    本站是提供个人知识管理的网络存储空间，所有内容均由用户发布，不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息，谨防诈骗。如发现有害或侵权内容，请点击一键举报。
    转藏 分享 献花（0）

    来自： 东茹阁 > 《学无止境》

    举报/认领

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多