开发者社区> 小陆要努力> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

android 自定义步骤栏

简介: 今天自定义了一个操作步骤栏,虽然在平常的项目中用处不大,但是也值得记录一下,先看下效果图
+关注继续查看

今天自定义了一个操作步骤栏,虽然在平常的项目中用处不大,但是也值得记录一下,先看下效果图
image.png

图中红圈部分的内容就是效果图

先看下使用方法,代码使用了kotlin语言,如果是要java代码的话,可以自行用去转化,不难。

1.布局中使用自定义控件
image.png

2.在activity或是Fragment中使用
image.png

可以看到,使用了建造者模式提供了很多方法供用户自己设置属性,用户可以设置步骤总数,当前处于哪个步骤,是否显示间隔线以及间隔线的宽度高度颜色等,备注里写的很清楚。

以下是完整自定义组件的完整代码

class RegisterStepsBar : LinearLayout {
    private var mCurrentBackground: Int = R.drawable.shape_circle_step //当前圆圈背景色
    private var mPassedBackground: Int = R.drawable.shape_circle_white //通过的圆圈背景色
    private var mNormalBackground: Int = R.drawable.shape_circle_gray //未通过的圆圈背景色
    private var mSpaceBetween: Int = 25 //间隔
    private var mNormalWidth: Int = 14 //未通过的宽度
    private var mCurrentWidth: Int = 18 //当前的宽度
    private var mCurrentStep: Int = 0 //默认当前步骤下标为0
    private var mStepCount: Int = 3 //默认总共3个步骤
    private var mLineWidth: Int = 20 //间隔线宽度 默认是20
    private var mLineHeight: Int = 1 //间隔线高度 默认是1
    private var isShow: Boolean = true //是否显示分隔线
    private var currentTextColor: Int = 0 //当前步骤的字体颜色
    private var passTextColor: Int = 0 //通过的步骤的字体颜色
    private var normalTextColor: Int = 0 //未通过的步骤的字体颜色
    private var lineColor: Int = 0  //间隔线颜色
    private var textSize: Float = 13f //步骤的字体颜色
    private var contentText = emptyArray<String>() //设置文本内容
 
    private var lineView: View? = null
    private var tvCurrentStep: TextView? = null
 
    constructor(context: Context?) : super(context)
 
    constructor(context: Context?, attrs: AttributeSet?) : super(context, attrs)
 
    constructor(context: Context?, attrs: AttributeSet?, defStyleAttr: Int) : super(context, attrs, defStyleAttr)
 
