Android中使用自定义view实现轮播图

先导依赖:(可以选择使用imageloder,或者gilde加载图片)
compile 'com.github.bumptech.glide:glide:3.6.1'
compile 'com.nostra13.universalimageloader:universal-image-loader:1.9.5'-----------------MainActivity------------------
package com.example.earl.myviewpager_banner;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.Toast;
import java.util.ArrayList;
import java.util.List;

public class MainActivity extends AppCompatActivity {
private Banner banner;
private List<String> urls;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
getSupportActionBar().hide();
banner = (Banner) findViewById(R.id.banner);

urls = new ArrayList<>();
urls.add("http://img2.imgtn.bdimg.com/it/u=3585804305,763553611&fm=27&gp=0.jpg");
urls.add("http://img0.imgtn.bdimg.com/it/u=3281146250,5393266&fm=27&gp=0.jpg");
urls.add("http://img5.imgtn.bdimg.com/it/u=2496610138,254842195&fm=27&gp=0.jpg");
urls.add("http://img5.imgtn.bdimg.com/it/u=2951375427,1212049814&fm=27&gp=0.jpg");

//解耦
banner.loadData(urls).display();//构建者模式返回对象本身

banner.setBannerClicklistener(new Banner.BannerClicklistener() {
@Override
public void onClickListener(int pos) {

Toast.makeText(MainActivity.this, "pos====" + pos, Toast.LENGTH_SHORT).show();
}
});

}

@Override
protected void onDestroy() {
super.onDestroy();
if (banner != null) {
banner.cancel();
banner = null;

}
}
}
------------------Banner-------------------package com.example.earl.myviewpager_banner;

import android.content.Context;
import android.content.res.TypedArray;
import android.os.Handler;
import android.support.annotation.AttrRes;
import android.support.annotation.NonNull;
import android.support.annotation.Nullable;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.util.AttributeSet;
import android.view.LayoutInflater;
import android.view.MotionEvent;
import android.view.View;
import android.view.ViewGroup;
import android.widget.FrameLayout;
import android.widget.ImageView;
import android.widget.LinearLayout;

import com.bumptech.glide.Glide;
import com.nostra13.universalimageloader.core.ImageLoader;
import java.util.ArrayList;
import java.util.List;

public class Banner extends FrameLayout implements ViewPager.OnPageChangeListener{

private final int DELAY_TIME = 3000;//自动轮播时间
private List<String> mUrls;
private List<ImageView> mViewpagerViews;
private List<ImageView> mDotImageviews;
private Context context;
private int size;//圆点的大小
private int margin;//圆点的间距
private int count;//viewpager中view的数量
private ViewPager mViewPager;
private LinearLayout mDotlayout;//圆点布局
private MyPager mPagerAdapter;

private int currentItem;//当前viewpager索引

private Handler handler = new Handler();

private BannerClicklistener mBan
12fb6
nerClicklistener;

public Banner(@NonNull Context context) {
super(context);

init(context, null);
}

public Banner(@NonNull Context context, @Nullable AttributeSet attrs) {
super(context, attrs);
init(context, attrs);
}

public Banner(@NonNull Context context, @Nullable AttributeSet attrs, @AttrRes int defStyleAttr) {
super(context, attrs, defStyleAttr);
init(context, attrs);
}

/**
* 初始化数据
*
* @param context
* @param attrs
*/
private void init(Context context, AttributeSet attrs) {
this.context = context;
mUrls = new ArrayList<>();
mViewpagerViews = new ArrayList<>();
mDotImageviews = new ArrayList<>();
//拿到自定义的属性数组
TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.Banner);
//得到数组里的自定义的size（圆点大小）
size = typedArray.getDimensionPixelSize(R.styleable.Banner_size, 10);
//得到数组里的自定义的margin（圆点间距）
margin = typedArray.getDimensionPixelSize(R.styleable.Banner_margin, 10);

typedArray.recycle();//通知jvm的垃圾回收器，当你回收对象的时候，一定要把我回收了

View view = LayoutInflater.from(context).inflate(R.layout.banner_layout, this, true);
// addView(view);
// View child = LayoutInflater.from(context).inflate(R.layout.banner_layout,null);
// addView(child);
mViewPager = view.findViewById(R.id.viewpager);
mDotlayout = view.findViewById(R.id.layout_dot);

//添加viewpager页面改变监听
mViewPager.addOnPageChangeListener(this);

}

/**
* 绘制自定义view的所有元素
*/
public void display() {
//绘制viewpager
drawViewpager();
//绘制圆点
drawDots();
//设置自动滚动
setAuto();

}

/**
* 设置自动滚动
*/
private void setAuto() {
handler.postDelayed(mTask, DELAY_TIME);
}

/**
* 定时任务
*/
Runnable mTask = new Runnable() {
@Override
public void run() {
currentItem++;
if (currentItem >= count) {
currentItem = 0;
}
mViewPager.setCurrentItem(currentItem);
handler.postDelayed(this, DELAY_TIME);
}
};

