ViewPager實現引導頁

 

  1 package com.example.viewpage2;
  2 
  3 import java.util.ArrayList;
  4 import java.util.List;
  5 
  6 import android.os.Bundle;
  7 import android.app.Activity;
  8 import android.support.v4.view.ViewPager;
  9 import android.support.v4.view.ViewPager.OnPageChangeListener;
 10 import android.view.Menu;
 11 import android.view.View;
 12 import android.view.View.OnClickListener;
 13 import android.view.ViewGroup.LayoutParams;
 14 import android.widget.ImageView;
 15 import android.widget.LinearLayout;
 16 
 17 public class MainActivity extends Activity implements OnPageChangeListener,OnClickListener{
 18 
 19     private ViewPager vp;
 20     private List<View> views;
 21     private int[] imgs = { R.drawable.img1, R.drawable.img2, R.drawable.img3,
 22             R.drawable.img4 };
 23     private ViewPageAdapter vpa;
 24     private LinearLayout ll;
 25     private ImageView[] points;
 26     private int index;
 27 
 28     @Override
 29     protected void onCreate(Bundle savedInstanceState) {
 30         super.onCreate(savedInstanceState);
 31         setContentView(R.layout.activity_main);
 32         initView();
 33         initData();
 34         initPoint();
 35 
 36     }
 37 
 38     private void initView() {
 39         ll = (LinearLayout) findViewById(R.id.ll);
 40         vp = (ViewPager) findViewById(R.id.vp);
 41         views = new ArrayList<View>();
 42     }
 43 
 44     private void initData() {
 45         LayoutParams lp = new LayoutParams(LayoutParams.MATCH_PARENT,
 46                 LayoutParams.MATCH_PARENT);
 47         for (int i : imgs) {
 48             ImageView img = new ImageView(this);
 49             img.setImageResource(i);
 50             img.setLayoutParams(lp);
 51             views.add(img);
 52 
 53         }
 54         vpa = new ViewPageAdapter(views);
 55         vp.setAdapter(vpa);
 56         vp.setOnPageChangeListener(this);
 57     }
 58     private void initPoint(){
 59         points = new ImageView[imgs.length];
 60         //首先先定義一個imageview數組來接收他們，由於他們在linearlayout裏
 61         //因此經過循環把他們都放在數組裏，而且讓他們都設置成未選中狀態，
 62         for (int i = 0; i < ll.getChildCount(); i++) {
 63             points[i] = (ImageView) ll.getChildAt(i);
 64             points[i].setImageResource(R.drawable.point_two);
 65             points[i].setOnClickListener(this);
 66             points[i].setTag(i);
 67         }
 68         //由於第一頁是選中狀態因此咱們要定義一個數組下表來表示選中的狀態
 69         index = 0;
 70         points[index].setImageResource(R.drawable.point_one);
 71     }
 72 
 73     @Override
 74     public void onPageScrollStateChanged(int arg0) {
 75         // TODO Auto-generated method stub
 76         
 77     }
 78 
 79     @Override
 80     public void onPageScrolled(int arg0, float arg1, int arg2) {
 81         // TODO Auto-generated method stub
 82         
 83     }
 84 
 85     @Override//新頁面選中時候調用
 86     public void onPageSelected(int position) {
 87         for (int i = 0; i < ll.getChildCount(); i++) {
 88             points[i] = (ImageView) ll.getChildAt(i);
 89             points[i].setImageResource(R.drawable.point_two);
 90         }
 91         points[position].setImageResource(R.drawable.point_one);
 92         
 93     }
 94 
 95     @Override
 96     public void onClick(View v) {
 97         int i = (Integer)v.getTag();
 98         vp.setCurrentItem(i);
 99         
100     }
101 
102 }

 

 1 <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
 2     xmlns:tools="http://schemas.android.com/tools"
 3     android:layout_width="match_parent"
 4     android:layout_height="match_parent" >
 5 
 6     <android.support.v4.view.ViewPager
 7         android:id="@+id/vp"
 8         android:layout_width="match_parent"
 9         android:layout_height="match_parent" >
