(转)android UI进阶之用ViewPager实现欢迎引导页面

ViewPager需要android-support-v4.jar这个包的支持，来自google提供的一个附加包。大家搜下即可。

ViewPager主要用来组织一组数据，并且通过左右滑动的方式来展示。

现在的大多数应用都会有一个欢迎引导页面，如图所示，通过左右滑动来告知用户一些功能特性。


这个引导图效果用ViewPager可以很轻松的实现。

正如前面所说，ViewPager是用来展示一组数据的，所以肯定需要Adapter来绑定数据和view。先写一个Adapter：

 

[java] view plaincopy
  1. package com.notice.viewpagerd;  
  2.   
  3. import java.util.List;  
  4.   
  5. import android.os.Parcelable;  
  6. import android.support.v4.view.PagerAdapter;  
  7. import android.support.v4.view.ViewPager;  
  8. import android.view.View;  
  9.   
  10. public class ViewPagerAdapter extends PagerAdapter{  
  11.       
  12.     //界面列表  
  13.     private List<View> views;  
  14.       
  15.     public ViewPagerAdapter (List<View> views){  
  16.         this.views = views;  
  17.     }  
  18.   
  19.     //销毁arg1位置的界面  
  20.     @Override  
  21.     public void destroyItem(View arg0, int arg1, Object arg2) {  
  22.         ((ViewPager) arg0).removeView(views.get(arg1));       
  23.     }  
  24.   
  25.     @Override  
  26.     public void finishUpdate(View arg0) {  
  27.         // TODO Auto-generated method stub  
  28.           
  29.     }  
  30.   
  31.     //获得当前界面数  
  32.     @Override  
  33.     public int getCount() {  
  34.         if (views != null)  
  35.         {  
  36.             return views.size();  
  37.         }  
  38.           
  39.         return 0;  
  40.     }  
  41.       
  42.   
  43.     //初始化arg1位置的界面  
  44.     @Override  
  45.     public Object instantiateItem(View arg0, int arg1) {  
  46.           
  47.         ((ViewPager) arg0).addView(views.get(arg1), 0);  
  48.           
  49.         return views.get(arg1);  
  50.     }  
  51.   
  52.     //判断是否由对象生成界面  
  53.     @Override  
  54.     public boolean isViewFromObject(View arg0, Object arg1) {  
  55.         return (arg0 == arg1);  
  56.     }  
  57.   
  58.     @Override  
  59.     public void restoreState(Parcelable arg0, ClassLoader arg1) {  
  60.         // TODO Auto-generated method stub  
  61.           
  62.     }  
  63.   
  64.     @Override  
  65.     public Parcelable saveState() {  
  66.         // TODO Auto-generated method stub  
  67.         return null;  
  68.     }  
  69.   
  70.     @Override  
  71.     public void startUpdate(View arg0) {  
  72.         // TODO Auto-generated method stub  
  73.           
  74.     }  
  75.   
  76. }  

 


这里我们要绑定的每一个item就是一个引导界面，我们用一个list来保存。

通过继承PagerAdapter，并实现几个我写注释的方法即可。

布局界面比较简单，加入ViewPager组件，以及底部的引导小点：

 

[html] view plaincopy
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  3.     android:layout_width="fill_parent"  
  4.     android:layout_height="fill_parent"  
  5.     android:orientation="vertical" >  
  6.   
  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.   
  31.         <ImageView  
  32.             android:layout_width="wrap_content"  
  33.             android:layout_height="wrap_content"  
  34.             android:layout_gravity="center_vertical"  
  35.             android:clickable="true"  
  36.             android:padding="15.0dip"  
  37.             android:src="@drawable/dot" />  
  38.   
  39.         <ImageView  
  40.             android:layout_width="wrap_content"  
  41.             android:layout_height="wrap_content"  
  42.             android:layout_gravity="center_vertical"  
  43.             android:clickable="true"  
  44.             android:padding="15.0dip"  
  45.             android:src="@drawable/dot" />  
  46.   
  47.         <ImageView  
  48.             android:layout_width="wrap_content"  
  49.             android:layout_height="wrap_content"  
  50.             android:layout_gravity="center_vertical"  
  51.             android:clickable="true"  
  52.             android:padding="15.0dip"  
  53.             android:src="@drawable/dot" />  
  54.   
  55.     </LinearLayout>  
  56.   
  57. </RelativeLayout>  


其中小点的图片用一个selector来控制颜色（设置item的enable为true或者false）

 

dot.xml:

 

[html] view plaincopy
  1. <?xml version="1.0" encoding="UTF-8"?>  
  2. <selector  
  3.   xmlns:android="http://schemas.android.com/apk/res/android">  
  4.     <item android:state_enabled="true" android:drawable="@drawable/dark_dot" />  
  5.     <item android:state_enabled="false" android:drawable="@drawable/white_dot" />  
  6. </selector>  

 


下面就是写Activity了。

 

