最近在整理專案裡面的東西，在專案中，我們在載入本地或者網路資料的時候，會存在請求錯誤，資料為空，沒有網路等情況，因此我們的介面需要根據這些情況給使用者作出相應的反饋，因此，下面我們就來封裝這樣的一個佈局(它繼承自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…