建站
咨询
售后
建站咨询
Android自定义控件实现优雅的广告轮播图
前言
创新互联坚持“要么做到，要么别承诺”的工作理念，服务领域包括：成都做网站、成都网站建设、企业官网、英文网站、手机端网站、网站推广等服务，满足客户于互联网时代的德州网站设计、移动媒体设计的需求，帮助企业找到有效的互联网解决方案。努力成为您成熟可靠的网络建设合作伙伴！
今天给大家带来一个新的控件–轮播图，网上已经有很多这类的博客来讲解如何实现的，那么我的这个有哪些特点呢？或是说有哪些不同呢？
满足了轮播图的基本要求，循环滑动，在最后一张切到第一张时可以平稳的过渡
简洁简洁简洁
扩展性强
如何使用
下面我们先展示两种效果图
1 默认效果
代码实现
//布局代码//java代码 BannerM banner = (BannerM) findViewById(R.id.bm_banner); if (banner != null) { banner.setBannerBeanList(bannerList).show(); } //初始化数据 private void initData() { bannerList = new ArrayList<>(4); BannerBean banner1 = new BannerBean("测试图片1", url1, ""); BannerBean banner2 = new BannerBean("测试图片2", url2, ""); BannerBean banner3 = new BannerBean("测试图片3", url3, ""); BannerBean banner4 = new BannerBean("测试图片4", url4, ""); bannerList.add(banner1); bannerList.add(banner2); bannerList.add(banner3); bannerList.add(banner4); }
其实关键代码就一行，这里面用到了BannerBean的实体类，有三个参数，分别是图片的描述文字，图片地址，点击后对应的链接
以上全部都是默认值，下面来看一下都哪些可以自定义
2 自定义效果
图1和图2主要有以下几点不同
1 指示器和文字的位置结构，这里面我只实现了两种，大家也可以下载源码后扩展
2 圆点指示器选中后的颜色
3 自动播放的时间间隔
4 支持图片未加载出来之前显示默认图片
自定义效果的代码实现
下面通过xml和java代码来分别演示一下图2的实现
1 xml
BannerM banner = (BannerM) findViewById(R.id.bm_banner); if (banner != null) { banner.setBannerBeanList(bannerList) .setOnItemClickListener(new BannerM.OnItemClickListener() { @Override public void onItemClick(int position) { Log.e("landptf", "position = " + position); } }) .show(); }
2 java
BannerM banner = (BannerM) findViewById(R.id.bm_banner); if (banner != null) { banner.setBannerBeanList(bannerList) .setDefaultImageResId(R.drawable.default_image) .setIndexPosition(BannerM.INDEX_POSITION_BOTTOM) .setIndexColor(getResources().getColor(R.color.colorPrimary)) .setIntervalTime(3) .setOnItemClickListener(new BannerM.OnItemClickListener() { @Override public void onItemClick(int position) { Log.e("landptf", "position = " + position); } }) .show(); }
以上两种代码实现的效果完全等价，在java代码中都是通过链式调用，使代码看起来更加的简洁。
有木有很方便，大大的减少了代码量，而且是可以直接拿来用的。好了下面我们来看一下实现的代码。
实现
图片下载集成了Picasso，有对Picasso不熟悉的童鞋可以看一下我之前的博客图片加载利器之Picasso（二）基本用法
<?xml version="1.0" encoding="utf-8"?>
ViewStub的引用代码这里就不给出，大家可以访问我的git查看，文末会给出地址
package com.landptf.view;
import android.annotation.SuppressLint;
import android.content.Context;
import android.content.res.ColorStateList;
import android.content.res.TypedArray;
import android.graphics.drawable.Drawable;
import android.graphics.drawable.GradientDrawable;
import android.os.Handler;
import android.os.Message;
import android.os.Parcelable;
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.View;
import android.view.ViewGroup;
import android.view.ViewParent;
import android.view.ViewStub;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.RelativeLayout;
import android.widget.TextView;
import com.landptf.R;
import com.landptf.bean.BannerBean;
import com.landptf.util.ConvertM;
import com.squareup.picasso.MemoryPolicy;
import com.squareup.picasso.Picasso;
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 landptf on 2017/03/06.
* 轮播图控件
*/
public class BannerM extends RelativeLayout {
/**
* 圆点指示器的位置，文字在左，圆点在右
*/
public static final int INDEX_POSITION_RIGHT = 0x100;
/**
* 圆点指示器的位置，文字在上，圆点在下
*/
public static final int INDEX_POSITION_BOTTOM = 0x101;
private static final int HANDLE_UPDATE_INDEX = 0;
private Context mContext;
private ViewPager vpBanner;
private ViewPagerAdapter adapter;
private OnItemClickListener mOnItemClickListener;
//装载ImageView控件的list
private List ivList;
//圆点指示器控件
private List vList;
//控制圆点View的形状，未选中的颜色
private GradientDrawable gradientDrawable;
//控制圆点View的形状，选中的颜色
private GradientDrawable gradientDrawableSelected;
//选中圆点的颜色值，默认为#FF3333
private int indexColorResId;
//图片对应的文字描述
private TextView tvText;
//自动滑动的定时器
private ScheduledExecutorService scheduledExecutorService;
//当前加载到第几页
private int currentIndex = 0;
//默认背景图
private int defaultImageResId;
private Drawable defaultImageDrawable = null;
//自动轮播的时间间隔(s)
private int intervalTime = 5;
//轮播图需要的数据列表
private List bannerBeanList;
//圆点指示器的位置，提供两种布局
private int indexPosition = INDEX_POSITION_RIGHT;
public BannerM(Context context) {
this(context, null);
}
public BannerM(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
public BannerM(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init(context, attrs, defStyleAttr);
}
private void init(Context context, AttributeSet attrs, int defStyle) {
mContext = context;
LayoutInflater.from(context).inflate(R.layout.view_banner_m, this, true);
vpBanner = (ViewPager) findViewById(R.id.vp_banner);
TypedArray a = getContext().obtainStyledAttributes(
attrs, R.styleable.bannerM, defStyle, 0);
if (a != null) {
defaultImageDrawable = a.getDrawable(R.styleable.bannerM_defaultImageDrawable);
intervalTime = a.getInteger(R.styleable.bannerM_intervalTime, 5);
indexPosition = a.getInteger(R.styleable.bannerM_indexPosition, INDEX_POSITION_RIGHT);
ColorStateList indexColorList = a.getColorStateList(R.styleable.bannerM_indexColor);
if (indexColorList != null) {
indexColorResId = indexColorList.getColorForState(getDrawableState(), 0);
}
a.recycle();
}
}
/**
* 设置图片加载之前默认显示的图片
*
* @param defaultImageResId
* @return BannerM
*/
public BannerM setDefaultImageResId(int defaultImageResId) {
this.defaultImageResId = defaultImageResId;
return this;
}
/**
* 设置图片加载之前默认显示的图片
*
* @param defaultImageDrawable
* @return BannerM
*/
public BannerM setDefaultImageDrawable(Drawable defaultImageDrawable) {
this.defaultImageDrawable = defaultImageDrawable;
return this;
}
/**
* 设置轮播的时间间隔，单位为s，默认为5s
*
* @param intervalTime
* @return BannerM
*/
public BannerM setIntervalTime(int intervalTime) {
this.intervalTime = intervalTime;
return this;
}
/**
* 设置圆点指示器的位置
* #BannerM.INDEX_POSITION_RIGHT or #BannerM.INDEX_POSITION_BOTTOM
*
* @param indexPosition
* @return BannerM
*/
public BannerM setIndexPosition(int indexPosition) {
this.indexPosition = indexPosition;
return this;
}
/**
* 选中圆点的颜色值，默认为#FF3333
*
* @param indexColor
* @return BannerM
*/
public BannerM setIndexColor(int indexColor) {
this.indexColorResId = indexColor;
return this;
}
/**
* 设置轮播图需要的数据列表
*
* @param bannerBeanList
* @return BannerM
*/
public BannerM setBannerBeanList(List bannerBeanList) {
this.bannerBeanList = bannerBeanList;
return this;
}
/**
* 设置图片的点击事件
* @param listener
*/
public BannerM setOnItemClickListener(@Nullable OnItemClickListener listener) {
mOnItemClickListener = listener;
return this;
}
public void show() {
if (bannerBeanList == null || bannerBeanList.size() == 0) {
throw new IllegalArgumentException("bannerBeanList == null");
}
initImageViewList();
initIndexList();
vpBanner.addOnPageChangeListener(new OnPageChangeListener());
adapter = new ViewPagerAdapter();
vpBanner.setAdapter(adapter);
//定时器开始工作
startPlay();
}
/**
* 初始化圆点指示器，根据indexPosition来加载不同的布局
*/
private void initIndexList() {
int count = bannerBeanList.size();
vList = new ArrayList<>(count);
LinearLayout llIndex;
if (indexPosition == INDEX_POSITION_RIGHT) {
ViewStub vsIndexRight = (ViewStub) findViewById(R.id.vs_index_right);
vsIndexRight.inflate();
llIndex = (LinearLayout) findViewById(R.id.ll_index_right);
tvText = (TextView) findViewById(R.id.tv_text);
} else {
ViewStub vsIndexBottom = (ViewStub) findViewById(R.id.vs_index_bottom);
vsIndexBottom.inflate();
llIndex = (LinearLayout) findViewById(R.id.ll_index_bottom);
tvText = (TextView) findViewById(R.id.tv_text);
}
//默认第一张图片的文字描述
tvText.setText(bannerBeanList.get(0).getText());
//使用GradientDrawable构造圆形控件
gradientDrawable = new GradientDrawable();
gradientDrawable.setShape(GradientDrawable.OVAL);
gradientDrawable.setColor(mContext.getResources().getColor(R.color.text));
gradientDrawableSelected = new GradientDrawable();
gradientDrawableSelected.setShape(GradientDrawable.OVAL);
if (indexColorResId != 0) {
gradientDrawableSelected.setColor(indexColorResId);
} else {
gradientDrawableSelected.setColor(mContext.getResources().getColor(R.color.mainColor));
}
for (int i = 0; i < count; i++) {
View view = new View(mContext);
LinearLayout.LayoutParams lpView = new LinearLayout.LayoutParams(ConvertM.dp2px(mContext, 8), ConvertM.dp2px(mContext, 8));
lpView.rightMargin = ConvertM.dp2px(mContext, 4);
view.setLayoutParams(lpView);
if (0 == i) {
view.setBackgroundDrawable(gradientDrawableSelected);
} else {
view.setBackgroundDrawable(gradientDrawable);
}
view.bringToFront();
vList.add(view);
llIndex.addView(view);
}
}
/**
* 初始化ImageView，使用Picasso下载图片，只在SdCard中缓存
*/
private void initImageViewList() {
int count = bannerBeanList.size();
ivList = new ArrayList<>(count);
for (int i = 0; i < count; i++) {
final ImageView imageView = new ImageView(mContext);
imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
ivList.add(imageView);
imageView.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
mOnItemClickListener.onItemClick(getPosition(imageView));
}
});
if (defaultImageResId != 0) {
Picasso.with(mContext)
.load(bannerBeanList.get(i).getUrl())
.placeholder(defaultImageResId)
.memoryPolicy(MemoryPolicy.NO_CACHE, MemoryPolicy.NO_STORE)
.into(imageView);
} else if (defaultImageDrawable != null) {
Picasso.with(mContext)
.load(bannerBeanList.get(i).getUrl())
.placeholder(defaultImageDrawable)
.memoryPolicy(MemoryPolicy.NO_CACHE, MemoryPolicy.NO_STORE)
.into(imageView);
} else {
Picasso.with(mContext)
.load(bannerBeanList.get(i).getUrl())
.memoryPolicy(MemoryPolicy.NO_CACHE, MemoryPolicy.NO_STORE)
.into(imageView);
}
}
}
private void startPlay() {
scheduledExecutorService = Executors.newSingleThreadScheduledExecutor();
scheduledExecutorService.scheduleAtFixedRate(new Runnable() {
@Override
public void run() {
currentIndex++;
handler.obtainMessage(HANDLE_UPDATE_INDEX).sendToTarget();
}
}, intervalTime, intervalTime, TimeUnit.SECONDS);
}
/**
* 获取点击图片的位置
* @param item
* @return int
*/
private int getPosition(ImageView item) {
for (int i = 0; i < ivList.size(); i++) {
if (item == ivList.get(i)) {
return i;
}
}
return -1;
}
@SuppressLint("HandlerLeak")
private Handler handler = new Handler() {
@Override
public void handleMessage(Message msg) {
switch (msg.what) {
case HANDLE_UPDATE_INDEX:
vpBanner.setCurrentItem(currentIndex);
break;
default:
break;
}
}
};
private class OnPageChangeListener implements ViewPager.OnPageChangeListener {
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
@Override
public void onPageSelected(int position) {
currentIndex = position;
for (int i = 0; i < bannerBeanList.size(); i++) {
if (position % ivList.size() == i) {
vList.get(i).setBackgroundDrawable(gradientDrawableSelected);
} else {
vList.get(i).setBackgroundDrawable(gradientDrawable);
}
tvText.setText(bannerBeanList.get(position % ivList.size()).getText());
}
}
@Override
public void onPageScrollStateChanged(int state) {
}
}
private class ViewPagerAdapter extends PagerAdapter {
@Override
public void destroyItem(View container, int position, Object object) {
}
@Override
public Object instantiateItem(View container, int position) {
position %= ivList.size();
if (position<0){
position = ivList.size()+position;
}
ImageView imageView = ivList.get(position);
ViewParent vp =imageView.getParent();
if (vp!=null){
ViewGroup parent = (ViewGroup)vp;
parent.removeView(imageView);
}
((ViewPager) container).addView(imageView);
return imageView;
}
@Override
public int getCount() {
return Integer.MAX_VALUE;
}
@Override
public boolean isViewFromObject(View arg0, Object arg1) {
return arg0 == arg1;
}
@Override
public void restoreState(Parcelable arg0, ClassLoader arg1) {
}
@Override
public Parcelable saveState() {
return null;
}
@Override
public void startUpdate(View arg0) {
}
@Override
public void finishUpdate(View arg0) {
}
}
public interface OnItemClickListener {
void onItemClick(int position);
}
}
这篇文章就介绍到这里了，点击这里查看源码
下面是测试用的图片：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持创新互联。
网站名称：Android自定义控件实现优雅的广告轮播图
链接地址：http://cqwzjz.cn/article/ijhsdj.html
