如何在Android drawable中为环形添加圆角

Question

我有一个自定义进度条，长这样：

这是我用来创建它的.xml代码:

background_drawable.xml

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:innerRadius="@dimen/progress_bar_radial_inner_radius"
    android:thickness="@dimen/progress_bar_radial_thickness"
    android:shape="ring"
    android:useLevel="false" >
    <solid android:color="@color/main_color_alpha"/>
</shape>

进度条_drawable.xml

<?xml version="1.0" encoding="UTF-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromDegrees="270"
    android:toDegrees="270">
    <shape
        android:innerRadius="@dimen/progress_bar_radial_inner_radius"
        android:thickness="@dimen/progress_bar_radial_thickness"
        android:shape="ring" >
        <solid android:color="@color/main_color"/>
    </shape>
</rotate>

我想要的是在用于显示进度的环形中实现圆角。希望它看起来像这样：请问有什么办法可以实现这个效果吗？

- Yenn

---

形状块具有角属性。尽情发挥吧 :) - TibiG

Answer 1

我使用一个“Layer List”实现了这个效果，并在线的两侧添加了一个点。第一个点将固定在顶部，而第二个点将在旋转元素内添加一个插入时跟随进度。不过，您需要根据您的进度条布局大小进行调整。我的大小是250dp x 250dp。

progress_drawable.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <rotate android:fromDegrees="270" android:toDegrees="270">
        <shape
            android:innerRadiusRatio="2.55"
            android:shape="ring"
            android:thickness="15dp"
            android:useLevel="true">
            <solid android:color="@color/main_color" />
        </shape>
        </rotate>
    </item>
    <item android:bottom="211dp">
        <shape
            android:innerRadiusRatio="1000"
            android:shape="ring"
            android:thickness="7dp"
            android:useLevel="false">
            <solid android:color="@color/main_color" />
        </shape>
    </item>
    <item>
        <rotate>
            <inset android:insetBottom="211dp">
                <shape
                    android:innerRadiusRatio="1000"
                    android:shape="ring"
                    android:thickness="7dp"
                    android:useLevel="false">
                    <solid android:color="@color/main_color" />
                </shape>
            </inset>
        </rotate>
    </item>
</layer-list>

- Jon

Answer 2

好的，我发现实现我想要的最简单的方法是在画布上绘制进度弧而不是使用progress_drawable.xml。以下是我的代码，以防有人遇到类似的问题。

class RadialProgressBar : ProgressBar {

    private val thickness = 28f
    private val halfThickness = thickness / 2
    private val startAngle = 270f
    private var boundsF: RectF? = null
    private lateinit var paint: Paint

    constructor(context: Context?) : super(context) {
        init()
    }

    constructor(context: Context?, attrs: AttributeSet?) : super(context, attrs) {
        init()
    }

    constructor(context: Context?, attrs: AttributeSet?, defStyleAttr: Int) : super(context, attrs, defStyleAttr) {
        init()
    }

    private fun init() {
        paint = Paint()
        paint.isAntiAlias = true
        paint.style = Paint.Style.STROKE
        paint.strokeWidth = thickness
        paint.strokeCap = Paint.Cap.ROUND
        paint.color = ContextCompat.getColor(context, R.color.main_color)

        progressDrawable = null
    }

    override fun draw(canvas: Canvas?) {
        super.draw(canvas)

        if (boundsF == null) {
            boundsF = RectF(background.bounds)
            boundsF?.inset(halfThickness, halfThickness)
        }

        canvas?.drawArc(boundsF, startAngle, progress * 3.60f, false, paint)
    }
}

- Yenn

---

这并没有呈现任何内容。你能同时展示一下 XML 布局吗？ - SuppressWarnings

很不幸，我必须同意@SuppressWarnings的观点。对我来说也不起作用。也许你可以给出更多关于它是如何工作的洞察。对我来说，draw仅被调用两次，并且进度为0。 - NiklasLehnfeld

Answer 3

嗯，我之前搜索了很多相关内容。

我找到的唯一解决方案是在GitHub上的一个库，可以在这里 查看链接。

- Mohamed Embaby

Answer 4

你可以使用这个例子https://github.com/lopspower/CircularProgressBar，它完整地描述了如何解决你的问题。

在build.gradle中添加以下内容：

implementation 'com.mikhaellopez:circularprogressbar:3.1.0'

XML 代码：

        <com.mikhaellopez.circularprogressbar.CircularProgressBar
        android:id="@+id/progress_bar_Running"
        android:layout_width="260dp"
        android:layout_height="260dp"
        app:cpb_background_progressbar_color="#4100A550"
        app:cpb_background_progressbar_width="10dp"
        app:cpb_progressbar_color="#00a550"
        app:cpb_progressbar_width="10dp"
        app:cpb_progress="60"
        app:cpb_progress_max="100"
        app:cpb_progress_direction="to_right"
        app:cpb_round_border="true"
        android:layout_marginLeft="70dp"
        android:layout_marginTop="40dp"/>

在我的程序中：

戒指

- MG61

Answer 5

请查看这段代码，希望能对您有所帮助。

>ProgressBarActivity.java

        public class ProgressBarActivity extends AppCompatActivity {

            private TextView txtProgress;
            private ProgressBar progressBar;
            private int pStatus = 0;
            private Handler handler = new Handler();

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

                txtProgress = (TextView) findViewById(R.id.txtProgress);
                progressBar = (ProgressBar) findViewById(R.id.progressBar);

                new Thread(new Runnable() {
                    @Override
                    public void run() {
                        while (pStatus <= 100) {
                            handler.post(new Runnable() {
                                @Override
                                public void run() {
                                    progressBar.setProgress(pStatus);
                                    txtProgress.setText(pStatus + " %");
                                }
                            });
                            try {
                                Thread.sleep(100);
                            } catch (InterruptedException e) {
                                e.printStackTrace();
                            }
                            pStatus++;
                        }
                    }
                }).start();

            }
        }


   > activity_progress.xml

    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:paddingBottom="@dimen/activity_vertical_margin"
        android:paddingLeft="@dimen/activity_horizontal_margin"
        android:paddingRight="@dimen/activity_horizontal_margin"
        android:paddingTop="@dimen/activity_vertical_margin"
        tools:context="com.placio.android.custom_progressbar_circular.MainActivity" >


        <RelativeLayout
            android:layout_width="wrap_content"
            android:layout_centerInParent="true"
            android:layout_height="wrap_content">

            <ProgressBar
                android:id="@+id/progressBar"
                style="?android:attr/progressBarStyleHorizontal"
                android:layout_width="250dp"
                android:layout_height="250dp"
                android:layout_centerInParent="true"
                android:indeterminate="false"
                android:max="100"
                android:progress="0"
                android:progressDrawable="@drawable/progress_drawable"
                android:secondaryProgress="0" />


            <TextView
                android:id="@+id/txtProgress"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignBottom="@+id/progressBar"
                android:layout_centerInParent="true"
                android:textAppearance="?android:attr/textAppearanceSmall" />
        </RelativeLayout>



    </RelativeLayout>




   > progress_drawable.xml

    <?xml version="1.0" encoding="utf-8"?>
    <rotate xmlns:android="http://schemas.android.com/apk/res/android"
        android:fromDegrees="-90"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toDegrees="270" >

- Vishal Sharma