Android的banner（轮播图）的实现

本文使用了ViewPager来实现轮播图的功能，轮播的图片资源来源于网上。

一、思路

我们想要实现一个轮播图的功能，首先能想到的是使用ViewPager来实现，根据上一篇文章的内容
http://blog.csdn.net/llayjun/article/details/51362905，我们能想到有一个区别如下：

1、就是使得ViewPager实现启动页来无限的轮播图片

2、启动一个定时器来完成自动的轮播效果。

二、写布局代码

1、我们先是来看一下效果图，如何，还是可以的吧。

注意点：这一节对于上一节，有几处是不相同的。相对于ViewPager来实现启动页
1、上一节的指示器是固定在xml文件中写的，此一节，我们动态来实现。

2、主界面布局准备。
先把布局文件画好。在layout文件中的activity.xml文件。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent"><android.support.v4.view.ViewPager
        android:id="@+id/viewpager"android:layout_width="match_parent"android:layout_height="150dp" /><LinearLayout
        android:layout_width="match_parent"android:layout_height="wrap_content"android:layout_alignBottom="@id/viewpager"android:background="#33000000"android:orientation="vertical"android:padding="5dp"><TextView
            android:id="@+id/tv_bannertext"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_gravity="center_horizontal"android:padding="5dp"android:text="我是第一个广告语"android:textColor="@android:color/white" /><LinearLayout
            android:id="@+id/points"android:layout_width="match_parent"android:layout_height="wrap_content"android:gravity="center_horizontal"android:orientation="horizontal"></LinearLayout></LinearLayout></RelativeLayout>

注意点：
1、使用相对布局，可以是重叠效果更好的实现。
2、一共有三个部分，ViewPager，TextVeiw和指示器的LinearLayout
3、指示器动态生成

3、指示器布局代码
①实现点击效果布局代码drawable文件中point_selector.xml文件

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android"><item android:drawable="@drawable/v_point_up" android:state_enabled="true"></item><item android:drawable="@drawable/v_point_down" android:state_enabled="false"></item></selector>

②点击效果文件drawable文件中v_point_down.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"android:shape="oval"><corners android:radius="0.5dp" /><solid android:color="#55000000" /></shape>

③未点击效果文件drawable文件中v_point_up.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"android:shape="oval"><corners android:radius="0.5dp" /><solid android:color="#AAFFFFFF" /></shape>

三、写Activity代码

思路：主要分为四个部分，我分别写在了四个方法里，
initView();初始化主布局中的控件，ViewPager，TextView，LinearLayout
initDate();初始化一些数据，包含：ViewPager的资源，根据轮播图的数量来动态生成指示器的数量
initAction();将ViewPager和指示器进行连接起来，这样子ViewPager滚动的时候才能带动指示器
initThread();开启一个线程来自动循环轮播图，在onDestory()方法中，关闭这个线程

我就直接上代码了，代码中注释也是非常清楚了。BannerActivity.java文件

