自定义开发一个android轮播图控件BannerImg

app开发中经常会用到轮播图控件，这里干脆自定义开发一个常用的组件(主要使用ViewPager+ImageLoader)，以后每次调用时，用起来方便：）

先看下效果图：

自定义的控件为BannerImg类，首先看布局文件

bannerimg.xml

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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/imagePager"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/dotsImg"
        android:gravity="center_horizontal"
        android:layout_gravity="bottom|center_horizontal">

    </LinearLayout>
</FrameLayout>

然后是类文件

BannerImg.java

import android.annotation.SuppressLint;
import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.drawable.Drawable;
import android.os.Handler;
import android.os.Message;
import android.os.Parcelable;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.util.AttributeSet;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.FrameLayout;
import android.widget.ImageView;
import android.widget.LinearLayout;

import com.nostra13.universalimageloader.cache.disc.naming.Md5FileNameGenerator;
import com.nostra13.universalimageloader.core.DisplayImageOptions;
import com.nostra13.universalimageloader.core.ImageLoader;
import com.nostra13.universalimageloader.core.ImageLoaderConfiguration;
import com.nostra13.universalimageloader.core.assist.ImageScaleType;
import com.nostra13.universalimageloader.core.assist.QueueProcessingType;
import com.nostra13.universalimageloader.core.display.FadeInBitmapDisplayer;
import com.nostra13.universalimageloader.core.listener.SimpleImageLoadingListener;

import java.util.ArrayList;
import java.util.List;
import java.util.concurrent.Executors;
import java.util.concurrent.ScheduledExecutorService;
import java.util.concurrent.TimeUnit;

/**
 * Created by Administrator on 2015-12-30.
 */
public class BannerImg extends FrameLayout {
    private final static boolean isAutoPlay = true;
    private List<String> imageUris;
    private List<ImageView> imageViewsList;
    private List<ImageView> dotViewsList;
    private LinearLayout mLinearLayout;
    private ViewPager mViewPager;
    private int currentItem  = 0;
    private ScheduledExecutorService scheduledExecutorService;
    @SuppressLint("HandlerLeak")
    private Handler handler = new Handler(){
        @Override
        public void handleMessage(Message msg) {
            // TODO Auto-generated method stub
            super.handleMessage(msg);
            mViewPager.setCurrentItem(currentItem);
        }
    };
    //使用ImageLoader加载网络图片
    ImageLoader imageLoader = ImageLoader.getInstance();
    DisplayImageOptions options = new DisplayImageOptions.Builder()
            .showImageForEmptyUri(R.mipmap.image_for_empty_url)
    .showImageOnFail(R.mipmap.image_for_empty_url)
    .resetViewBeforeLoading(true)
    .cacheOnDisk(true)
    .imageScaleType(ImageScaleType.EXACTLY)
    .bitmapConfig(Bitmap.Config.RGB_565)
    .considerExifParams(true)
    .displayer(new FadeInBitmapDisplayer(300)).build();
    public BannerImg(Context context) {
        this(context,null);
    }
    public BannerImg(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }
    public BannerImg(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        // TODO Auto-generated constructor stub
        initUI(context);
        if(!(imageUris.size()<=0))
        {
            setImageUris(imageUris);
        }
        if(isAutoPlay){
            startPlay();
        }

    }
    private void initUI(Context context){
        imageViewsList = new ArrayList<ImageView>();
        dotViewsList = new ArrayList<ImageView>();
        imageUris=new ArrayList<String>();
        LayoutInflater.from(context).inflate(R.layout.bannerimg, this, true);
        mLinearLayout=(LinearLayout)findViewById(R.id.dotsImg);
        mViewPager = (ViewPager) findViewById(R.id.imagePager);
        ImageLoaderConfiguration.Builder config = new ImageLoaderConfiguration.Builder(context);
        config.threadPriority(Thread.NORM_PRIORITY - 2);
        config.denyCacheImageMultipleSizesInMemory();
        config.diskCacheFileNameGenerator(new Md5FileNameGenerator());
        config.diskCacheSize(50 * 1024 * 1024); // 50 MiB
        config.tasksProcessingOrder(QueueProcessingType.LIFO);
        config.writeDebugLogs(); // Remove for release app
        // Initialize ImageLoader with configuration.
        imageLoader.init(config.build());
    }
    public void setImageUris(List<String> imageuris)
    {
        for(int i=0;i<imageuris.size();i++)
        {
            imageUris.add(imageuris.get(i));
        }
        for (int i = 0; i < imageUris.size(); i++) {
            ImageView imageView = new ImageView(getContext());
            imageView.setScaleType(ImageView.ScaleType.FIT_XY);//铺满屏幕
            imageLoader.displayImage(imageUris.get(i), imageView, options, new SimpleImageLoadingListener() {
                @Override
                public void onLoadingStarted(String imageUri, View view) {
                }

                @Override
                public void onLoadingComplete(String imageUri, View view, Bitmap loadedImage) {
                }
            });
            imageViewsList.add(imageView);
            ImageView viewDot =  new ImageView(getContext());
            if(i == 0){
                viewDot.setBackgroundResource(R.mipmap.dot_focus);
            }else{
                viewDot.setBackgroundResource(R.mipmap.dot);
            }
            dotViewsList.add(viewDot);
            mLinearLayout.addView(viewDot);
        }
        mViewPager.setFocusable(true);
        mViewPager.setAdapter(new MyPagerAdapter());
        mViewPager.setOnPageChangeListener(new MyPageChangeListener());
    }


