2014-10-11 2 views
12

Я хочу нарисовать пользовательскую форму, подобную этой-Custom Shape.Android: рисование пользовательских фигур

Один из вариантов состоит в том, чтобы сделать каждую форму в фотошопе индивидуально, а затем использовать ее в кодировании, но я хочу знать, что можно сделать это с помощью xml?

Как я должен нарисовать такую ​​форму? Не ждите полного кода, просто дайте мне идею или укажите мне в правильном направлении.

ответ

32

Попробуйте следующую форму 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.

EDIT:

Ниже приводится небольшое объяснение того, как это делается.

  1. Мы размещаем желтый прямоугольник размером 100 х 40 дп. С этого момента этот прямоугольник можно рассматривать как контейнер для остальных фигур. Пограничники контейнера считаются источниками для границ форм, которые мы собираемся разместить в контейнере. А именно, установка top, bottom, right and left атрибуты size тега формы означает, что расстояние от границ фигуры к top, bottom, right and left края контейнера (желтый прямоугольник).

Например, если мы хотим, чтобы поместить меньший прямоугольник внутри желтого цвета с 10dp зазором от края каждого желтого прямоугольника мы Установите top, bottom, right and left атрибуты, равные 10dp для нового (внутреннего) прямоугольника.

  1. Для достижения стрелочной формы для правой стороны желтого прямоугольника мы используем два белых прямоугольника, которые соответствующим образом перемещены вправо и повернуты. Обратите внимание: значения атрибута тега size могут быть отрицательными, что означает, что соответствующий край формы появляется за пределами контейнера. В предыдущем примере, если вы установили, скажем, атрибут left, равный 100 dp или выше, внутренний прямоугольник не будет отображаться, потому что он будет за правой границей желтого.

Что касается вращения, то он действует по часовой стрелке для положительных значений и против часовой стрелки в противном случае.

  1. Для левой формы формы достаточно использовать только один прямоугольник, перемещенный влево (частично снаружи контейнера) и повернутый на 45 градусов.

Надеюсь, это вас не смутило.

+1

Это отличное, научное что-то творческое из-за вас сегодня, благодаря мужчине –

Смежные вопросы