/**
* 传urls
*
* @param urls
*/
public Banner loadData(List<String> urls) {
this.mUrls = urls;
this.count = urls.size();
return this;
}

/**
* 绘制圆点
*/
private void drawDots() {

for (int i = 0; i < count; i++) {

ImageView iv = new ImageView(context);

LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(size, size);
params.leftMargin = margin;
params.rightMargin = margin;
iv.setLayoutParams(params);

mDotImageviews.add(iv);

if (i == 0) {

iv.setImageResource(R.drawable.dot_selected);
} else {
iv.setImageResource(R.drawable.dot_normal);
}

mDotlayout.addView(iv);
}

}

private void drawViewpager() {
for (int i = 0; i < count; i++) {
ImageView iv = new ImageView(context);
iv.setScaleType(ImageView.ScaleType.CENTER_CROP);
mViewpagerViews.add(iv);
}
if (mViewpagerViews != null) {
mPagerAdapter = new MyPager();
mViewPager.setAdapter(mPagerAdapter);
}
}

@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

}

/**
* 切换页面的监听
* @param position
*/
@Override
public void onPageSelected(int position) {

for (int i = 0; i < count; i++) {
if (i == position) {
mDotImageviews.get(i).setImageResource(R.drawable.dot_selected);
} else {
mDotImageviews.get(i).setImageResource(R.drawable.dot_normal);
}

}

}

@Override
public void onPageScrollStateChanged(int state) {

}

class MyPager extends PagerAdapter {

@Override
public int getCount() {
return mViewpagerViews.size();
}

@Override
public boolean isViewFromObject(View view, Object object) {
return view == object;
}

@Override
public Object instantiateItem(ViewGroup container, final int position) {

ImageView view = mViewpagerViews.get(position);
container.addView(view);

view.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View view) {

//实现点击逻辑

mBannerClicklistener.onClickListener(position);
}
});

System.out.println("urls:"+mUrls.get(position));

ImageLoader.getInstance().displayImage(mUrls.get(position), view);
// Glide.with(context)
// .load(mUrls.get(position))
// .into(view);
return view;
}

@Override
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView((View) object);
}
}

/**
* 处理自动轮播和手动滑动的冲突
*
* @param ev
* @return
*/
@Override
public boolean dispatchTouchEvent(MotionEvent ev) {
int action = ev.getAction();
if (action == MotionEvent.ACTION_DOWN || action == MotionEvent.ACTION_MOVE) {
stopAuto();
} else if (action == MotionEvent.ACTION_UP) {
setAuto();
}
return super.dispatchTouchEvent(ev);
}

/**
* 取消自动轮播任务
*/
private void stopAuto() {
handler.removeCallbacks(mTask);//取消任务
}

/**
* 供外部调用者调用的接口类
*/
public interface BannerClicklistener {
void onClickListener(int pos);
}

/**
* 供外部调用者初始化接口对象
*/
public void setBannerClicklistener(BannerClicklistener bannerClicklistener) {
this.mBannerClicklistener = bannerClicklistener;
}

//取消轮播任务
public void cancel(){
handler.removeCallbacks(mTask);
}
}-----------------App-----------------
package com.example.earl.myviewpager_banner;

import android.app.Application;
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;

public class App extends Application{

@Override
public void onCreate() {
super.onCreate();

init();
}

private void init() {
DisplayImageOptions o = new DisplayImageOptions.Builder()
.cacheInMemory(true)
.cacheOnDisk(true)
.build();

ImageLoaderConfiguration config = new ImageLoaderConfiguration.Builder(this)
.writeDebugLogs()
.diskCacheFileNameGenerator(new Md5FileNameGenerator())
.defaultDisplayImageOptions(o)
.build();
ImageLoader.getInstance().init(config);
}
}
<----------在drawable中创建xml文件,绘制出小圆点----------->
------------dot_normal.xml------------
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<solid android:color="@android:color/white"></solid>
<size android:height="10dp" android:width="10dp"/>
</shape>
-------------dot_selected.xml----------
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">

<solid android:color="@android:color/holo_green_dark"></solid>
<size android:height="10dp" android:width="10dp"/>

</shape>
---------------activity_main.xml-------------
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
android:orientation="vertical"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:banner="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.example.earl.myviewpager_banner.MainActivity">

<com.example.earl.myviewpager_banner.Banner
android:id="@+id/banner"
android:layout_width="match_parent"
android:layout_height="200dp"
android:visibility="visible"
banner:margin="10dp"
banner:size="10dp"></com.example.earl.myviewpager_banner.Banner>
</LinearLayout>
--------------banner_layout.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/viewpager"
android:layout_width="match_parent"
android:layout_height="200dp" />

<LinearLayout
android:id="@+id/layout_dot"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:gravity="center"
android:orientation="horizontal"
android:paddingBottom="10dp" />

</FrameLayout>
<------------在value中创建 attrs.xml----------->
<?xml version="1.0" encoding="utf-8"?>
<resources>
<declare-styleable name="Banner">
<attr name="size" format="dimension"/>
<attr name="margin" format="dimension"/>
</declare-styleable>
</resources>