Android 形状：带刻度线的圆
Android Shape: Circle with tick mark
我正在尝试使用可绘制的形状获得一个中间带有刻度线的圆圈。
这就是我想要的：
你能建议我如何处理它吗？
尝试使用矢量 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>
此代码应该有效：
<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>
试试这个：
<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"/>
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">
<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>
首先创建一个带渐变勾号图标的矢量"ic_tick_vector"需要api等级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" />
你可以试试这个
<?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>
我正在尝试使用可绘制的形状获得一个中间带有刻度线的圆圈。
这就是我想要的：
你能建议我如何处理它吗？
尝试使用矢量 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>
此代码应该有效：
<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>
试试这个：
<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"/>
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">
<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>
首先创建一个带渐变勾号图标的矢量"ic_tick_vector"需要api等级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" />
你可以试试这个
<?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>