定制化根布局(Kotlin实现)

最近在整理项目里面的东西，在项目中，我们在加载本地或者网络数据的时候，会存在请求错误，数据为空，没有网络等情况，因此我们的界面需要根据这些情况给用户作出相应的反馈，因此，下面我们就来封装这样的一个布局(它继承自ConstraintLayout来实现)

    private var mContext: Context? = null
    //提示信息
    private var mTipTextView: TextView? = null
    //提示图标
    private var mTipImageView: ImageView? = null

    constructor(context: Context) : super(context) {
        mContext = context
    }

    constructor(context: Context, attrs: AttributeSet) : super(context, attrs) {
        mContext = context
    }复制代码

首先，先定义作为提示信息的TextView和作为提示图表的ImageView，在构造方法里获取到上下文对象

/**
 * 当布局加载完毕
 */
override fun onFinishInflate() {
    super.onFinishInflate()
    //如果没有在布局中设置id，则在这里提供磨人设置
    if (id == -1) {
        id = R.id.root_layout
    }
    //初始化
    init()
}

/**
 * 初始化
 */
private fun init() {
    mTipImageView = ImageView(mContext)
    mTipImageView?.id = R.id.tip_imageview
    mTipImageView?.scaleType = ImageView.ScaleType.CENTER_CROP
    mTipImageView?.visibility = View.VISIBLE
    val lpImg = ConstraintLayout.LayoutParams(
        TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 40F, mContext?.resources?.displayMetrics).toInt(),
        TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 40F, mContext?.resources?.displayMetrics).toInt())
    lpImg.leftToLeft = id
    lpImg.rightToRight = id
    lpImg.topToTop = id
    lpImg.bottomToBottom = id

    mTipTextView = TextView(mContext)
    mTipTextView?.id = R.id.tip_textview
    mTipTextView?.textSize = mConfig.txtSize
    mTipTextView?.setTextColor(mConfig.txtColor)
    val lpTxt = ConstraintLayout.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT)
    lpTxt.topToBottom = mTipImageView?.id!!
    lpTxt.leftToLeft = id
    lpTxt.rightToRight = id
    lpTxt.topMargin = 10

    addView(mTipImageView, lpImg)
    addView(mTipTextView, lpTxt)
}复制代码

上面的代码中，我们在onFinishInflate()回调方法中作处理，因为在这个时候，xml文件已经转换完毕，我们可以向布局中添加View了，在该方法中，首先，我们要判断布局中是否设置了id，因为我们是继承ConstraintLayout来实现的，所以我们要依靠布局的id来对添加的View进行约束，接着就是调用init()方法进行初始化，在init()方法中添加两个View，一个作为提示信息的TextView，一个是作为提示图标的ImageView，同时将它们固定在布局的中心,现在View在布局中的位置已经固定了，那么接下来我们就需要处理它们在不同情况下的显示，首先看下面这个方法

private fun hide() {
    //获取组件数量
    val childCount = childCount
    var i = 0;
    while (i < childCount) {
        if ((getChildAt(i).id != mTipImageView?.id) && (getChildAt(i).id != mTipTextView?.id)) {
            getChildAt(i).visibility = View.GONE
        }
        i++;
    }
}复制代码

上面的方法的主要作用在于在需要显示没有网络、数据为空或者请求错误时，在布局中的其它控件是不应该出现的，所以我们根据id来留下作为提示信息的TextView和作为提示图标的ImageView，其它在这个布局中的子控件全部隐藏，接下来就是根据不同的情况做出不同的显示，代码如下：

/**
 * 显示错误信息
 */
public fun showError() {
    hide()
    mTipImageView?.setImageResource(mConfig.errorImgId)
    mTipTextView?.text = mConfig.errorMsg
}

/**
 * 重载方法(显示错误信息)
 */
public fun showError(errorMsg: String) {
    hide()
    mTipImageView?.setImageResource(mConfig.errorImgId)
    mTipTextView?.text = errorMsg
}

