Android轮播图控件的实现详解(附GitHub开源链接)
2017-03-13 21:57
399 查看
轮播图在Android开发中是非常常见的控件,一般App的首页广告和电商类App的商品详情图片都会用轮播图来实现。可是Android源生的控件中却没有能直接拿来使用的轮播图控件,所以一般的轮播图效果都需要我们自己去实现。今天我就给大家介绍一个我自己写的轮播图控件:CustomBanner。有需要的同学可以直接访问我的GitHub使用该控件。下面我将为大家详细介绍CustomBanner控件的实现思路和细节。
(说明:下面我贴出来的代码只是CustomBanner的代码摘要,想要看完整源码的同学请到GitHub下载或引用依赖)
1、布局
轮播图一般由一个可以左右滚动、承载图片的主体控件和一个显示当前位置的指示器组成。CustomBanner的布局非常简单,直接继承FrameLayout,内部添加两个子View:一个ViewPager(可以左右滚动、承载图片的主体控件)和一个LinearLayout(指示器容器)。
2、实现轮播图的无限循环
轮播图是需要左右无限循环滚动的,而ViewPager是有滚动边界的。为了实现ViewPager循环滚动,我采用了网上一个很巧妙的实现方式。就是ViewPager的实际长度是它的应有长度+2,在ViewPager的应有长度的头尾各加一个节点。头节点的数据跟ViewPager的最后一个数据一样,尾节点的数据跟ViewPager的第一个数据一样。当ViewPager滚动到尾节点时,就无缝跳转到第一个数据,当ViewPager滚动到头节点时,就无缝跳转到最后一个数据,由于跳转的两节点的数据是一样的,而且是无缝跳转,没有过度动画,所以用户感觉不到ViewPager的显示节点已经改变,就给用户一种ViewPager在无限循环的错觉。具体请看这里。
由于多加了两个节点,所以在处理ViewPager的position时,实际的position和用户所看到的position是不一样的。比如:轮播图有5张图片,用户看到的也应该是5张图片,而实际上我们的ViewPager会有7张图片,因为第1张图片和第6张图片是同一张图片,第7张图片和第2张图片是同一张图片。这里可能很不好理解,但是一定要理解,因为这是实现轮播图循环轮播的关键。
3、设置ViewPager的滚动速度
ViewPager有自己的mScroller属性,负责控制ViewPager的滚动速度。但是ViewPager的默认滚动速度太快了,而且ViewPager并没有提供方法设置mScroller的滚动速度也没有提供方法设置mScroller,所以我们需要通过反射用自己的mScroller替换掉ViewPager的mScroller,使我们可以完全控制和操作ViewPager的mScroller属性。这不仅仅是实现我们自定义ViewPager的滚动速度,也是实现第2步中ViewPager无缝跳转的关键。
4、实现ViewPager的自动轮播
这个实现起来非常的简单。直接利用Handler延迟发送消息的功能来进行轮播滚动的计时,在消息的处理中改变ViewPager显示的Item,达到ViewPager的自动滚动效果,然后再Handler发送一个延迟消息,形成循环。
5、添加和更新指示器
指示器的指示点用指示器容器mIndicatorLayout来承载,当ViewPager滚动的时候,指示器也要相应的做更新
6、设置轮播图数据
把轮播图的基本功能都实现了之后,接下来就是填充数据了。下面先看设置数据的方法:
代码非常的简单,其实就是给mBannerViewPager设置了一个Adapter。上面的setPages方法接收两个参数:
1、creator:这是一个ViewCreator对象,ViewCreator是负责创建和更新轮播图的接口。
2、data:这是轮播图的数据。
他们的泛型T是轮播图的数据类型,轮播图的数据类型可以是任何的类型。
下面是ViewCreator接口代码
createView方法的返回值是View而不是ImageView,所以CustomBanner可以支持轮播所有的布局,而不仅仅是ImageView,虽然我们大部分情况使用的都是ImageView。
如果你现在还不清楚ViewCreator是干什么的,那么请看下面的代码。下面是轮播图适配器BannerPagerAdapter的核心代码,通过这段代码,你应该就能很清晰的理解ViewCreator的作用了。
CustomBanner的实现思路和代码分析到这里就结束了。相信现在大家对于轮播图的实现已经有了一定的了解了。至于CustomBanner的使用,我将在下一章《Android轮播图控件CustomBanner的使用讲解》具体讲解,欢迎阅读。下面先给大家看一下CustomBanner的效果:
![](http://img.blog.csdn.net/20170314201440046?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdTAxMDE3NzAyMg==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
上面贴出来的代码只是CustomBanner的代码摘要,完整的代码请访问我在GitHub中的CustomBanner项目。
(说明:下面我贴出来的代码只是CustomBanner的代码摘要,想要看完整源码的同学请到GitHub下载或引用依赖)
1、布局
轮播图一般由一个可以左右滚动、承载图片的主体控件和一个显示当前位置的指示器组成。CustomBanner的布局非常简单,直接继承FrameLayout,内部添加两个子View:一个ViewPager(可以左右滚动、承载图片的主体控件)和一个LinearLayout(指示器容器)。
public class CustomBanner<T> extends FrameLayout { private ViewPager mBannerViewPager; private LinearLayout mIndicatorLayout; //添加轮播图ViewPager private void addBannerViewPager(Context context) { mBannerViewPager = new ViewPager(context); this.addView(mBannerViewPager); } //添加轮播图指示器容器 private void addIndicatorLayout(Context context) { mIndicatorLayout = new LinearLayout(context); LayoutParams lp = new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT); lp.gravity = analysisGravity(mIndicatorGravity); lp.setMargins(0, 0, 0, DensityUtils.dp2px(context, 8)); mIndicatorLayout.setGravity(Gravity.CENTER); this.addView(mIndicatorLayout, lp); } }
2、实现轮播图的无限循环
轮播图是需要左右无限循环滚动的,而ViewPager是有滚动边界的。为了实现ViewPager循环滚动,我采用了网上一个很巧妙的实现方式。就是ViewPager的实际长度是它的应有长度+2,在ViewPager的应有长度的头尾各加一个节点。头节点的数据跟ViewPager的最后一个数据一样,尾节点的数据跟ViewPager的第一个数据一样。当ViewPager滚动到尾节点时,就无缝跳转到第一个数据,当ViewPager滚动到头节点时,就无缝跳转到最后一个数据,由于跳转的两节点的数据是一样的,而且是无缝跳转,没有过度动画,所以用户感觉不到ViewPager的显示节点已经改变,就给用户一种ViewPager在无限循环的错觉。具体请看这里。
由于多加了两个节点,所以在处理ViewPager的position时,实际的position和用户所看到的position是不一样的。比如:轮播图有5张图片,用户看到的也应该是5张图片,而实际上我们的ViewPager会有7张图片,因为第1张图片和第6张图片是同一张图片,第7张图片和第2张图片是同一张图片。这里可能很不好理解,但是一定要理解,因为这是实现轮播图循环轮播的关键。
//ViewPager的实际长度是他的数据的长度+2 @Override public int getCount() { return mDatas == null || mDatas.isEmpty() ? 0 : mDatas.size() + 2; }
//通过实际的position计算用户所理解的position private int getActualPosition(int position) { if (position == 0) { //如果是头节点,返回最后一个数据的position //因为头节点的数据和最后一个数据是一样的。 return mDatas.size() - 1; } else if (position == getCount() - 1) { //如果是尾节点,返回第一个数据的position //因为尾节点的数据和第一个数据是一样的。 return 0; } else { //除了头尾以外,position节点的数据是mDatas中的第position - 1的下标的数据 return position - 1; } }
3、设置ViewPager的滚动速度
ViewPager有自己的mScroller属性,负责控制ViewPager的滚动速度。但是ViewPager的默认滚动速度太快了,而且ViewPager并没有提供方法设置mScroller的滚动速度也没有提供方法设置mScroller,所以我们需要通过反射用自己的mScroller替换掉ViewPager的mScroller,使我们可以完全控制和操作ViewPager的mScroller属性。这不仅仅是实现我们自定义ViewPager的滚动速度,也是实现第2步中ViewPager无缝跳转的关键。
//通过反射替换掉mBannerViewPager的mScroller属性 private void replaceViewPagerScroll() { try { Field field = ViewPager.class.getDeclaredField("mScroller"); field.setAccessible(true); mScroller = new ViewPagerScroller(mContext, new AccelerateInterpolator()); field.set(mBannerViewPager, mScroller); } catch (Exception e) { } } /** * 设置轮播图的滚动速度 * * @param scrollDuration */ public CustomBanner<T> setScrollDuration(int scrollDuration) { mScroller.setScrollDuration(scrollDuration); return this; }
public class ViewPagerScroller extends Scroller { private int mScrollDuration = 550; //是否无缝跳转 private boolean sudden; public ViewPagerScroller(Context context) { super(context); } public ViewPagerScroller(Context context, Interpolator interpolator) { super(context, interpolator); } public ViewPagerScroller(Context context, Interpolator interpolator, boolean flywheel) { super(context, interpolator, flywheel); } @Override public void startScroll(int startX, int startY, int dx, int dy, int duration) { super.startScroll(startX, startY, dx, dy, sudden ? 0 : mScrollDuration); } @Override public void startScroll(int startX, int startY, int dx, int dy) { super.startScroll(startX, startY, dx, dy, sudden ? 0 : mScrollDuration); } public int getScrollDuration() { return mScrollDuration; } public void setScrollDuration(int scrollDuration) { this.mScrollDuration = scrollDuration; } public boolean isSudden() { return sudden; } public void setSudden(boolean zero) { this.sudden = zero; } }
4、实现ViewPager的自动轮播
这个实现起来非常的简单。直接利用Handler延迟发送消息的功能来进行轮播滚动的计时,在消息的处理中改变ViewPager显示的Item,达到ViewPager的自动滚动效果,然后再Handler发送一个延迟消息,形成循环。
private Handler mTimeHandler = new Handler(); private Runnable mTurningTask = new Runnable() { @Override public void run() { if (isTurning && mBannerViewPager != null) { int page = mBannerViewPager.getCurrentItem() + 1; mBannerViewPager.setCurrentItem(page); mTimeHandler.postDelayed(mTurningTask, mIntervalTime); } } }; /** * 启动轮播 * @param intervalTime 轮播间隔时间 * @return */ public CustomBanner<T> startTurning(long intervalTime) { isTurning = true; mIntervalTime = intervalTime; mTimeHandler.postDelayed(mTurningTask, mIntervalTime); return this; }
5、添加和更新指示器
指示器的指示点用指示器容器mIndicatorLayout来承载,当ViewPager滚动的时候,指示器也要相应的做更新
//根据轮播图的数量来添加指示器的点 //指示器的点用ImageView来表示,样式由使用者自定义 private void initIndicator(int count) { mIndicatorLayout.removeAllViews(); if (count > 0) { for (int i = 0; i < count; i++) { ImageView imageView = new ImageView(mContext); LinearLayout.LayoutParams lp = new LinearLayout.LayoutParams( ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT); 0, DensityUtils.dp2px(mContext, 2), 0); mIndicatorLayout.addView(imageView, lp); } } } /** * 更新指示器 */ private void updateIndicator() { int count = mIndicatorLayout.getChildCount(); //获取ViewPager当前显示的Item。 int currentPage = getCurrentItem(); if (count > 0) { for (int i = 0; i < count; i++) { ImageView view = (ImageView) mIndicatorLayout.getChildAt(i); if (i == currentPage) { //设置选中样式 view.setImageResource(mIndicatorSelectRes); } else { //设置未选中样式 view.setImageResource(mIndicatorUnSelectRes); } } } }
6、设置轮播图数据
把轮播图的基本功能都实现了之后,接下来就是填充数据了。下面先看设置数据的方法:
/** * 设置轮播图数据 * @param creator 创建和更新轮播图View的接口 * @param data 轮播图数据 * @return */ public CustomBanner<T> setPages(ViewCreator<T> creator, List<T> data) { mAdapter = new BannerPagerAdapter<T>(mContext, creator, data); mBannerViewPager.setAdapter(mAdapter); return this; }
代码非常的简单,其实就是给mBannerViewPager设置了一个Adapter。上面的setPages方法接收两个参数:
1、creator:这是一个ViewCreator对象,ViewCreator是负责创建和更新轮播图的接口。
2、data:这是轮播图的数据。
他们的泛型T是轮播图的数据类型,轮播图的数据类型可以是任何的类型。
下面是ViewCreator接口代码
/** * 创建和更新轮播图View的接口 * @param <T> */ public interface ViewCreator<T> { //创建轮播图的每个项的View View createView(Context context, int position); //更新轮播图 void updateUI(Context context, View view, int position, T data); }
createView方法的返回值是View而不是ImageView,所以CustomBanner可以支持轮播所有的布局,而不仅仅是ImageView,虽然我们大部分情况使用的都是ImageView。
如果你现在还不清楚ViewCreator是干什么的,那么请看下面的代码。下面是轮播图适配器BannerPagerAdapter的核心代码,通过这段代码,你应该就能很清晰的理解ViewCreator的作用了。
@Override public Object instantiateItem(ViewGroup container, final int position) { View view = views.get(position); if (view == null) { //mCreator就是调用者传入的ViewCreator对象 //通过mCreator创建轮播图的布局,所以轮播图的布局是由调用者创建的 view = mCreator.createView(mContext, position); views.put(position, view); } final int item = getActualPosition(position); final T t = mData.get(item); //通过mCreator把更新轮播图数据的操作交给调用者去实现 mCreator.updateUI(mContext, view, item, t); container.addView(view); return view; }
CustomBanner的实现思路和代码分析到这里就结束了。相信现在大家对于轮播图的实现已经有了一定的了解了。至于CustomBanner的使用,我将在下一章《Android轮播图控件CustomBanner的使用讲解》具体讲解,欢迎阅读。下面先给大家看一下CustomBanner的效果:
上面贴出来的代码只是CustomBanner的代码摘要,完整的代码请访问我在GitHub中的CustomBanner项目。
相关文章推荐
- Android实现自定义轮播图片控件详解
- Android (github开源项目1)首页轮播图控件----banner
- android假设重写onDraw实现一个相似TextView能够显示表情和链接的控件(一)
- Github上优秀的Android开源项目常用控件
- Android自定义控件实现简单的轮播图控件
- [开源]在iOS上实现Android风格的控件Toast
- [开源]在iOS上实现Android风格的控件Toast
- Github开源Android组件资源整理(一) 个性化控件(View)
- Android 中控件RecyclerView详解及实现瀑布流式布局
- Android ViewPager控件实现图片轮播
- Android客户端实现图片轮播控件
- [开源]在iOS上实现Android风格的控件Toast
- 酷炫开源项目cardsui-for-android-超详细源码分析,详解所用特效是如何实现的
- android下拉刷新控件之第三方开源控件的使用实现
- [开源]在iOS上实现Android风格的控件Toast 推荐
- 采用github上的开源项目Android-PullToRefresh实现ListView的下拉刷新和上拉加载
- [开源]在iOS上实现Android风格的控件Toast
- android如果重写onDraw实现一个类似TextView可以显示表情和链接的控件(二)
- android假设重写onDraw实现一个相似TextView能够显示表情和链接的控件(二)
- Github开源项目 android-image-indicator图片轮播部署