本文介绍了一款模仿最新版爱奇艺卡片式轮播lib

github地址:https://github.com/xuezj/CardBannerDemo

CardBannerDemo

效果图

Attributes属性(布局文件中的自定义属性)

变量名   类型 说明
main_title_text_color color 主标题文字颜色(默认白色)
subtitle_title_text_color color   副标题(不设置默认为白色)
divider_width dimension   卡片之间的间隔
main_title_text_size dimension   主标题字体大小
subtitle_title_text_size dimension 副标题字体大小
border_width dimension 左右卡片展示的宽度

方法

    方法名   说明  
setDatas 使用原生卡片设置数据(必须使用lib中的ImageData新建集合)
setDataCount (使用自定义item)设置数据集合大小(配合setBannerAdapter使用)
setBannerAdapter (使用自定义item) 设置自定义item的Adapter(配合setDataCount使用)
setDelayTime 设置自动轮播时间间隔(单位毫秒,默认为2000)

ImageData.class 原生item的数据集合实体类

BannerViewHolder.class 自定义item实现ViewHolder的被继承类

使用

###添加依赖

Gradle

dependencies{compile 'com.xuezj.cardbanner:cardbanner:1.0.0'
}

###工程中使用

布局文件中的使用

<com.xuezj.cardbanner.CardBannerandroid:id="@+id/banner"android:layout_width="match_parent"android:layout_height="180dp"app:divider_width="10dp"app:main_title_text_color="#fff"app:subtitle_title_text_color="#fff"app:main_title_text_size="15dp"app:subtitle_title_text_size="12dp"app:border_width="30dp"/>

代码中调用

1.原生

        List<ImageData> imageData = new ArrayList<>();ImageData b1 = new ImageData();b1.setImage("http://ww1.sinaimg.cn/large/610dc034ly1fhyeyv5qwkj20u00u0q56.jpg");b1.setMainTitle("第一张图片");imageData.add(b1);ImageData b2 = new ImageData();b2.setImage("https://ws1.sinaimg.cn/large/610dc034gy1fhvf13o2eoj20u011hjx6.jpg");b2.setSubtitleTitle("23-7期");imageData.add(b2);ImageData b3 = new ImageData();b3.setImage("http://ww1.sinaimg.cn/large/610dc034ly1fhxe0hfzr0j20u011in1q.jpg");imageData.add(b3);//2.然后调用setDatas方法填充数据,再start()就可以了,// 是否自动轮播setPlay可以不设置,默认为自动轮播即为turecardBanner.setDatas(imageData).setPlay(true).start();cardBanner.setOnItemClickListener(new CardBanner.OnItemClickListener() {@Overridepublic void onItem(int position) {Toast.makeText(MainActivity.this, "position:" + position, Toast.LENGTH_SHORT).show();}});

