如何创建一个圆角矩形,不同颜色的不同部分

Question

需求

如何创建看起来像这样的视图.

我想在屏幕上绘制一个视图,该视图分为几段,显示整个视图的值百分比.我的要求是

• 视图具有不同颜色的不同部分
• 视图可能没有渲染所有部分,它可能只有前2个或第一个和最后一个或只有一个颜色等 - 这只在运行时已知
• 不同部分的大小仅在运行时已知,因此需要以编程方式指定
• 整个视图的左右角都是圆形的

我想过的想法/事情

(1)自定义视图并排渲染3个矩形

我尝试了一个自定义视图,它可以并排显示3个矩形.但这些显然有方角.

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

    int viewHeight = 50;

    canvas.drawrect(0,  0, 60,  viewHeight, paint); // A
    canvas.drawrect(60, 0, 120, viewHeight, paint); // B
    canvas.drawrect(120,0, 180, viewHeight, paint); // C
}

(2)圆角形状

我知道我可以使用Shape来定义带有圆角的矩形,但是这是一种颜色.

<shape xmlns:android="http://schemas.android.com/apk/res/android">
     ...        
    <corners
        android:radius="4dp" />
    ....
</shape>

(3)层列表

从具有两种不同颜色的Android矩形形状,我看到我可以使用图层列表来指定形状中的每个项目以具有不同的颜色.

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">       

    <item>
        <shape android:shape="rectangle">
            <size
                android:width="40dp"
                android:height="40dp" />
            <solid android:color="#F86F05" />
        </shape>
    </item>

    <item android:top="10dp">
        <shape android:shape="rectangle">
            <size
                android:width="30dp"
                android:height="30dp" />
            <solid android:color="#B31F19" />
        </shape>
    </item>

</layer-list>

(4)带角落的图层列表？

我可以将"corner"标签添加到整个图层列表中以获得圆角主角吗？我假设没有,并且角落部分必须在"Item"的形状标签中.

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <corners
        android:radius="4dp" />

    <item>
        <shape android:shape="rectangle">
            <size
                android:width="40dp"
                android:height="40dp" />
            <solid android:color="#F86F05" />
        </shape>
    </item>

    <item android:top="10dp">
        <shape android:shape="rectangle">
            <size
                android:width="30dp"
                android:height="30dp" />
            <solid android:color="#B31F19" />
        </shape>
    </item>

</layer-list>

摘要

最后一个更接近我的要求

• 如何以编程方式指定每个"项目"的宽度
• 如何以编程方式显示/隐藏"项目"
• 我将如何围绕最顶部可见的"项目"的顶角和最底部的"项目"的底角

更新:我如何添加高度/灰色边框

感谢您提供"@ 0X0nosugar"解决方案.我现在想要添加一个高程或一个浅灰色边框,因为其中一种颜色是快速的,并且接近背景颜色.当我添加以下内容时,我会得到一个长方形的阴影,弯曲的角落看起来很糟糕.

android:elevation="2dp"
android:outlineProvider="bounds"

我希望它看起来像下面

Answer 1

您可以创建一个自定义View，它将在 的剪切部分上绘制矩形Canvas：

public class RoundedCornersSegmentedView extends View {

    private Paint paintA, paintB, paintC;
    private float cornerRadius;
    private float measuredWidth, measuredHeight;
    private RectF rect = new RectF(0, 0, 0,0);
    private Path rectPath = new Path();

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

    public RoundedCornersSegmentedView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    public RoundedCornersSegmentedView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init();
    }

    private void init() {
        setWillNotDraw(false);

        // add this so Canvas.clipPath() will give the desired result also for devices running Api level lower than 17,
        // see /sf/answers/2124812301/
        if (Build.VERSION.SDK_INT <= Build.VERSION_CODES.JELLY_BEAN_MR2) {
            setLayerType(LAYER_TYPE_SOFTWARE, null);
        }
        paintA = new Paint(Paint.ANTI_ALIAS_FLAG);
        paintA.setColor(Color.GREEN);
        paintA.setStyle(Paint.Style.FILL);
        paintB = new Paint(Paint.ANTI_ALIAS_FLAG);
        paintB.setColor(Color.YELLOW);
        paintB.setStyle(Paint.Style.FILL);
        paintC = new Paint(Paint.ANTI_ALIAS_FLAG);
        paintC.setColor(Color.MAGENTA);
        paintC.setStyle(Paint.Style.FILL);

        // with  <dimen name="corner_radius">60dp</dimen> in res/values/dimens.xml
        cornerRadius = getResources().getDimensionPixelSize(R.dimen.corner_radius);
    }

    @Override
    protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
        super.onLayout(changed, left, top, right, bottom);
        measuredWidth = right - left;
        measuredHeight = bottom - top;
        rect.set(0, 0, measuredWidth, measuredHeight);
        rectPath.reset();
        rectPath.addRoundRect(rect, cornerRadius, cornerRadius, Path.Direction.CW);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        canvas.clipPath(rectPath);
        canvas.drawRect(0,0,measuredWidth/3f, measuredHeight, paintA);
        canvas.drawRect(measuredWidth/3f,0,2 * measuredWidth/3f, measuredHeight, paintB);
        canvas.drawRect(2 * measuredWidth/3f,0,measuredWidth, measuredHeight, paintC);
    }
}

如果要添加某种半透明边缘，可以使用Paint具有透明颜色和填充类型的 aPaint.Style.STROKE并绘制一个圆角矩形。

Paint shadowPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
// material color "Blue Gray 400",
// see https://material.io/design/color/the-color-system.html
shadowPaint.setColor(Color.argb(30, 120, 144, 156));
shadowPaint.setStyle(Paint.Style.STROKE);
shadowPaint.setStrokeWidth(30);

矩形（在外部实例化以onLayout()获得更好的性能）：

private RectF shadowRect = new RectF(0,0,0,0);

在onLayout()：

int inset = 20;
shadowRect.set(inset, inset, measuredWidth - inset, measuredHeight - inset);

您应该切换阴影的颜色/alpha 值Paint以及笔触宽度和插图的值，直到您认为它看起来不错。

在onDraw()绘制彩色段后应用：

canvas.drawRoundRect(shadowRect, cornerRadius, cornerRadius, shadowPaint);

如果您将半透明的Paints堆叠起来，笔画宽度逐渐减小，插入部分逐渐增加，例如构建您自己的颜色渐变，它也会看起来很漂亮（更多 3D）。

感谢@wblaschko 分享代码片段ViewOutlineProvider！我将它添加到我的示例中并得到以下效果：

更改我的代码（注意：仅适用于 Api 级别 21+）

自定义视图的内部类：

@TargetApi(21)
static class ScalingOutlineProvider extends ViewOutlineProvider {
    private int cornerRadius;
    ScalingOutlineProvider(int cornerRadius){
        this.cornerRadius = cornerRadius;
    }
    @Override
    public void getOutline(View view, Outline outline) {
        outline.setRoundRect(0, 0, view.getWidth(), view.getHeight (), cornerRadius);
    }
}

最后init()：

if(Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP){
    // elevation of 4dp (cornerRadius was 60dp)
    setElevation(cornerRadius/15);
    setOutlineProvider(new ScalingOutlineProvider(cornerRadius));
}