Android:绘制自定义形状

Question

我想画一个像这样的自定义形状- .

一种选择是在 Photoshop 中单独制作每个形状，然后在编码中使用它，但我想知道是否可以使用 xml 来绘制它？

我应该如何绘制这样的形状？不要期望完整的代码，只要给我想法或指出正确的方向即可。

Answer 1

试试下面的shape drawable xml:

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

<!-- Colored rectangle-->
<item>
    <shape android:shape="rectangle">
        <size 
            android:width="100dp"
            android:height="40dp" />
        <solid android:color="#FAD55C" />
    </shape>
</item>

<!-- This rectangle for the left side -->
<!-- Its color should be the same as layout's -->
<item
    android:right="90dp"
    android:left="-30dp">
    <rotate
        android:fromDegrees="45">
        <shape android:shape="rectangle">
            <solid android:color="#ffffff" />
        </shape>
    </rotate>
</item>

<!-- These rectangles for the right side -->
<!-- Their color should be the same as layout's -->
<item
    android:top="-40dp"
    android:bottom="63dp"
    android:right="-25dp">
    <rotate
        android:fromDegrees="45">
        <shape android:shape="rectangle">
            <solid android:color="#ffffff" />
        </shape>
    </rotate>
</item>

<item
    android:top="63dp"
    android:bottom="-40dp"
    android:right="-25dp">
    <rotate
        android:fromDegrees="-45">
        <shape android:shape="rectangle">
            <solid android:color="#ffffff" />
        </shape>
    </rotate>
</item>
</layer-list>

这就是它在白色背景上的样子:

这里有更多关于 Shape Drawables 的信息.

编辑:

下面是它是如何完成的一个小解释。

1. 我们放置一个 100 x 40 dp 大小的黄色矩形。从现在开始，这个矩形可以被视为其余形状的容器。容器的边界被认为是我们将要放置在容器中的形状边界的起源。即设置shape的size标签的top,bottom,right,left属性表示距离形状的边框到容器的 顶部、底部、右侧和左侧 边缘(黄色矩形)。

例如，如果我们想在黄色矩形内放置一个较小的矩形，并与每个黄色矩形的边缘间隔 10dp，我们将设置 top、bottom、right 和 left 属性等于新(内部)矩形的 10dp。

1. 为了在黄色矩形的右侧实现类似箭头的形状，我们使用了两个适当向右移动并旋转的白色矩形。请注意，size 标签属性的值可以为负数，这意味着形状的相应边缘出现在容器之外。在前面的示例中，如果您将 left 属性设置为 100 dp 或更高，则内部矩形不会显示，因为它会在黄色的右边界。

关于旋转，正值顺时针旋转，否则逆时针旋转。

1. 对于左侧形状，只需将一个矩形移到左侧(部分在容器外)并旋转 45 度即可。

希望这没有让您感到困惑。