第一种:circular-progress-button
简介
一个代有progress的Button,github : circular-progress-button效果图:
gradle
dependencies {
...
compile 'com.github.dmytrodanylyk.circular-progress-button:library:1.1.3'
}
基本使用
xml
<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:cpb_textComplete="@string/Complete"
app:cpb_textError="@string/Error"
app:cpb_textIdle="@string/Upload" />
java
CircularProgressButton.setProgress(int value)
4种状态及对应设置
state | state value | xml:text | xml:icon | – |
---|---|---|---|---|
normal | 0 | app:cpb_textIdle=”登录” | – | app:cpb_selectorIdle=”@drawable/idle_state_selector” |
profress | [1,99] | – | – | |
successs | 100 | app:cpb_textComplete=”成功” | app:cpb_iconComplete=”@mipmap/ic_action_accept” | app:cpb_selectorComplete=”@drawable/complete_state_selector” |
error | -1 | app:cpb_textError=”失败” | app:cpb_iconError=”@mipmap/ic_action_cancel” | app:cpb_selectorError=”@drawable/error_state_selector” |
app:cpb_cornerRadius="3dp"
:圆角
app:cpb_paddingProgress="10dp"
:内边距
其他自定义
To change indicator color:
app:cpb_colorIndicator="@color/cpb_blue"
To change indicator background color:
app:cpb_colorIndicatorBackground="@color/cpb_grey"
To change circle background color :
app:cpb_colorProgress="@color/cpb_white"
state切换原则
上面提到有4中状态,对应4中状态值(区间),那么需要这4种状态是可以互相转换吗?答案是不可以,我画了一张图偏于理解。
相邻的状态:可以互相转换。
不相邻的状态:高可以转低,但低不可以转高。
progress
cpb1.setIndeterminateProgressMode(true);
cpb1.setOnClickListener(this);
private void showCPB1() {
int progress = cpb1.getProgress();
if (progress == 0) {
cpb1.setProgress(50);
} else if (progress > 0 && progress < 100) {
cpb1.setProgress(-1);
} else if (progress == -1) {
cpb1.setProgress(0);
}
}
cpb2.setIndeterminateProgressMode(true);
cpb2.setOnClickListener(this);
private void showCPB2() {
int progress = cpb2.getProgress();
if (progress == 0) {
cpb2.setProgress(50);
} else if (progress > 0 && progress < 100) {
cpb2.setProgress(100);
} else if (progress == 100) {
cpb2.setProgress(0);
}
}
加入属性动画
属性动画,规定时间内滚动由0到100
int progress = cpb3.getProgress();
if (progress == 0) {
ValueAnimator valueAnimator = ValueAnimator.ofInt(0, 100);
valueAnimator.setDuration(3000);
valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator valueAnimator) {
int value = (int) valueAnimator.getAnimatedValue();
cpb3.setProgress(value);
}
});
valueAnimator.start();
} else {
cpb3.setProgress(0);
}
属性动画,规定时间内滚动由0到-1
int progress = cpb4.getProgress();
if (progress == 0) {
ValueAnimator valueAnimator = ValueAnimator.ofInt(0, 99);
valueAnimator.setDuration(3000);
valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator valueAnimator) {
int value = (int) valueAnimator.getAnimatedValue();
cpb4.setProgress(value);
if (value == 99) {
cpb4.setProgress(-1);
}
}
});
valueAnimator.start();
} else {
cpb4.setProgress(0);
}
没有progress,直接改变状态,比较生硬
int progress = cpb5.getProgress();
if (progress == 0) {
cpb5.setProgress(100);
} else {
cpb5.setProgress(0);
}
int progress = cpb6.getProgress();
if (progress == 0) {
cpb6.setProgress(-1);
} else {
cpb6.setProgress(0);
}
源码
https://git.oschina.net/libraryDemo/CircularProgressButton01
第二种:android-process-button
和第一个类似,下面简单介绍使用,详细见github:android-process-button。
缺点:需要设定时间,时间不到,无法改变其状态,适合业务场景:微博:关注与取消状态的切换。
分:FlatButton
、ActionProcessButton
、SubmitProcessButton
、GenerateProcessButton
gradle
dependencies {
compile 'com.github.dmytrodanylyk.android-process-button:library:1.0.0'
}
XML
<com.dd.processbutton.FlatButton
android:id="@+id/fb1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="fb1"
app:pb_colorNormal="@color/blue_normal"
app:pb_colorPressed="@color/blue_pressed"
app:pb_cornerRadius="@dimen/corner_radius"/>
java
animator = ValueAnimator.ofInt(1, 100);
animator.setDuration(60*1000);
animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator valueAnimator) {
int value = (int) valueAnimator.getAnimatedValue();
fb2.setProgress(value);
fb2.setClickable(false);
}
});
animator.start();