Android UI开发第二十篇——仿launcher的左右滑动（用ViewPager实现欢迎引导页面）

        Android提供另一个非常有用的控件ViewPager。使用这个控件，需要用到google提到的一个包——android-support-v4.jar，这个包中包含了一些非常有用的类，其中就是ViewPager类来实现页面之间的切换操作，关于android-support-v4.jar的详细信息，大家可以访问google官方网站：http://developer.android.com/sdk/compatibility-library.html。 

        具体的把Android提供的android-support-v4.jar导入工程，并add build path的方法这里不做介绍，可以参考以上提供的网址，里面会有详细的说明，步骤比较简单。

        下面通过两个例子来讲解一下比较复杂的滑动界面的实现。

一、Demo1

 

                  Demo1运行效果1                                     Demo1运行效果2

Demo1实现的效果是我们在浏览新闻网页时经常会看到的，屏幕的上半部分是图片，下半部分是文字的介绍，而顶部是一个导航的工具栏可以供用户选择退出或者回到主菜单等。用户通过左右的滑动屏幕，实现翻页的效果。而在屏幕的最底部，会有对当前所处页面的指示标记。
主布局文件main.xml的内容如下：

xml代码：

<?xml version="1.0" encoding="utf-8"?><FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="fill_parent"    android:layout_height="fill_parent"    android:orientation="vertical" >    <LinearLayout        android:layout_width="fill_parent"        android:layout_height="wrap_content"        android:orientation="vertical" >        <include            android:id="@+id/item_header"            layout="@layout/item_header" />        <android.support.v4.view.ViewPager            android:id="@+id/myviewpager"            android:layout_width="fill_parent"            android:layout_height="wrap_content" />    </LinearLayout>    <LinearLayout        android:layout_width="fill_parent"        android:layout_height="fill_parent"        android:orientation="vertical" >        <RelativeLayout            android:layout_width="fill_parent"            android:layout_height="wrap_content"            android:orientation="vertical" >            <LinearLayout                android:id="@+id/mybottomviewgroup"                android:layout_width="fill_parent"                android:layout_height="wrap_content"                android:layout_alignParentBottom="true"                android:layout_marginBottom="40dp"                android:gravity="center_horizontal"                android:orientation="horizontal" >            </LinearLayout>        </RelativeLayout>    </LinearLayout></FrameLayout>

最外层是LinearLayout，其中包括两个Linearlayout，第一个LinearLayout是显示新闻的主界面，而第二个LinearLayout是为了在底部存放指示当前界面的标记图片。值得注意的是第一个LinearLayout中包括又包括两部分，一个是通过include引入的item_header视图，一个是ViewPager控件，在这里还要注意ViewPager空间的布局方式。代码如下：

xml代码：

<LinearLayout    android:layout_width="fill_parent"    android:layout_height="wrap_content"    android:orientation="vertical" >    <include        android:id="@+id/item_header"        layout="@layout/item_header" />    <android.support.v4.view.ViewPager        android:id="@+id/myviewpager"        android:layout_width="fill_parent"        android:layout_height="wrap_content" /></LinearLayout>

另外，在layout文件夹下还定义了item01——item06六个布局文件作为ViewPager的六个页面，在JAVA代码中会把它们分别添加进ViewPager。Item_header.xml布局定义了屏幕上方的导航栏，通过include的方式引入了main.xml布局文件。

java代码：

