Android uber ping 请求动画或组件

Question

任何人都可以建议我如何在 Android 中制作圆形动画和进度按钮，例如 Uber 司机接送请求。如果你能提供一些代码就好了。

Answer 1

你可以引用这个。

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.RectF;
import android.os.Handler;
import android.util.AttributeSet;
import android.view.View;
import com.circularseekbar.R;

public class CircularProgressBar extends View {

private Context mContext;
private Paint circleColor, innerColor, circleRing;
private int angle = 0, startAngle = 270, barWidth = 50, maxProgress = 100;


private int width, height, progress=1, tmpProgress=1, progressPercent;
private float innerRadius, outerRadius, adjustmentFactor=100;//The radius of the inner circle

private float cx, cy; //The circle's center X, Y coordinate

private float left, right, top, bottom, startPointX, startPointY, markPointX, markPointY;
private float dx, dy;//The X and Y coordinate for the top left corner of the marking drawable
private Bitmap progressMark, progressMarkPressed;

private RectF rect = new RectF();
{

    circleColor = new Paint();
    innerColor = new Paint();
    circleRing = new Paint();

    circleColor.setColor(Color.parseColor("#ff33b5e5")); // Set default
    // progress
    // color to holo
    // blue.
    innerColor.setColor(Color.BLACK); // Set default background color to
    // black
    circleRing.setColor(Color.GRAY);// Set default background color to Gray

    circleColor.setAntiAlias(true);
    innerColor.setAntiAlias(true);
    circleRing.setAntiAlias(true);

    circleColor.setStrokeWidth(25);
    innerColor.setStrokeWidth(15);
    circleRing.setStrokeWidth(10);

    circleColor.setStyle(Paint.Style.FILL);
}

public CircularProgressBar(Context context, AttributeSet attrs, int defStyle) {
    super(context, attrs, defStyle);
    mContext = context;
}

public CircularProgressBar(Context context, AttributeSet attrs) {
    super(context, attrs);
    mContext = context;
}

public CircularProgressBar(Context context) {
    super(context);
    mContext = context;
}

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    super.onMeasure(widthMeasureSpec, heightMeasureSpec);

    width = getWidth(); // Get View Width
    height = getHeight();// Get View Height

    int size = (width > height) ? height : width; // Choose the smaller
    // between width and
    // height to make a
    // square

    cx = width / 2; // Center X for circle
    cy = height / 2; // Center Y for circle
    outerRadius = size / 2; // Radius of the outer circle

    innerRadius = outerRadius - barWidth; // Radius of the inner circle

    left = cx - outerRadius; // Calculate left bound of our rect
    right = cx + outerRadius;// Calculate right bound of our rect
    top = cy - outerRadius;// Calculate top bound of our rect
    bottom = cy + outerRadius;// Calculate bottom bound of our rect

    startPointX = cx; // 12 O'clock X coordinate
    startPointY = cy - outerRadius;// 12 O'clock Y coordinate
    markPointX = startPointX;// Initial locatino of the marker X coordinate
    markPointY = startPointY;// Initial locatino of the marker Y coordinate

    rect.set(left, top, right, bottom); // assign size to rect
}


@Override
public void onDraw(Canvas canvas) {
    canvas.drawCircle(cx, cy, outerRadius, circleRing);
    canvas.drawArc(rect, startAngle, angle, true, circleColor);
    canvas.drawCircle(cx, cy, innerRadius, innerColor);
    super.onDraw(canvas);
}

public int getAngle() {
    return angle;
}

public void setAngle(int angle) {
    //System.out.println("Angel "+angle);
    this.angle = angle;
    float donePercent = (((float) this.angle) / 360) * 100;
    float progress = (donePercent / 100) * getMaxProgress();
    setProgressPercent(Math.round(donePercent));
    setProgress(Math.round(progress));
}

public int getBarWidth() {
    return barWidth;
}

public void setBarWidth(int barWidth) {
    this.barWidth = barWidth;
}

public int getMaxProgress() {
    return maxProgress;
}

public void setMaxProgress(int maxProgress) {
    this.maxProgress = maxProgress;
}

public int getProgress() {
    return progress;
}

public void setProgress(int progress) {
    if (this.progress != progress) {
        this.progress = progress;
        int newPercent = (this.progress * 100) / this.maxProgress;
        int newAngle = (newPercent * 360) / 100;
        this.setAngle(newAngle);
        this.setProgressPercent(newPercent);
    }
}

long mAnimStartTime;

Handler mHandler = new Handler();
Runnable mTick = new Runnable() {
    public void run() {
        invalidate();
        update();
        mHandler.postDelayed(this, 100); // 20ms == 60fps
    }
};

public void update(){
    if(IS_ACTIVE){
        setProgress(tmpProgress);
        if(tmpProgress>maxProgress){
            stopAnimation();
        }
        tmpProgress++;
    }
}

boolean IS_ACTIVE=false;
public void startAnimation() {
    IS_ACTIVE=true;
    tmpProgress=1;
    mHandler.removeCallbacks(mTick);
    mHandler.post(mTick);
}

public void stopAnimation() {
    IS_ACTIVE=false;
    progress=1;
    mHandler.removeCallbacks(mTick);
}

public int getProgressPercent() {
    return progressPercent;
}

public void setProgressPercent(int progressPercent) {
    this.progressPercent = progressPercent;
}

public void setRingBackgroundColor(int color) {
    circleRing.setColor(color);
}

public void setBackGroundColor(int color) {
    innerColor.setColor(color);
}

public void setProgressColor(int color) {
    circleColor.setColor(color);
}

public float getAdjustmentFactor() {
    return adjustmentFactor;
}

public void setAdjustmentFactor(float adjustmentFactor) {
    this.adjustmentFactor = adjustmentFactor;
}
}