web-dev-qa-db-ja.com

Android：カスタムシェイプの描画

このようなカスタムシェイプを描きたいですCustom Shape。

1つのオプションは、photoshopで各形状を個別に作成し、それをコーディングで使用することですが、これをxmlを使用して描画できることを知りたいですか？

このような形にするにはどうすればいいですか？完全なコードを期待するのではなく、私にアイ​​デアを与えるか、正しい方向に向けてください。

androidandroid-shapedrawable
18
Rohan Kandwal

次の形状ドローアブル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サイズの黄色の長方形を配置します。これ以降、この長方形は、残りの形状のコンテナーとして扱うことができます。コンテナーの境界は、コンテナー内に配置する図形の境界の起点と見なされます。つまり、形状のsizeタグのtop, bottom, right and left属性を設定すると、形状のコンテナの境界線top, bottom, right and leftコンテナ（黄色の長方形）。

たとえば、黄色の長方形の内側に小さな長方形を配置したい場合、各黄色の長方形のエッジから10dpギャップを空けて、新しい[top, bottom, right and left]属性を10dpに設定します。 （内側）長方形。

  1. 黄色の長方形の右側を矢印のような形にするために、適切に右に移動して回転した2つの白い長方形を使用します。 sizeタグ属性の値が負になる場合があることに注意してください。これは、形状の対応するエッジがコンテナの外側に表示されることを意味します。前の例では、left属性を100 dp以上に設定すると、内側の四角形は表示されません。黄色い人の右の境界線の後ろにいます。

回転に関しては、正の値の場合は時計回り、それ以外の場合は反時計回りになります。

  1. 左側の形状の場合は、1つだけ長方形を使用して（部分的にコンテナーの外側で）左に移動し、45度回転します。

うまくいけば、これはあなたを混乱させませんでした。

45
Onik