如何在Android drawable中为环形制作圆角

时间:2018-08-27 14:51:37

标签: android drawable android-drawable android-progressbar xml-drawable

我有一个自定义进度条,如下所示:

enter image description here

这是我用来创建它的.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>

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

我想得到的是我用来显示进度的圆环的圆角。看起来像这样:

enter image description here

有人对如何实现这一目标有任何想法吗?

5 个答案:

答案 0 :(得分: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)
    }
}

答案 1 :(得分:1)

好吧,我之前搜索过很多东西。

我找到的唯一解决方案是GitHub上的一个库,检查here

答案 2 :(得分:0)

您需要使用android:radius标签。

例如:

<corners android:radius="10dp"/>

答案 3 :(得分:0)

  

仔细阅读这段代码,希望对您有帮助

export class Feature implements Deserializable {
  feature: string;

  deserialize(input: any): this {
    Object.assign(this, input);
    return this;
  }
}

答案 4 :(得分:0)

我能够使用图层列表并在该行的每一侧添加一个点来实现此目的。第一个将卡在顶部,而第二个将跟随进度,因为在旋转元素中添加了插图。不过,您将不得不根据进度条布局的大小进行调整。我的是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>

enter image description here enter image description here