自定义圆形进度条,模拟开屏广告倒计时

一、效果

V 0.0.2

修复默认宽度为4px,不适4dp的bug。

V 0.0.1

1、可设置外环底色、外环进度条颜色、内环颜色、百分比文字颜色、标题文字颜色、进度、进度文字大小、标题文字大小、进度条宽度、标题字符串、是否显示百分比文字、不显示百分比文字时替换显示的文字。
2、可动画展示进度条显示到指定进度。可取消动画。

这里写图片描述

二、使用

1. Android Studio用户,在gradle中添加配置。
compile 'com.octopus:round-progressbar:0.0.2'
2. xml中使用。共12个属性,除xml中配置外还可以使用java代码设置。
<com.octopus.round_progressbar.RoundProgressBar
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_margin="12dp"
        app:isShowProgress="true"
        app:progress="47"
        app:progressStr="progressStr"
        app:roundColor="#e0e0e0"
        app:roundInsideColor="#ffffff"
        app:roundProgressColor="#00ff00"
        app:roundWidth="4dp"
        app:textProgressColor="#ff0000"
        app:textProgressSize="16sp"
        app:textTitleColor="#0000ff"
        app:textTitleSize="14sp"
        app:titleStr="item1" />
3. java代码。

进度条动画执行显示。三个参数:动画时长、动画速率、动画监听。可使用无参方法,则默认时长700ms,加速速率,不监听动画执行。

public void startAnimation(long animTime, TimeInterpolator mTimeInterpolator, Animator.AnimatorListener mAnimatorListener)

调用如下方法可停止动画。

public void clearAnimation()
4. 属性介绍
参数名参数含义xml设置java设置
roundColor外环底色颜色,默认Color.GRAYapp:roundColor=”#e0e0e0”setRoundColor(int roundColor)
roundProgressColor外环进度条颜色,默认Color.REDapp:roundProgressColor=”#00ff00”setRoundProgressColor(int roundProgressColor)
roundInsideColor内环颜色,默认Color.TRANSPARENTapp:roundInsideColor=”#ffffff”setRoundInsideColor(int roundInsideColor)
textProgressColor百分比文字颜色,默认Color.REDapp:textProgressColor=”#ff0000”setTextProgressColor(int textProgressColor)
textTitleColor标题文字颜色,默认Color.REDapp:textTitleColor=”#0000ff”setTextTitleColor(int textTitleColor)
progress进度,0-100,默认0。注意java代码。app:progress=”47”resetProgress(float progress)
textProgressSize百分比文字字体大小,默认14spapp:textProgressSize=”16sp”setTextProgressSize(float textProgressSize)
textTitleSize标题文字字体大小,默认12spapp:textTitleSize=”14sp”setTextTitleSize(float textTitleSize)
roundWidth圆环宽度,默认4dpapp:roundWidth=”4dp”setRoundWidth(float roundWidth)
titleStr显示的标题信息,默认为空app:titleStr=”item1”setTitleStr(String titleStr)
isShowProgress是否显示占比。若是则显示progress%,否则显示progressStr,默认为trueapp:isShowProgress=”true”setShowProgress(boolean isShowProgress)
progressStrisShowProgress=true的时候显示progress%。否则显示该信息。默认为空app:progressStr=”progressStr”setProgressStr(String progressStr)
5. 注意事项
  • 所有属性均可以选择设置或不设置,选择在xml中固定设置还是在java代码中动态设置。
  • 需要设置该控件的宽高一致!
  • onDestroy方法中要执行控件的clearAnimation()方法!
  • 若使用该控件用于app开屏广告页的跳过广告倒计时,请参照Demo源码,调用启动动画方法,监听动画,动画正常结束时跳转。若人为点击直接跳转,则要记得清除动画,且在监听到是取消的时候不再执行动画结束方法时的跳转,防止多次跳转。
6. github

更多信息可下载demo查看。传送门

Uniapp是一款跨平台开发工具,它基于Vue.js,可以快速开发出适用于多个平台的应用程序。在Uniapp中,可以自定义开屏广告,以下是具体步骤: 首先,在项目的根目录下新建一个splash文件夹,将需要展示的开屏广告图片放入该文件夹中; 然后,在manifest.json文件中找到"app-plus"标签,并添加"adSplash":true的属性,表示开启开屏广告功能; 接着,在App.vue文件中,按照以下代码上传开屏广告图片: <template> <view> <!-- 定义开屏广告容器 --> <view class="splash" :style="'background-image:url('+splash_img+')'"></div> </view> </template> <script> export default { data() { return{ splash_img:'./static/splash.jpg' } }, created(){ // 获取开屏广告图片路径 this.getSplashImg() }, methods:{ getSplashImg(){ // 自定义获取开屏广告图片路径的方法,可以从服务端获取图片的url this.splash_img = "./static/splash.jpg" } } } </script> 样式方面,需要在App.vue文件中定义开屏广告容器的样式,例如: .splash{ position:fixed; left:0; top:0; width:100%; height:100%; background-size:cover; } 最后,需要在项目中设置延迟时间,使得开屏广告能够展示一段时间后自动消失,例如: setTimeout(()=>{ // 隐藏开屏广告容器 document.querySelector('.splash').style.display = 'none' },3000) 通过以上步骤,就可以在Uniapp中自定义开屏广告了。同时,需要注意的是,在开屏广告展示过程中,应用程序的代码并不会执行,因此需要确保开屏广告展示完毕后,再开始执行应用程序的代码。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值