web-dev-qa-db-ja.com

Android xml shape？を使用して円の中に円を描く方法は？

私はアプリのシークバーの親指を作成しようとしていますが、内側の円を別の大きな（半透明の）外側の円で囲みたいと思っています。 layer-listを使用しようとしていますが、問題があります。以下は私のコードです...

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:Android="http://schemas.Android.com/apk/res/Android" >
<item>
    <shape
        Android:shape="oval" >
        <solid Android:color="#00f" />

        <size
            Android:height="15dp"
            Android:width="15dp" />
    </shape>
</item>

<item>
    <shape
        Android:shape="oval" >
        <solid Android:color="#f00" />

        <size
            Android:height="10dp"
            Android:width="10dp" />
    </shape>
</item>

</layer-list>

大きな青い円の上に小さな赤い円が表示されると思いますが、表示されるのは小さな赤い円だけです。誰にもアイデアはありますか？

javaandroidandroid-drawableandroid-shape
39
jas7457

これが機能するようになった唯一の方法は、内側の円（つまり、上部の円）の透明なストロークを定義することです。これは、大きい円と小さい円のサイズの差です。

たとえば、これ：

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:Android="http://schemas.Android.com/apk/res/Android">
<!-- Larger blue circle in back -->
<item>
    <shape Android:shape="oval">
        <solid Android:color="#00f"/>
        <size
                Android:width="15dp"
                Android:height="15dp"/>
    </shape>
</item>
<!-- Smaller red circle in front -->
<item>
    <shape Android:shape="oval">
        <!-- transparent stroke = larger_circle_size - smaller_circle_size -->
        <stroke Android:color="@Android:color/transparent"
                Android:width="5dp"/>
        <solid Android:color="#f00"/>
        <size
                Android:width="10dp"
                Android:height="10dp"/>
    </shape>
</item>
</layer-list>

...このように見えます：

enter image description here

74
Sean Barbeau

それが役立つことを願っています。これはドローアブル* .xmlです

    <?xml version="1.0" encoding="utf-8"?>
    <layer-list xmlns:Android="http://schemas.Android.com/apk/res/Android" >

      <item>
          <shape Android:shape="oval">
              <padding
                  Android:bottom="1dp"
                  Android:left="1dip"
                  Android:right="1dp"
                  Android:top="1dp" />

              <solid Android:color="#000" />
          </shape>
      </item>
      <item>
          <shape Android:shape="oval">
              <padding
                  Android:bottom="1dp"
                  Android:left="1dip"
                  Android:right="1dp"
                  Android:top="1dp" />

              <solid Android:color="#EEE" />
          </shape>
      </item>
    </layer-list>
10
Евгений Дюндин

遅くなりましたが、役立つかもしれません。センターサークルにパディングを使用できます。

<layer-list xmlns:Android="http://schemas.Android.com/apk/res/Android">
<item>
    <shape
        Android:shape="oval">
        <solid
            Android:color="#00fff"/>
        <padding
            Android:bottom="30dp"
            Android:left="30dp"
            Android:right="30dp"
            Android:top="30dp"/>
        <stroke
            Android:width="1dp"
            Android:color="@color/holo_red_light"/>
    </shape>
</item>
<item>
    <shape
        Android:shape="oval">
        <solid
            Android:color="#00666666"/>

        <size
            Android:width="120dp"
            Android:height="120dp"/>
        <stroke
            Android:width="1dp"
            Android:color="@color/holo_red_light"/>
    </shape>

</item>
</layer-list>
9
Amir

<item>で<layer-list>の幅と高さを設定することで、これを解決することができました。おそらく最良の方法ではありませんが、固定サイズのリストビューのアイコンの背景の場合と同様に問題ないようです。

<layer-list xmlns:Android="http://schemas.Android.com/apk/res/Android" >
    <!-- larger circle at the back -->
    <item Android:height="54dp" Android:width="54dp" Android:gravity="center">
        <shape
               Android:shape="oval">

            <solid
                Android:color="#0000FF"/>

            <!-- thicker outer boarder -->
            <stroke
                Android:width="2dp"
                Android:color="#000000"/>
        </shape>
    </item>


    <!-- inner circle -->
    <item Android:height="40dp" Android:width="40dp" Android:gravity="center">
        <shape
               Android:shape="oval"  >
            <solid
                Android:color="#00FF00"/>

            <stroke
                Android:width="1dp"
                Android:color="#000000"/>

        </shape>
    </item>
</layer-list>
7
scottyab

私はここでレイヤーリストアプローチで答えだけを見つけた同心円を描くことを求めてここに行きましたので、shapeのみを使用して私の答えを追加し、私はそれが誰かを助けることを願っています。

<shape Android:shape="oval">
    <solid Android:color="#FFF" />
    <size
        Android:width="15dp"
        Android:height="15dp" />
    <stroke
        Android:width="6dp"
        Android:color="#000" /> 
</shape>

そして、これが結果です。 enter image description here

4
war_Hero

以下のコードスニペットが役立つことを願っています:)

<layer-list xmlns:Android="http://schemas.Android.com/apk/res/Android" >
        <!-- larger circle at the back -->
        <item>
            <shape xmlns:Android="http://schemas.Android.com/apk/res/Android"
                   Android:innerRadius="0dp"
                   Android:shape="ring"
                   Android:thicknessRatio="2"
                   Android:useLevel="false" >
                  <solid Android:color="#FFFFFF" />
                  <stroke
                      Android:width="1dp"
                      Android:color="#000000" /></shape>
        </item>

    <!-- inner circle -->
    <item  >
        <shape xmlns:Android="http://schemas.Android.com/apk/res/Android"
               Android:innerRadius="0dp"
               Android:shape="ring"
               Android:thicknessRatio="2.1"
               Android:useLevel="false" >
            <solid Android:color="#000000" />
            <stroke
                Android:width="1dp"
                Android:color="#FFFFFF" /></shape>
    </item>
</layer-list>
0
Niranjan

これはショーン・バーボーの答えの短いバージョンです

<stroke
    Android:width="1dp"
    Android:color="@color/white" />
<solid Android:color="@color/dark_blue" />

<size
    Android:width="14dp"
    Android:height="14dp" />
0
Ankit Pandey

Shap属性を使用する必要があります

xmlコードdrawable

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:Android="http://schemas.Android.com/apk/res/Android" Android:shape="oval">
    <stroke Android:width="2dp" Android:color="#B91969"/>
    <size Android:width="@dimen/dim_16dp" Android:height="@dimen/dim_16dp" />
    <solid Android:color="#0f0" />
</shape>

出力

enter image description here

0
ND1010_