我想提请像这个 - 一个自定义形状。

一种选择是让在Photoshop每个形状独立，然后用它的编码，但我想知道，是不是可以得出这样使用XML？

我应该如何借鉴这样的造型？不要指望完全code，只要给我的想法或点我在正确的方向。

解决方案

请尝试以下形状绘制的xml：

 ＆LT; XML版本=1.0编码=UTF-8＆GT？;
＆LT;层列表的xmlns：机器人=htt​​p://schemas.android.com/apk/res/android＆GT;

＆LT;！ - 彩色矩形 - ＆GT;
＆LT;项目＆GT;
    ＆LT;形机器人：形状=矩形＆GT;
        ＆LT;大小
            机器人：宽=100dp
            机器人：身高=40dp/＆GT;
        [固体机器人：颜色=＃FAD55C/＆GT;
    ＆LT; /形状＆GT;
＆LT; /项目＆GT;

＆所述;！ - 此矩形的左侧 - ＆GT;
＆LT;！ - 它的颜色应该是相同的布局的 - ＆GT;
＆LT;项目
    机器人：右=90dp
    机器人：左= -  30dp＆GT;
    ＆LT;旋转
        机器人：fromDegrees =45＆GT;
        ＆LT;形机器人：形状=矩形＆GT;
            [固体机器人：颜色=＃FFFFFF/＆GT;
        ＆LT; /形状＆GT;
    ＆LT; /旋转＆GT;
＆LT; /项目＆GT;

＆所述;！ - 这些矩形的右侧 - ＆GT;
＆所述;！ - 它们的颜色应该是相同的布局的 - ＆GT;
＆LT;项目
    机器人：顶部= -  40dp
    机器人：底部=63dp
    机器人：右= -  25dp＆GT;
    ＆LT;旋转
        机器人：fromDegrees =45＆GT;
        ＆LT;形机器人：形状=矩形＆GT;
            [固体机器人：颜色=＃FFFFFF/＆GT;
        ＆LT; /形状＆GT;
    ＆LT; /旋转＆GT;
＆LT; /项目＆GT;

＆LT;项目
    机器人：顶部=63dp
    机器人：底部= -  40dp
    机器人：右= -  25dp＆GT;
    ＆LT;旋转
        机器人：fromDegrees = -  45＆GT;
        ＆LT;形机器人：形状=矩形＆GT;
            [固体机器人：颜色=＃FFFFFF/＆GT;
        ＆LT; /形状＆GT;
    ＆LT; /旋转＆GT;
＆LT; /项目＆GT;
＆LT; /层列表＆gt;
 

这就是它看起来像在白色背景上：

下面是对形状可绘制。

编辑：

下面是它是如何做一个小型的解释。

我们把100×40 DP大小的黄色矩形。从现在开始，这个矩形可被视为一个容器形状的其余部分。容器的房客被认为是起源于形状，我们要在容器内放置寄宿生。也就是说，设置的 上，下，左，右 的属性中的 尺寸 的形状的标签是指从形状边界的距离的 上，下，左，右 的容器的边缘（黄色矩形）

例如，如果我们要放置一个小矩形的黄色之一，从每个黄色长方形的边缘 10dp 的差距，我们会设定上，下，左，右属性等于 10dp 新（内）矩形。

在为了实现一个箭头形状为右侧的黄色矩形的我们使用两个白色矩形适当向右移动并旋转。请注意，在 尺寸 的标签属性值可以是负数，这意味着形状的相应边缘出现的容器外。在previous例如，如果你设置，也就是说，的 离开 的属性为100 DP或更高，内部矩形不会出现起来，因为它会是黄色的右边境后面。

对于旋转，它会顺时针正面的价值观和逆时针除外。

对于左侧的形状是足够使用只有一个矩形移动到左边（部分以外的容器）和45度旋转。

我们希望，这并没有迷惑你。

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?

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

解决方案

Try the following 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>

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

Here is more info on Shape Drawables.

EDIT:

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

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 left attributes of the size tag of shape means the distance from the shape's borders to top, bottom, right and left edges of the container (yellow rectangle).

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

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 size tag 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 left attribute to 100 dp or higher, the inner rectangle won't show up, because it'll be behind the right boarder of the yellow one.

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

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.

Hopefully, this didn't confuse you.