public class BannerActivity extends AppCompatActivity implements ViewPager.OnPageChangeListener, View.OnClickListener {//设置数据源集合private List<BannerBean> listBannerBean;//设置视图的集合private List<ImageView> listImageView;//ViewPager的声明private ViewPager viewPager;private TextView textView;private LinearLayout linearLayout;//设置圆点Viewprivate View view;LinearLayout.LayoutParams layoutParams;//圆圈标志位置private int pointIndex = 0;// 线程标志private boolean isStop = false;//设置ViewPager适配器private BannerAdapter bannerAdapter;//Volley加载网络图片private RequestQueue mQueue;private ImageLoader mImageLoader;private ImageLoader.ImageListener imageListener;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_banner);initView();initDate();initAction();initThread();}private void initThread() {// 开启新线程，2秒一次更新Bannernew Thread(new Runnable() {@Overridepublic void run() {while (!isStop) {SystemClock.sleep(3000);runOnUiThread(new Runnable() {@Overridepublic void run() {viewPager.setCurrentItem(viewPager.getCurrentItem() + 1);}});}}}).start();}private void initAction() {//取中间数来作为起始位置int index = (Integer.MAX_VALUE / 2) - (Integer.MAX_VALUE / 2 % listImageView.size());//用来出发监听器viewPager.setCurrentItem(index);linearLayout.getChildAt(pointIndex).setEnabled(true);}private void initView() {viewPager = (ViewPager) findViewById(R.id.viewpager);textView = (TextView) findViewById(R.id.tv_bannertext);linearLayout = (LinearLayout) findViewById(R.id.points);mQueue = Volley.newRequestQueue(this);}private void initDate() {BannerBean bannerBean1 = new BannerBean("http://image.tianjimedia.com/uploadImages/2012/236/L1Q2D11EJEUR.jpg", "田野和蓝天");BannerBean bannerBean2 = new BannerBean("http://image.tianjimedia.com/uploadImages/2012/236/ZU667K72270N.jpg", "海洋和帆船");BannerBean bannerBean3 = new BannerBean("http://image.tianjimedia.com/uploadImages/2012/236/6477R0H2JBTU.jpg", "雪景");BannerBean bannerBean4 = new BannerBean("http://image.tianjimedia.com/uploadImages/2012/236/1327ORB0XR68.jpg", "古堡");BannerBean bannerBean5 = new BannerBean("http://image.tianjimedia.com/uploadImages/2012/236/2Q682OB9JGG8.jpg", "园林风景");BannerBean bannerBean6 = new BannerBean("http://image.tianjimedia.com/uploadImages/2012/236/2V5E4MEHVT8L.jpg", "春夏秋冬");listBannerBean = new ArrayList<>();listBannerBean.add(bannerBean1);listBannerBean.add(bannerBean2);listBannerBean.add(bannerBean3);listBannerBean.add(bannerBean4);listBannerBean.add(bannerBean5);listBannerBean.add(bannerBean6);listImageView = new ArrayList<>();for (int i = 0; i < listBannerBean.size(); i++) {//设置广告图ImageView imageView = new ImageView(this);imageView.setLayoutParams(new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT));imageView.setScaleType(ImageView.ScaleType.FIT_XY);//设置缩放样式mImageLoader = new ImageLoader(mQueue, new ImageLoader.ImageCache() {@Overridepublic Bitmap getBitmap(String s) {return null;}@Overridepublic void putBitmap(String s, Bitmap bitmap) {}});imageListener = ImageLoader.getImageListener(imageView, R.mipmap.ic_launcher, R.mipmap.ic_launcher);mImageLoader.get(listBannerBean.get(i).getImageUrl(), imageListener);listImageView.add(imageView);//设置圆点view = new View(this);layoutParams = new LinearLayout.LayoutParams(20, 20);layoutParams.leftMargin = 10;view.setBackgroundResource(R.drawable.point_selector);view.setLayoutParams(layoutParams);view.setEnabled(false);linearLayout.addView(view);}bannerAdapter = new BannerAdapter(listImageView, this, listBannerBean);viewPager.setAdapter(bannerAdapter);viewPager.setOnPageChangeListener(this);}@Overridepublic void onClick(View v) {//此处实现点击指示器，来显示第几个轮播图，但我觉得一般轮播图里的点太小，可能会产出误触，不建议}@Overridepublic void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {}@Overridepublic void onPageSelected(int position) {int newPosition = position % listBannerBean.size();textView.setText(listBannerBean.get(newPosition).getText());linearLayout.getChildAt(newPosition).setEnabled(true);linearLayout.getChildAt(pointIndex).setEnabled(false);pointIndex = newPosition;}@Overridepublic void onPageScrollStateChanged(int state) {}@Overrideprotected void onDestroy() {// 关闭定时器isStop = true;super.onDestroy();}

注意点：

1、

private void initAction() {
//取中间数来作为起始位置
int index = (Integer.MAX_VALUE / 2) - (Integer.MAX_VALUE / 2 % listImageView.size());
//用来出发监听器
viewPager.setCurrentItem(index);
linearLayout.getChildAt(pointIndex).setEnabled(true);
}

这一段代码要好好注意，因为起始位置不能为0，为0的话，当滑动到第一张时，就不能再向左滑动了，所以我们选取一个中间值得位置作为起始位置，这样就不用担心两边会滑到头了。

四、ViewPager的适配器

直接上代码：BannerAdapter.java

public class BannerAdapter extends PagerAdapter {private List<ImageView> list;private Context context;private List<BannerBean> bannerBeanList;public BannerAdapter(List<ImageView> list, Context context, List<BannerBean> bannerBeanList) {this.list = list;this.context = context;this.bannerBeanList = bannerBeanList;}@Overridepublic int getCount() {//取超大的数，实现无线循环效果return Integer.MAX_VALUE;}@Overridepublic boolean isViewFromObject(View view, Object object) {return view == object;}@Overridepublic void destroyItem(ViewGroup container, int position, Object object) {container.removeView(list.get(position % list.size()));}@Overridepublic Object instantiateItem(ViewGroup container, final int position) {//这边有一个很大的问题待解决，当图片数量小于3的时候，不会调用destroyItem(ViewGroup container, int position, Object object)这个方法，则会出现问题。//如果是多余三张的时候，是会调用，然后进行移除。container.addView(list.get(position % list.size()));list.get(position % list.size()).setOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View v) {Toast.makeText(context, bannerBeanList.get(position % list.size()).getText(), Toast.LENGTH_SHORT).show();}});return list.get(position % list.size());}}

注意：
1、在getCount（）方法中返回的是Integer.MAX_VALUE；因为想要实现无限次的轮播效果，所以不能返回轮播图的数量。
2、然后之前的position就要用position % list.size()来取代，这样就不会出现越界的现象。
3、这里还有一个问题没有解决，就是当轮播图的图片少于三张的时候，会出现空白的问题。因为少于3张图的时候，不会调用destroyItem（）这个方法，就不会销毁之前的图。以后再解决吧！希望大家也能够给点意见。