Question

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

我希望在一个更大的蓝色圆圈顶部看到一个小红圈，但我所看到的只是一个小红圈。有没有人有任何想法？

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

......看起来像这样：

enter image description here

Answer 2

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

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

Answer 4

我设法通过设置<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>

Answer 5

我在这里结束了对同心圆的搜索，发现仅使用层列表方法找到了答案，因此仅使用 where Date_field >= NOW() - INTERVAL 24 HOUR 添加我的答案，希望对您有所帮助。

shape

这就是结果。

Answer 6

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

checkDumpVersion(file: File, vcVersion: string): boolean {

  let reader = new FileReader();
  reader.readAsText(file);

  reader.onload = function(e) {
    let firstLine = reader.result.toString().split(/\r\n|\n/).shift();
    let tokens = firstLine.split(/(\s+)/).filter(e => e.trim().length > 0)
    let version = tokens[tokens.indexOf('VERSION') + 1];

    if (version !== VC_TO_DUMP[vcVersion]) {
      console.log(STATUS['versionValidationError']);
      // need to return false here.
    }
  }
  return true;
}

结果：

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

Answer 7

希望下面的代码片段有帮助:)

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

Answer 8

这是Sean Barbeau答案的简短版本

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

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

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

输出

如何使用Android xml形状在圆圈内绘制圆圈？

9 个答案: