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;}@Overridepublic 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);// 给图片设置tagmImageView.setTag(pos);mImageView.setImageResource(pos);container.addView(mImageView, 0);return mImageView;}@Overridepublic int getCount() {// TODO Auto-generated method stubreturn mDatas == null ? 0 : mDatas.size();}@Overridepublic boolean isViewFromObject(View arg0, Object arg1) {// TODO Auto-generated method stubreturn arg0 == (View) arg1;}@Overridepublic void destroyItem(ViewGroup container, int position, Object object) {// TODO Auto-generated method stubmImageView = 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;@Overrideprotected 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() {@Overridepublic void onPageSelected(int position) {// TODO Auto-generated method stubsuper.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）