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

in 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" />

整形可绘制

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

您应该使用 type="sweep" 而不是 "radial" 来创建如图所示的渐变。例如：

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

Answer 4

使用这个

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

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

android 用渐变创建饼图

android create pie dount with gradient

android

android-drawable

radial-gradients