安卓第一次启动引导页使用ViewPager实现

2019独角兽企业重金招聘Python工程师标准>>>

我们在安装某个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方法中，设置对应的圆点为选中，如果是最后一页，则显示按钮。

转载于:https://my.oschina.net/u/1177694/blog/1789037