    /**
     *  dp转换为px
     */
    private fun dp2px(dp: Float): Int {
        return TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, dp, resources.displayMetrics).toInt()
    }
 
    /**
     * 初始化控件,先布局后动态创建组件
     */
    fun init() {
        if (mStepCount <= 0)
            return
        if (childCount > 0)
            removeAllViews()
        orientation = HORIZONTAL
        gravity = Gravity.CENTER_VERTICAL
        for (item: Int in 0 until mStepCount) {
            tvCurrentStep = TextView(context)
            if (item < mStepCount - 1 && isShow) {//创建间隔线
                lineView = View(context)
                lineView!!.setBackgroundResource(lineColor)
                val params1 = LayoutParams(dp2px(mLineWidth.toFloat()), dp2px(mLineHeight.toFloat()))
                params1.gravity = Gravity.CENTER
                params1.leftMargin = mSpaceBetween
                lineView!!.layoutParams = params1
            }
            var background: Int
            var width: Int = mNormalWidth
            when {
                item < mCurrentStep -> {
                    background = mPassedBackground
                    tvCurrentStep!!.setTextColor(context.resources.getColor(passTextColor))
                }
                item == mCurrentStep -> {
                    background = mCurrentBackground
                    width = mCurrentWidth
                    tvCurrentStep!!.setTextColor(context.resources.getColor(currentTextColor))
                }
                else -> {
                    background = mNormalBackground
                    tvCurrentStep!!.setTextColor(context.resources.getColor(normalTextColor))
                }
            }
            tvCurrentStep!!.gravity = Gravity.CENTER
            tvCurrentStep!!.textSize = textSize
            if (contentText.isNotEmpty())
                tvCurrentStep!!.text = contentText[item]
            else
                tvCurrentStep!!.text = (item + 1).toString()
 
            val params = LayoutParams(width, width)
            if (item > 0)
                params.leftMargin = mSpaceBetween
            tvCurrentStep!!.layoutParams = params
            addView(tvCurrentStep)
            if (lineView != null) {
                addView(lineView)
                lineView = null
            }
            if (tvCurrentStep is ViewGroup)
                tvCurrentStep = getChildAt(0) as TextView
            tvCurrentStep!!.setBackgroundResource(background)
        }
    }
 
    /**
     * 从Builder中获取到数据
     */
    fun setData(barBuilder: BarBuilder) {
        this.mCurrentBackground = barBuilder.mCurrentBackground
        this.mPassedBackground = barBuilder.mPassedBackground
        this.mNormalBackground = barBuilder.mNormalBackground
        this.mSpaceBetween = barBuilder.mSpaceBetween
        this.mNormalWidth = barBuilder.mNormalWidth
        this.mCurrentWidth = barBuilder.mCurrentWidth
        this.mCurrentStep = barBuilder.mCurrentStep
        this.mStepCount = barBuilder.mStepCount
        this.mLineWidth = barBuilder.mLineWidth
        this.mLineHeight = barBuilder.mLineHeight
        this.isShow = barBuilder.isShow
        this.lineColor = barBuilder.lineColor
        this.currentTextColor = barBuilder.currentTextColor
        this.passTextColor = barBuilder.passTextColor
        this.normalTextColor = barBuilder.normalTextColor
        this.textSize = barBuilder.textSize
        this.contentText = barBuilder.contentText
    }
 
    /**
     * 建造者模式类 ---------------------------------------------------------------------------
     */
    inner class BarBuilder {
        var mCurrentBackground: Int = R.drawable.shape_circle_step //当前圆圈背景色
        var mPassedBackground: Int = R.drawable.shape_circle_white //通过的圆圈背景色
        var mNormalBackground: Int = R.drawable.shape_circle_gray //未通过的圆圈背景色
        var mSpaceBetween: Int = 25 //间隔
        var mNormalWidth: Int = 36 //未通过的宽度
        var mCurrentWidth: Int = 38 //当前的宽度
        var mCurrentStep: Int = 0 //默认当前步骤下标为0
        var mStepCount: Int = 3 //默认总共3个步骤
        var mLineWidth: Int = 20 //间隔线宽度 默认是20
        var mLineHeight: Int = 1 //间隔线高度 默认是1
        var isShow: Boolean = true //是否显示分隔线
        var lineColor: Int = R.color.colorPrimary //间隔线颜色
        var currentTextColor: Int = R.color.colorPrimary //当前步骤的字体颜色
        var passTextColor: Int = R.color.colorPrimary //通过的步骤的字体颜色
        var normalTextColor: Int = R.color.colorPrimary //未通过的步骤的字体颜色
        var textSize: Float = 13f //步骤的字体颜色
        var contentText = emptyArray<String>() //设置文本内容
 
        /**
         * 动态设置多少步骤
         */
        fun setUp(stepCount: Int, currentStep: Int): BarBuilder {
            this.mStepCount = stepCount
            if (currentStep > 0)
                this.mCurrentStep = currentStep - 1
            return this
        }
 
        /**
         * 设置分割线的宽度
         */
        fun setLineWidth(width: Float, height: Float): BarBuilder {
            mLineWidth = dp2px(width)
            mLineHeight = dp2px(height)
            return this
        }
 
        fun setTextSize(size: Float): BarBuilder {
            this.textSize = size
            return this
        }
 
        /**
         * 设置圆圈背景色
         */
        fun setBackground(currentBg: Int, passedBg: Int, normalBg: Int): BarBuilder {
            mCurrentBackground = currentBg
            mPassedBackground = passedBg
            mNormalBackground = normalBg
            return this
        }
 
        /**
         * 设置圆圈的大小
         */
        fun setCircleWidth(currentWidth: Int, normalWidth: Int): BarBuilder {
            mCurrentWidth = currentWidth //当前步骤圆圈大小
            mNormalWidth = normalWidth //非当前步骤圆圈大小
            return this
        }
 
        /**
         * 是否显示间隔线
         */
        fun isShowLine(isShow: Boolean): BarBuilder {
            this.isShow = isShow
            return this
        }
 
        /**
         * 设置间隔线的颜色
         */
        fun setLineColor(color: Int): BarBuilder {
            this.lineColor = color
            return this
        }
 
        /**
         * 设置步骤文本内容
         */
        fun setContent(content: Array<String>): BarBuilder {
            if (content.size != mStepCount)
                return this
            else
                contentText = content
            return this
        }
 
        /**
         * 设置圆圈跟分隔线的间距或是圆圈跟圆圈之间的间距
         */
        fun setSpace(space: Int): BarBuilder {
            mSpaceBetween = space
            return this
        }
 
        /**
         * 设置字体的颜色
         */
        fun setTextColor(currentTextColor: Int, passTextColor: Int, normalTextColor: Int): BarBuilder {
            this.currentTextColor = currentTextColor
            this.passTextColor = passTextColor
            this.normalTextColor = normalTextColor
            return this
        }
 
        fun build(): RegisterStepsBar {
            this@RegisterStepsBar.setData(this)
            return this@RegisterStepsBar
        }
    }
}

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
Android Studio 自定义设置注释模板
Android Studio 自定义设置注释模板
47 0
【Android开发】 ListView使用实战详解,你get到了嘛?
【Android开发】 ListView使用实战详解,你get到了嘛?
53 0
【Android 应用开发】Android开发技巧--Application, ListView排列,格式化浮点数,string.xml占位符,动态引用图片
【Android 应用开发】Android开发技巧--Application, ListView排列,格式化浮点数,string.xml占位符,动态引用图片
87 0
Android开发之ListView使用经验分享
在Android开发中,ListView是使用最广泛的组件之一,虽然谷歌推出了RecycleView,但是很多项目中依旧在使用ListView,本文将总结一下使用过程中遇到的一些问题,与大家共勉~~~ 一、ListView 与 Adapter List...
760 0
Android开发重要参考资料
=======================博客============================= 秋百万 有心课堂 郭霖 源码 安装ffmpeg 胡凯 官方培训课程 litesuitsway 爱哥 trinea robinRobin Hu...
824 0
+关注
小陆要努力
打代码的苦逼日子
60
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载