如何在android中制作自定义虚线圆形进度条？

Question

我已经搜索了虚线圆形进度条但是我得到了任何完美的例子,有圆形进度条但没有虚线的那么我已经实现了希望它会帮助某人,你可以保留这个作为参考和进一步定制,对于初学者来说,它将有助于理解代码,因为它在每行上对它所做的事情进行了评论.

Answer 1

MainActivity.java

public class MainActivity extends AppCompatActivity {

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
}
}

activity_main.xml中:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.example.naveenbm.customcircleprogressbar.MainActivity"
    >

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center">

        <com.example.custom.customcircleprogressbar.CricleProgressBarCustom
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            ></com.example.custom.customcircleprogressbar.CricleProgressBarCustom>

    </RelativeLayout>

</RelativeLayout>

CircleProgressBarCustom.java

public class CricleProgressBarCustom extends View {

//Normal dot radius
private int dotRadius = 10;

//Expanded Dot Radius
private int bounceDotRadius = 13;

//to get identified in which position dot has to expand its radius
private int dotPosition = 1;

//specify how many dots you need in a progressbar
private int dotAmount = 10;

//specify the circle radius
private int circleRadius = 50;


public CricleProgressBarCustom(Context context) {
    super(context);
}

public CricleProgressBarCustom(Context context, AttributeSet attrs) {
    super(context, attrs);
}

public CricleProgressBarCustom(Context context, AttributeSet attrs, int defStyleAttr) {
    super(context, attrs, defStyleAttr);
}

@Override
protected void onAttachedToWindow() {
    super.onAttachedToWindow();
    //Animation called when attaching to the window, i.e to your screen
    startAnimation();
}


@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    //take the point to the center of the screen
    canvas.translate(this.getWidth()/2,this.getHeight()/2);

    Paint progressPaint = new Paint();
    progressPaint.setColor(Color.parseColor("#ff014e"));

    //call create dot method
    createDotInCircle(canvas,progressPaint);
}

private void createDotInCircle(Canvas canvas,Paint progressPaint) {
    //angle for each dot angle = (360/number of dots) i.e  (360/10)
    int angle = 36;

    for(int i = 1; i <= dotAmount; i++){

        if(i == dotPosition){
             // angle should be in radians  i.e formula (angle *(Math.PI / 180))
            float x = (float) (circleRadius * (Math.cos((angle * i) * (Math.PI / 180))));
            float y = (float) (circleRadius * (Math.sin((angle * i) * (Math.PI / 180))));

            canvas.drawCircle(x,y, bounceDotRadius, progressPaint);

        }else{
            // angle should be in radians  i.e formula (angle *(Math.PI / 180))
            float x = (float) (circleRadius * (Math.cos((angle * i) * (Math.PI / 180))));
            float y = (float) (circleRadius * (Math.sin((angle * i) * (Math.PI / 180))));

            canvas.drawCircle(x,y, dotRadius, progressPaint);

        }

    }
}

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    int width = 0;
    int height = 0;

    //Dynamically setting width and height to progressbar 100 is circle radius, dotRadius * 3 to cover the width and height of Progressbar
     width = 100 + (dotRadius*3);
     height = 100 + (dotRadius*3);

    //MUST CALL THIS
    setMeasuredDimension(width, height);
}

private void startAnimation() {
    BounceAnimation bounceAnimation = new BounceAnimation();
    bounceAnimation.setDuration(150);
    bounceAnimation.setRepeatCount(Animation.INFINITE);
    bounceAnimation.setInterpolator(new LinearInterpolator());
    bounceAnimation.setAnimationListener(new Animation.AnimationListener() {
        @Override
        public void onAnimationStart(Animation animation) {

        }

        @Override
        public void onAnimationEnd(Animation animation) {

        }

        @Override
        public void onAnimationRepeat(Animation animation) {
            dotPosition++;
            //when dotPosition == dotAmount , then start again applying animation from 0th positon , i.e  dotPosition = 0;
            if (dotPosition > dotAmount) {
                dotPosition = 1;
            }


        }
    });
    startAnimation(bounceAnimation);
}


private class BounceAnimation extends Animation {
    @Override
    protected void applyTransformation(float interpolatedTime, Transformation t) {
        super.applyTransformation(interpolatedTime, t);
        //call invalidate to redraw your view againg.
        invalidate();
    }
}
}

快照: