最近在整理项目里面的东西，在项目中，我们在加载本地或者网络数据的时候，会存在请求错误，数据为空，没有网络等情况，因此我们的界面需要根据这些情况给用户作出相应的反馈，因此，下面我们就来封装这样的一个布局(它继承自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的字体颜色，大小，可以设置在数据为空，没有网络，请求错误这三种情况时的显示图标，到这里，就是这个布局全部的代码，应该比较简单，这是作为项目整理的一个记录，下面是效果图
image
image
image
