查看具有动态多色和角的背景

Question

我正在尝试制作一个带有动态百分比标签的视图，以在视图中设置不同的颜色并带有角（如图）。

如果只设置多色很容易做到这一点，只需计算视图宽度的百分比并设置颜色即可完成。但是我不知道如何用角来做。

有什么想法吗？

非常感谢。

编辑

我使用ShapeDrawable解决方案，结果如下。我只更新颜色和百分比标签。

我的问题是：为什么分割线是歪的？

更新

有成功的结果，但这不是我想要的..

我希望我能得到如下清晰的拆分：

Answer 1

我想我达到了您的预期。不幸的是，这样的 drawable 不能制作为 .xml 但可以在代码中完成。这是模板：

ShapeDrawable.ShaderFactory sf = new ShapeDrawable.ShaderFactory() {
    @Override
    public Shader resize(int width, int height) {
        LinearGradient lg = new LinearGradient(0, 0, width, 0,
                    new int[]{
                            ContextCompat.getColor(getContext(), android.R.color.holo_green_light),
                            ContextCompat.getColor(getContext(), android.R.color.holo_green_light),
                            ContextCompat.getColor(getContext(), android.R.color.holo_orange_light),
                            ContextCompat.getColor(getContext(), android.R.color.holo_orange_light),
                            ContextCompat.getColor(getContext(), android.R.color.holo_red_light),
                            ContextCompat.getColor(getContext(), android.R.color.holo_red_light),
                            ContextCompat.getColor(getContext(), android.R.color.holo_purple),
                            ContextCompat.getColor(getContext(), android.R.color.holo_purple)},
                    new float[]{0, 0.60f, 0.60f, 0.80f, 0.80f, 0.85f, 0.85f, 1}, Shader.TileMode.REPEAT);
            return lg;
    }
};
PaintDrawable p = new PaintDrawable();
p.setShape(new RectShape());
p.setCornerRadius(40);
p.setShaderFactory(sf);

查看上面的几个细节。创建 LinearGradient 时，您必须传递一组颜色及其在渐变中的位置。为了获得 very long 绿色，您必须将绿色加倍并通过位置 0 和 0.96f。然后添加 orange 颜色一次。是 caferul，green 和紫色之间的差异必须非常低（但对于 orange 颜色必须是 space）。

然后设置合适的半径：

p.setCornerRadius(40);

这个解决方案是可扩展的，因为颜色和颜色的位置可以动态改变。

查看具有动态多色和角的背景

View background with dynamic multi colors and corners

android

shape

android-custom-view

android-view