【Android】利用ViewPager控件实现软件启动引导页

1.自定义ViewPageItemView的布局

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:contentDescription="picture"
        android:scaleType="fitXY"
        android:src="@drawable/ic_launcher" />

    <TextView
        android:id="@+id/tvTitle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|center_horizontal"
        android:layout_marginBottom="30dp"
        android:text="title"
        android:textColor="@color/black"
        android:textSize="18sp" />

</FrameLayout>

2.自定义ViewPageItemView用于显示相册中一个图片及其图片备注

/**
 * 
 */
package com.example.learn.overall.view;

import org.json.JSONException;
import org.json.JSONObject;

import android.content.Context;
import android.graphics.Bitmap;
import android.util.AttributeSet;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.FrameLayout;
import android.widget.ImageView;
import android.widget.TextView;

import com.example.learn.R;

/**
 * Description: 相册中的一帧
 * 
 * @author danDingCongRong
 * @Version 1.0.0
 * @Created at 2014-6-25 21:10:55
 * @Modified by [作者] on [修改日期]
 */
public class ViewPageItemView extends FrameLayout {

	/** 图片的ImageView */
	private ImageView imageView;
	/** 图片的名称 */
	private TextView tvTitle;

	/** 图片的Bitmap */
	private Bitmap bitmap;

	/** 要显示图片的JsonObject */
	private JSONObject jsonObject;

	public ViewPageItemView(Context context) {
		super(context);

		initView(context);
	}

	public ViewPageItemView(Context context, AttributeSet attrs) {
		super(context, attrs);

		initView(context);
	}

	public ViewPageItemView(Context context, AttributeSet attrs, int defStyle) {
		super(context, attrs, defStyle);

		initView(context);
	}

	// 初始控件
	private void initView(Context context) {
		View view = LayoutInflater.from(context).inflate(
				R.layout.viewpage_itemview, null);

		imageView = (ImageView) view.findViewById(R.id.imageView);
		tvTitle = (TextView) view.findViewById(R.id.tvTitle);

		addView(view);
	}

	// 填充数据
	public void setData(JSONObject jsonObject) {
		this.jsonObject = jsonObject;

		try {
			int resourceId = jsonObject.getInt("resourceId");
			String title = jsonObject.optString("title");

			imageView.setImageResource(resourceId);
			tvTitle.setText(title);
		} catch (JSONException e) {
			e.printStackTrace();
		}

	}

	// 资源回收
	public void recycle() {
		imageView.setImageBitmap(null);

		if (null == bitmap || bitmap.isRecycled()) {
			return;
		}

		bitmap.recycle();
		bitmap = null;
	}

	// 重新加载资源
	public void reload() {
		try {
			int resourceId = jsonObject.getInt("resourceId");
			imageView.setImageResource(resourceId);
		} catch (JSONException e) {
			e.printStackTrace();
		}
	}

}

3.基于PageAdapter的相册适配器

/**
 * 
 */
package com.example.learn.overall.adapter;

import java.util.HashMap;
import java.util.Map;

import org.json.JSONArray;
import org.json.JSONException;
import org.json.JSONObject;

import android.content.Context;
import android.os.Parcelable;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.view.View;

import com.example.learn.overall.view.ViewPageItemView;

/**
 * Description: 相册的适配器
 * 
 * @author danDingCongRong
 * @Version 1.0.0
 * @Created at 2014-6-25 21:35:53
 * @Modified by [作者] on [修改日期]
 */
public class ViewPageAdapter extends PagerAdapter {

	private Context context;

	private JSONArray jsonArray;

	private Map<Integer, ViewPageItemView> hashMap;

	public ViewPageAdapter(Context context, JSONArray jsonArray) {
		this.context = context;
		this.jsonArray = jsonArray;
		this.hashMap = new HashMap<Integer, ViewPageItemView>();
	}

	// 返回资源数目
	@Override
	public int getCount() {
		return jsonArray.length();
	}

	// 初始化要显示的资源
	@Override
	public Object instantiateItem(View container, int position) {
		ViewPageItemView itemView;
		if (hashMap.containsKey(position)) {
			itemView = hashMap.get(position);
			itemView.reload();
		} else {
			itemView = new ViewPageItemView(context);
			try {
				JSONObject jsonObject = jsonArray.getJSONObject(position);
				itemView.setData(jsonObject);
			} catch (JSONException e) {
				e.printStackTrace();
			}

			hashMap.put(position, itemView);
			((ViewPager) container).addView(itemView);
		}

		return itemView;
	}

	// 进行资源回收
	@Override
	public void destroyItem(View container, int position, Object object) {
		ViewPageItemView itemView = (ViewPageItemView) object;
		itemView.recycle();
	}

	@Override
	public boolean isViewFromObject(View view, Object object) {
		return view == object;
	}

	@Override
	public void restoreState(Parcelable parcelable, ClassLoader classLoader) {
		;
	}

	@Override
	public Parcelable saveState() {
		return null;
	}

	@Override
	public void startUpdate(View view) {
		;
	}

	@Override
	public void finishUpdate(View view) {
		;
	}

}

4.activity_test_viewpage.xml

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

        <!-- ViewPager是一个控件 -->

        <android.support.v4.view.ViewPager
            android:id="@+id/viewpage"
            android:layout_width="match_parent"
            android:layout_height="match_parent" >
        </android.support.v4.view.ViewPager>

</LinearLayout>

5.测试用的Activity

package com.example.learn.activity;

import org.json.JSONArray;
import org.json.JSONException;
import org.json.JSONObject;

import android.app.Activity;
import android.content.Context;
import android.os.Bundle;
import android.support.v4.view.ViewPager;
import android.view.Window;

import com.example.learn.R;
import com.example.learn.overall.adapter.ViewPageAdapter;

public class TestViewPageActivity extends Activity {

	private static final int PICTURE_COUNT = 4;

	private static final int[] PICTURE_RESOURCES = { R.drawable.guide_page1,
			R.drawable.guide_page2, R.drawable.guide_page3,
			R.drawable.guide_page4, };
	
	private static final String[] PICTURE_TITLE = { "第一张图片", "第二张图片", "第三张图片",
			"此软件已经烂的不能再烂了，祝你失败", };

	private JSONArray jsonArray;

	private ViewPager viewPager;
	private ViewPageAdapter adapter;

	private Context context = TestViewPageActivity.this;

	@Override
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		requestWindowFeature(Window.FEATURE_NO_TITLE);
		setContentView(R.layout.activity_test_viewpage);

		initLoadData();
		initView();
	}

	private void initLoadData() {
		jsonArray = new JSONArray();

		for (int i = 0; i < PICTURE_COUNT; i++) {
			JSONObject jsonObject = new JSONObject();
			try {
				jsonObject.put("resourceId", PICTURE_RESOURCES[i]);
				jsonObject.put("title", PICTURE_TITLE[i]);
			} catch (JSONException e) {
				e.printStackTrace();
			}

			jsonArray.put(jsonObject);
		}
	}

	private void initView() {
		viewPager = (ViewPager) findViewById(R.id.viewpage);
		adapter = new ViewPageAdapter(context, jsonArray);
		viewPager.setAdapter(adapter);
	}

}

6.效果图

Demo资源下载：http://download.youkuaiyun.com/detail/u010119170/7695169

参考：Android高手进阶教程(二十八)之---Android ViewPager控件的使用(基于ViewPager的横向相册)!!!