Android常用控件之ViewPager的使用

ViewPager可以实现多个页面进行切换，提高用户体验

先看下效果

实现上是有左右滑动效果的，并不是跟幻灯片一样，只是我把三张图片合成gif格式的图片而已；因为没法直接录制设备上的操作效果，只能截图再合成，就成了上面的效果，将就着吧。

定义布局文件

<?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" >

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

        <android.support.v4.view.PagerTitleStrip
            android:id="@+id/pagertitle"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="top" />
    </android.support.v4.view.ViewPager>

</LinearLayout>

其中ViewPager是页面，PagerTitleStrip是标题

其中一个页面的布局

<?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:background="#f00"
    android:orientation="vertical" >

    <ImageView
        android:id="@+id/image1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/image1"
        android:contentDescription="@string/page1" />

</LinearLayout>

其它页面类似的。

Activity代码

package com.example.viewpagerdemo;

import java.util.ArrayList;
import java.util.List;

import android.app.Activity;
import android.os.Bundle;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.view.LayoutInflater;
import android.view.View;

public class MainActivity extends Activity {

	private ViewPager viewPager = null;
	private ArrayList<String> titles;

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.main);
		viewPager = (ViewPager) findViewById(R.id.viewpager);

		// 把要显示的View装入数组
		LayoutInflater li = LayoutInflater.from(this);
		View view1 = li.inflate(R.layout.pager1, null);
		View view2 = li.inflate(R.layout.pager2, null);
		View view3 = li.inflate(R.layout.pager3, null);

		// 添加页面
		final ArrayList<View> views = new ArrayList<View>();
		views.add(view1);
		views.add(view2);
		views.add(view3);

		// 添加标题
		titles = new ArrayList<String>();
		titles.add("tab1");
		titles.add("tab2");
		titles.add("tab3");

		picViewPagerAdapter pagerAdapter = new picViewPagerAdapter(views);
		viewPager.setAdapter(pagerAdapter);
	}

	/**
	 * 为ViewPager添加适配器
	 * @author Administrator
	 *
	 */
	class picViewPagerAdapter extends PagerAdapter {

		private List<View> listViews;

		public picViewPagerAdapter(List<View> list) {
			listViews = list;
		}

		@Override
		public int getCount() {
			// TODO Auto-generated method stub
			return listViews.size();
		}

		@Override
		public boolean isViewFromObject(View arg0, Object arg1) {
			// TODO Auto-generated method stub
			return arg0 == arg1;
		}

		@Override
		public void destroyItem(View container, int position, Object object) {
			((ViewPager) container).removeView(listViews.get(position));
		}

		@Override
		public CharSequence getPageTitle(int position) {
			return titles.get(position);
		}

		@Override
		public Object instantiateItem(View container, int position) {
			((ViewPager) container).addView(listViews.get(position));
			return listViews.get(position);
		}
	}
}

其中需要实现PagerAdapter类，这个类实现了页面的装载和r卸载功能。

Demo下载

点击打开链接