Android：绘制自定义形状

Android: Drawing custom shapes

提问by Rohan Kandwal

I want to draw a custom shape like this-.

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

One option is to make each shape in photoshop individually and then use it in coding but I want to know that is it possible to draw this using xml?

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

How should I draw the shape like this? Don't expect complete code, just give me idea or point me in the right direction.

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

回答by Onik

Try the following shape drawable xml:

尝试以下形状可绘制的 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>

That's how it looks like on a white background:

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

Here is more info on Shape Drawables.

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

EDIT:

编辑：

The following is a small explanation of how it's done.

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

1. We place a yellow rectangle of 100 x 40 dp size. From now on this rectangle can be treated as a container for the rest of the shapes. The boarders of the container are considered as origins for the boarders of shapes we're going to place within the container. Namely, setting top, bottom, right and leftattributes of the sizetag of shape means the distance from the shape's borders to top, bottom, right and leftedges of the container (yellow rectangle).

1. 我们放置一个 100 x 40 dp 大小的黄色矩形。从现在开始，这个矩形可以被视为其余形状的容器。容器的边界被认为是我们将要放置在容器内的形状边界的起源。即形状标签的设置top, bottom, right and left属性是size指从形状的边界到top, bottom, right and left容器（黄色矩形）边缘的距离。

For example, if we want to place a smaller rectangle inside of the yellow one with a 10dpgap from each yellow rectangle's edge we'd set the top, bottom, right and leftattributes equal to 10dpfor the new (inner) rectangle.

例如，如果我们想在黄色矩形的内部放置一个较小的矩形，并且与10dp每个黄色矩形的边缘有间隙，我们将为新的（内部）矩形设置top, bottom, right and left等于的属性10dp。

1. In order to achieve an arrow-like shape for the right side of the yellow rectangle we use two white rectangles appropriately moved to the right and rotated. Notice, the sizetag attribute's values can be negative which means that the corresponding edge of the shape appears outside of the container. In the previous example, if you set, say, the leftattribute to 100 dp or higher, the inner rectangle won't show up, because it'll be behind the right boarder of the yellow one.

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

Regarding rotation, it goes clockwise for positive values and counterclockwise otherwise.

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

1. For the left side shape it's enough to use just one rectangle moved to the left (partially outside of the container) and 45 degree rotated.

3. 对于左侧形状，只需使用一个向左移动（部分位于容器外部）并旋转 45 度的矩形就足够了。

Hopefully, this didn't confuse you.

希望这不会让您感到困惑。