    private void startPlay(){
        scheduledExecutorService = Executors.newSingleThreadScheduledExecutor();
        scheduledExecutorService.scheduleAtFixedRate(new BannerTask(), 1, 4, TimeUnit.SECONDS);
    }

    @SuppressWarnings("unused")
    private void stopPlay(){
        scheduledExecutorService.shutdown();
    }
    /**
     * 设置选中的圆点的背景
     * @param selectItems
     */
    private void setImageBackground(int selectItems){
        for(int i=0; i<dotViewsList.size(); i++){
            if(i == selectItems){
                dotViewsList.get(i).setBackgroundResource(R.mipmap.dot_focus);
            }else{
                dotViewsList.get(i).setBackgroundResource(R.mipmap.dot);
            }
        }
    }
    private class MyPagerAdapter  extends PagerAdapter {
        @Override
        public void destroyItem(View container, int position, Object object) {
            // TODO Auto-generated method stub
            //((ViewPag.er)container).removeView((View)object);
            ((ViewPager)container).removeView(imageViewsList.get(position));
        }

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

        @Override
        public int getCount() {
            // TODO Auto-generated method stub
            return imageViewsList.size();
        }

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

        @Override
        public Parcelable saveState() {
            // TODO Auto-generated method stub
            return null;
        }
    }


    private class MyPageChangeListener implements ViewPager.OnPageChangeListener {
        boolean isAutoPlay = false;
        @Override
        public void onPageScrollStateChanged(int arg0) {
            // TODO Auto-generated method stub
            switch (arg0) {
                case 1:
                    isAutoPlay = false;
                    break;
                case 2:
                    isAutoPlay = true;
                    break;
                case 0:
          <span style="font-family: Arial, Helvetica, sans-serif;">                    //如果滑到最后，就从头开始</span>

                    if (mViewPager.getCurrentItem() == mViewPager.getAdapter().getCount() - 1 && !isAutoPlay) {
                        mViewPager.setCurrentItem(0);
                    }
                    //如果滑到头就从尾开始
                    else if (mViewPager.getCurrentItem() == 0 && !isAutoPlay) {
                        mViewPager.setCurrentItem(mViewPager.getAdapter().getCount() - 1);
                    }
                    break;
            }
        }

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

        @Override
        public void onPageSelected(int pos) {
            // TODO Auto-generated method stub
            setImageBackground(pos);
        }
    }



    private class BannerTask implements Runnable{
        @Override
        public void run() {
            // TODO Auto-generated method stub
            synchronized (mViewPager) {
                currentItem = (currentItem+1)%imageViewsList.size();
                handler.obtainMessage().sendToTarget();
            }
        }
    }
    
}

上面 控件设计好了，就看如何使用了，我们放到MainActivity中看效果，

activity_main.xml

<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"
    android:background="@color/balack_thin"
    android:paddingBottom="10dp">

    <com.test.controls.BannerImg
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:id="@+id/mainBanner"></com.test.controls.BannerImg>

</LinearLayout>

然后看MainActivity.java调用代码：

protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        BannerImg bannerImg=(BannerImg)findViewById(R.id.mainBanner);
        List<String> imgs=new ArrayList<String>();
        imgs.add(0,"http://www.tot.name/app/banner/1.jpg");
        imgs.add(1,"<span style="font-family: Arial, Helvetica, sans-serif;">http://www.tot.name</span>/app/banner/2.jpg");
        imgs.add(2,"http://www.tot.name/app/banner/3.jpg");
        imgs.add(3,"http://www.tot.name/app/banner/4.jpg");
        imgs.add(4,"http://www.tot.name/app/banner/5.jpg");
        bannerImg.setImageUris(imgs);
    }

看看，是不是比较简单。这样就完成了。