ViewPager实现类似广告界面滚动效果

现在的app上很多信息和广告都是一些自动滚动的viewpager的效果展示的，很直观也很美观。所以今天我尝试下使用下。

整个布局就是一个viewpager组件再加一个布局放小圆点更换状态。

先上效果图：

布局文件activity_main.xml，主界面就是viewpager加上textview和一个linearlayout放小圆点：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="10dp"
        android:layout_marginRight="10dp"
        android:layout_marginTop="4dp" >

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

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="30dp"
            android:layout_gravity="bottom"
            android:background="#6000"
            android:gravity="center_vertical" >

            <TextView
                android:id="@+id/tv_title"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="2dp"
                android:layout_weight="1"
                android:text="火影忍者"
                android:textColor="#FF0033" />

            <LinearLayout
                android:id="@+id/llayout"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="right|bottom"
                android:layout_marginBottom="2dp"
                android:orientation="horizontal" >
            </LinearLayout>
        </LinearLayout>
    </FrameLayout>

</LinearLayout>

然后是ViewPagerAdapter.class:

public class ViewPagerAdapter extends PagerAdapter {
	private Context context;
	private List<Integer> mDatas;
	private List<ImageView> mViews;
	private ImageView mImageView;

	public ViewPagerAdapter(Context context, List<Integer> mData) {
		this.context = context;
		this.mDatas = mData;
		mViews = new ArrayList<ImageView>();
		// 这个步骤是为了给mViews添加长度!!!
		int length = mData == null ? 0 : mData.size();
		for (int i = 0; i < length; i++) {
			ImageView imageView = new ImageView(context);
			mViews.add(imageView);

		}
		length = 0;
	}

	@Override
	public Object instantiateItem(ViewGroup container, int position) {
		// TODO Auto-generated method stub
		// 得到图片
		int pos = mDatas.get(position);
		mImageView = mViews.get(position);
		// 设置图片适应缩放
		mImageView.setAdjustViewBounds(true);
		mImageView.setScaleType(ScaleType.FIT_XY);
		// 给图片设置tag
		mImageView.setTag(pos);

		mImageView.setImageResource(pos);

		container.addView(mImageView, 0);
		return mImageView;

	}

	@Override
	public int getCount() {
		// TODO Auto-generated method stub
		return mDatas == null ? 0 : mDatas.size();
	}

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

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

MainActivity.class，大部分都注解了

public class MainActivity extends Activity {
	private ViewPager viewPager;
	// 标题
	private TextView tv_title;
	// 小圆点
	private ImageView[] mImageViews;
	// 当前下标
	private int currentPosition = 0;
	// 存放图片的数据
	private List<Integer> mDatas;
	// 小圆点的布局
	private LinearLayout ll;

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		viewPager = (ViewPager) findViewById(R.id.viewpager);
		tv_title = (TextView) findViewById(R.id.tv_title);
		// 加载小圆点
		createPoint();
		// 得到图片信息
		getData();
		viewPager.setAdapter(new ViewPagerAdapter(this, mDatas));
		viewPager
				.setOnPageChangeListener(new ViewPager.SimpleOnPageChangeListener() {
					@Override
					public void onPageSelected(int position) {
						// TODO Auto-generated method stub
						super.onPageSelected(position);
						// 滑动viewpager后的操作
						setCurrentPosition(position);
					}
				});
	}

	// 设置当前的下标
	private void setCurrentPosition(int index) {
		// 如果传过来的下标是小于0或者是大于图片的总长度或者等于当前下标的话，不进行任何操作，返回空
		if (index < 0 || index > mImageViews.length || index == currentPosition) {
			return;
		}

		mImageViews[currentPosition].setEnabled(true);
		// 滑到下一个界面的小圆点显示选中状态
		mImageViews[index].setEnabled(false);
		switch (index) {
		case 0:
			tv_title.setText("火影忍者");
			break;
		case 1:
			tv_title.setText("海贼王");
			break;
		case 2:
			tv_title.setText("妖精的尾巴");
			break;
		case 3:
			tv_title.setText("银魂");
			break;
		case 4:
			tv_title.setText("黑子的篮球");
			break;

		}
		currentPosition = index;

	}

	/**
	 * 创建圆点
	 */
	private void createPoint() {

		ll = (LinearLayout) findViewById(R.id.llayout);
		// 设置参数
		LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(
				LinearLayout.LayoutParams.WRAP_CONTENT,
				LinearLayout.LayoutParams.WRAP_CONTENT);
		params.setMargins(0, 0, 12, 0);
		mImageViews = new ImageView[5];
		// 加载小圆点
		for (int i = 0; i < mImageViews.length; i++) {
			mImageViews[i] = new ImageView(getApplicationContext());
			mImageViews[i].setImageResource(R.drawable.guide_round);
			mImageViews[i].setLayoutParams(params);
			mImageViews[i].setEnabled(true);
			ll.addView(mImageViews[i]);
		}
		// 显示选中状态的小圆点
		mImageViews[currentPosition].setEnabled(false);
	}

	/**
	 * 获得图片数据
	 */
	private void getData() {
		mDatas = new ArrayList<Integer>();
		mDatas.add(R.drawable.huoying);
		mDatas.add(R.drawable.caomao);
		mDatas.add(R.drawable.yaowei);
		mDatas.add(R.drawable.yinhun);
		mDatas.add(R.drawable.diguang);

	}

大部分代码我都注解了，应该都能看懂。这是例子虽然简单却很实用，如果要加载网络图片的话，原理也差不多。希望能帮到人。

源码地址：http://download.csdn.net/detail/u011388551/8910177（积分不多了，所以求些积分T_T）