自定义开发一个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);
}

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