图片轮播控件,可以说是每个App基本上都会用到的。它可以用来动态的展示多个图片,之前写过两篇博客:实现ViewPager无限循环的方式一和实现ViewPager无限循环的方式二,在这两篇博客中,分析了两种实现ViewPager无限循环的原理,但是在使用的过程中,代码的解偶性很低,所以就使用自定义View的方式,实现无限循环的图片轮播的封装。
先看看效果:
功能特点
使用简单
实现步骤
声明自定义的属性
在values/attrs文件中创建自定义的属性
创建BannerView类
public class BannerView extends RelativeLayout { public BannerView(Context context) { this(context, null); } public BannerView(Context context, AttributeSet attrs) { this(context, attrs, 0); } public BannerView(Context context, AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr);}
在BannerView中声明变量属性
private Context context; private Handler handler; private ImageLoader imageLoader; private DisplayImageOptions options; private boolean isHaveHandler = true;// 当用户点击轮播图时,取消handler队列,也就是取消滚动 // 控件Start private ViewPager viewPager; private LinearLayout indicator;// 指示器 private onItemClickListener listener; // 控件End // 自定义属性Start private float mAspectRatio; // 宽高比 private int defaultImageResource; // 默认占位图 private int updateTime; // 图片切换的时间间隔,默认3秒 private boolean showIndicator; // 是否显示指示器,默认显示 private int indicatorHeight;// 指示器的高度,默认35dp private int indicatorPositionSize; // 指示器的大小 private int indicatorBackground; // 指示器的背景颜色 // 自定义属性End // 数据Start private int imageCount; private int lastPosition; private ListimageResources; private List imageUrls; // 数据End
解析自定义属性的值
接下来为自定义的属性赋值,在3个参数的构造方法中初始化变量。
public BannerView(Context context, AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); parseCustomAttributes(context, attrs); this.cOntext= context; handler = new Handler(); imageLoader = ImageLoader.getInstance(); optiOns= HSApplication.getDisplayOptions().build(); initViews(); } /** * 解析自定义属性 * * @param context * @param attrs */ private void parseCustomAttributes(Context context, AttributeSet attrs) { TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.BannerView); mAspectRatio = typedArray.getFloat(R.styleable.BannerView_aspectRatio, 0f); defaultImageResource = typedArray.getResourceId(R.styleable.BannerView_defaultSrc, R.drawable.about_us); updateTime = typedArray.getInt(R.styleable.BannerView_updateTime, 3000); showIndicator = typedArray.getBoolean(R.styleable.BannerView_indicatorVisible, true); indicatorHeight = (int) (typedArray.getDimension(R.styleable.BannerView_indicatorHeight, Utils.dip2px(context, 35))); indicatorBackground = typedArray.getResourceId(R.styleable.BannerView_indicatorBackground, R.color.white_alpha00); indicatorPositiOnSize= (int) typedArray.getDimension( R.styleable.BannerView_indicatorPositionSize, Utils.dip2px(context, 5)); typedArray.recycle(); } private void initViews() { viewPager = new ViewPager(context); viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() { @Override public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) { } @Override public void onPageSelected(int position) { if (showIndicator) { for (int i = 0; i
控件和自定义的属性都经过赋值和初始化了,接下来,该为设置图片资源了。
public void setImageResources(ListimageResources) { if (imageResources == null || imageResources.size() == 0) { throw new RuntimeException("图片资源为空"); } this.imageResources = imageResources; imageCount = imageResources.size(); } public void setImageUrls(List imageUrls) { if (imageUrls == null || imageUrls.size() == 0) { throw new RuntimeException("图片地址资源为空"); } this.imageUrls = imageUrls; imageCount = imageUrls.size(); loadImages(); } private void loadImages() { if (showIndicator) { addIndicationPoint(); } viewPager.setAdapter(new MyViewPageAdapter()); viewPager.setCurrentItem(200 - (200 % imageCount)); handler.removeCallbacks(updateRunnable); handler.postDelayed(updateRunnable, updateTime); } /** * 添加指示点到指示器中 */ private void addIndicationPoint() { // 防止刷新重复添加 if (indicator.getChildCount() > 0) { indicator.removeAllViews(); } View pointView; int margin = Utils.dip2px(context, 5f); LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams( indicatorPositionSize, indicatorPositionSize); layoutParams.setMargins(margin, margin, margin, margin); for (int i = 0; i
时间太仓促,解释的不是太详细,可以移步我的GitHub查看完整代码。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。