10     </android.support.v4.view.ViewPager>
11 
12     <LinearLayout
13         android:id="@+id/ll"
14         android:layout_width="wrap_content"
15         android:layout_height="wrap_content"
16         android:orientation="horizontal"
17         android:layout_gravity="bottom|center_horizontal" >
18 
19         <ImageView
20             android:layout_width="wrap_content"
21             android:layout_height="wrap_content"
22             android:src="@drawable/point_one"
23             android:padding="15dp"
24             />
25 
26         <ImageView
27             android:layout_width="wrap_content"
28             android:layout_height="wrap_content"
29             android:src="@drawable/point_two"
30               android:padding="15dp" />
31 
32         <ImageView
33             android:layout_width="wrap_content"
34             android:layout_height="wrap_content"
35             android:src="@drawable/point_two"
36               android:padding="15dp" />
37 
38         <ImageView
39             android:layout_width="wrap_content"
40             android:layout_height="wrap_content"
41             android:src="@drawable/point_two"
42               android:padding="15dp" />
43     </LinearLayout>
44     <Button 
45            android:layout_width="wrap_content"
46             android:layout_height="wrap_content"
47             android:text="跳過引導頁"
48             android:layout_marginLeft="200dp"
49         
50         />
51 
52 </FrameLayout>

package com.example.viewpage2;

import java.util.List;

import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;

public class ViewPageAdapter extends PagerAdapter {
     List<View> views;
     public ViewPageAdapter(List<View> views){
         this.views = views;
     }
    @Override
    //返回頁數
    public int getCount() {
        // TODO Auto-generated method stub
        return views.size();
    }
    @Override
    //初始化position數值下的圖片
    public Object instantiateItem(View container, int position) {
        ((ViewPager)container).addView(views.get(position));
        return views.get(position);
    }
    @Override
    //判斷是否由界面生成對象
    public boolean isViewFromObject(View arg0, Object arg1) {
        // TODO Auto-generated method stub
        return arg0==arg1;
    }
    @Override
    //銷燬上一個圖片
    public void destroyItem(ViewGroup container, int position, Object object) {
        ((ViewPager)container).removeView(views.get(position));
    }
    
    

}

 

首先的思想就是佈局，其實這個佈局還挺簡單的用到的是框架佈局，而後下面有一個線性佈局橫向排列，有四張圖片一個點點。 

 

佈局有了以後咱們要着手寫代碼。 要聲明viewpager，還要聲明一個保存view的list，還要聲明一個存圖片id的數組， 而後咱們要有兩個方法，一個是用來初始化view的，另外一個是初始化數據的，最後咋oncrete方法裏調用就能夠  private ViewPager vp;  private List<View> views;  private int[] imgs = { R.drawable.img1, R.drawable.img2, R.drawable.img3,    R.drawable.img4 };  private ViewPageAdapter vpa;  private void initView() {   vp = (ViewPager) findViewById(R.id.vp);   views = new ArrayList<View>();  }

 private void initData() {   LayoutParams lp = new LayoutParams(LayoutParams.MATCH_PARENT,     LayoutParams.MATCH_PARENT);        爲了設置圖片的寬高   for (int i : imgs) {                               對存圖片id的數組進行循環，每循環一次都要新建一個    ImageView img = new ImageView(this);       ImageView ，而後把這個ImageView設置大小，放在    img.setImageResource(i);                   裏面就能夠；    img.setLayoutParams(lp);    views.add(img);

  }   vpa = new ViewPageAdapter(views);    initPoint();   綁定adapter   vp.setAdapter(vpa);   vp.setOnPageChangeListener(this);     設置事件，爲了讓圓點與之匹配  } 接下來數據和視圖綁定咱們都要用到adapter，由於沒有可用adapter，因此咱們要本身寫 咱們要繼承pageradapter，這個是針對有一張張視圖的空間的。 而後咱們要實現裏面的四個方法，

