Android自定义封装banner组件

自定义封装 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'
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • Android自动播放Banner图片轮播效果

    先看一下效果图 支持本地图片以及网络图片or本地网络混合. 使用方式: <com.jalen.autobanner.BannerView android:id="@+id/banner" android:layout_width="match_parent" android:layout_height="230dip"> </com.jalen.autobanner.BannerView> 核心代码: int length

  • Android UI实现广告Banner轮播效果

    本篇博客要分享的一个效果是实现广告Banner轮播效果,这个效果也比较常见,一些视频类应用就经常有,就拿360影视大全来举例吧: 用红框框住的那个效果就是小巫今天要分享的,先来思考一下会用到什么控件?有什么用户体验? 控件我们可能一下子就可以想到的自然是ViewPager,没错!用到的就是ViewPager,那么它会有什么用户体验呢,它可能有以下几个体验: 1. 间隔不停的切换图片,指示器也跟着变 2. 点击图片可以跳转到指定的页面 如何实现? 布局开始着手 /BannerAutoScrollD

  • Android ViewPager实现Banner循环播放

    问题的起源 在项目里,有时候需要实现一个图片轮播的效果,用来展示Banner.同时,图片能循环播放,下面还有一排小圆点来指示当前轮播到哪一页了. 如下图: 分析 · 图片的个数是会变化的,同时小圆点的个数也会跟着图片个数变化 · 每一个page的布局是一样的.变化的就是小圆点的个数,所以需要用代码来动态生成小圆点 编码 布局 首先完成 MainActivity 的布局 activity_main.xml <RelativeLayout xmlns:android="http://schem

  • Android 中Banner的使用详解

    首先倒入一个依赖: compile 'com.youth.banner:banner:1.4.9' 添加的权限: <uses-permission android:name="android.permission.INTERNET" /> <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" /> 布局文件: <com.youth.banner.B

  • Android convinientbanner顶部广告轮播控件使用详解

    本文实例为大家分享了convinientbanner顶部广告轮播控件的具体代码,供大家参考,具体内容如下 gradle中添加 compile 'com.bigkoo:convenientbanner:2.0.5' 布局 <com.bigkoo.convenientbanner.ConvenientBanner xmlns:app="http://schemas.android.com/apk/res-auto" android:id="@+id/convenientBa

  • Android ViewPager实现无限循环轮播广告位Banner效果

    现在一些app通常会在头部放一个广告位,底部放置一行小圆圈指示器,指示广告位当前的页码,轮播展示一些图片,这些图片来自于网络.这个广告位banner是典型的android ViewPager实现,但是如果自己实现这样的ViewPager,要解决一系列琐碎的问题,比如: (1)这个广告位ViewPager要支持无限循环轮播,例如,有3张图片,A,B,C,当用户滑到最后C时候再滑就要滑到A,反之亦然. (2)ViewPager要实现自动播放,比如每个若干秒如2秒,自动切换播放到下一张图片. (3)通

  • Android实现Banner界面广告图片循环轮播(包括实现手动滑动循环)

    前言:经常会看到有一些app的banner界面可以实现循环播放多个广告图片和手动滑动循环.本以为单纯的ViewPager就可以实现这些功能.但是蛋疼的事情来了,ViewPager并不支持循环翻页.所以要实现循环还得需要自己去动手.自己在网上也找了些例子,本博文的Demo是结合自己找到的一些相关例子的基础上去改造,也希望对读者有用. Demo实现的效果图如下: Demo代码: 工程目录如下图: 废话不多说,上代码. 1.主Activity代码如下: package com.stevenhu.and

  • Android组件banner实现左右滑屏效果

    什么是banner组件?在许多Android应用上,比如爱奇艺客户端.百度美拍.应用宝等上面,都有一个可以手动滑动的小广告条,这就是banner,实际应用中的banner,其信息(图片和点击行为)是后台可配置的,是需要通过网络从后台拉取的.网上有许多手动滑屏的例子,但是一般只是个demo,无法在实际中使用,因为其一般没有考虑如下几类问题:图片缓存.OOM问题.是否可灵活配置.是否预留外部接口以及是否封装良好.没有良好的封装,手动滑屏加在代码中,会使得代码变得很烂很脆弱. 1.原理 参见下图.整个

  • Android中banner的使用步骤

    Step 1.依赖banner Gradle dependencies{ compile 'com.youth.banner:banner:1.4.9' //最新版本 } 或者引用本地lib compile project(':banner') Step 2.添加权限到你的 AndroidManifest.xml <!-- if you want to load images from the internet --> <uses-permission android:name=&quo

  • android实现banner轮播图无限轮播效果

    本文实例为大家分享了banner轮播图无限轮播效果的具体代码,供大家参考,具体内容如下 效果展示 第一步(权限配置) <uses-permission android:name="android.permission.INTERNET" /> <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" /> <uses-permission andr

随机推荐