android用渐变创建馅饼甜甜圈

Question

有没有办法像这样用渐变创建圆圈？

我得到的是：

<shape
       android:innerRadiusRatio="3"
       android:thicknessRatio="10"
       android:shape="ring">
     <gradient
               android:endColor="@color/cyan_dark"
               android:startColor="@color/red"
               android:type="radial"
               android:gradientRadius="340"
               android:centerX="50%"
               android:centerY="0" />
</shape>

Answer 1

使用此

 <ProgressBar
        android:id="@+id/progressWheel"
        style="?android:attr/progressBarStyleHorizontal"
        android:layout_width="152dp"
        android:layout_height="152dp"
        android:layout_centerInParent="true"
        android:progress="100"
        android:indeterminate="false"
        android:progressDrawable="@drawable/circular_progress_bar" />

在drawable circular_progress_bar中（根据需要改变颜色）

<?xml version="1.0" encoding="UTF-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:id="@android:id/progress">
    <rotate
        android:fromDegrees="270"
        android:toDegrees="270"
        android:pivotX="50%"
        android:pivotY="50%" >
        <shape
            android:innerRadiusRatio="2.5"
            android:shape="ring"
            android:thicknessRatio="25.0" >
            <gradient
                android:centerColor="@color/red"
                android:endColor="@color/gray"
                android:startColor="@color/gray"
                android:type="sweep" />
        </shape>
    </rotate>
</item>
<item android:id="@android:id/secondaryProgress">
    <rotate
        android:fromDegrees="270"
        android:toDegrees="270"
        android:pivotX="50%"
        android:pivotY="50%" >
        <shape
            android:innerRadiusRatio="2.5"
            android:shape="ring"
            android:thicknessRatio="25.0" >
            <gradient
                android:centerColor="@color/green"
                android:endColor="@color/green"
                android:startColor="@color/green"
                android:type="sweep" />
        </shape>
    </rotate>
</item>
</layer-list>    

Answer 2

<强> XML

<ProgressBar
        android:id="@+id/yourId"
        style="?android:attr/progressBarStyleHorizontal"
        android:layout_width="89dp"
        android:layout_height="89dp"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:max="100"
        android:progress="70"
        android:progressDrawable="@drawable/shapering" />

塑造 drawable

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:innerRadiusRatio="3"
    android:shape="ring"
    android:thicknessRatio="10" >

    <gradient
        android:centerColor="#D6DE47"
        android:centerX="50%"
        android:centerY="0"
        android:endColor="#DE47A7"
        android:gradientRadius="340"
        android:startColor="#6D47DE"
        android:type="sweep" />

</shape>

<强>结果

Answer 3

使用此

<ProgressBar
    android:id="@+id/progressWheel"
    style="?android:attr/progressBarStyleHorizontal"
    android:layout_width="152dp"
    android:layout_height="152dp"
    android:layout_centerInParent="true"
    android:progress="100"
    android:indeterminate="false"
    android:progressDrawable="@drawable/circular_progress_bar" />

在drawable circular_progress_bar中（根据需要改变颜色）

 <?xml version="1.0" encoding="UTF-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
 <item android:id="@android:id/progress">
<rotate
    android:fromDegrees="270"
    android:toDegrees="270"
    android:pivotX="50%"
    android:pivotY="50%" >
    <shape
        android:innerRadiusRatio="2.5"
        android:shape="ring"
        android:thicknessRatio="25.0" >
        <gradient
            android:centerColor="@color/red"
            android:endColor="@color/gray"
            android:startColor="@color/gray"
            android:type="sweep" />
    </shape>
</rotate>
</item>
<item android:id="@android:id/secondaryProgress">
<rotate
    android:fromDegrees="270"
    android:toDegrees="270"
    android:pivotX="50%"
    android:pivotY="50%" >
    <shape
        android:innerRadiusRatio="2.5"
        android:shape="ring"
        android:thicknessRatio="25.0" >
        <gradient
            android:centerColor="@color/green"
            android:endColor="@color/green"
            android:startColor="@color/green"
            android:type="sweep" />
    </shape>
 </rotate>
</item>
 </layer-list>    

Answer 4

你应该使用type =＆＃34; sweep＆＃34;而不是＆＃34;径向＆＃34;在图片上创建渐变。例如：

<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
    <shape
        android:innerRadiusRatio="3"
        android:shape="ring"
        android:thicknessRatio="7.0">
        <gradient
            android:startColor="#FF0000"
            android:centerColor="#00FF00"
            android:endColor="#0000FF"
            android:type="sweep" />
    </shape>
</item>