Как увеличить длину арки в пользовательском представлении с помощью OnClick? - PullRequest
Новая
       77

Как увеличить длину арки в пользовательском представлении с помощью OnClick?

0 голосов
/ 26 апреля 2019

У меня есть пользовательский вид (круг), который частично заполнен аркой (красного цвета).Вот картинка https://gyazo.com/72e19cb97fd9f2adac2259c3855cf136.

Я хочу разделить свой пользовательский вид на секции, и когда нажата кнопка, я рисую арку.1 клик 1/5 покрыт аркой, 2 клик 2/5 и т. Д. До 5.

Как мне заполнить мой взгляд красной Аркой, когда я нажимаю кнопку увеличения? (Я не понимаючертежная часть)

Вот что я уже пробовал - Мой класс CustomView: 

public class MySimpleView extends View {

private static final int PAINT_FLAGS = Paint.ANTI_ALIAS_FLAG | Paint.DITHER_FLAG;
private static final int STROKE_WIDTH = 40;
private static final int SECTIONS = 5;
private Paint basePaint, degreesPaint, centerPaint, rectPaint;
private RectF rect;
private int centerX, centerY, radius;
private int fullArchSliceLength;
private int colorArchLineLength;

public MySimpleView(Context context) {
    super(context);
    init();
}

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

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

private void init() {
    rectPaint = new Paint(PAINT_FLAGS);
    rectPaint.setColor(ContextCompat.getColor(getContext(), R.color.white));
    rectPaint.setStyle(Paint.Style.FILL);

    centerPaint = new Paint(PAINT_FLAGS);
    centerPaint.setColor(ContextCompat.getColor(getContext(), R.color.white));
    centerPaint.setStyle(Paint.Style.FILL);

    basePaint = new Paint(PAINT_FLAGS);
    basePaint.setStyle(Paint.Style.STROKE);
    basePaint.setStrokeWidth(STROKE_WIDTH);
    basePaint.setColor(ContextCompat.getColor(getContext(), R.color.darkGrey));

    degreesPaint = new Paint(PAINT_FLAGS);
    degreesPaint.setStyle(Paint.Style.STROKE);
    degreesPaint.setStrokeCap(Paint.Cap.ROUND);
    degreesPaint.setStrokeJoin(Paint.Join.ROUND);

    degreesPaint.setStrokeWidth(STROKE_WIDTH);
    degreesPaint.setColor(Color.RED);

    fullArchSliceLength = 360 / SECTIONS;
    colorArchLineLength = fullArchSliceLength - 2;

}

public void swapColor() {
    degreesPaint.setColor(degreesPaint.getColor() == Color.RED ? Color.GREEN :
            Color.RED);
    postInvalidate();
}


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

    if (rect == null) {
        centerX = getMeasuredWidth() / 2;
        centerY = getMeasuredHeight() / 2;
        radius = Math.min(centerX, centerY);

        int startTop = STROKE_WIDTH / 2;
        int startLeft = STROKE_WIDTH / 2;

        int endBottom = 2 * radius - startTop;
        int endRight = 2 * radius - startTop;

        rect = new RectF(startTop, startLeft, endRight, endBottom);
    }

    canvas.drawRect(rect, rectPaint);

    canvas.drawCircle(centerX, centerY, radius - STROKE_WIDTH / 2, basePaint);
    // TODO: 2019-04-26 LOOK HERE

    for (int i = 3; i < SECTIONS; i++) {
        canvas.drawArc(rect, i * fullArchSliceLength,colorArchLineLength,
                false, degreesPaint);
    }
    // TODO: 2019-04-26 LOOK HERE
    //        canvas.drawArc(rect, 0F, 90F, false, degreesPaint);

   canvas.drawCircle(centerX, centerY, radius - STROKE_WIDTH, centerPaint);
}
}

1 Ответ

0 голосов
/ 26 апреля 2019 
public class MySimpleView extends View {

    private static final int PAINT_FLAGS = Paint.ANTI_ALIAS_FLAG | Paint.DITHER_FLAG;
    private static final int STROKE_WIDTH = 40;
    private static final int SECTIONS = 5;
    private Paint basePaint, degreesPaint, centerPaint, rectPaint;
    private RectF rect;
    private int centerX, centerY, radius;
    private int fullArchSliceLength;
    private int colorArchLineLength;
    private int currentSections = 1;

    public MySimpleView(Context context) {
        super(context);
        init();
    }

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

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

    private void init() {
        rectPaint = new Paint(PAINT_FLAGS);
        rectPaint.setColor(ContextCompat.getColor(getContext(), R.color.white));
        rectPaint.setStyle(Paint.Style.FILL);

        centerPaint = new Paint(PAINT_FLAGS);
        centerPaint.setColor(ContextCompat.getColor(getContext(), R.color.white));
        centerPaint.setStyle(Paint.Style.FILL);

        basePaint = new Paint(PAINT_FLAGS);
        basePaint.setStyle(Paint.Style.STROKE);
        basePaint.setStrokeWidth(STROKE_WIDTH);
        basePaint.setColor(ContextCompat.getColor(getContext(), android.R.color.darker_gray));

        degreesPaint = new Paint(PAINT_FLAGS);
        degreesPaint.setStyle(Paint.Style.STROKE);
        degreesPaint.setStrokeCap(Paint.Cap.ROUND);
        degreesPaint.setStrokeJoin(Paint.Join.ROUND);

        degreesPaint.setStrokeWidth(STROKE_WIDTH);
        degreesPaint.setColor(Color.RED);

        fullArchSliceLength = 360 / SECTIONS;
        colorArchLineLength = fullArchSliceLength - 2;

    }

    //just a simple increment function
    public void increment() {
        if (currentSections < SECTIONS) {
            currentSections++;
            postInvalidate();
        }
    }

    public void swapColor() {
        degreesPaint.setColor(degreesPaint.getColor() == Color.RED ? Color.GREEN :
                Color.RED);
        postInvalidate();
    }


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

        if (rect == null) {
            centerX = getMeasuredWidth() / 2;
            centerY = getMeasuredHeight() / 2;
            radius = Math.min(centerX, centerY);

            int startTop = STROKE_WIDTH / 2;
            int startLeft = STROKE_WIDTH / 2;

            int endBottom = 2 * radius - startTop;
            int endRight = 2 * radius - startTop;

            rect = new RectF(startTop, startLeft, endRight, endBottom);
        }

        canvas.drawRect(rect, rectPaint);

        canvas.drawCircle(centerX, centerY, radius - STROKE_WIDTH / 2, basePaint);

        /*
        startAngle is set to 270 so it will start at the top.
        0 is right
        90 bottom
        180 left
        270 top
         */
        canvas.drawArc(rect, 270, currentSections * colorArchLineLength, false, degreesPaint);

        canvas.drawCircle(centerX, centerY, radius - STROKE_WIDTH, centerPaint);
    }
}

По сути, ваша логика была немного неправильной. При вызове drawArc первым параметром будет startAngle вашей строки (то есть строка начинается сверху, слева, справа, снизу круга). Я написал в комментариях, что соответствует каждой степени. sweepAngle - это количество градусов, которое вы рисуете (которое вы уже правильно рассчитали). Надеюсь, что это работает так, как вы ожидаете!

...