达标进度条

1.效果

1.

2.代码与使用

1.自定义组合控件

kotlin

import android.annotation.SuppressLint
import android.content.Context
import android.graphics.drawable.Drawable
import android.util.AttributeSet
import android.view.Gravity
import android.view.LayoutInflater
import android.view.View
import android.widget.ImageView
import android.widget.LinearLayout
import android.widget.TextView
import com.example.customview3.R

/**
 * 创建日期：2023/11/19 0:01
 * @author 唐门.西门吹雪
 * 类说明：
 */
class UpToParView(private val context: Context, attrs:AttributeSet):LinearLayout(context,attrs) {
    private lateinit var mDrawableEnd: Drawable
    private lateinit var mNoDrawable: Drawable
    private lateinit var mYesDrawable: Drawable
    private var mLineYesColor: Int = 0
    private var mLineNoColor: Int = 0
    private var mAll: Int=3
    private var mAttain: Int=0
    private var mWidth: Float=0f
    private var mLineHeight: Float=0f
    private var mLastMargin: Float=0f
    private var mLlView:LinearLayout
    private var mLlIv:LinearLayout
    init {
        initListener()
        LayoutInflater.from(context).inflate(R.layout.view_up_par,this,true)
        mLlView=findViewById(R.id.ll_view)
        mLlIv=findViewById(R.id.ll_iv)
    }

    private fun initListener() {

    }

    /**
     * 设置进度条达标的属性
     *
     * @param all 进度条总达标数
     * @param attain 已达标数
     * @param width 达标正方形宽度
     * @param lineHeight 线的高度
     * @param lastMarginLeft 最好一个的左边距
     */
    fun setParams(
        all: Int,
        attain: Int,
        width: Float,
        lineHeight: Float,
        lastMarginLeft: Float,
        lineNoColor: Int,
        lineYesColor: Int,
        noDrawable: Drawable,
        yesDrawable: Drawable,
        drawableEnd: Drawable
    ) {
        this.mAll=all
        this.mAttain=attain
        if (mAll<=mAttain||mAll<1||mAttain<0){
            visibility= View.GONE
            return
        }
        this.mWidth=width
        this.mLineHeight=lineHeight
        this.mLastMargin=lastMarginLeft

        this.mLineNoColor=lineNoColor
        this.mLineYesColor=lineYesColor
        this.mYesDrawable=yesDrawable
        this.mNoDrawable=noDrawable
        this.mDrawableEnd=drawableEnd
        //根据总长度设置达标控件数
        setViewAll()
    }

    private fun setViewAll() {
        setViewLine()
        setIv()
    }

    /**
     * 设置线
     */
    private fun setViewLine() {
        for (i in 0  until mAll){
            if (i>2&&i!=mAll-1){
                continue
            }
            val tv=TextView(context)
            tv.setBackgroundColor(if (i<mAttain){mLineYesColor}else{mLineNoColor})//是否达标来设置背景色
            //如果是第一个或者最后一个，设置长度为一半
            val lp=LayoutParams(if (i==0||i==mAll-1){mWidth/2}else{mWidth}.toInt(),mLineHeight.toInt())
            lp.setMargins((if (i==0){mWidth/2}else{0}).toInt(),0,0,0)
            lp.gravity= Gravity.CENTER_VERTICAL
            tv.layoutParams=lp
            mLlView.addView(tv)
        }
    }

    /**
     * 设置达标的圆圈
     */
    @SuppressLint("UseCompatLoadingForDrawables")
    private fun setIv() {
        for (i in 0  until mAll){
            if (i>2&&i!=mAll-1){
                continue
            }
            val iv=ImageView(context)
            iv.background=if (i==mAll-1){mDrawableEnd}else(if (i<mAttain){mYesDrawable}else{mNoDrawable})
            //如果是第一个或者最后一个，设置长度为一半
            val lp=LayoutParams(mWidth.toInt(),mWidth.toInt())
            lp.setMargins((if (i==mAll-1){mLastMargin}else{0}).toInt(),0,0,0)
            lp.gravity= Gravity.CENTER_VERTICAL
            iv.layoutParams=lp
            mLlIv.addView(iv)
        }
    }


}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127

xml

<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">
    <LinearLayout
        android:id="@+id/ll_view"
        android:layout_width="0dp"
        android:layout_height="50dp"
        android:orientation="horizontal"
        app:layout_constraintEnd_toEndOf="@id/ll_iv"
        app:layout_constraintStart_toStartOf="@id/ll_iv"
        app:layout_constraintTop_toTopOf="@id/ll_iv"
        app:layout_constraintBottom_toBottomOf="@id/ll_iv"
        android:gravity="center_vertical">
    LinearLayout>
    <LinearLayout
        android:id="@+id/ll_iv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">
    LinearLayout>



androidx.constraintlayout.widget.ConstraintLayout>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

2.Activity

kotlin

class MainActivity : AppCompatActivity() {
    private lateinit var binding:ActivityMainBinding
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding= ActivityMainBinding.inflate(layoutInflater)
        setContentView(binding.root)
        val all=4
        val attain=2
        val width=resources.getDimension(R.dimen.my_50dp)
        val lineHeight=resources.getDimension(R.dimen.my_5dp)
        val lastMarginLeft=resources.getDimension(R.dimen.my_5dp)
        binding.utp.setParams(all,attain,width,lineHeight,lastMarginLeft,
            resources.getColor(R.color.gray),resources.getColor(R.color.black),
            resources.getDrawable(R.drawable.ic_launcher_foreground),
            resources.getDrawable(R.drawable.ic_launcher_foreground_black),
            resources.getDrawable(R.drawable.ic_launcher_foreground_end)
        )

    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

xml

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

    <com.example.customview3.viewgroup.UpToParView
        android:id="@+id/utp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginTop="50dp"
        android:text="Hello World!"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

androidx.constraintlayout.widget.ConstraintLayout>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

3.

4.

5.

6.

3.总结

1.

4.遇到的问题

1.

2.

3.

4.

5.

6.