Android 使用ViewPager 做的半吊子的图片轮播

效果图

虽然不咋样，但是最起码的功能是实现了,下面我们来一步步的实现它。

界面

下面我们来分析一下界面的构成

1. 整体的布局: 因为我们要做出这种，一层叠加一层的效果，就目前开来只有 FrameLayout 布局能够做出来的。
2. 下面的小点：明显的我们这里用的是RadioButton控件来做的。
3. 黑色的边框: 为了更好的显示图片轮播的区域，我们用 shapexml 文件，为我们的图片轮播添加了一个边框。
4. ui的主体:因为我们的图片是要进行轮播的，我们这里用了ViewPager作为了该界面的主体。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:tools="http://schemas.android.com/tools"android:id="@+id/activity_main"android:layout_width="match_parent"android:layout_height="match_parent"android:paddingBottom="@dimen/activity_vertical_margin"android:paddingLeft="@dimen/activity_horizontal_margin"android:paddingRight="@dimen/activity_horizontal_margin"android:paddingTop="@dimen/activity_vertical_margin"tools:context="com.example.it.studyimagerecycle.MainActivity"><!--用于实现 一层一层效果的帧布局，通过background属性设置了一圈边框--><FrameLayoutandroid:id="@+id/img_cycle"android:layout_width="match_parent"android:layout_height="180dp"android:background="@drawable/cycleimg_border"><!--用来实现图片轮播的主体--><android.support.v4.view.ViewPagerandroid:id="@+id/img_cycle_viewpager"android:layout_width="match_parent"android:layout_height="match_parent"android:layout_margin="2dp"></android.support.v4.view.ViewPager><!--图片轮播下方的小点，因为比较懒就在布局文件中直接写死了，其实可以再代码中根据要轮播的数量进行生成--><RadioGroupandroid:layout_width="match_parent"android:layout_height="wrap_content"android:layout_gravity="bottom"android:layout_margin="2dp"android:gravity="center"android:orientation="horizontal"><RadioButtonandroid:id="@+id/dot1"android:layout_width="wrap_content"android:layout_height="wrap_content"android:checked="true" /><RadioButtonandroid:id="@+id/dot2"android:layout_width="wrap_content"android:layout_height="wrap_content" /><RadioButtonandroid:id="@+id/dot3"android:layout_width="wrap_content"android:layout_height="wrap_content" /></RadioGroup></FrameLayout>
</RelativeLayout>

代码

代码的分析

• 我们是要可以滑动的，这一点需要用ViewPager来实现，有ViewPager就要有我们自己实现PagerAdapter
• 我们需要生成 在ViewPager上显示的图片，所以我们要通过代码来生成一些ImageView控件。
• 而且我们需要间隔一定的时间来进行图片的切换。
• 而且随着图片的自动切换，我们下面的RadioButton也要跟着选中
• 为了更好的用户体验，我们的RadioButton不能手动的选中

成员变量

private RadioButton rb1, rb2, rb3;
private ViewPager imageViewPager;
private List<RadioButton> radiobuttionList;// 图片轮播的点的集合
private List<Integer> drawIdList; //图片id的集合
private List<ImageView> imageViewList; //要在ViewPager上显示的内容
private int pageIndex = 0; //viewpagr页面的索引
private int countDown = 3; //切换页面的倒计时

一些初始化方法

