自定义封装 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‘
    }
时间: 2024-10-11 13:06:47

自定义封装 banner 组件的相关文章

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

下面的东西是编写自定义的表情键盘,话不多说,开门见山吧!下面主要用到的知识有MVC, iOS开发中的自动布局,自定义组件的封装与使用,Block回调,CoreData的使用.有的小伙伴可能会问写一个自定义表情键盘肿么这么麻烦?下面将会介绍我们如何用上面提到的东西来定义我们的表情键盘的.下面的内容会比较多,这篇博文还是比较有料的. 还是那句话写技术博客是少不了代码的,下面会结合代码来回顾一下iOS的知识,本篇博文中用到的知识点在前面的博客中都能找到相应的内容,本篇算是一个小小的功能整合.先来张图看

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

前言 jQuery是一个功能强大的库,提供了开发JavaScript项目所需的所有核心函数.很多时候我们使用jQuery的原因就是因为其使用插件的功能,然而,有时候我们还是需要使用自定义代码来扩展这些核心函数来提高开发效率.我们知道, jQuery库是为了加快JavaScript的开发速度而设计的,通过简化编写JavaScript的方式,减少代码量.所以,今天就带大家了解一下jQuery自定义插件以及自定义插件案例---banner图滚动. 一.自定义插件 自定义插件一般有两种类型:全局插件和局

封装bootstrap-treegrid组件

封装bootstrap-treegrid组件 阅读目录 一.开源的treegrid 1.组件效果预览 2.组件开源地址 二.封装treegrid 1.组件封装的必要性 2.组件封装代码示例 3.封装后的组件使用 三.总结 正文 前言:最近产品需要设计一套相对完整的组织架构的解决方案,由于组织架构涉及到层级关系,在表格里面展示层级关系,自然就要用到所谓的treegrid.可惜的是,一些轻量级的表格组件本身并没有自带树形表格的功能,比如bootstrapTable就没有这个功能,怎么办呢?如果是jq

封装HtmlHelper组件:BootstrapHelper

封装HtmlHelper组件:BootstrapHelper前言:上篇介绍了<封装BootstrapHelper>的一些基础知识参考HtmlHelper的方式,这篇先来封装下一些常用的表单组件.关于BootstrapHelper封装的意义何在,上篇评论里面已经讨论得太多,这里也不想过多纠结.总之一句话:凡事有得必有失,就看你怎么去取舍. 一.新增泛型的BootstrapHelper 上篇只定义了一个BootstrapHelper的普通类型去继承HtmlHelper,由于考虑到需要使用lamad

使用shadow dom封装web组件

什么是shadow dom? 首先我们先来看看它长什么样子.在HTML5中,我们只用写如下简单的两行代码,就可以通过 <video> 标签来创建一个浏览器自带的视频播放器控件. <video controls=""> <source src="https://mdn.mozillademos.org/files/2587/AudioTest%20(1).ogg" type="audio/ogg"> </v

手把手教你用ViewPager自定义实现Banner轮播

手把手教你用ViewPager自定义实现Banner轮播 欢迎大家关注Android开源网络框架NoHttp:https://github.com/Y0LANDA/NoHttp 我们在实际开发中,很多App都会在做一个广告轮播器(可能是图片,可能是其他View),很多同学都是使用别人封装好的或者直接使用ViewPager自己来改,但是有人可能并不理解里面的原理,或者有人遇到了手势滑动冲突.我们今天就用150行代码实现一自定义的广告轮播器并不干扰原来View滑动事件. 本例代码源码及Demo传送门

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

一.前言 在组件方面react和Vue一样的,核心思想玩的就是组件,下面举两个组件常用的情景. 场景一:假如我们现在有一个页面包含表格以及多个弹框,这种时候如果将这个页面的业务代码写在一个组件中,那么这一块的代码会看着非常恶心.如果这个时候我们将这个页面的表格以及弹框这些单独的模块分别写成组件的形式,然后再在这个页面中将这些组件引入进来,那样我们的代码会看着非常整洁.这样做会需要使用到父子组件之间的通信,下面会详细解释. 场景二:日常项目中我们会经常遇到某一个功能会在不同地方使用,但是每次使用的

封装Vue组件的一些技巧

封装Vue组件的一些技巧 本文同步在个人博客shymean.com上,欢迎关注 写Vue有很长一段时间了,除了常规的业务开发之外,也应该思考和反思一下封装组件的正确方式.以弹窗组件为例,一种实现是在需要模板中引入需要弹窗展示的组件,然后通过一个flag变量来控制弹窗的组件,在业务代码里面会充斥着冗余的弹窗组件逻辑,十分不优雅. 本文整理了开发Vue组件的一些技巧,包含大量代码示例. 开发环境 vue-cli3提供了非常方便的功能,可以快速编写一些测试demo,是开发组件必备的环境.下面是安装使用

ReactNative: 将自定义的ReactNative组件制作成第三方库的详细流程(制作--&gt;发布)

一.简介 在讲本篇博文之前,需要你熟知怎么自定义ReactNative组件,然后才好学习将自定义的ReactNative组件制作成第三方库.本文中的自定义的ReactNative组件LoginManager API 源自上篇文章,所以需要先看一下上篇博文.言归正传,ReactNative的确提供了一个非常便捷的方式来扩展Native模块.如果要把模块做成第三方组件的话,还有一些工作要做:首先以一个静态库工程来编译模块代码,提供JavaScript的封装,最后创建Package.json来支持no