如何在可绘制图层列表的一侧使用图像

Question

我的UI设计师为进度条提出了这样的设计：

数字应该是进度和最大值。

圆圈图像会改变。在一些设计上，1500旁边还有一个图像。

每当我尝试在layer-list上执行此操作时，我总是最终得到可绘制中间的图像。理想情况下，我更喜欢使用矢量图形，但如果需要我可以使用png。我还没看过那里的数字。

那怎么能实现呢？

谢谢。

Answer 1

对于这种情况，使用canvas似乎更容易。我现在可以提出一个简短的样本：

public class Loading extends View {

private final static float VIEW_HEIGHT = 80;
private RectF viewRectangle;
private RectF progressRectangle;
private float cornersRadius;

private Paint progressBarPaint;
private Paint progressTextPaint;
private Paint containerBarPaint;
private Paint containerTextPaint;

private final int progressMaxValue = 1500;
private float containerTextY;
private float containerTextX;

private final float whiteCircleRadius = 14;
private final float progressTextPadding = 16;

private float progress;

public Loading(Context context) {
    super(context);
    progress = 0.5f;
    progressTextPaint = new Paint(LINEAR_TEXT_FLAG|SUBPIXEL_TEXT_FLAG|ANTI_ALIAS_FLAG);
    progressTextPaint.setColor(Color.WHITE);
    progressTextPaint.setStyle(Paint.Style.FILL_AND_STROKE);
    progressTextPaint.setTextSize(28);
    progressTextPaint.setStrokeWidth(1f);

    containerTextPaint = new Paint(progressTextPaint);
    containerTextPaint.setColor(Color.BLACK);
    progressBarPaint = new Paint(ANTI_ALIAS_FLAG);
    progressBarPaint.setColor(Color.BLUE);
    progressBarPaint.setStyle(Paint.Style.FILL);
    containerBarPaint = new Paint(ANTI_ALIAS_FLAG);
    containerBarPaint.setColor(Color.GRAY);
    containerBarPaint.setStyle(Paint.Style.FILL);
}

@Override
protected void onSizeChanged(int width, int height, int oldWidth, int oldHeight) {
    int horizontalPadding = getPaddingLeft() + getPaddingRight();
    int verticalPadding = getPaddingTop() + getPaddingBottom();
    float measuredHeight = height - verticalPadding;
    float targetHeight = measuredHeight < VIEW_HEIGHT ? measuredHeight : VIEW_HEIGHT;
    float containerWidth = width - horizontalPadding;

    viewRectangle = new RectF(getPaddingLeft(), getPaddingTop(), containerWidth, targetHeight);
    progressRectangle = new RectF(viewRectangle);
    cornersRadius = targetHeight / 2;

    String maxValueText = String.valueOf(progressMaxValue);
    Rect containerTextBounds = new Rect();
    containerTextPaint.getTextBounds(maxValueText, 0, maxValueText.length(), containerTextBounds);
    containerTextX = viewRectangle.right - containerTextBounds.width() - cornersRadius / 2;
    containerTextY = viewRectangle.centerY() - containerTextBounds.exactCenterY();
}

@Override
protected void onDraw(Canvas canvas) {
    float progressWidth = viewRectangle.right * progress;
    float cornerDiameter = cornersRadius * 2;
    progressRectangle.right = progressWidth > cornerDiameter ? progressWidth : cornerDiameter;
    canvas.drawRoundRect(viewRectangle, cornersRadius, cornersRadius, containerBarPaint);
    canvas.drawRoundRect(progressRectangle, cornersRadius, cornersRadius, progressBarPaint);
    canvas.drawCircle(progressRectangle.right - cornersRadius, progressRectangle.centerY(), whiteCircleRadius, progressTextPaint);
    canvas.drawText(String.valueOf(progressMaxValue), containerTextX, containerTextY, containerTextPaint);

    String progressText = String.valueOf((int) (progressMaxValue * progress));
    float progressTextWidth = progressTextPaint.measureText(progressText);

    if (progressTextWidth < progressRectangle.right * 2) {
        float requiredProgressTextSpace = cornersRadius + whiteCircleRadius + progressTextPadding + progressTextWidth;
        canvas.drawText(progressText, progressRectangle.right - requiredProgressTextSpace, containerTextY, progressTextPaint);
    }
}

}

它远非完美而且不够灵活，但却是一个好的开始。如果您需要一些评论，请随时提出。这里是上面代码的渲染：