android - 在暗弧顶部绘制亮弧使下弧部分可见

Question

我正在制作 android 自定义 View ，它应该是加载动画(旋转弧)，我的 View 允许开发人员设置背景颜色和顶部颜色。

问题是，当我在黑色圆弧上绘制浅色圆弧时，我只能看到顶部圆弧周围的一些黑色像素。关闭抗锯齿功能时不会出现此问题，但这不是一个选项，因为那样会很丑。

我试过在位图上绘制它，但没有用。

我的临时解决方案是使顶部圆弧比底部圆弧宽 1px，但我有这样的时刻，我将颜色换成很酷的动画，然后如果你仔细观察就可以看到。

Answer 1

自定义 View

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.RectF;
import android.util.AttributeSet;
import android.view.View;

import com.example.basil.expensemanager.R;


public class MyProgress extends View {
private int mxSize, mySize;
private Paint mPaint;

private Paint incomeAmountCirlce;
private Paint expenseAmountCirlce;
private Paint innerCirclePaint;
private Paint txtviewCirclePaint;

private float finishedStrokeWidth;
private float unfinishedStrokeWidth;
private float sweepAngle;

private int textColor;
private int expenseColor;
private int incomeColor;
private int strokeWidth;
private int textSize;

private String textContent;
private RectF finishedOuterRect = new RectF();
private RectF unfinishedOuterRect = new RectF();

public MyProgress(Context context) {
    super(context);
    /* init();*/
}

public MyProgress(Context context, AttributeSet attrs) {
    super(context, attrs);
    /* init();*/
}

public MyProgress(Context context, AttributeSet attrs, int defStyleAttr) {
    super(context, attrs, defStyleAttr);
    /* init();*/
}

public int getTextColor() {
    return textColor;
}

public void setTextColor(int textColor) {
    this.textColor = textColor;
}

public float getFinishedStrokeWidth() {
    return finishedStrokeWidth;
}

public void setFinishedStrokeWidth(float finishedStrokeWidth) {
    this.finishedStrokeWidth = finishedStrokeWidth;
}

public float getUnfinishedStrokeWidth() {
    return unfinishedStrokeWidth;
}

public void setUnfinishedStrokeWidth(float unfinishedStrokeWidth) {
    this.unfinishedStrokeWidth = unfinishedStrokeWidth;
}

public String getTextContent() {
    return textContent;
}

public void setTextContent(String textContent) {
    this.textContent = textContent;
}

public int getTextSize() {
    return textSize;
}

public void setTextSize(int textSize) {
    this.textSize = textSize;
}

public float getSweepAngle() {
    return sweepAngle;
}

public void setSweepAngle(float sweepAngle) {
    this.sweepAngle = sweepAngle;
}

public int getIncomeColor() {
    return incomeColor;
}

public void setIncomeColor(int incomeColor) {
    this.incomeColor = incomeColor;
}

public Integer getExpenseColor() {
    return expenseColor;
}

public void setExpenseColor(int expenseColor) {
    this.expenseColor = expenseColor;
}

public int getStrokeWidth() {
    return strokeWidth;
}

public void setStrokeWidth(int strokeWidth) {
    this.strokeWidth = strokeWidth;
}

public void init() {

    txtviewCirclePaint = new Paint();
    txtviewCirclePaint.setColor(getResources().getColor(getTextColor()));
    txtviewCirclePaint.setTextSize(getTextSize());
    txtviewCirclePaint.setFakeBoldText(true);
    txtviewCirclePaint.setAntiAlias(true);


    incomeAmountCirlce = new Paint();
    incomeAmountCirlce.setColor(getResources().getColor(getIncomeColor()));
    incomeAmountCirlce.setStyle(Paint.Style.STROKE);
    incomeAmountCirlce.setAntiAlias(true);
    finishedStrokeWidth = getFinishedStrokeWidth();
    incomeAmountCirlce.setStrokeWidth(finishedStrokeWidth);

    expenseAmountCirlce = new Paint();
    expenseAmountCirlce.setColor(getResources().getColor(getExpenseColor()));
    expenseAmountCirlce.setStyle(Paint.Style.STROKE);
    expenseAmountCirlce.setAntiAlias(true);
    unfinishedStrokeWidth = getUnfinishedStrokeWidth();
    expenseAmountCirlce.setStrokeWidth(unfinishedStrokeWidth);

    innerCirclePaint = new Paint();
    innerCirclePaint.setColor(getResources().getColor(R.color.cardview_light_background));
    innerCirclePaint.setAntiAlias(true);


}

@Override
protected synchronized void onDraw(Canvas canvas) {
    super.onDraw(canvas);

    float delta = Math.max(finishedStrokeWidth, unfinishedStrokeWidth);
    finishedOuterRect.set(delta, delta, getWidth() - delta, getHeight() - delta);
    unfinishedOuterRect.set(delta, delta, getWidth() - delta, getHeight() - delta);

    float innerCircleRadius = (getWidth() - Math.min(finishedStrokeWidth, unfinishedStrokeWidth) + Math.abs(finishedStrokeWidth - unfinishedStrokeWidth)) / 2f;
    canvas.drawCircle(getWidth() / 2.0f, getHeight() / 2.0f, innerCircleRadius, innerCirclePaint);
    canvas.drawArc(finishedOuterRect, 270, getSweepAngle(), false, incomeAmountCirlce);
    canvas.drawArc(unfinishedOuterRect, 270 + getSweepAngle(), 360 - getSweepAngle(), false, expenseAmountCirlce);

    float textHeight = txtviewCirclePaint.descent() + txtviewCirclePaint.ascent();
    canvas.drawText(getTextContent(), (getWidth() - txtviewCirclePaint.measureText(getTextContent())) / 2.0f, (getWidth() - textHeight) / 2.0f, txtviewCirclePaint);

}

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    int parentWidth = MeasureSpec.getSize(widthMeasureSpec);
    int parentHeight = MeasureSpec.getSize(heightMeasureSpec);
    this.setMeasuredDimension(parentWidth / 2, parentHeight / 2);
    // bounds.set(0, 0, MeasureSpec.getSize(widthMeasureSpec), MeasureSpec.getSize(heightMeasureSpec));
    new RectF().set(0, 0, parentWidth / 4, parentHeight / 4);
}


}

