Android启动界面之ViewPager用法详解

在我们安装完成一个新应用的时候，经常会见到由几个图片或短动画组成的启动界面，可以用手指滑动，显示完毕后可以点击进入主界面，这样的效果会给用户留下很好的印象，这个功能可以由viewPager来制作，ViewPager是一个和listView相似的控件，可以称之为引导页，之所以说他们相似，因为二者都要通过Adapter来加载数据，二者的用法同样都比较复杂，不同的是ViewPager还要创建视图集合来存放负责显示的几个View，并通过LayoutInflater将这些View都加载到布局里来。

下面就来看一下怎么使用ViewPager

一）实现ViewPager功能

1）新建GuiedActivity,作为引导界面，其对应的布局文件里把VIewPager传入，代码如下，设置其背景为黑色，注意不是系统控件，所以要写上全部包名

<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent" >     <android.support.v4.view.ViewPager        android:id="@+id/viewpager"        android:layout_width="match_parent"        android:layout_height="match_parent"        android:background="#00000000"        >            </android.support.v4.view.ViewPager></RelativeLayout>

2）新建ViewPagerAdapter继承PagerAdapter，这里写了泛型为view的集合来存放几个view,，并通过removeView()和addView()来将其移除和添加到布局，这几个view里将会在引导界面加载我们要显示的图片，最下面是重写了父类方法

public class ViewPagerAdapter extends PagerAdapter {private List<View> views;private Context context;public ViewPagerAdapter(Context context,List<View> views) {this.context=context;this.views=views;}@Overridepublic void destroyItem(View container, int position, Object object) {((ViewPager) container).removeView(views.get(position));//取消view}@Overridepublic Object instantiateItem(View container, int position) {((ViewPager) container).addView(views.get(position));//获取到viewreturn views.get(position);}@Overridepublic int getCount() {return views.size();}@Overridepublic boolean isViewFromObject(View arg0, Object arg1) {return (arg0==arg1);  //判断当前的view是不是我们需要的对象}}

3）在引导界面里通过LayoutInflater的inflater完成view的加载，然后将加载完成的view添加到views集合里去，把views作为数据传入到适配器的参数里，最后让VeiwPager加载其适配器即可

public class GuideActivity extends Activity implements OnPageChangeListener{private ViewPager vp;private ViewPagerAdapter vpa;private List<View> views;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);requestWindowFeature(Window.FEATURE_NO_TITLE);setContentView(R.layout. guiedlayout);initView();

}         private void initView() {         LayoutInflater inflater=LayoutInflater.from(this);         views=new ArrayList<View>();                  views.add(inflater.inflate(R.layout.one,null));         views.add(inflater.inflate(R.layout.two,null));         views.add(inflater.inflate(R.layout.three,null));                  vpa=new ViewPagerAdapter(this, views);         vp=(ViewPager) findViewById(R.id.viewpager);         vp.setAdapter(vpa);         }}

这里面的加载的三个布局源代码如下，很简单，只是放了一个图片，其他的两个只改变了图片资源，因此只要贴上来一个就好：

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:orientation="vertical" >    <ImageView     android:layout_width="match_parent"    android:layout_height="match_parent"    android:background="@drawable/guide_1"    /></LinearLayout>

这样，一个能够显示三张图片的引导页的功能就完成了，可以往右滑动图片，我们实际使用中在滑动的时候会发现，界面的下方一般都有三个小点，当屏幕显示哪一个视图，哪一个小点就会亮一些，下面我们来实现这个功能

二）添加导航点

1）首先当然是配置布局文件，在guied对应的布局里将小点加进来，每一个小点是一个图片，将它们水平排列在一个LinearLayout放在布局文件里

<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent" >    <android.support.v4.view.ViewPager        android:id="@+id/viewpager"        android:layout_width="match_parent"        android:layout_height="match_parent"        android:background="#00000000"        >            </android.support.v4.view.ViewPager>    <LinearLayout        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_alignParentBottom="true"        android:layout_centerHorizontal="true"        android:gravity="center_horizontal"        android:orientation="horizontal" >        <ImageView            android:id="@+id/iv1"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:src="@drawable/login_point_selected" />        <ImageView            android:id="@+id/iv2"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:src="@drawable/login_point" />        <ImageView            android:id="@+id/iv3"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:src="@drawable/login_point" />    </LinearLayout></RelativeLayout>

2）把小点放在一个数组dots[]里,把他们的id都传进一个数组ids[]里

        private ImageView dots[];private int Ids[]={R.id.iv1,R.id.iv2,R.id.iv3};

然后写一个方法，把所有的点对应的图片都加载进来，别忘了在onCreate方法里引用这个方法哦