public class ViewPageAdapter extends PagerAdapter {   private List<View> views;   public ViewPageAdapter(List<View> views){     構造方法用來傳遞那個已經有圖片的list    this.views = views;   }  @Override  //返回頁數  public int getCount() {   // TODO Auto-generated method stub   return views.size();  }  @Override  //初始化position數值下的圖片  public Object instantiateItem(View container, int position) {      數值的下標是用0開始   ((ViewPager)container).addView(views.get(position));       第一次打開的時候它會建立兩個界面爲0,1   return views.get(position);                                1當往右劃時候又會建立2，這時候內存中有三  }                                                                  個界面，             2當再劃的時候會銷燬第0個界面，並  @Override                                                          且建立第三個界面，  //判斷是否由界面生成對象                                             當  public boolean isViewFromObject(View arg0, Object arg1) {          3當在劃的時候會銷燬第1個界面，由於後面   // TODO Auto-generated method stub                         沒有再也不建立，總結就是開頭和結尾的頁面   return arg0==arg1;                                         內存有兩個圖片，中間的過程內存有三張  }  @Override  //銷燬上一個圖片  public void destroyItem(ViewGroup container, int position, Object object) {   ((ViewPager)container).removeView(views.get(position));  }

} 最後將adapter和viewpager綁定就能夠了

在此基礎之上咱們要加上圓點的功能，首先咱們也寫一個類來初始化這些圓點（就是得到他們） 第一步咱們來定義一個imgview數組；而後在這個方法裏實例化，數組的長度就爲咱們圖片的長度。 第二步這些圓點存在一個線性佈局裏，因此咱們要聲明這個線性佈局，而後經過循環將這些圓點放進這個數組裏，而且把他們 設置成沒有選中的狀態。 第三步咱們還須要一個下標來跟進這個圓點選中的狀態，因此聲明這個圓點的下標，而且設置選中狀態；  private LinearLayout ll;  private ImageView[] points;  private int index;

  private void initPoint(){   points = new ImageView[imgs.length];   //首先先定義一個imageview數組來接收他們，由於他們在linearlayout裏   //因此經過循環把他們都放在數組裏，而且讓他們都設置成未選中狀態，   for (int i = 0; i < ll.getChildCount(); i++) {    points[i] = (ImageView) ll.getChildAt(i);    points[i].setImageResource(R.drawable.point_two);    points[i].setOnClickListener(this);      設置點擊事件，點擊圓點可以跳轉到對應的界面    points[i].setTag(i);   }   //由於第一頁是選中狀態因此咱們要定義一個數組下表來表示選中的狀態   index = 0;   points[index].setImageResource(R.drawable.point_one);  }

已經把這些數據放進數組裏了，下一步咱們要實現滑動來跟圓點匹配，咱們要想實現這個功能必定要配合監聽器，這裏咱們要實現

OnPageChangeListener這個監聽器，而後一共有三個方法，咱們主要用最後一個， @Override  public void onPageScrollStateChanged(int arg0) {   // TODO Auto-generated method stub     }

 @Override  public void onPageScrolled(int arg0, float arg1, int arg2) {   // TODO Auto-generated method stub     }

 @Override//新頁面選中時候調用  public void onPageSelected(int position) {   for (int i = 0; i < ll.getChildCount(); i++) {//首先必定咱們要把這些圓點都設置成空    points[i] = (ImageView) ll.getChildAt(i);           points[i].setImageResource(R.drawable.point_two);     }   points[position].setImageResource(R.drawable.point_one);而後在讓他根據選擇的頁數來設置選中的圓點。     } 最後咱們還要實現一個功能就是點擊的時候能夠快速的跳轉頁面， 讓每一個圓點都有點擊事件，而且把它的下標一塊兒傳遞，    points[i].setOnClickListener(this);    points[i].setTag(i);

 

 @Override  public void onClick(View v) {   int i = (Integer)v.getTag();得到下標   vp.setCurrentItem(i);    設置頁面     }