Android Shape:带有刻度的圆圈

时间:2019-10-01 10:16:20

标签: android xml android-drawable shapes

我正在尝试使用可绘制形状在中间留下一个带有刻度线的圆圈。

这就是我想要的: Circle with tick mark, Desired implementation

您能建议我如何处理吗?

6 个答案:

答案 0 :(得分:1)

尝试使用矢量Drawable。如果您有两个或更多不同的可绘制对象,则可以在其中绘制一个图层。

但是下面的代码可以完成工作。

<?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="#fff"/>
            <size
                android:width="30dp"
                android:height="30dp"/>
        </shape>
    </item>

    <item
        android:width="18dp"
        android:height="3dp"
        android:top="15dp"
        android:right="17dp"
        android:gravity="center">
        <rotate
            android:fromDegrees="40">
            <shape android:shape="rectangle">
                <solid android:color="#D6006C"/>
            </shape>
        </rotate>
    </item>

    <item
        android:width="30dp"
        android:height="3dp"
        android:left="12dp"
        android:top="4dp"
        android:gravity="center"
        >
        <rotate
            android:fromDegrees="-50">
            <shape android:shape="rectangle">
                <solid android:color="#D6006C"/>
            </shape>
        </rotate>
    </item>

    <item
        android:width="60dp"
        android:height="60dp">
        <shape android:shape="rectangle">
            <solid android:color="@android:color/transparent"/>
        </shape>
    </item>

</layer-list>

screenshot

答案 1 :(得分:1)

尝试一下:

<vector  android:height="45dp"
android:viewportHeight="45" android:viewportWidth="45"
android:width="45dp" xmlns:android="http://schemas.android.com/apk/res/android">
<path android:fillColor="#F2F2F2" android:fillType="evenOdd"
    android:pathData="M22.5,22.5m-22.5,0a22.5,22.5 0,1 1,45 0a22.5,22.5 0,1 1,-45 0"
    android:strokeColor="#00000000" android:strokeWidth="1"/>
<path android:fillColor="#F7286F" android:fillType="nonZero"
    android:pathData="M21.7692,31.1334C20.5904,32.2889 18.6777,32.2889 17.4994,31.1334L10.8841,24.6492C9.7053,23.4943 9.7053,21.6195 10.8841,20.4646C12.0623,19.3092 13.975,19.3092 15.1538,20.4646L19.0952,24.3274C19.3928,24.6185 19.8758,24.6185 20.1739,24.3274L30.8462,13.8666C32.0244,12.7111 33.9371,12.7111 35.1159,13.8666C35.682,14.4214 36,15.1742 36,15.9589C36,16.7435 35.682,17.4963 35.1159,18.0511L21.7692,31.1334Z"
    android:strokeColor="#00000000" android:strokeWidth="1"/>

该可绘制对象如下所示: enter image description here

答案 2 :(得分:0)

此代码应该可以工作:

<layer-list xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        tools:ignore="UnusedResources">
<item>
    <shape android:shape="oval">
        <solid android:color="@android:color/black"/> //enter the color you want
        <size
            android:width="64dp"
            android:height="64dp"/>
    </shape>
</item>
<item>
    <bitmap android:src="@drawable/ic_check_white_36dp"
            android:gravity="center"/>
</item>

答案 3 :(得分:0)

这将创建带有渐变刻度线的刻度线。

<?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="#fff"/>
            <size
                android:width="30dp"
                android:height="30dp"/>
        </shape>
    </item>
    <item
        android:width="18dp"
        android:height="3dp"
        android:top="15dp"
        android:right="17dp"
        android:gravity="center">
        <rotate
            android:fromDegrees="40">
            <shape android:shape="rectangle">
                <solid android:color="#D6006C"/>
            </shape>
        </rotate>
    </item>
    <item
        android:width="30dp"
        android:height="3dp"
        android:left="12dp"
        android:top="4dp"
        android:gravity="center"
        >
        <rotate
            android:fromDegrees="-50">
            <shape android:shape="rectangle">
                <gradient android:startColor="#D6006C"
                    android:endColor="#491F2B"/>
            </shape>
        </rotate>
    </item>
    <item
        android:width="60dp"
        android:height="60dp">
        <shape android:shape="rectangle">
            <solid android:color="@android:color/transparent"/>
        </shape>
    </item>
</layer-list>

答案 4 :(得分:0)

首先创建带有带有刻度“ ic_tick_vector”的刻度图标的向量,要求api lvl 21或以上

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:aapt="http://schemas.android.com/aapt"
android:width="24dp"
android:height="24dp"
android:viewportWidth="24.0"
android:viewportHeight="24.0">

<path
    android:pathData="M9,16.17L4.83,12l-1.42,1.41L9,19 21,7l-1.41,-1.41z"
    android:strokeColor="?android:attr/colorAccent"
    android:strokeWidth="0">
    <aapt:attr name="android:fillColor">
        <gradient
            android:endX="10"
            android:endY="20"
            android:startX="1"
            android:startY="20"
            android:type="linear">
            <item
                android:color="?android:attr/colorAccent"
                android:offset="0.0" />

            <item
                android:color="?android:attr/colorPrimaryDark"
                android:offset="1.0" />
        </gradient>
    </aapt:attr>
</path>

<path android:strokeWidth="0.1"
    android:strokeColor="@color/colorAccent"
    android:pathData="M0,80 H100" />
</vector>

然后创建一个带有圆圈背景“ round_background”的图形对象

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true">

    <shape android:shape="oval">

        <stroke android:color="#557C7373" android:width="10dp"/>
        <solid android:color="@color/lightBlue"/>
        <size android:width="150dp" android:height="150dp"/>

    </shape>
</item>
<item>
    <shape android:shape="oval">
        <solid android:color="@color/white"/>
        <size android:width="100dp" android:height="100dp"/>

    </shape>
</item>


</selector>

现在在您的图像视图中使用此选项,您将拥有圆角的背景,刻度项目位于中心(渐变)

<ImageView
     android:background="@drawable/round_background"

     android:layout_gravity="center"
     android:src="@drawable/ic_tick_vector" />

答案 5 :(得分:0)

您可以尝试

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="oval">
            <size
                android:width="32dp"
                android:height="32dp" />
            <solid android:color="#fff" />
        </shape>
    </item>
    <item
        android:width="18dp"
        android:height="4dp"
        android:gravity="center"
        android:right="18dp"
        android:top="15dp">
        <rotate android:fromDegrees="40">
            <shape android:shape="rectangle">
                <gradient
                    android:angle="-180"
                    android:endColor="#FF0066"
                    android:startColor="#D6006C" />
            </shape>
        </rotate>
    </item>
    <item
        android:width="64dp"
        android:height="64dp">
        <shape android:shape="rectangle">
            <solid android:color="@android:color/transparent" />
        </shape>
    </item>
    <item
        android:width="32dp"
        android:height="4dp"
        android:gravity="center"
        android:left="12dp"
        android:top="4dp">
        <rotate android:fromDegrees="-50">
            <shape android:shape="rectangle">
                <gradient
                    android:angle="-90"
                    android:endColor="#FF0066"
                    android:startColor="#D6006C" />
            </shape>
        </rotate>
    </item>
</layer-list>

enter image description here