博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Android 实现环形进度按钮circular-progress-button
阅读量:5167 次
发布时间:2019-06-13

本文共 2219 字,大约阅读时间需要 7 分钟。

效果

screenshots/intro.gif

简单介绍

显示运行进度的button,可用于数据的提交。系统登录等。动画效果非常棒。提高用户体验。


使用说明

Declare button inside your layout XML file:

Button state depends on progress:

  • normal state [0]
  • progress state [1-99]
  • success state [100]
  • error state [-1]

To change progress use CircularProgressButton.setProgress(int value) method.

Idle state

CircularProgressButton.setProgress(0)

  • To change text app:textIdle="@string/Upload"
  • To change background color app:colorIdle="@color/green"

Progress state 1

CircularProgressButton.setProgress(1) will automatically morph button from idle (square shape) state to progress (circle shape) state.

  • To change indicator color app:colorIndicator="@color/blue"
  • To change indicator background color app:colorIndicatorBackground="@color/grey"
  • To change circle background color app:colorProgress="@color/white"

Progress state 50

CircularProgressButton.setProgress(50)

Complete state 100

CircularProgressButton.setProgress(-1)

  • To change text app:textError="@string/Error"
  • To change background color app:colorError="@color/red"

Error state -1

CircularProgressButton.setProgress(-1)

  • To change text app:textComplete="@string/Complete"
  • To change background color app:colorComplete="@color/green"

You can set rounded corners

app:cornerRadius="48dp"

You can use icons for complete & error states

app:iconComplete="@drawable/ic_action_accept"

app:iconError="@drawable/ic_action_cancel"


代码

1.button的几种状态

  • 初始状态 [0]
  • 载入中 [1-99]
  • 载入成功 [100]
  • 载入失败 [-1]
通过调用此方法改变 CircularProgressButton.setProgress(int value) 

2.改动进度条样式

  • 改动载入进度的颜色 app:colorIndicator="@color/blue"
  • 改动载入进度的背景色 app:colorIndicatorBackground="@color/grey"
  • 改动中间圆形的颜色 app:colorProgress="@color/white"
3.其它属性

  • 失败时的文字 app:textError="@string/Error"
  • 失败时的背景色 app:colorError="@color/red"
  • 成功时的文字 app:textComplete="@string/Complete"
  • 成功时的背景色 app:colorComplete="@color/green"
  • 设置button圆角 app:cornerRadius="48dp"
  • 设置成功时的图标 app:iconComplete="@drawable/ic_action_accept"
  • 设置失败时的图标 app:iconError="@drawable/ic_action_cancel"

注意事项

一行放置一个以上的button时须要注意一下,由于button点击后变为进度框时视图的宽度要发生改变。所以位置可能发生变化。须要注意下你的布局,能够放到按比例分开的线性布局,或放相对布局中定义宽度让它始终居中




常见错误


        


项目地址 

       
https://github.com/dmytrodanylyk/circular-progress-button

※DEMO下载地址


      


※楼主博客


       
   (这里会稍早些更新。还会定时更新些平时的一些开发技巧)

转载于:https://www.cnblogs.com/zfyouxi/p/5104313.html

你可能感兴趣的文章
jquery动态移除/增加onclick属性详解
查看>>
JavaScript---Promise
查看>>
暖暖的感动
查看>>
Java中的日期和时间
查看>>
Django基于admin的stark组件创建(一)
查看>>
抛弃IIS,利用FastCGI让Asp.net与Nginx在一起
查看>>
C. Tanya and Toys_模拟
查看>>
springboot jar包运行中获取资源文件
查看>>
基于FPGA实现的高速串行交换模块实现方法研究
查看>>
Java Scala获取所有注解的类信息
查看>>
delphi ,安装插件
查看>>
case when then的用法-leetcode交换工资
查看>>
11.28.cookie
查看>>
BeanShell简介
查看>>
python字符串操作
查看>>
不同程序语言的注释和变量要求
查看>>
语言基础(9):static, extern 和 inline
查看>>
ES5_03_Object扩展
查看>>
bzoj 2600: [Ioi2011]ricehub
查看>>
创建数据库,表
查看>>