码迷,mamicode.com
首页 > 移动开发 > 详细

Android 实现环形进度按钮circular-progress-button

时间:2014-07-23 13:25:56      阅读:250      评论:0      收藏:0      [点我收藏+]

标签:android 实现环形进度按钮 cir

效果

bubuko.com,布布扣 

简介

显示进度的按钮,可用于数据的提交,系统登录等,动画效果很棒,提高用户体验。

使用说明

Declare button inside your layout XML file:

<com.dd.CircularProgressButton
    android:id="@+id/btnWithText"
    android:layout_width="196dp"
    android:layout_height="64dp"
    android:layout_marginTop="16dp"
    android:textColor="@color/white"
    android:textSize="18sp"
    app:textComplete="@string/Complete"
    app:textError="@string/Error"
    app:textIdle="@string/Upload" />

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"

bubuko.com,布布扣

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"

bubuko.com,布布扣

Progress state 50

CircularProgressButton.setProgress(50)

bubuko.com,布布扣

Complete state 100

CircularProgressButton.setProgress(-1)

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

bubuko.com,布布扣

Error state -1

CircularProgressButton.setProgress(-1)

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

bubuko.com,布布扣

You can set rounded corners

app:cornerRadius="48dp"

bubuko.com,布布扣

You can use icons for complete & error states

app:iconComplete="@drawable/ic_action_accept"

bubuko.com,布布扣

app:iconError="@drawable/ic_action_cancel"

bubuko.com,布布扣


代码

1.按钮的几种状态
  • 初始状态 [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"
  • 设置按钮圆角 app:cornerRadius="48dp"
  • 设置成功时的图标 app:iconComplete="@drawable/ic_action_accept"
  • 设置失败时的图标 app:iconError="@drawable/ic_action_cancel"

注意事项

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



常见错误


        http://blog.csdn.net/linglongxin24/article/details/38057501

项目地址 

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

※DEMO下载地址


      http://download.csdn.net/detail/u010785585/7666287

※楼主博客


       http://blog.csdn.net/linglongxin24    (这里会稍早些更新,还会定时更新些平时的一些开发技巧)

Android 实现环形进度按钮circular-progress-button

标签:android 实现环形进度按钮 cir

原文地址:http://blog.csdn.net/linglongxin24/article/details/38057635

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!