web-dev-qa-db-ja.com

Androidでリング形状のドローアブルを作成する方法は？

このコードを使用すると、境界線が表示されます。

<shape
    xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:shape="ring"
    Android:innerRadius="15dp"
    Android:thickness="2dp"
    Android:useLevel="false">
    <solid Android:color="#4d4d4d" />

</shape>

下の画像のようなリング形状を作成するにはどうすればよいですか？

enter image description here

androidshape
22
S.M_Emamian

2dpギャップのある2dp外輪：

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:Android="http://schemas.Android.com/apk/res/Android">
    <item
        Android:top="4dp"
        Android:right="4dp"
        Android:bottom="4dp"
        Android:left="4dp">
        <shape
            Android:shape="oval">
            <solid Android:color="#4d4d4d" />
        </shape>
    </item>
    <item>
        <shape
            Android:shape="oval">
            <stroke Android:width="2dp"
                Android:color="#4d4d4d"/>
        </shape>
    </item>
</layer-list>
40
tachyonflux

ドロアブルを作成し、背景として設定する必要があります。

shape_primary_ring.xml

<shape
    xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:innerRadiusRatio="2.5"
    Android:shape="ring"
    Android:thickness="4dp"
    Android:useLevel="false">

    <solid Android:color="@color/colorPrimary"/>

</shape>

プレビュー

Ring Drawable Preview

6
Morgan Koh

リングドロウアブルは要素の並置で、layer-listを使用

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:Android="http://schemas.Android.com/apk/res/Android">
  <item Android:right="6dip" Android:left="6dip">
    <shape xmlns:Android="http://schemas.Android.com/apk/res/Android"
           Android:innerRadius="0dp"
           Android:shape="ring"
           Android:thicknessRatio="3"
           Android:useLevel="false" >
      <solid Android:color="@Android:color/transparent" />
      <stroke
          Android:width="5dp"
          Android:color="@color/maroon" />
    </shape>
  </item>
  <item Android:right="20dip"
        Android:left="20dip"
        Android:bottom="0dip"
        Android:top="34dip">
    <shape xmlns:Android="http://schemas.Android.com/apk/res/Android"
           Android:shape="rectangle"
           Android:innerRadius="0dp">
      <solid Android:color="@color/maroon" />
      <stroke Android:width="1dip" Android:color="@Android:color/transparent" />
    </shape>
  </item>
  <item Android:right="20dip"
        Android:left="20dip"
        Android:bottom="34dip"
        Android:top="0dip">
    <shape xmlns:Android="http://schemas.Android.com/apk/res/Android"
           Android:shape="rectangle"
           Android:innerRadius="0dp">
      <solid Android:color="@color/maroon" />
      <stroke Android:width="1dip" Android:color="@Android:color/transparent" />
    </shape>
  </item>
</layer-list>

enter image description here

Xmlは静的な画像よりも有用であり、.9ライブラリやGimp、Photoshopから異なるサイズのセットを生成することなく、正しくスケーリングできます。

3
sigrlami

Androidでのシェイプの使用は、Photoshopでのシェイプよりも優れていると思います。

たとえば、新しい画像リソースを作成する代わりに、コードを使用して色や形状を変更できるため、ドローアブルを作成する方が適切です。 2つのFrameLayoutとViewsでTextViewを作成します。最初のビューの背景は外側のリング（形状）で、2番目のビューの背景は塗りつぶされた円（形状）です。最後に、最後のView（より大きなz-index）TextView：

<FrameLayout>
   <View/><!-- (outer ring)-->
   <View/><!-- (filed circle)-->
   <TextView/><!-- (text)-->
</FrameLayout>
2
GuilhE
<item>
    <shape
        Android:innerRadiusRatio="4"
        Android:shape="ring"
        Android:thicknessRatio="15"
        Android:useLevel="false" >
        <solid Android:color="@color/white_color" />
        <size
            Android:height="48dip"
            Android:width="48dip" />
    </shape>

</item>
<item>
    <shape xmlns:Android="http://schemas.Android.com/apk/res/Android"
        Android:shape="ring"
        Android:innerRadius="0dp"
        Android:thickness="55dp"
        Android:useLevel="false">
        <solid Android:color="@color/white_color"/>
        <size Android:height="200dp"
            Android:width="200dp"/>
        <stroke Android:color="@color/green_color" Android:width="5dp"/>
    </shape>
</item>
1
Sidhu Gaikwad
<?xml version="1.0" encoding="utf-8"
    <selector xmlns:Android="http://schemas.Android.com/apk/res/Android">
        <item>
            <shape Android:innerRadius="10dp" Android:shape="ring" Android:thickness="2dp" Android:useLevel="false">
                <solid Android:color="#dfdfdf" />
            </shape>
        </item>
     </selector>
0
ashish