自定义封装 banner 组件
1. 效果图预览

2.基本功能
一个简单方便的轮播图组件,基于viewpager 基础上进行的封装。
可设置 项目中图片,网络图片, View;
支持循环自动播放,手势滑动切换,item点击事件,可设置 点点的样式宽高、颜色、大小、位置 ,;
可设置蒙层;可设置 是否允许滑动;可设置 是否允许循环。
3.基本实现
1. 自定义属性
<declare-styleable name="BannerLayoutStyle">
<attr name="maskStartColor" format="color|reference" />
<attr name="maskEndColor" format="color|reference" />
<attr name="selectedIndicatorColor" format="color|reference" />
<attr name="unSelectedIndicatorColor" format="color|reference" />
<attr name="indicatorShape" format="enum">
<enum name="rect" value="0" />
<enum name="oval" value="1" />
</attr>
<attr name="selectedIndicatorHeight" format="dimension|reference" />
<attr name="selectedIndicatorWidth" format="dimension|reference" />
<attr name="unSelectedIndicatorHeight" format="dimension|reference" />
<attr name="unSelectedIndicatorWidth" format="dimension|reference" />
<attr name="indicatorPosition" format="enum">
<enum name="centerBottom" value="0" />
<enum name="rightBottom" value="1" />
<enum name="leftBottom" value="2" />
<enum name="centerTop" value="3" />
<enum name="rightTop" value="4" />
<enum name="leftTop" value="5" />
</attr>
<attr name="indicatorSpace" format="dimension|reference" />
<attr name="indicatorMargin" format="dimension|reference" />
<attr name="autoPlayDuration" format="integer|reference" />
<attr name="scrollDuration" format="integer|reference" />
<attr name="isAutoPlay" format="boolean" />
<attr name="defaultImage" format="integer|reference" />
<attr name="isIndicatorVisible" format="boolean" />
<attr name="cornerRadii" format="dimension|reference" />
</declare-styleable>
2.基本方法
//添加本地图片路径
public void setViewRes(List<Integer> viewRes) {。。。} //添加网络图片路径
public void setViewUrls(List<String> urls) {。。。} //添加任意View视图
private void setViews2(final List<View> views) {。。。}
// 设置是否允许 循环
public void setLoop(boolean loop) { } // 设置是否可以滑动
public void setSlideable(boolean slideable) { }
更多用法 详见代码,这里就不全部粘贴了。
3.使用示例:
<com.dzq.widget.CustomBannerView
android:id="@+id/banner"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
app:autoPlayDuration="2000"
app:defaultImage="@drawable/bg_banner"
app:indicatorMargin="@dimen/indicatorMargin"
app:indicatorPosition="rightBottom"
app:indicatorShape="oval"
app:indicatorSpace="@dimen/indicatorSpace"
app:isAutoPlay="true"
app:isIndicatorVisible="true"
app:scrollDuration="1000"
app:selectedIndicatorColor="@color/color_ec407a"
app:selectedIndicatorHeight="5dp"
app:selectedIndicatorWidth="5dp"
app:unSelectedIndicatorColor="@color/color_71d9e7"
app:unSelectedIndicatorHeight="5dp"
app:unSelectedIndicatorWidth="5dp" /> <com.dzq.widget.CustomBannerView
android:id="@+id/banner2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:layout_weight="1"
app:autoPlayDuration="2000"
app:defaultImage="@drawable/bg_banner"
app:indicatorMargin="@dimen/indicatorMargin"
app:indicatorPosition="rightBottom"
app:indicatorShape="rect"
app:indicatorSpace="@dimen/indicatorSpace"
app:isAutoPlay="false"
app:isIndicatorVisible="true"
app:scrollDuration="1000"
app:selectedIndicatorColor="@color/color_ec407a"
app:selectedIndicatorHeight="5dp"
app:selectedIndicatorWidth="10dp"
app:unSelectedIndicatorColor="@color/color_71d9e7"
app:unSelectedIndicatorHeight="10dp"
app:unSelectedIndicatorWidth="5dp" /> <com.dzq.widget.CustomBannerView
android:id="@+id/banner3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:layout_weight="1"
app:cornerRadii="5dp"
app:indicatorMargin="@dimen/indicatorMargin"
app:indicatorPosition="centerTop"
app:indicatorShape="rect"
app:indicatorSpace="@dimen/indicatorSpace"
app:isAutoPlay="false"
app:isIndicatorVisible="true"
app:maskEndColor="#00000000"
app:maskStartColor="#99000000"
app:scrollDuration="1000"
app:selectedIndicatorColor="#00CAA9"
app:selectedIndicatorHeight="10dp"
app:selectedIndicatorWidth="25dp"
app:unSelectedIndicatorColor="#26000000"
app:unSelectedIndicatorHeight="10dp"
app:unSelectedIndicatorWidth="10dp" />
导入自己项目
How to
To get a Git project into your build:
Step 1. Add the JitPack repository to your build file
Add it in your root build.gradle at the end of repositories:
allprojects {
repositories {
...
maven { url 'https://jitpack.io' }
}
}
Step 2. Add the dependency
dependencies {
compile 'com.github.dingzuoqiang:CustomBannerView:v1.0'
}
自定义封装 banner 组件的更多相关文章
- iOS开发之自定义表情键盘(组件封装与自动布局)
下面的东西是编写自定义的表情键盘,话不多说,开门见山吧!下面主要用到的知识有MVC, iOS开发中的自动布局,自定义组件的封装与使用,Block回调,CoreData的使用.有的小伙伴可能会问写一个自 ...
- 自定义组件开发:使用v-model封装el-pagination组件
1.前言 通过封装el-pagination组件开发自定义分页组件的类似文章网上已经有很多了,但看了一圈,总是不如意,于是决定还是自己动手搞一个. 2.背景 2.1.常规分页处理方法 利用el-pag ...
- jQuery自定义插件--banner图滚动
前言 jQuery是一个功能强大的库,提供了开发JavaScript项目所需的所有核心函数.很多时候我们使用jQuery的原因就是因为其使用插件的功能,然而,有时候我们还是需要使用自定义代码来扩展这些 ...
- 使用shadow dom封装web组件
什么是shadow dom? 首先我们先来看看它长什么样子.在HTML5中,我们只用写如下简单的两行代码,就可以通过 <video> 标签来创建一个浏览器自带的视频播放器控件. <v ...
- 封装bootstrap-treegrid组件
封装bootstrap-treegrid组件 阅读目录 一.开源的treegrid 1.组件效果预览 2.组件开源地址 二.封装treegrid 1.组件封装的必要性 2.组件封装代码示例 3.封 ...
- react初探(二)之父子组件通信、封装公共组件
一.前言 在组件方面react和Vue一样的,核心思想玩的就是组件,下面举两个组件常用的情景. 场景一:假如我们现在有一个页面包含表格以及多个弹框,这种时候如果将这个页面的业务代码写在一个组件中,那么 ...
- React Native实战系列教程之自定义原生UI组件和VideoView视频播放器开发
React Native实战系列教程之自定义原生UI组件和VideoView视频播放器开发 2016/09/23 | React Native技术文章 | Sky丶清| 4 条评论 | 1 ...
- 如何发布自定义的UI 组件库到 npmjs.com 并且编写 UI组件说明文档
记录基于 antd 封装业务组件并发布到npm 上的过程:(TS + React + Sass) 初始化项目: 1.yarn create react-app winyhui --typescript ...
- 封装Vue组件的一些技巧
封装Vue组件的一些技巧 本文同步在个人博客shymean.com上,欢迎关注 写Vue有很长一段时间了,除了常规的业务开发之外,也应该思考和反思一下封装组件的正确方式.以弹窗组件为例,一种实现是在需 ...
随机推荐
- 奥多朗WIFI 插座
https://aoduolang.tmall.com/category-1089563810.htm?spm=a1z10.1-b.w11212542-12917613245.12.tTWFSc&am ...
- fuse-dfs挂载hdfs实录
部署安装了最新稳定版hadoop2.2.0.然后在网上找来fuse-dfs编译教程.可是最后失败了.至今原因未知--,错误描写叙述为:Transport endpoint is not connect ...
- Windows Server2008 R2 设置NAT 让Hyper-V连接Internet
1.添加虚拟网卡,设置为内部,并且固定IP地址192.168.1.1 255.255.255.0 此为内网网卡 2.添加服务器角色:DHCP服务器,DNS服务器,网络策略和访问服务 3."网 ...
- CentOS firewall添加开放端口
添加 firewall-cmd --zone=public --add-port=80/tcp --permanent (–permanent永久生效,没有此参数重启后失效) 重新载入 firewal ...
- ubuntu下vim及man帮助文档的汉化
vim是一个功能超级强大的编辑器,当然我们也可将它配置超强的IDE.这类教程网上非常多,我就不再此赘述了. 我们在使用中对不熟悉的命令,不熟悉的插件的使用方法常常须要查看文档,全英文环境确实看着人头都 ...
- C# .NET如何定义图片按钮
先添加一个按钮,然后修改Image或者BackgroundImage显然不好,我想要按钮透明,就不要放在按钮的方框里,而且鼠标滑过和鼠标点击最好都是我自定义. 我们拉一个PictureBox,然后 ...
- .Net 与 Javascript 混合编程系列
之前的文章有提到 edge 和 nodejs 交互,通过node的模块为C# 提供一些扩展,这个还是比較方便. 这里说下为什么要使用js. 1.SharpKit是一个用于在编译时将C#语言转换为Jav ...
- mysql查看所有存储过程,函数,视图,触发器,表
查询数据库中的存储过程和函数 方法一: select `name` from mysql.proc where db = 'your_db_name' and `type` = 'PROCEDURE' ...
- Use of implicitly declared global variable
https://stackoverflow.com/questions/7604419/resharper-javascript-use-of-implicitly-declared-global-v ...
- 【Silverlight】Bing Maps学习系列(二):通过Bing Maps Silverlight Control如何显示地图(转)
[Silverlight]Bing Maps学习系列(二):通过Bing Maps Silverlight Control如何显示地图 如本系列第一篇你所介绍的,开发基于Silverlight的Bin ...