如何使用彩色切片在Android XML中制作环形？

Question

我想为我的进度条创建一个像这样的可绘制对象

我尝试了这段代码，但我没有得到我想要的效果

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:id="@android:id/progress">
        <shape
            android:innerRadiusRatio="3"
            android:shape="ring"
            android:useLevel="false">
            <gradient
                android:centerColor="#ffff00"
                android:endColor="#00ff00"
                android:startColor="#fb0000"
                android:type="sweep" />
        </shape>
    </item>
</layer-list>

这是我得到的内容

是否可能仅使用XML来完成这个操作？ 还是应该使用Java代码来实现？

- fadeltd

---

说实话，你得到的那个看起来甚至更好 :D - Vucko

这应该使用Java代码完成。 - A. Badakhshan

@Vucko 但是当某部分为空/透明时，进度条看起来很奇怪。 - fadeltd

@A.Badakhshan，我该如何使用Java代码实现这个功能？ - fadeltd

Answer 1

由于您在评论中询问如何实现此操作，而我无法在评论中添加这些链接，因此我建议您阅读以下三个链接，并提取您想要的内容：

Android中如何画半圆

在View的背景中绘制半圆形

https://github.com/devadvance/circularseekbar

- A. Badakhshan

Answer 2

这是你问题的解决方案。

DifferentColorCircularBorder.java

public class DifferentColorCircularBorder {
    private RelativeLayout parentLayout;

    public DifferentColorCircularBorder(RelativeLayout parentLayout) {
        this.parentLayout = parentLayout;
    }

    public void addBorderPortion(Context context, int color, int startDegree, int endDegree) {
        ProgressBar portion = getBorderPortion(context, color, startDegree, endDegree);
        parentLayout.addView(portion);
    }

    private ProgressBar getBorderPortion(Context context, int color, int startDegree, int endDegree) {
        LayoutInflater inflater = LayoutInflater.from(context);

        ProgressBar portion = (ProgressBar) inflater.inflate(R.layout.border_portion, parentLayout, false);
        portion.setRotation(startDegree);
        portion.setProgress(endDegree - startDegree);

        portion.getProgressDrawable().setColorFilter(color, PorterDuff.Mode.SRC_ATOP);

        RelativeLayout.LayoutParams params = (RelativeLayout.LayoutParams) portion.getLayoutParams();
        params.addRule(RelativeLayout.CENTER_IN_PARENT);
        portion.setLayoutParams(params);

        return portion;
    }
}

border_portion.xml

<?xml version="1.0" encoding="utf-8"?>
<ProgressBar xmlns:android="http://schemas.android.com/apk/res/android"
    style="?android:attr/progressBarStyleHorizontal"
    android:layout_width="220dp"
    android:layout_height="220dp"
    android:progressDrawable="@drawable/circle_exterior"
    android:layout_centerInParent="true"
    android:max="360"/>

circle_exterior.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="ring"
    android:innerRadius="100dp"
    android:thickness="10dp" >

    <solid android:color="#ff111111" />
</shape>

MainActivity.java

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        RelativeLayout interiorLayout = (RelativeLayout) findViewById(R.id.interior);

        DifferentColorCircularBorder border = new DifferentColorCircularBorder(interiorLayout);
        border.addBorderPortion(getApplicationContext(), ContextCompat.getColor(com.diffcolorborder.MainActivity.this, R.color.colorGoogleBlue), 0, 50);
        border.addBorderPortion(getApplicationContext(), ContextCompat.getColor(com.diffcolorborder.MainActivity.this, R.color.colorGoogleGreen), 50, 120);
        border.addBorderPortion(getApplicationContext(), ContextCompat.getColor(com.diffcolorborder.MainActivity.this, R.color.colorGoogleYellow), 120, 220);
        border.addBorderPortion(getApplicationContext(), ContextCompat.getColor(com.diffcolorborder.MainActivity.this, R.color.colorGoogleRed), 220, 360);
    }

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#2d2d2d">

    <RelativeLayout
        android:id="@+id/interior"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <View
            android:layout_width="200dp"
            android:layout_height="200dp"
            android:layout_centerInParent="true"
            android:background="@drawable/profilepic" />
    </RelativeLayout>
</RelativeLayout>

- MashukKhan

Answer 3

这是我的尝试。与您想要的有点不同（它具有透明颜色）。

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape
            android:innerRadiusRatio="3"
            android:shape="ring"
            android:useLevel="false">
            <gradient
                android:centerColor="#00FFFFFF"
                android:endColor="#00FFFFFF"
                android:startColor="#FF0000"
                android:type="sweep" />
        </shape>
    </item>
    <item>
        <rotate
            android:fromDegrees="120">
            <shape
                android:innerRadiusRatio="3"
                android:shape="ring"
                android:useLevel="false">
                <gradient
                    android:centerColor="#00FB0000"
                    android:endColor="#00FFFFFF"
                    android:startColor="#0000FF"
                    android:type="sweep" />
            </shape>
        </rotate>
    </item>
    <item>
        <rotate
            android:fromDegrees="240">
        <shape
            android:innerRadiusRatio="3"
            android:shape="ring"
            android:useLevel="false">
            <gradient
                android:centerColor="#00FB0000"
                android:endColor="#00FFFFFF"
                android:startColor="#00FF00"
                android:type="sweep" />
        </shape>
        </rotate>
    </item>
</layer-list>

- C.F.G