首页 > 解决方案 > 如何在进度条中心添加下载按钮或自定义布局?

问题描述

我想创建一个自定义进度条来显示下载进度,其中包含一个图标和文本视图。

有库和一些示例,但只有进度条内的文本视图,所以我如何也添加这个图像视图?请帮忙。

标签: androidandroid-progressbar

解决方案


您应该创建自定义视图。在您的 customView 中将是 textView,您将在onDraw方法中添加圆圈和箭头。在这段代码中,我向您展示了绘制圆的过程

<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <com.lucid.dreaming.ui.guide.views.CustomView
            android:id="@+id/custom_view"
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:layout_marginTop="@dimen/big_padding"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Some text"
            android:textColor="@color/colorWhite"
            app:layout_constraintBottom_toBottomOf="@id/custom_view"
            app:layout_constraintEnd_toEndOf="@id/custom_view"
            app:layout_constraintStart_toStartOf="@id/custom_view"
            app:layout_constraintTop_toTopOf="@id/custom_view" />

    </androidx.constraintlayout.widget.ConstraintLayout>

这里我添加了 CountDownTimer,它将显示进度条的工作(进度条在 20 秒后填充)。你可以调节这个数字。

override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? {
        val view = inflater.inflate(R.layout.your_xml, container, false)
        object : CountDownTimer(20000, 200) {
            override fun onTick(millisUntilFinished: Long) {
                customView.setProgress(counter)
                counter++
            }

            override fun onFinish() {

            }
        }.start()

        return view
    }

和自定义视图

import android.content.Context
import android.graphics.Canvas
import android.graphics.Color
import android.graphics.Paint
import android.graphics.RectF
import android.util.AttributeSet
import android.util.Log
import android.view.View

class CustomView @JvmOverloads constructor(
    context: Context,
    attributeSet: AttributeSet? = null,
    defStyleAttr: Int = 0
) : View(context, attributeSet, defStyleAttr) {


    private var paint: Paint
    private var radius: Float = 0f
    private var angle = 0f

    init {
        paint = Paint()
        paint.color = Color.GRAY
        paint.setAntiAlias(true)
        paint.strokeWidth = 5f
        paint.style = Paint.Style.STROKE
        Log.e("tag", "init")
    }

    override fun onDraw(canvas: Canvas) {
        super.onDraw(canvas)
        radius = (width/2f -1f)
        paint.color = Color.GRAY
        canvas.drawCircle(width.toFloat()/2, height.toFloat()/2, radius, paint)
        paint.color = Color.GREEN
        val oval = RectF(0f,0f,width.toFloat()-2,width.toFloat()-2)
        canvas.drawArc(oval, -90f,angle,false ,paint)
    }

    fun setProgress(percent: Int) {
        angle = percent*3.6f
        invalidate()
    }

}

https://i.stack.imgur.com/4x874.png


推荐阅读