/*
* 获取我们需要的view
* */
private void initFindView() {rb1 = (RadioButton) this.findViewById(R.id.dot1);rb2 = (RadioButton) this.findViewById(R.id.dot2);rb3 = (RadioButton) this.findViewById(R.id.dot3);imageViewPager = (ViewPager) this.findViewById(R.id.img_cycle_viewpager);
}/*
* 将屏幕上的点整合起来
* */
private void initDots() {radiobuttionList = new ArrayList<RadioButton>();radiobuttionList.add(rb1);radiobuttionList.add(rb2);radiobuttionList.add(rb3);//使RadioButton不能手动选中for (RadioButton rb : radiobuttionList) {rb.setClickable(false);}
}/*
* 初始化要加载的图片
* */
private void initImage() {this.drawIdList = new ArrayList<Integer>();drawIdList.add(R.drawable.grape);drawIdList.add(R.drawable.strawberry);drawIdList.add(R.drawable.watermelon);
}/*
* 初始化ViewPage所需要的ImageView
* */
private void initImageView() {imageViewList = new ArrayList<ImageView>();for (int i = 0; i < 3; i++) {//初始化ImageView的属性ImageView imageView = new ImageView(this);//设置ImageView的属性，使ImageView的大小是填充父窗体的ViewGroup.LayoutParams lp = new ViewGroup.LayoutParams(-1, -1);//让ImageView应用这些属性imageView.setLayoutParams(lp);//使ImageView的图像填充imageView.setScaleType(ImageView.ScaleType.FIT_XY);this.imageViewList.add(imageView);}
}//在onCrate方法中调用这些初始化
@Override
protected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);initFindView();initDots();initImage();initImageView();//设置ViewPager page改变的监听this.imageViewPager.addOnPageChangeListener(this);//为ViewPager设置Adapterthis.imageViewPager.setAdapter(new MyPagerAdapter(this, imageViewList, drawIdList));//开启线程，一定时间后切换图片new Thread(this).start();
}

PagerAdapter

package com.example.it.studyimagerecycle;import android.content.Context;
import android.support.v4.view.PagerAdapter;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;import com.bumptech.glide.Glide;import java.util.List;public class MyPagerAdapter extends PagerAdapter {private final Context context; //上下文环境private final List<Integer> imgList; //在ViewPager中显示的集合private final List<ImageView> imageViewList; //图片资源Id的集合public MyPagerAdapter(Context context, List<ImageView> imageViewList, List<Integer> imageIdList) {this.context = context;this.imgList = imageIdList;this.imageViewList = imageViewList;}//释放占用的资源@Overridepublic void destroyItem(ViewGroup container, int position, Object object) {container.removeView(this.imageViewList.get(position));}//获取可滑动页面的数量@Overridepublic int getCount() {return imageViewList.size();}@Overridepublic boolean isViewFromObject(View view, Object object) {return view == object;}/** 实例化item* */@Overridepublic Object instantiateItem(ViewGroup container, int position) {ImageView imageView = this.imageViewList.get(position);int id = this.imgList.get(position);//加载出指定的图片，这里使用Glide这个开源项目，图片压缩Glide.with(this.context).load(id).into(imageView);container.addView(imageView);return imageView;}
}

ViewPager页面改变的事件

因为代码是写在Activity中的，我们要让Activity实现 ViewPager.OnPageChangeListener 接口。

@Override
public void onPageScrolled(int position, float positi
}/*
* 页面被选中的时候触发
* 我们要在这个页面中处理，当我们手动滑动页面的时候要处理的业务逻辑
* */
@Override
public void onPageSelected(int position) {//获取应该是选中状态的RadioButtonRadioButton radioButton = radiobuttionList.get(position);//设置radioButton为选中状态radioButton.setChecked(true);//重置倒计时this.countDown = 3;//重新设置pageIndexthis.pageIndex = position;
}
@Override
public void onPageScrollStateChanged(int state) {
}

子线程更新选中的页面

/*
* 倒计时进行图片的切换
* */
@Override
public void run() {//进行图片转换的前提是我们的Activity的资源没有被回收。while (MainActivity.this.isDestroyed() == false) {//让线程睡眠一秒，实现倒计时功能SystemClock.sleep(1000l);//倒计时减去countDown--;//如果倒计时结束那么进行页面的转换if (countDown == 0) {//设置该被选中的Page的索引，为原来的所以+1this.pageIndex++;//如果是我们的page已经是最后一个了，那么我么的第一个page应该被选中if (pageIndex == this.radiobuttionList.size())this.pageIndex = 0;//更新uirunOnUiThread(new Runnable() {@Overridepublic void run() {//设置选中项imageViewPager.setCurrentItem(pageIndex);}});}}
}

总结

经过以上的这些步骤，我们的图片轮播的效果已经实现了，因为本人水平原因，写的代码。。。，请大家凑活着看吧。

源码下载: https://git.oschina.net/ShareKnowledge/StudyImageCycle