private void initDots(){    dots=new ImageView[views.size()];  //设置点的个数与view的个数相同    for(int i=0;i<views.size();i++){    dots[i]=(ImageView)findViewById(Ids[i]);  //加载点的id    }    }

这个时候我们应该想到，现在仅仅是把小点都加载进来了，他们是会显示在引导界面没有错，但是滑动图片小点并不会变化，那么怎么才能让我们当前的View对应的小点是高亮的那个图片呢，肯定要监听引导页的变化啊，让我们的类实现引导页变化的事件监听接口

public class GuideActivity extends Activity implements OnPageChangeListener
之后下面的三个方法会出现在类里面，分别对应着三个不同的状态，改变状态，滑动状态，当选状态，在当选状态里，如果当前页的id和小点的id一样，那么小点加载为高亮的那个图片即可实现我们的功能。

@Overridepublic void onPageScrollStateChanged(int arg0) {// TODO Auto-generated method stub}@Overridepublic void onPageScrolled(int arg0, float arg1, int arg2) {// TODO Auto-generated method stub}@Overridepublic void onPageSelected(int arg0) {        for(int i=0;i<views.size();i++){        if(arg0==i){        dots[i].setImageResource(R.drawable.login_point_selected);        }else{        dots[i].setImageResource(R.drawable.login_point);        }        }}

引导页的功能已经都完成了，那么我们要转到主界面，当然还要在最后的那个view里加一个按钮点击事件啦

三）添加进入主界面按钮

1）在第三个view里加上按钮，按钮通过LinearLayout放在布局里

<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:orientation="vertical" >    <ImageView     android:layout_width="match_parent"    android:layout_height="match_parent"    android:background="@drawable/guide_3"    /><LinearLayout     android:layout_width="wrap_content"    android:layout_height="wrap_content"    android:gravity="center_horizontal"    android:layout_alignParentBottom="true"    >

<pre name="code" class="java"><Button    android:id="@+id/start_btn"    android:layout_width="wrap_content"    android:layout_height="wrap_content"    android:layout_alignParentBottom="true"    android:layout_centerHorizontal="true"    android:text="开始体验" />

</LinearLayout></RelativeLayout>

2)接下来在代码里为按钮添加事件，当前为guied活动，所以不能直接加载按钮的id，通过views.get(3)来加载，也就是我刚才把按钮放在那个布局里的地方

start=(Button) views.get(2).findViewById(R.id.start_btn);//注意这里要从views里获取按钮的实例         start.setOnClickListener(new OnClickListener() {@Overridepublic void onClick(View v) {Intent i=new Intent(GuideActivity.this,MainActivity.class);startActivity(i);finish();}});

四）我们在实际使用应用的时候会发现，引导页一般只会在第一次安装出现，其他时候打开是没有引导页的，这样避免了用户每次打开应用都要看一遍图片，再好看的图片用户看多了都会厌烦的，其他时候打开一般只有一个启动画面，上面有应用图标的一个图片，这个功能的实现按照下面的步骤来：

1）新建welcome活动，作为启动界面，其布局如下

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:orientation="vertical" >    <ImageView     android:layout_width="match_parent"    android:layout_height="match_parent"    android:background="@drawable/welcome_android"    /></LinearLayout>

2）我们让启动画面有个几秒的时候给主机开启应用的缓冲时间，自然这里的延迟时间不能在主线程进行，通过Handler的回调来完成。

怎么才能知道是不是第一次安装呢？我们设置一个boolean类型的数据isFirst,  给它赋初值为false,然后在onCreate的时候判断其是否存在。

SharedPreferences来获取并且默认返回值为true,如果不存在，就会返回true,我们让其值为true的时候进入引导页，然后再通过preferences.edit()给其写上isFirst,同时指定为false,这样以后再打开程序，就会获取到有这个isFirst存在，且值为false,我们让其为false的时候进入启动界面

public class Welcome extends Activity{public static final int TIME=3000;public static final int GOGUIED=1000;public static final int GOHOME=1001;private boolean isFirst=false;private Handler mHander=new Handler(){public void handleMessage(android.os.Message msg){switch (msg.what) {case GOHOME:goHome();break;case GOGUIED:goGuied();break;default:break;}}};@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.welcome);init();}private void init(){SharedPreferences preferences=getSharedPreferences("liujiawei",MODE_PRIVATE);isFirst=preferences.getBoolean("isFirst",true); //如果没有isFirst，默认的返回是trueif(isFirst){mHander.sendEmptyMessageDelayed(GOGUIED, TIME); //如果是第一次，到引导界面/*第一次进入引导界面之后，在这里存储isFirst的值，以后再打开程序就有了isFirst的值 * 就会进入主界面*/Editor editor=preferences.edit(); editor.putBoolean("isFirst", false);editor.commit();}else{mHander.sendEmptyMessageDelayed(GOHOME, TIME);}}private void goHome(){Intent i=new Intent(Welcome.this,MainActivity.class);startActivity(i);finish();}private void goGuied(){Intent i=new Intent(Welcome.this,GuideActivity.class);startActivity(i);finish();}}