/**
 * 重载方法(显示错误信息)
 */
public fun showError(imgId: Int, errorMsg: String) {
    hide()
    mTipImageView?.setImageResource(imgId)
    mTipTextView?.text = errorMsg
}

/**
 * 没有数据时显示
 */
public fun showEmpty() {
    hide()
    mTipImageView?.setImageResource(mConfig.emptyImgId)
    mTipTextView?.text = mConfig.emptyMsg
}

public fun showEmpty(emptyMsg: String) {
    hide()
    mTipImageView?.setImageResource(mConfig.emptyImgId)
    mTipTextView?.text = emptyMsg
}

public fun showEmpty(imgId: Int, emptyMsg: String) {
    hide()
    mTipImageView?.setImageResource(imgId)
    mTipTextView?.text = emptyMsg
}

/**
 * 没有网络时显示
 */
public fun showNetwork() {
    hide()
    mTipImageView?.setImageResource(mConfig.networkImgId)
    mTipTextView?.text = mConfig.networkMsg
}

public fun showNetwork(metworkMsg: String) {
    hide()
    mTipImageView?.setImageResource(mConfig.networkImgId)
    mTipTextView?.text = metworkMsg
}

public fun showNetwork(imgId: Int, metworkMsg: String) {
    hide()
    mTipImageView?.setImageResource(imgId)
    mTipTextView?.text = metworkMsg
}

/**
 * 设置字体大小
 */
public fun setTextSize(value: Float): RootLayout {
    mTipTextView?.textSize = value
    return this
}

/**
 * 设置字体颜色
 */
public fun setTextColor(color: Int): RootLayout {
    mTipTextView?.setTextColor(color)
    return this
}复制代码

上面分别是请求错误，数据为空，没有网络时调用的方法，除此以外还有设置字体大小和颜色的方法，使用的Builder模式，所以我们可以链式调用，到这里基本已经完成了大部分的功能，应该很简单吧，最后就是我们的配置类，配置类的作用是能够做更统一的设置，在Application中就可以对其进行设置，下面是详细代码：

companion object {

    private val mConfig = Config()

    /**
     * 获取配置类
     */
    public fun getConfig(): Config = mConfig

    class Config {

        var errorMsg: String = "请求错误"
            private set
        var emptyMsg = "数据为空"
            private set
        var networkMsg = "无法链接网络"
            private set
        var errorImgId = R.mipmap.error
            private set
        var emptyImgId = R.mipmap.empty
            private set
        var networkImgId = R.mipmap.no_network
            private set
        var txtSize = 14F
            private set
        var txtColor = Color.parseColor("#999999")                      private set

        public fun setTextSize(value: Float): Config {
            txtSize = value
            return this
        }

        public fun setTextColor(color: Int): Config {
            txtColor = color
            return this
        }

        public fun setErrorTipMsg(errorMsg: String): Config {
            this.errorMsg = errorMsg
            return this
        }

        public fun setEmptyTipMsg(emptyMsg: String): Config {
            this.emptyMsg = emptyMsg
            return this
        }

        public fun setNetworkTipMsg(networkMsg: String): Config {
            this.networkMsg = networkMsg
            return this
        }

        public fun setErrorTipIcon(iconId: Int): Config {
            errorImgId = iconId
            return this
        }

        public fun setEmptyTipIcon(iconId: Int): Config {
            emptyImgId = iconId
            return this
        }

        public fun setNetworkTipIcon(iconId: Int): Config {
            networkImgId = iconId
            return this
        }

    }
}复制代码

上面是对作为提示信息的TextView和作为提示图标的ImageView的配置，我们可以设置TextView的字体颜色，大小，可以设置在数据为空，没有网络，请求错误这三种情况时的显示图标，到这里，就是这个布局全部的代码，应该比较简单，这是作为项目整理的一个记录，下面是效果图

源码地址：github.com/chenTovae/W…

转载于:https://juejin.im/post/59db7d88f265da431a42234c