登录 立即注册
安币:

安卓巴士 - 安卓开发 - Android开发 - 安卓 - 移动互联网门户

对ViewPager和ViewPagerIndicator的简单封装,实现轮播图效果

[复制链接]
来自: MrlLee 分类: Android精品源码 上传时间: 2016-7-8 11:07:56
Tag:Failed commit import latest
立即下载
收藏

项目介绍:

游客,如果您要查看本帖隐藏内容请回复



对ViewPager和ViewPagerIndicator的简单封装,实现轮播图效果。




  • 轮播图可以直接在Activity/Fragment中,也可以是RecyclerView的一个Item。


  • 该有的基本都有,页码指示,左右无限循环翻页,定时自动翻页,用手指翻页时暂停自动翻页,只有一张图片时变为静态相框,解决原生ViewPager当页数为2时的滑动Bug。


  • 提供CirclePageIndicator(圆形)和RoundRectIndicator(圆角矩形)指示器


引入



1.添加二进制



build.gradle中添加



[Java] 查看源文件 复制代码
compile 'com.xdandroid:lunboviewpager:+'


2.确保项目中已经正确集成JakeWharton/ViewPagerIndicator



https://github.com/JakeWharton/ViewPagerIndicator



3.布局文件(Activity/Fragment/RecyclerView的Item)



将ViewPager与PagerIndicator元素并列。



[Java] 查看源文件 复制代码


    

    



4. 布局文件(ViewPager的每一页,通常由一个图片控件和少量其他控件组成)



[Java] 查看源文件 复制代码




使用方法详见Sample。



直接在Activity/Fragment内使用



1.给ViewPager和Indicator设置需要的自定义属性(OnPageChangeListener, Indicator的填充颜色, etc.)



Indicator的可设置项参照JakeWharton/ViewPagerIndicator提供的API。



https://github.com/JakeWharton/ViewPagerIndicator



[Java] 查看源文件 复制代码
vp_lunbo.addOnPageChangeListener(onPageChangeListener);
indicator_lunbo.setFillColor(getResources().getColor(R.color.colorAccent));


2.构建Adapter



public Adapter(Context context);



需实现Adapter里的4个方法:




  • protected abstract int getViewPagerItemLayoutResId(); //指定ViewPager的每一页的Layout资源ID


  • protected abstract View showImage(View inflatedLayout, int position);




inflatedLayout即根据上面的资源ID渲染出来的View,开发者需要通过findViewById找到布局中的图片控件,再使用图片加载框架(UIL、Picasso、Fresco等)把图片加载进去,最后返回图片控件。




  • protected abstract int getImageCount(); //总页数


  • protected abstract void onImageClick(View view, int position); //OnClickListener




示例:



[Java] 查看源文件 复制代码
new Adapter(MainActivity.this) {
    protected View showImage(View inflatedLayout, int position) {
        ImageView imageView = (ImageView) inflatedLayout.findViewById(R.id.iv_lunbo);
        Picasso.with(MainActivity.this).load(list.get(position).getImageResId()).into(imageView);
        return imageView;
    }
    protected int getViewPagerItemLayoutResId() {return R.layout.item_in_viewpager;}
    protected int getImageCount() {return list.size();}
    protected void onImageClick(View view, int position) {
        Snackbar.make(view,list.get(position).getMessage(),Snackbar.LENGTH_SHORT).show();
    }
}


3.构建Proxy



public Proxy(List<${JavaBean}> list, int interval, Adapter adapter);



interval为轮播时间间隔。



4.开始轮播



void Proxy.onBindView(ViewPager viewPager,View indicator);



轮播图ViewPager作为RecyclerView的一个Item来使用



1.在RecyclerView.Adapter的构造方法里构建com.xdandroid.lunboviewpager.Adapter



public com.xdandroid.lunboviewpager.Adapter(Context context);



需实现com.xdandroid.lunboviewpager.Adapter里的4个方法:




  • protected abstract int getViewPagerItemLayoutResId(); //指定ViewPager的每一页的Layout资源ID


  • protected abstract View showImage(View inflatedLayout, int position);




inflatedLayout即根据上面的资源ID渲染出来的View,开发者需要通过findViewById找到布局中的图片控件,再使用图片加载框架(UIL、Picasso、Fresco等)把图片加载进去,最后返回图片控件。




  • protected abstract int getImageCount(); //总页数


  • protected abstract void onImageClick(View view, int position); //OnClickListener




示例:



[Java] 查看源文件 复制代码
new com.xdandroid.lunboviewpager.Adapter(context) {
    protected View showImage(View inflatedLayout, int position) {
        ImageView imageView = (ImageView) inflatedLayout.findViewById(R.id.iv_lunbo);
        Picasso.with(context).load(list.get(position).getImageResId()).into(imageView);
        return imageView;
    }
    protected int getViewPagerItemLayoutResId() {return R.layout.item_in_viewpager;}
    protected int getImageCount() {return list.size();}
    protected void onImageClick(View view, int position) {
        Snackbar.make(view,list.get(position).getMessage(),Snackbar.LENGTH_SHORT).show();
    }
}


2.在RecyclerView.Adapter的构造方法里构建Proxy



public Proxy(List<${JavaBean}> list, int interval, com.xdandroid.lunboviewpager.Adapter adapter);



interval为轮播时间间隔。



3.onBindViewHolder



先给ViewPager和Indicator设置需要的自定义属性(OnPageChangeListener, Indicator的填充颜色, etc.)



Indicator的可设置项参照JakeWharton/ViewPagerIndicator提供的API。



https://github.com/JakeWharton/ViewPagerIndicator



然后添加proxy.onBindView(holder.viewPager,holder.indicator);



示例:



[Java] 查看源文件 复制代码
@Override
public void onBindViewHolder(final MainAdapter.ViewHolder holder, int position) {
    holder.indicator_lunbo.setFillColor(context.getResources().getColor(R.color.colorAccent));
    proxy.onBindView(holder.vp_lunbo,holder.indicator_lunbo);
}

相关源码推荐:

我来说两句
所有评论(108)
e地枫叶 2016-7-8 11:13:28
很给力,安卓巴士有你更精彩!
回复
e地枫叶 2016-7-8 11:13:40
虽不明,但觉厉!
回复
雪洗中关村 2016-7-8 11:15:42
学习学习!
回复
雪洗中关村 2016-7-8 11:16:12
强烈支持楼主ing……
回复
chaoyue 2016-7-8 11:34:40
学习...学习...
回复
fancy 2016-7-8 12:15:23
好好 学习了 确实不错
回复
tintins 2016-7-8 13:12:26
apkbus好的内容真的很多~赞
回复
上传代码
查看数:4771 收藏数:7 下载数: 点赞数:0
代码贡献英雄榜
用户名 下载数
联系我们
首页/微信公众账号投稿

帖子代码编辑/版权问题

QQ:435399051,769657487

如何获得代码达人称号

如何成为签约作者

联系我们
关闭
合作电话:
15618560077
Email:
805941275@qq.com
商务市场合作/投稿
问题反馈及帮助
联系我们

广告投放| 广东互联网违法和不良信息举报中心|中国互联网举报中心|下载客户端|申请友链|手机版|站点统计|安卓巴士 ( 粤ICP备15117877号 )

快速回复 返回顶部 返回列表