我已经在我的一个项目中完成了这个，用于显示进度条中的总收入和支出，希望这可以帮助你，如果你觉得有任何困难，请在下面评论

在你的 Activity 中使用它来初始化 View

 public void init_decorate_progressbar() {
    float val = calcalute_progressbar_data();
    String totalPercent = "";
    totalPercent = "" + (val / 3.6);
    myProgressBar.invalidate();
    myProgressBar.setExpenseColor(R.color.royalGreenDark);
    myProgressBar.setIncomeColor(R.color.royalGreen);
    myProgressBar.setFinishedStrokeWidth(30);
    myProgressBar.setUnfinishedStrokeWidth(30);
    myProgressBar.setTextColor(R.color.colorPrimaryDark);
    myProgressBar.setTextSize(30);

    if (totalPercent.equalsIgnoreCase("NaN")) {
        myProgressBar.setSweepAngle(0);
        myProgressBar.setTextContent("0%");
        expenseMarkerLayout.setVisibility(View.GONE);
        incomeMarkerLayout.setVisibility(View.GONE);


    } else {
        myProgressBar.setSweepAngle(val);
        int incom = calculateIncomePercent();
        myProgressBar.setTextContent("" + incom + "%");
        txtIncomePercentMarker.setText("" + incom + "%");
        int ex = calculateExpensePercent();
        txtExpensePercentMarker.setText("" + ex + "%");
    }
    myProgressBar.init();
}

在您的 Activity XML 中

 <com.example.basil.expensemanager.SupportClasses.MyProgress
                    android:id="@+id/myProgressBar"
                    android:layout_width="300dp"
                    android:layout_height="300dp"
                    android:layout_centerHorizontal="true"
                    android:layout_below="@id/main_header"
                    android:layout_marginBottom="@dimen/activity_horizontal_margin"
                    android:layout_marginTop="@dimen/activity_horizontal_margin"
                    android:max="100"
                    android:progress="0" />