[java] view plaincopy
  1. package com.notice.viewpagerd;  
  2.   
  3. import java.util.ArrayList;  
  4. import java.util.List;  
  5.   
  6. import android.app.Activity;  
  7. import android.os.Bundle;  
  8. import android.support.v4.view.ViewPager;  
  9. import android.support.v4.view.ViewPager.OnPageChangeListener;  
  10. import android.view.View;  
  11. import android.view.View.OnClickListener;  
  12. import android.widget.ImageView;  
  13. import android.widget.LinearLayout;  
  14.   
  15. public class ViewPagerDemoActivity extends Activity implements OnClickListener, OnPageChangeListener{  
  16.       
  17.     private ViewPager vp;  
  18.     private ViewPagerAdapter vpAdapter;  
  19.     private List<View> views;  
  20.       
  21.     //引导图片资源  
  22.     private static final int[] pics = { R.drawable.whatsnew_00,  
  23.             R.drawable.whatsnew_01, R.drawable.whatsnew_02,  
  24.             R.drawable.whatsnew_03 };  
  25.       
  26.     //底部小店图片  
  27.     private ImageView[] dots ;  
  28.       
  29.     //记录当前选中位置  
  30.     private int currentIndex;  
  31.       
  32.     /** Called when the activity is first created. */  
  33.     @Override  
  34.     public void onCreate(Bundle savedInstanceState) {  
  35.         super.onCreate(savedInstanceState);  
  36.         setContentView(R.layout.main);  
  37.           
  38.         views = new ArrayList<View>();  
  39.          
  40.         LinearLayout.LayoutParams mParams = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT,  
  41.                 LinearLayout.LayoutParams.WRAP_CONTENT);  
  42.           
  43.         //初始化引导图片列表  
  44.         for(int i=0; i<pics.length; i++) {  
  45.             ImageView iv = new ImageView(this);  
  46.             iv.setLayoutParams(mParams);  
  47.             iv.setImageResource(pics[i]);  
  48.             views.add(iv);  
  49.         }  
  50.         vp = (ViewPager) findViewById(R.id.viewpager);  
  51.         //初始化Adapter  
  52.         vpAdapter = new ViewPagerAdapter(views);  
  53.         vp.setAdapter(vpAdapter);  
  54.         //绑定回调  
  55.         vp.setOnPageChangeListener(this);  
  56.           
  57.         //初始化底部小点  
  58.         initDots();  
  59.           
  60.     }  
  61.       
  62.     private void initDots() {  
  63.         LinearLayout ll = (LinearLayout) findViewById(R.id.ll);  
  64.   
  65.         dots = new ImageView[pics.length];  
  66.   
  67.         //循环取得小点图片  
  68.         for (int i = 0; i < pics.length; i++) {  
  69.             dots[i] = (ImageView) ll.getChildAt(i);  
  70.             dots[i].setEnabled(true);//都设为灰色  
  71.             dots[i].setOnClickListener(this);  
  72.             dots[i].setTag(i);//设置位置tag，方便取出与当前位置对应  
  73.         }  
  74.   
  75.         currentIndex = 0;  
  76.         dots[currentIndex].setEnabled(false);//设置为白色，即选中状态  
  77.     }  
  78.       
  79.     /** 
  80.      *设置当前的引导页  
  81.      */  
  82.     private void setCurView(int position)  
  83.     {  
  84.         if (position < 0 || position >= pics.length) {  
  85.             return;  
  86.         }  
  87.   
  88.         vp.setCurrentItem(position);  
  89.     }  
  90.   
  91.     /** 
  92.      *这只当前引导小点的选中  
  93.      */  
  94.     private void setCurDot(int positon)  
  95.     {  
  96.         if (positon < 0 || positon > pics.length - 1 || currentIndex == positon) {  
  97.             return;  
  98.         }  
  99.   
  100.         dots[positon].setEnabled(false);  
  101.         dots[currentIndex].setEnabled(true);  
  102.   
  103.         currentIndex = positon;  
  104.     }  
  105.   
  106.     //当滑动状态改变时调用  
  107.     @Override  
  108.     public void onPageScrollStateChanged(int arg0) {  
  109.         // TODO Auto-generated method stub  
  110.           
  111.     }  
  112.   
  113.     //当当前页面被滑动时调用  
  114.     @Override  
  115.     public void onPageScrolled(int arg0, float arg1, int arg2) {  
  116.         // TODO Auto-generated method stub  
  117.           
  118.     }  
  119.   
  120.     //当新的页面被选中时调用  
  121.     @Override  
  122.     public void onPageSelected(int arg0) {  
  123.         //设置底部小点选中状态  
  124.         setCurDot(arg0);  
  125.     }  
  126.   
  127.     @Override  
  128.     public void onClick(View v) {  
  129.         int position = (Integer)v.getTag();  
  130.         setCurView(position);  
  131.         setCurDot(position);  
  132.     }  
  133. }  


注意实现OnClickListener, OnPageChangeListener接口，监听小点的点击事件以及viewPager的滑动，在相应的回调方法中设置小点的enable状态，我相 信这个部分代码比我讲的清楚，就是判断当前选中的位置对相应的小点进行设置～

 

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

posted @ 2012-08-23 10:22  幻星宇  阅读(291)  评论(0)  编辑  收藏  举报