如何绘制采用Android XML形状的圆圈内有一个圈？ [英] How to draw a circle inside a circle using Android xml shapes?

问题描述

我试图做一个拇指的搜索栏我的应用程序，我想有一个不同的，较大（半透明）外圈环绕的内圆。我试图使用图层列表，但我有问题。下面是我的code ...

I'm trying to make a thumb for a seekbar for my app, and I want to have an inner circle surrounded by a different, larger (semi-transparent) outer circle. I'm trying to use layer-list, but I'm having issues. Below is my code...

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

我希望看到一个更大的蓝色圆圈上面一个红色的小圆圈，但所有我看到的是红色的小圆圈。有没有人有什么想法？

I would expect to see a small red circle on top of a larger blue circle, but all I'm seeing is the small red circle. Does anyone have any ideas?

推荐答案

我已经得到这个工作的唯一方法是定义一个透明的行程内（即顶部）圆的的大小之间的差异较大和较小的圆

The only way I've gotten this to work is to define a transparent stroke for the inner (i.e., top) circle that's the difference between the size of the larger and smaller circle.

例如，这样的：

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

...看起来是这样的：

...looks like this:

这篇关于如何绘制采用Android XML形状的圆圈内有一个圈？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！