[英]Custom circular image progress bar with transparent background
I have circular picture of timer: 我有计时器的圆形图片:
I want to create circular progress bar which would consist of this picture, which would make it slowly empty like a clock until full disappearance (like an animation). 我想创建一个包含此图片的圆形进度条,这将使其像时钟一样缓慢地变空,直到完全消失(如动画)。
for example, after half of the time I will define it's appear as: 例如,在一半的时间之后,我将其定义为:
Right now I'm doing it in this way: I put the timer image as image on the screen, and over it I put regular circle progress bar with color as the background color which hides the image (and so I get the desired effect). 现在,我以这种方式进行操作:我将计时器图像作为图像放置在屏幕上,并在其上放置了规则的圆形进度条,并使用颜色作为隐藏图像的背景颜色(这样我就得到了预期的效果) 。
but now I have problem when I have few colors in the background of the app, because I can't to make the progress bar with the same color as the background, so I looking for new way to make it, like custom progress bar that consist from the timer image with transparent background. 但是现在我在应用程序的背景中只有几种颜色时遇到了问题,因为我无法使进度条具有与背景相同的颜色,所以我在寻找一种新的制作方法,例如自定义进度条由具有透明背景的计时器图像组成。
please help me how to change my code to get it: 请帮助我如何更改代码以获取它:
ProgressBar XML:
<ProgressBar
android:id="@+id/progressBar"
android:layout_width="200dp"
android:layout_height="200dp"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:progress="100"
android:rotation="90"
style="?android:progressBarStyleHorizontal"
android:progressDrawable="@drawable/prog_blue"/>
Prog_blue (the drawable of the progressBar) - blue is the background color of the app: Prog_blue(progressBar的可绘制对象)-蓝色是应用程序的背景色:
<?xml version="1.0" encoding="utf-8"?>
<scale
android:fromDegrees="270"
android:pivotX="50%"
android:pivotY="50%"
xmlns:android="http://schemas.android.com/apk/res/android">
<shape
android:shape="ring"
android:innerRadiusRatio="2.7"
android:thickness="23dp"
xmlns:android="http://schemas.android.com/apk/res/android">
<gradient
android:startColor="@color/prog_blue"
android:endColor="@color/prog_blue"
android:type="sweep"
android:useLevel="false"/>
</shape>
</scale>
you can create custom View
To achieve that 您可以创建自定义
View
来实现
here My Code : 这是我的代码:
ClockProgressBar.java ClockProgressBar.java
import android.animation.ValueAnimator;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.support.annotation.Nullable;
import android.util.AttributeSet;
import android.view.View;
public class ClockProgressBar extends View {
Paint tickPaint;
private int shortTickLen=10;
private int longTickLen=20;
private int finalWidth=0;
private int finalHeight=0;
private int r=0;
private Path ticksPath;
int tickNumbers=60;
private ValueAnimator animator;
public ClockProgressBar(Context context) {
super(context);
ini();
}
public ClockProgressBar(Context context, @Nullable AttributeSet attrs) {
super(context, attrs);
ini();
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
drawIntervals(canvas);
}
void drawIntervals(Canvas canvas){
double cX = getX()+finalWidth/2;
double cY = getY()+finalHeight/2;
ticksPath=new Path();
for ( int i=1; i<= tickNumbers; i++){
int len = shortTickLen;
if ( i % 15 == 0 ){
len = longTickLen;
}else if ( i % 5 == 0 ){
len = longTickLen;
}
double di = (double)i;
double angleFrom12 = di/60.0*2.0*Math.PI;
double angleFrom3 = Math.PI/2.0-angleFrom12;
ticksPath.moveTo(
(float)(cX+Math.cos(angleFrom3)*r),
(float)(cY-Math.sin(angleFrom3)*r)
);
ticksPath.lineTo(
(float)(cX+Math.cos(angleFrom3)*(r-len)),
(float)(cY-Math.sin(angleFrom3)*(r-len))
);
}
canvas.drawPath(ticksPath,tickPaint);
}
void ini(){
tickPaint=new Paint();
tickPaint.setStrokeCap(Paint.Cap.BUTT);
tickPaint.setStrokeJoin(Paint.Join.ROUND);
tickPaint.setAntiAlias(true);
tickPaint.setStyle(Paint.Style.STROKE);
tickPaint.setStrokeWidth(8);
tickPaint.setStrokeMiter(2f);
tickPaint.setColor(Color.BLACK);
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
finalWidth = getMeasuredWidth() / 2;
finalHeight = getMeasuredWidth() / 2;
r = (finalWidth / 2);
setMeasuredDimension(finalWidth, finalHeight );
}
public void startAnimation(){
animator = ValueAnimator.ofInt(60, 0);
animator.setDuration(5000);
animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
public void onAnimationUpdate(ValueAnimator animation) {
tickNumbers= (int) animation.getAnimatedValue();
invalidate();
}
});
animator.setRepeatCount(Integer.MAX_VALUE);
animator.start();
}
public void stopAnimation(){
if (animator!=null){
animator.cancel();
}
setVisibility(GONE);
}
}
and use it in xml 并在xml中使用
activity_main.xml activity_main.xml中
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<<Your Package Name>.ClockProgressBar
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/progress"/>
</LinearLayout>
and call it in you activity and use startAnimation()
and stopAnimation()
to show and dismiss the View
并在您的活动中调用它,并使用
startAnimation()
和stopAnimation()
显示和关闭View
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
ClockProgressBar progressBar=findViewById(R.id.progress);
progressBar.startAnimation();
}
}
final result : 最终结果 :
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.