android实现ViewPager，打开app展示图片

经过几天的学习，有了一些简单的经验，记录一下，以备后查。

1、建立android工程，在drawable下导入几张要展示的图片和小点图片。

2、写activity_main.xml的布局文件，主要就是两方面：

a、加入viewpager控件。

代码：

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

b、加入小点的控件，我有四张图片，所以有四个imageview。

代码：

<LinearLayout
        android:id="@+id/linearlayout"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:orientation="horizontal"
        android:paddingBottom="24dip" >

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:padding="1.5dip"
            android:src="@drawable/point" />

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:padding="1.5dip"
            android:src="@drawable/point" />

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:padding="1.5dip"
            android:src="@drawable/point" />

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:padding="1.5dip"
            android:src="@drawable/point" />
    </LinearLayout>

这样main activity的xml文件就写好了。

3、接下来我们要实现上面所用到的 point..xml,一个selector，表示下面的点点的两种状态

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

    <item android:drawable="@drawable/point_normal" android:state_enabled="true"></item>
    <item android:drawable="@drawable/point_select" android:state_enabled="false"></item>

</selector>

4、接下来我们还要写一个布局，是为填充在viewpager里面的元素准备的，item_view.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" >

    <ImageView
        android:id="@+id/image"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent" />

</LinearLayout>

5、现在，我们可以开始写代码了，我们先写一个适配器,ViewPagerAdapter.java，主要要实现一个初始化和一个移除功能

public class ViewPagerAdapter extends PagerAdapter {

	private ArrayList<View>views;


	public ViewPagerAdapter(ArrayList<View> views) {
		super();
		this.views = views;
	}

	@Override
	public int getCount() {
		// TODO Auto-generated method stub
		if (views!=null) {
			return views.size();
		}
		return 0;
	}

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

	@Override
	public void destroyItem(ViewGroup container, int position, Object object) {
		// TODO Auto-generated method stub
		container.removeView(views.get(position));
	}

	@Override
	public Object instantiateItem(ViewGroup container, int position) {
		// TODO Auto-generated method stub
		container.addView(views.get(position));
		return views.get(position);
	}

}

6、最后实现主文件代码；

a、实例化控件等：

private void initViews() {
		// TODO Auto-generated method stub
		views = new ArrayList<View>();
		viewPager = (ViewPager) findViewById(R.id.viewpager);
		viewPagerAdapter = new ViewPagerAdapter(views);
	}

b、将图片资源都放入views，等

private void initDates() {
		// TODO Auto-generated method stub
		LayoutInflater inflater = getLayoutInflater();
		for (int i = 0; i < pics.length; i++) {
			View view = inflater.inflate(R.layout.item_view, null);
			ImageView imageView = (ImageView) view.findViewById(R.id.image);
			imageView.setImageResource(pics[i]);
			views.add(view);
		}
		viewPager.setAdapter(viewPagerAdapter);
		viewPager.setOnPageChangeListener(this);
		initPoints();
	}

c、实例化点点，等

private void initPoints() {
		// TODO Auto-generated method stub
		points = new ImageView[pics.length];
		LinearLayout linearLayout = (LinearLayout) findViewById(R.id.linearlayout);
		for (int i = 0; i < pics.length; i++) {
			points[i] = (ImageView) linearLayout.getChildAt(i);
			points[i].setEnabled(true);
		}
		currentIndex = 0;
		points[currentIndex].setEnabled(false);
	}

d、响应页面滑动：

public void onPageSelected(int arg0) {
		// TODO Auto-generated method stub
		if (arg0 < 0 || arg0 > pics.length - 1 || arg0 == currentIndex) {
			return;
		}
		points[currentIndex].setEnabled(true);
		points[arg0].setEnabled(false);
		currentIndex = arg0;
	}

全部代码，MainActivity.java

package com.example.viewpagertest;

import java.util.ArrayList;

import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.support.v7.app.ActionBarActivity;
import android.os.Bundle;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.widget.ImageView;
import android.widget.LinearLayout;

public class MainActivity extends ActionBarActivity implements
		OnPageChangeListener {
	private ViewPagerAdapter viewPagerAdapter;
	private ViewPager viewPager;
	private ArrayList<View> views;
	private static final int[] pics = { R.drawable.gg_1, R.drawable.gg_2,
			R.drawable.gg_3, R.drawable.logo };
	private int currentIndex;
	private ImageView[] points;
	private final String TAG = "MyTest";

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		Log.i(TAG, "onCreate");
		initViews();
		initDates();
	}

	private void initDates() {
		// TODO Auto-generated method stub
		LayoutInflater inflater = getLayoutInflater();
		for (int i = 0; i < pics.length; i++) {
			View view = inflater.inflate(R.layout.item_view, null);
			ImageView imageView = (ImageView) view.findViewById(R.id.image);
			imageView.setImageResource(pics[i]);
			views.add(view);
		}
		viewPager.setAdapter(viewPagerAdapter);
		viewPager.setOnPageChangeListener(this);
		initPoints();
	}

	private void initPoints() {
		// TODO Auto-generated method stub
		points = new ImageView[pics.length];
		LinearLayout linearLayout = (LinearLayout) findViewById(R.id.linearlayout);
		for (int i = 0; i < pics.length; i++) {
			points[i] = (ImageView) linearLayout.getChildAt(i);
			points[i].setEnabled(true);
		}
		currentIndex = 0;
		points[currentIndex].setEnabled(false);
	}

	private void initViews() {
		// TODO Auto-generated method stub
		views = new ArrayList<View>();
		viewPager = (ViewPager) findViewById(R.id.viewpager);
		viewPagerAdapter = new ViewPagerAdapter(views);
	}

	@Override
	public boolean onCreateOptionsMenu(Menu menu) {
		// Inflate the menu; this adds items to the action bar if it is present.
		getMenuInflater().inflate(R.menu.main, menu);
		return true;
	}

	@Override
	public boolean onOptionsItemSelected(MenuItem item) {
		// Handle action bar item clicks here. The action bar will
		// automatically handle clicks on the Home/Up button, so long
		// as you specify a parent activity in AndroidManifest.xml.
		int id = item.getItemId();
		if (id == R.id.action_settings) {
			return true;
		}
		return super.onOptionsItemSelected(item);
	}

	@Override
	public void onPageScrollStateChanged(int arg0) {
		// TODO Auto-generated method stub

	}

	@Override
	public void onPageScrolled(int arg0, float arg1, int arg2) {
		// TODO Auto-generated method stub

	}

	@Override
	public void onPageSelected(int arg0) {
		// TODO Auto-generated method stub
		if (arg0 < 0 || arg0 > pics.length - 1 || arg0 == currentIndex) {
			return;
		}
		points[currentIndex].setEnabled(true);
		points[arg0].setEnabled(false);
		currentIndex = arg0;
	}
}

参考：

http://my.oschina.net/u/1182603/blog/162016?fromerr=Qt7PAQAx

代码下载  :  http://download.csdn.net/detail/cau_eric/9394350

代码下载