如何在进度条中心添加下载按钮或自定义布局？

Question

我想创建一个自定义进度条来显示下载进度，中间有一个图标和文本视图。

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

Answer 1

您应该创建自定义视图。在您的 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

Answer 2

您可以创建包含您的progressBar、textView 和imageView 的自定义布局。

layout_custom_progressbar.xml

<xml version="1.0" encoding="utf-8"?>
   <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="wrap_content"
    android:layout_gravity="center"
    android:background="@color/white">

    <ProgressBar
        android:id="@+id/progressBar"
        style="?android:attr/progressBarStyle"
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:layout_marginTop="16dp"
        android:layout_marginBottom="16dp"
        android:progressBackgroundTint="@color/colorPrimary"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_chainStyle="packed"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.0" />

    <TextView
        android:id="@+id/tvMessage"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Download PDF"
        android:textColor="@color/textColorPrimary"
        android:textSize="18sp"
        android:visibility="visible"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_chainStyle="packed"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>

</androidx.constraintlayout.widget.ConstraintLayout>

然后使用标签将此布局添加到您想要的活动中，并使用 visibility 属性显示或隐藏它。

<include
    android:id="@+id/progressBar"
    layout="@layout/layout_custom_progressbar"
    android:visibility="gone"/>