Android:绘制自定义形状

时间:2014-10-11 06:24:24

标签: android android-shapedrawable

我想绘制一个这样的自定义形状 - Custom Shape

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

我应该如何绘制这样的形状?不要期待完整的代码,只要给我一点想法或指出我正确的方向。

1 个答案:

答案 0 :(得分:41)

尝试以下形状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>

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

enter image description here

以下是Shape Drawables的更多信息。

修改

以下是对其完成方式的一个小解释。

  1. 我们放置一个100 x 40 dp大小的黄色矩形。从现在开始,这个矩形可以被视为其余形状的容器。容器的边界被认为是我们将要放置在容器内的形状的边界的起源。即,设置 top, bottom, right and left 形状标签的 size 属性意味着从形状边框到 top, bottom, right and left <的距离/ em>容器的边缘(黄色矩形)。
  2. 例如,如果我们想要在黄色矩形内部放置一个较小的矩形,每个黄色矩形的边缘都有10dp间隙,我们会将top, bottom, right and left属性设置为10dp对于新的(内部)矩形。

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

      1. 对于左侧的形状,只需使用一个向左移动的矩形(部分位于容器外部)并旋转45度。
      2. 希望这并不会让你感到困惑。