package com.devdiv.test.ui_test_viewpager;import java.util.ArrayList;import android.app.Activity;import android.content.Context;import android.os.Bundle;import android.os.Parcelable;import android.support.v4.view.PagerAdapter;import android.support.v4.view.ViewPager;import android.support.v4.view.ViewPager.OnPageChangeListener;import android.view.LayoutInflater;import android.view.View;import android.view.ViewGroup;import android.view.ViewGroup.LayoutParams;import android.view.Window;import android.widget.ImageView;public class UI_Test_ViewPagerActivity extends Activity {private ViewPager mViewPager;private ArrayList<View> mPageViews;private ImageView mImageView;private ImageView[] mImageViews;// 该应用的主布局LinearLayoutprivate ViewGroup mainViewGroup;// 主布局底部指示当前页面的小圆点视图，LinearLayoutprivate ViewGroup indicatorViewGroup;// 定义LayoutInflaterLayoutInflater mInflater;@Overridepublic void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);// setContentView(R.layout.main);// 设置窗口无标题requestWindowFeature(Window.FEATURE_NO_TITLE);// mInflater = (LayoutInflater)// getSystemService(Context.LAYOUT_INFLATER_SERVICE);mInflater = getLayoutInflater();mPageViews = new ArrayList<View>();mPageViews.add(mInflater.inflate(R.layout.item01, null));mPageViews.add(mInflater.inflate(R.layout.item02, null));mPageViews.add(mInflater.inflate(R.layout.item03, null));mPageViews.add(mInflater.inflate(R.layout.item04, null));mPageViews.add(mInflater.inflate(R.layout.item05, null));mPageViews.add(mInflater.inflate(R.layout.item06, null));mImageViews = new ImageView[mPageViews.size()];mainViewGroup = (ViewGroup) mInflater.inflate(R.layout.main, null);mViewPager = (ViewPager) mainViewGroup.findViewById(R.id.myviewpager);indicatorViewGroup = (ViewGroup) mainViewGroup.findViewById(R.id.mybottomviewgroup);for (int i = 0; i < mImageViews.length; i++) {mImageView = new ImageView(UI_Test_ViewPagerActivity.this);mImageView.setLayoutParams(new LayoutParams(20, 20));mImageView.setPadding(20, 0, 20, 0);if (i == 0) {mImageView.setBackgroundResource(R.drawable.page_indicator_focused);} else {mImageView.setBackgroundResource(R.drawable.page_indicator);}mImageViews[i] = mImageView;// 把指示作用的远点图片加入底部的视图中indicatorViewGroup.addView(mImageViews[i]);}// 注意这两种用法的区别，前者无法正常显示！！// setContentView(R.layout.main);setContentView(mainViewGroup);mViewPager.setAdapter(new MyPagerAdapter());mViewPager.setOnPageChangeListener(new OnPageChangeListener() {@Overridepublic void onPageSelected(int arg0) {for (int i = 0; i < mImageViews.length; i++) {if (i == arg0) {mImageViews[i].setBackgroundResource(R.drawable.page_indicator_focused);} else {mImageViews[i].setBackgroundResource(R.drawable.page_indicator);}}}@Overridepublic void onPageScrolled(int arg0, float arg1, int arg2) {}@Overridepublic void onPageScrollStateChanged(int arg0) {}});}class MyPagerAdapter extends PagerAdapter {@Overridepublic int getCount() {return mPageViews.size();}@Overridepublic boolean isViewFromObject(View arg0, Object arg1) {return arg0 == arg1;}@Overridepublic int getItemPosition(Object object) {return super.getItemPosition(object);}@Overridepublic void destroyItem(View arg0, int arg1, Object arg2) {((ViewPager) arg0).removeView(mPageViews.get(arg1));}@Overridepublic Object instantiateItem(View arg0, int arg1) {((ViewPager) arg0).addView(mPageViews.get(arg1));return mPageViews.get(arg1);}@Overridepublic void restoreState(Parcelable arg0, ClassLoader arg1) {}@Overridepublic Parcelable saveState() {return null;}@Overridepublic void startUpdate(View arg0) {}@Overridepublic void finishUpdate(View arg0) {}}}

        其中，需要注意的是在自定义MyPagerAdapter继承自PagerAdapter，需要重写其中的一些重要方法，可以类比BaseAdapter的实现便于理解，具体实现参考API文档。

java代码：

mImageViews = new ImageView[mPageViews.size()];                mainViewGroup = (ViewGroup) mInflater.inflate(R.layout.main, null);                mViewPager = (ViewPager) mainViewGroup.findViewById(R.id.myviewpager);        indicatorViewGroup = (ViewGroup) mainViewGroup.findViewById(R.id.mybottomviewgroup);                for (int i = 0; i < mImageViews.length; i++) {         mImageView = new ImageView(UI_Test_ViewPagerActivity.this);           mImageView.setLayoutParams(new LayoutParams(20,20));           mImageView.setPadding(20, 0, 20, 0);                    if (i == 0) {         mImageView.setBackgroundResource(R.drawable.page_indicator_focused);       } else {   mImageView.setBackgroundResource(R.drawable.page_indicator);   }      mImageViews[i] = mImageView;        //把指示作用的远点图片加入底部的视图中   indicatorViewGroup.addView(mImageViews[i]);  }

根据mPageViews的大小初始化ImageViews，也就是说ViewPager中存在几个Page就初始化几个圆点的图片进行相应的指示。并且根据位置，设置圆点的不同状态，出事情况下显示第一个Page，因此第一个圆点的图片是focused的状态。最后，通过indicatorViewGroup.addView(mImageViews[i])把所有圆点的图片添加到布局中，在屏幕上显示。 
底部圆点图片初始化并加入布局后，需要给ViewPager设置Adapter，这里使用的是我们自定义的MyPagerAdapter，然后执行setContentView操作。
最后，为了是底部的圆点视图具有指示作用，需要为ViewPager设置监听器，来根据ViewPager的不同状态，改变底部圆点视图的状态。代码如下：

java代码：

mViewPager.setOnPageChangeListener(new OnPageChangeListener() {      @Override   public void onPageSelected(int arg0) {    // TODO Auto-generated method stub    for (int i = 0; i < mImageViews.length; i++) {     if(i == arg0) {     mImageViews[i].setBackgroundResource(R.drawable.page_indicator_focused);     } else {     mImageViews[i].setBackgroundResource(R.drawable.page_indicator);     }    }   }      @Override   public void onPageScrolled(int arg0, float arg1, int arg2) {   }      @Override   public void onPageScrollStateChanged(int arg0) {   }});

二、Demo2

       

        Demo2同样实现了左右滑动的效果，不过我们在不同的页面使用了不同的布局，这在实际的应用中也是很常见的。我们同样使用了ViewPager控件，具体方法和Demo1基本相同。

        不同在于，我们在两个页面中分别使用了ListView中GridView视图，并在代码中为它们分别绑定了不同的Adapter。ListView使用了简单的ArrayAdapter，显示一组数据。GridView使用了自定义的Adapter。

        由于Demo2和Demo1的内容非常相似，我们就不再展开分析。

        Demo2运行效果如下：

  

              第一个视图                             滑动过程中                            第二个视图