安卓第一次啓動引導頁使用ViewPager實現

咱們在安裝某個APP的時候，基本都會有一個引導頁的提示，他們能夠打廣告，或者介紹新功能的加入和使用說明等。
通常都支持滑動而且下面有幾個點，顯示共有多少頁和當前圖片的位置，在IOS上這個實現起來比較簡單，但在安卓上如何實現呢。
今天就和你們一塊兒來學習用官方v4支持包下的ViewPager來實現這個效果。

 

先上圖：

 

下面是個人實現，一個xml佈局，一個GuideActivity和一個GuidePageAdapter.

先上XML.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34

<?xml version="1.0" encoding="utf-8"?> <RelativeLayout     xmlns:android="http://schemas.android.com/apk/res/android"     xmlns:tools="http://schemas.android.com/tools"     android:layout_width="match_parent"     android:layout_height="match_parent"     tools:context="com.example.nanchen.guidepagedemo.GuideActivity">       <android.support.v4.view.ViewPager         android:id="@+id/guide_vp"         android:layout_width="match_parent"         android:layout_height="match_parent">     </android.support.v4.view.ViewPager>       <LinearLayout         android:id="@+id/guide_ll_point"         android:layout_width="match_parent"         android:layout_height="wrap_content"         android:orientation="horizontal"         android:layout_alignParentBottom="true"         android:layout_marginBottom="40dp"         android:gravity="center_horizontal">     </LinearLayout>       <ImageButton         android:layout_width="wrap_content"         android:layout_height="wrap_content"         android:id="@+id/guide_ib_start"         android:src="@mipmap/btn_start"         android:layout_centerHorizontal="true"         android:layout_above="@+id/guide_ll_point"         android:background="@null"         android:visibility="gone"/> </RelativeLayout>

　　

在準備一個Adapter,這個沒什麼好說的、

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59

package com.example.nanchen.guidepagedemo;   import android.support.v4.view.PagerAdapter; import android.view.View; import android.view.ViewGroup;   import java.util.List;   /**  * Created by 南塵 on 2016/7/10.  */ public class GuidePageAdapter extends PagerAdapter {       private List<View> viewList;       public GuidePageAdapter(List<View> viewList) {         this.viewList = viewList;     }       /**      * @return 返回頁面的個數      */     @Override     public int getCount() {         if (viewList != null){             return viewList.size();         }         return 0;     }       /**      * 判斷對象是否生成界面      * @param view      * @param object      * @return      */     @Override     public boolean isViewFromObject(View view, Object object) {         return view == object;     }       /**      * 初始化position位置的界面      * @param container      * @param position      * @return      */     @Override     public Object instantiateItem(ViewGroup container, int position) {         container.addView(viewList.get(position));         return viewList.get(position);     }         @Override     public void destroyItem(ViewGroup container, int position, Object object) {         container.removeView(viewList.get(position));     } }

　　

最後就是咱們的Activity了

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148

package com.example.nanchen.guidepagedemo;   import android.content.Intent; import android.os.Bundle; import android.support.v4.view.ViewPager; import android.support.v7.app.AppCompatActivity; import android.view.View; import android.view.ViewGroup; import android.view.Window; import android.widget.ImageButton; import android.widget.ImageView; import android.widget.LinearLayout;   import java.util.ArrayList; import java.util.List;   /**  * 實現首次啓動的引導頁面  */ public class GuideActivity extends AppCompatActivity implements ViewPager.OnPageChangeListener{       private ViewPager vp;     private int []imageIdArray;//圖片資源的數組     private List<View> viewList;//圖片資源的集合     private ViewGroup vg;//放置圓點       //實例化原點View     private ImageView iv_point;     private ImageView []ivPointArray;       //最後一頁的按鈕     private ImageButton ib_start;     @Override     protected void onCreate(Bundle savedInstanceState) {         super.onCreate(savedInstanceState);         supportRequestWindowFeature(Window.FEATURE_NO_TITLE);         setContentView(R.layout.activity_guide);           ib_start = (ImageButton) findViewById(R.id.guide_ib_start);         ib_start.setOnClickListener(new View.OnClickListener() {             @Override             public void onClick(View v) {                 startActivity(new Intent(GuideActivity.this,MainActivity.class));                 finish();             }         });           //加載ViewPager         initViewPager();           //加載底部圓點         initPoint();     }       /**      * 加載底部圓點      */     private void initPoint() {         //這裏實例化LinearLayout         vg = (ViewGroup) findViewById(R.id.guide_ll_point);         //根據ViewPager的item數量實例化數組         ivPointArray = new ImageView[viewList.size()];         //循環新建底部圓點ImageView，將生成的ImageView保存到數組中         int size = viewList.size();         for (int i = 0;i<size;i++){             iv_point = new ImageView(this);             iv_point.setLayoutParams(new ViewGroup.LayoutParams(20,20));             iv_point.setPadding(30,0,30,0);//left,top,right,bottom             ivPointArray[i] = iv_point;             //第一個頁面須要設置爲選中狀態，這裏採用兩張不一樣的圖片             if (i == 0){                 iv_point.setBackgroundResource(R.mipmap.full_holo);             }else{                 iv_point.setBackgroundResource(R.mipmap.empty_holo);             }             //將數組中的ImageView加入到ViewGroup             vg.addView(ivPointArray[i]);         }           }       /**      * 加載圖片ViewPager      */     private void initViewPager() {         vp = (ViewPager) findViewById(R.id.guide_vp);         //實例化圖片資源         imageIdArray = new int[]{R.mipmap.guide1,R.mipmap.guide2,R.mipmap.guide3};         viewList = new ArrayList<>();         //獲取一個Layout參數，設置爲全屏         LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(                 LinearLayout.LayoutParams.MATCH_PARENT,LinearLayout.LayoutParams.MATCH_PARENT);           //循環建立View並加入到集合中         int len = imageIdArray.length;         for (int i = 0;i<len;i++){             //new ImageView並設置全屏和圖片資源             ImageView imageView = new ImageView(this);             imageView.setLayoutParams(params);             imageView.setBackgroundResource(imageIdArray[i]);               //將ImageView加入到集合中             viewList.add(imageView);         }           //View集合初始化好後，設置Adapter         vp.setAdapter(new GuidePageAdapter(viewList));         //設置滑動監聽         vp.setOnPageChangeListener(this);     }         @Override     public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {       }       /**      * 滑動後的監聽      * @param position      */     @Override     public void onPageSelected(int position) {         //循環設置當前頁的標記圖         int length = imageIdArray.length;         for (int i = 0;i<length;i++){             ivPointArray[position].setBackgroundResource(R.mipmap.full_holo);             if (position != i){                 ivPointArray[i].setBackgroundResource(R.mipmap.empty_holo);             }         }           //判斷是不是最後一頁，如果則顯示按鈕         if (position == imageIdArray.length - 1){             ib_start.setVisibility(View.VISIBLE);         }else {             ib_start.setVisibility(View.GONE);         }     }         @Override     public void onPageScrollStateChanged(int state) {       } }

　　

 

總的來講實現流程比較簡單。

1）先加載ViewPager，新建ImageView並添加到View集合中，而後設置Adapter並顯示。

2）而後加載LinearLayout，放置原點圖片，一樣新建ImageView設置背景後放在圓點圖集合中。

3）最後設置ViewPager的滑動監聽事件，在滑動完成的監聽OnPageSelected方法中，設置對應的圓點爲選中，若是是最後一頁，則顯示按鈕。