UI - 多页滑动控件

一款优秀的软件当然需要实用、美观的"新功能介绍"页，才能打动无法的使用者，如文艺范的微信新功能介绍、温情路线的QQ通讯录新功能介绍...。

无一例外的，他们都是使用ViewPager来实现那种效果。ViewPager在Android3.0 SDK中带入，如果基于低版本的SDK要实现多页滑动的效果，则可以使用Google的兼容jar包——“android-support-v4.jar”，这里以使用"android-support-v4.jar"来进行说明，可以从网上down该jar并添加进工程"/libs"目录。

ViewPager的使用包括定义layout页和程序实现两部分：

新功能介绍界面和普通layout.xml一样，只是在其中使用了ViewPager控件，如下(whatsnew.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:id="@+id/main_layout" />

    <android.support.v4.view.ViewPager
        android:id="@+id/my_viewpager"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_gravity="center" />

        <!--  define the title of view pager -->
        <android.support.v4.view.PagerTitleStrip
            android:id="@+id/pagerTitle"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content'
            android:layout_gravity="ttop" />
    </android.support.v4.view.ViewPager>

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        android:layout_marginBottom="45dp'
        android:gravity="center_horizontal' >

        <!--  define the indicator of current page -->
        <ImageView android:id="@+id/dot0"
            android:layout_width="wrap_content"
            android:layout_height="wrap_conent"
            android:scaleType="matrix"
            android:src="@drawable/dot_normal" />
                ....
     </LinearLayout>
</FrameLayout>

程序实现部分则是加载多页面、实现数据Adapter、和实现动态指示当前页码功能。具体实现代码如下：

public class WhatsNewActivity extends Activity {
private FrameLayout mMainLayout;
private ViewPager mViewPager;
private ImageView mTipImage0, mTipImage1, mTipImage2;

public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.whatsnew);

    mMainLayout = (FrameLayout) findViewById(R.id.main_layout);
    mViewPager = (ViewPager) findViewById(R.id.my_viewpager);
    mViewPager.setOnPageChangeListener(newMyOnPageChangeListener());

    LayoutInflater layoutInflater = LayoutInflater.from(this);
    // fill three view pages
    final ArrayList<View> views = new ArrayList<View>();
    views.add(layoutInflater.inflate(R.layout.new1), null);
    views.add(layoutInflater.inflate(R.layout.new2), null);
    views.add(layoutInflater.inflate(R.layout.new3), null);

    PageAdaptermPagerAdapter = new PagerAdaper() {
        @Override
        public void startUpdate(View v) {}
        @Override
        public Parcelable saveState() {
            return null;
        }
        @Override
        public void resotreState(Parcelable parcelable, ClassLoader loader) {}
        @Override
        public boolean isViewFromObject(View v, Object object) {
            return v == object;
        }
        @Override
        public Object instantiateItem(View container, int position) { // instantiate & insert item into view pager
           ((ViewPager) container).addView(views.get(position));
            return views.get(position);
        }
        @Override
        public int getCount() {
           return views.size();
        }
        @Override
        public void finishUpdate(View v) {}
        @Override
        public void destroyItem(View container, int position, Object object) {
            ((ViewPager) container).removeView(views.get(position));
        }
    };
    mViewPager.setAdapter(mPagerAdapter);

    mTipImage0 = (ImageView) findViewById(R.id.dot0);
        mTipImage1 = (ImageView) findViewById(R.id.dot1);
        mTipImage2 = (ImageView) findViewById(R.id.dot2);
    }

    // change the image of dot to indicate current page
    public class MyOnPageChangeListener implements OnPageChangeListener {
        @Override
        public void onPageSelected(int arg0) {
            switch (arg0) {
            case 0:
                mTipImage0.setImageDrawable(getResources().getDrawable(R.drawable.dot_foucs));
                mTipImage1.setImageDrawable(getResources().getDrawable(R.drawable.dot_normal));
                break;
            case 1:
                mTipImage1.setImageDrawable(getResources().getDrawable(R.drawable.dot_foucs));
                mTipImage0.setImageDrawable(getResources().getDrawable(R.drawable.dot_normal));
                mTipImage2.setImageDrawable(getResources().getDrawable(R.drawable.dot_normal));
                break;
            case 2:
                mTipImage2.setImageDrawable(getResources().getDrawable(R.drawable.dot_foucs));
                mTipImage1.setImageDrawable(getResources().getDrawable(R.drawable.dot_normal));
                break;
            default:
                break;
          }
        }

        @Override
        public void onPageScrolled(int arg0, float arg1, int arg2) {}

        @Override
        public void onPageScrollStateChanged(int arg0) {}
    }
}