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 组件的更多相关文章

  1. iOS开发之自定义表情键盘(组件封装与自动布局)

    下面的东西是编写自定义的表情键盘,话不多说,开门见山吧!下面主要用到的知识有MVC, iOS开发中的自动布局,自定义组件的封装与使用,Block回调,CoreData的使用.有的小伙伴可能会问写一个自 ...

  2. 自定义组件开发:使用v-model封装el-pagination组件

    1.前言 通过封装el-pagination组件开发自定义分页组件的类似文章网上已经有很多了,但看了一圈,总是不如意,于是决定还是自己动手搞一个. 2.背景 2.1.常规分页处理方法 利用el-pag ...

  3. jQuery自定义插件--banner图滚动

    前言 jQuery是一个功能强大的库,提供了开发JavaScript项目所需的所有核心函数.很多时候我们使用jQuery的原因就是因为其使用插件的功能,然而,有时候我们还是需要使用自定义代码来扩展这些 ...

  4. 使用shadow dom封装web组件

    什么是shadow dom? 首先我们先来看看它长什么样子.在HTML5中,我们只用写如下简单的两行代码,就可以通过 <video> 标签来创建一个浏览器自带的视频播放器控件. <v ...

  5. 封装bootstrap-treegrid组件

    封装bootstrap-treegrid组件   阅读目录 一.开源的treegrid 1.组件效果预览 2.组件开源地址 二.封装treegrid 1.组件封装的必要性 2.组件封装代码示例 3.封 ...

  6. react初探(二)之父子组件通信、封装公共组件

    一.前言 在组件方面react和Vue一样的,核心思想玩的就是组件,下面举两个组件常用的情景. 场景一:假如我们现在有一个页面包含表格以及多个弹框,这种时候如果将这个页面的业务代码写在一个组件中,那么 ...

  7. React Native实战系列教程之自定义原生UI组件和VideoView视频播放器开发

    React Native实战系列教程之自定义原生UI组件和VideoView视频播放器开发   2016/09/23 |  React Native技术文章 |  Sky丶清|  4 条评论 |  1 ...

  8. 如何发布自定义的UI 组件库到 npmjs.com 并且编写 UI组件说明文档

    记录基于 antd 封装业务组件并发布到npm 上的过程:(TS + React + Sass) 初始化项目: 1.yarn create react-app winyhui --typescript ...

  9. 封装Vue组件的一些技巧

    封装Vue组件的一些技巧 本文同步在个人博客shymean.com上,欢迎关注 写Vue有很长一段时间了,除了常规的业务开发之外,也应该思考和反思一下封装组件的正确方式.以弹窗组件为例,一种实现是在需 ...

随机推荐

  1. 系统无法安装 OfficeControl.ocx 控件如何解决

      在OA上要直接查看word等公告文件,就必须安装office控件.要安装office控件,需要在IE浏览器中做相应的设置.如何设置呢,下面由小编具体介绍下. 工具/原料   OA IE浏览器 方法 ...

  2. 手把手教你开发Chrome扩展二:为html添加行为

    手把手教你开发chrome扩展一:开发Chrome Extenstion其实很简单 手把手教你开发Chrome扩展二:为html添加行为 手把手教你开发Chrome扩展三:关于本地存储数据 上一节我们 ...

  3. 子元素设置margin-top,父元素也受影响

    这个问题困惑了非常久.尽管没有大碍早就摸出来怎么搞定它.但始终不明确原因出在哪里,假设仅仅是IE有问题我也不会太在意.可问题是全部上等浏览器都表现如此,这样叫我怎能安心?今天总算下狠心查出来怎么回事, ...

  4. IntelliJ IDEA在行尾增加分号

    IntelliJ IDEA在行尾增加分号 Ctrl+Shift+Enter - 本身的含义是自动完成,如果需要的话,会在行尾添加分号:

  5. Swift 函数Count,Filter,Map,Reduce

    原创Blog,转载请注明出处 blog.csdn.net/hello_hwc 前言:和OC不同,Swift有非常多全局的函数,这些全局函数对简化代码来说非常实用.眼下Swift出到了2.0,只是我这篇 ...

  6. UVA 567 Risk【floyd】

    题目链接: option=com_onlinejudge&Itemid=8&page=show_problem&problem=508">https://uva ...

  7. delphi中URL的汉字编码

    delphi中URL的汉字编码 show.asp?sort=全部&sortlevel=1&gorq=供&n=5&sitename=全部&img=yes& ...

  8. ios33--线程安全

    // // ViewController.m // 05-掌握-线程安全 // // 多线程下载文件:每个线程下的部分可能是交错的,到时候就拼接不了.除非每个线程下载的不是交错的,而是从头到尾依次分开 ...

  9. not syncing : corrupted stack end detected inside scheduler

    自己在测试安装UBuntu的时候遇见了这个错误,not syncing : corrupted stack end detected inside scheduler解决办法 原因是低版本的VMwar ...

  10. HTTP请求错误码大全(转)

    一些常见的状态码为: 200 - 服务器成功返回网页 404 - 请求的网页不存在 503 - 服务不可用 详细分解: 1xx(临时响应) 表示临时响应并需要请求者继续执行操作的状态代码. 代码 说明 ...