2.自定义item

        final List<String> image=new ArrayList<>();image.add("http://ww1.sinaimg.cn/large/610dc034ly1fhyeyv5qwkj20u00u0q56.jpg");image.add("https://ws1.sinaimg.cn/large/610dc034gy1fhvf13o2eoj20u011hjx6.jpg");image.add("http://ww1.sinaimg.cn/large/610dc034ly1fhxe0hfzr0j20u011in1q.jpg");cardBanner2.setDataCount(imageData.size()).setBannerAdapter(new BannerAdapter() {@Overridepublic BannerViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {ViewHolder h = new ViewHolder(LayoutInflater.from(MainActivity.this).inflate(R.layout.banner_item_demo, parent, false));return h;}@Overridepublic void onBindViewHolder(BannerViewHolder holder, int position) {ViewHolder VH = (ViewHolder) holder;Glide.with(MainActivity.this).load(image.get(position)).centerCrop().diskCacheStrategy(DiskCacheStrategy.ALL)
//                    .bitmapTransform(new CropCircleTransformation(getContext())).into(VH.roundedImageView);}});cardBanner2.start();cardBanner2.setOnItemClickListener(new CardBanner.OnItemClickListener() {@Overridepublic void onItem(int position) {Toast.makeText(MainActivity.this, "position:" + position, Toast.LENGTH_SHORT).show();}});

模仿最新版爱奇艺卡片式轮播效果CardBannerDemo相关推荐

  1. HTML5:爱奇艺首页图片轮播效果

    源代码: <!DOCTYPE html> <html> <head><meta charset="utf-8"><title& ...

  2. uni-app卡片式轮播

    uni-app卡片式轮播 视图部分: <template><uni-swiper-dot :info="info" :current="current& ...

  3. 后台和小程序实现卡片式轮播图

    营销活动中,轮播图效果是比较常见的,基于轮播图拓展的组件也很多,这里记录一下使用swiper实现卡片式轮播的过程,分为PC端和小程序端,其中PC端是Vue+typescript,小程序端是uni-ap ...

  4. uniapp卡片式轮播图——uView

    1.下载安装uView uView2.0重磅发布,利剑出鞘,一统江湖 - DCloud 插件市场 2.在项目根目录中的main.js中,引入并使用uView的JS库,注意这两行要放在import Vu ...

  5. 卡片式轮播图 效果 实现

    基于 react 实现,vue 类似 效果图 思路 效果图中 绿色边框为 轮播图区域 水平式 多张图片 水平排列 整体宽度 为 单张图片n倍 translateX 位移方式 一次整体移动一张图片宽度 ...

  6. 模仿爱奇艺播放暂停按钮动画效果——swift

    先上效果图 实现思路: 重载init,画出左边线条.右边线条.三角形和圆弧图层,用layer.strokeEnd = 0隐藏三角形和弧线,初始化展示暂停按钮.圆弧作为过渡右边线和三角形使用. 暂停按钮 ...

  7. html卡片式轮播图带字,卡片式轮播

    // import { ce } from 'migu-sdk'; export default { name: 'zt', data() { return { activityId: 'MAC_ZP ...

  8. 小程序好看卡片式轮播

    效果图: wxml <!-- 轮播 --> <view class="swiper-view"><swiper class="swipers ...

  9. android 卡片轮播图,android自定义view之卡片式轮播图

    前言 Android View体系是界面编程的核心,他的重要性不亚于Android四大组件.能够熟练的编写符合需求自定义VIEW是一个android程序员进阶的重要标志,在很多的企业招聘中都会在任职需 ...

最新文章

  1. Linux多线程实践(一)线程基本概念和理论
  2. QT的QQmlScriptString类的使用
  3. 《51单片机应用开发从入门到精通》——2.6 中断控制功能的作用
  4. WAS集群系列(5):集群搭建:步骤3:安装IHS软件
  5. 谁说程序员找不到女朋友,你们是不知道当程序员撩妹,一撩一个准
  6. AcWing 208. 开关问题 (高斯消元+状压)打卡
  7. python简明教程_03
  8. 阿里java编程规范试题_阿里java编码规范考试总结
  9. Kendo UI使用方法与教程
  10. 验证中国的座机号的正则表达式
  11. crack.vbs病毒,u盘里的所有文件全部变成快捷方式
  12. TikTok跨境出海:TikTok的8种变现方式?
  13. Bootstrap 教程第四课:制作一组功能图标按钮
  14. 内蒙古中考计算机考试知识点总结,内蒙古包头中考语文备考分析及知识总结.doc...
  15. python中列表(list)的基本操作
  16. Cris 的 Python 数据分析笔记 04:NumPy 矩阵的复制,排序,拓展
  17. 电脑桌面登录服务器,使用windows远程桌面连接登录Windows实例
  18. S7-1212C AC/DC/DLY作为PN主站通过PROFINET转Modbus RTU网关设备与Micro Logix 140
  19. 项目管理:(一)项目管理一般知识
  20. 股票自选股基本函数大全-2

热门文章

  1. (附源码)计算机毕业设计SSM基于的优质房源房租管理系统
  2. 【树上算法】最近公共祖先(LCA)
  3. 手把手教你如何用手机做兼职赚钱
  4. 将CSS用于PDF发布
  5. Linux编译net-snmp出现如下错误
  6. 皮尔逊相关系数的java实现
  7. ECCV | 达摩院基于局部平坦性的流形学习框架DLME
  8. 积加(跨境ERP)与金蝶云星空单据集成对接
  9. Arduino控制蜂鸣器播放音乐
  10. java包装和引用_回顾值传递和引用传递关于Java是值传递还是引用传递,网上有不一样的说法。1、基本类型或基本类型的包装类以及String是值传递,引用类型是引用传递。2...