你我学习网
今天，简单讲讲Android图片轮播功能。
其实图片轮播功能就是使用ViewPager和Handler,网上查找了资料，把这个简单的问题写的很复杂。其实一个自定义控件完全可以解决。这里直接上代码，不在做过多的讲解了。有问题的可以提问，我看到后会尽量回复。
一.定义相关变量
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 mBannerClicklistener;
2.初始化代码
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 = (ViewPager) view.findViewById(R.id.viewpager);
mDotlayout = (LinearLayout) view.findViewById(R.id.layout_dot);
//添加viewpager页面改变监听
mViewPager.addOnPageChangeListener(this);
}
3.绘制图片
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);
}
}
图片的adapter:
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);
}
}
4.绘制圆点
/**
* 绘制圆点
*/
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);
}
}
5.设置自动滚动
/**
* 设置自动滚动
*/
private void setAuto() {
handler.postDelayed(mTask, DELAY_TIME);
}
这个其实就是使用handle循环发送消息，进行图片轮播。mTask代码：
/**
* 定时任务
*/
Runnable mTask = new Runnable() {
@Override
public void run() {
currentItem++;
if (currentItem >= count) {
currentItem = 0;
}
mViewPager.setCurrentItem(currentItem);
handler.postDelayed(this, DELAY_TIME);
}
};
6.监听滑动事件，当用户滑动时，停止自动轮播
/**
* 处理自动轮播和手动滑动的冲突
*
* @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);//取消任务
}简单讲讲，其实就是自定义控件，里面有图片的adapter,和圆点的列表，设置一个handler不停的发送命令，实现了图片自动轮播，监听滑动点击事件，处理用户手动滑动与自动滑动的冲突。
自定义控件的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>
使用也很简单：
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();
}
});
如果有一定基础，应该能看懂了。如果看不懂，可以下载源码：https://download.csdn.net/download/bzlj2912009596/10588473
android 图片轮播就讲完了。
就这么简单。
标签:
android 图片轮播
