如何使用 Android xml 形状在圆圈内画一个圆圈？答案

【问题标题】：How to draw a circle inside a circle using Android xml shapes?如何使用 Android xml 形状在圆圈内画一个圆圈？
【发布时间】：2014-02-06 20:26:46
【问题描述】：

我正在尝试为我的应用程序的搜索栏制作拇指，并且我希望有一个内圈被一个不同的、更大的（半透明的）外圈包围。我正在尝试使用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>

我希望在较大的蓝色圆圈上看到一个红色的小圆圈，但我看到的只是红色的小圆圈。有人有什么想法吗？

【问题讨论】：

您可能想画一个 RING 而不是 OVAL？
我想要的是类似于 Google Play 音乐应用程序使用的搜索栏...它们中间有一个橙色圆圈，周围有一个透明的橙色圆圈。你有任何可以模仿这个的代码吗？我是使用 Android XML drawables 的新手，所以我对 ring 方法有点摸不着头脑。
你见过/试过这个吗？：stackoverflow.com/questions/4413652/…
这只是使用层列表，就像我正在做的那样。我注意到如果我在第二个项目上设置android:top="3dp" android:left="3dp"，我现在看到两个圆圈。奇怪的是，两个圆圈都设置为相同的高度和宽度，即使我在上面的<size> 属性中声明它们的方式不同。它们似乎都默认为较大的尺寸。

标签： java android android-drawable android-shape

【解决方案1】：

我让它工作的唯一方法是为内部（即顶部）圆定义一个透明笔划，这是较大和较小圆的大小之间的差异。

例如，这个：

<?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>

...看起来像这样：

【讨论】：

内圈没有出现在中心...是否需要在代码中进行任何修改...？
请注意，此解决方案会创建 overdraw，因为它会在另一个实心圆的顶部绘制一个实心圆。您可以检查开发人员设置中是否存在过度绘制（调试 GPU 过度绘制 -> 显示过度绘制区域）。您可以通过将一些 <padding> 设置为较大的圆圈来取消此设置，这些圆圈不应该是 <solid>，而只有 <stroke>。或者更好：如果您只需要 2 个圆圈，只需使用一个带有内部 <solid> 和外部 <stroke> 的圆圈。

【解决方案2】：

如果您需要绘制 3 个或更多圆圈，请遵循以下模式：

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- Larger blue circle -->
    <item>
        <shape android:shape="oval">
            <padding
                android:bottom="20dp"
                android:left="20dp"
                android:right="20dp"
                android:top="20dp" />
            <size
                android:width="100dp"
                android:height="100dp" />
            <stroke
                android:width="20dp"
                android:color="#0000ff" />
        </shape>
    </item>
    <!-- Green circle in middle -->
    <item>
        <shape android:shape="oval">
            <padding
                android:bottom="20dp"
                android:left="20dp"
                android:right="20dp"
                android:top="20dp" />
            <size
                android:width="100dp"
                android:height="100dp" />
            <stroke
                android:width="20dp"
                android:color="#00ff00" />
        </shape>
    </item>
    <!-- Smaller red circle at front -->
    <item>
        <shape android:shape="oval">
            <size
                android:width="100dp"
                android:height="100dp" />
            <solid android:color="#ff0000" />
        </shape>
    </item>
</layer-list>

结果：

请注意，与此处的其他答案不同，此解决方案不会在其他圆圈之上绘制圆圈，从而避免过度绘制。

【讨论】：

谢谢。它帮助了我。我一直在寻找 3 层圆圈，一个内一个

【解决方案3】：

虽然晚了，但也许有帮助，您可以使用内边距作为中心圆。

<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>

【讨论】：

【解决方案4】：

我最终在这里寻找绘图同心圆找到了只有图层列表方法的答案，所以只使用 shape 添加我的答案，我希望它会帮助某人。

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

这就是结果。

【讨论】：

不错的简单解决方案。

【解决方案5】：

希望它会有所帮助。这是可绘制的 *.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>

【讨论】：

【解决方案6】：

我设法通过在<layer-list> 中设置<item> 的宽度和高度来解决这个问题。可能不是最佳实践，但对于具有固定尺寸的列表视图中的图标背景来说似乎还可以。

<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>

【讨论】：

android:height 和 android:width 需要 API 23+ 的形状。对旧设备使用 <size> 标签。

【解决方案7】：

希望下面的代码 sn-p 有所帮助:)

<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>

【讨论】：

【解决方案8】：

这是 Sean Barbeau 回答的简短版本

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

<size
    android:width="14dp"
    android:height="14dp" />

【讨论】：

【解决方案9】：

只是你必须使用Shap属性

可绘制的xml代码

<?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>

输出

【讨论】：