最近在整理項(xiàng)目里面的東西填硕,在項(xiàng)目中麦萤,我們?cè)诩虞d本地或者網(wǎng)絡(luò)數(shù)據(jù)的時(shí)候鹿鳖,會(huì)存在請(qǐng)求錯(cuò)誤,數(shù)據(jù)為空壮莹,沒(méi)有網(wǎng)絡(luò)等情況翅帜,因此我們的界面需要根據(jù)這些情況給用戶作出相應(yīng)的反饋,因此命满,下面我們就來(lái)封裝這樣的一個(gè)布局(它繼承自ConstraintLayout來(lái)實(shí)現(xiàn))
private var mContext: Context? = null
//提示信息
private var mTipTextView: TextView? = null
//提示圖標(biāo)
private var mTipImageView: ImageView? = null
constructor(context: Context) : super(context) {
mContext = context
}
constructor(context: Context, attrs: AttributeSet) : super(context, attrs) {
mContext = context
}
首先涝滴,先定義作為提示信息的TextView和作為提示圖表的ImageView,在構(gòu)造方法里獲取到上下文對(duì)象
/**
* 當(dāng)布局加載完畢
*/
override fun onFinishInflate() {
super.onFinishInflate()
//如果沒(méi)有在布局中設(shè)置id胶台,則在這里提供磨人設(shè)置
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)
}
上面的代碼中歼疮,我們?cè)趏nFinishInflate()回調(diào)方法中作處理,因?yàn)樵谶@個(gè)時(shí)候诈唬,xml文件已經(jīng)轉(zhuǎn)換完畢韩脏,我們可以向布局中添加View了,在該方法中铸磅,首先赡矢,我們要判斷布局中是否設(shè)置了id,因?yàn)槲覀兪抢^承ConstraintLayout來(lái)實(shí)現(xiàn)的愚屁,所以我們要依靠布局的id來(lái)對(duì)添加的View進(jìn)行約束济竹,接著就是調(diào)用init()方法進(jìn)行初始化,在init()方法中添加兩個(gè)View霎槐,一個(gè)作為提示信息的TextView送浊,一個(gè)是作為提示圖標(biāo)的ImageView,同時(shí)將它們固定在布局的中心,現(xiàn)在View在布局中的位置已經(jīng)固定了丘跌,那么接下來(lái)我們就需要處理它們?cè)诓煌闆r下的顯示袭景,首先看下面這個(gè)方法
private fun hide() {
//獲取組件數(shù)量
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++;
}
}
上面的方法的主要作用在于在需要顯示沒(méi)有網(wǎng)絡(luò)、數(shù)據(jù)為空或者請(qǐng)求錯(cuò)誤時(shí)闭树,在布局中的其它控件是不應(yīng)該出現(xiàn)的耸棒,所以我們根據(jù)id來(lái)留下作為提示信息的TextView和作為提示圖標(biāo)的ImageView,其它在這個(gè)布局中的子控件全部隱藏报辱,接下來(lái)就是根據(jù)不同的情況做出不同的顯示与殃,代碼如下:
/**
* 顯示錯(cuò)誤信息
*/
public fun showError() {
hide()
mTipImageView?.setImageResource(mConfig.errorImgId)
mTipTextView?.text = mConfig.errorMsg
}
/**
* 重載方法(顯示錯(cuò)誤信息)
*/
public fun showError(errorMsg: String) {
hide()
mTipImageView?.setImageResource(mConfig.errorImgId)
mTipTextView?.text = errorMsg
}
/**
* 重載方法(顯示錯(cuò)誤信息)
*/
public fun showError(imgId: Int, errorMsg: String) {
hide()
mTipImageView?.setImageResource(imgId)
mTipTextView?.text = errorMsg
}
/**
* 沒(méi)有數(shù)據(jù)時(shí)顯示
*/
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
}
/**
* 沒(méi)有網(wǎng)絡(luò)時(shí)顯示
*/
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
}
/**
* 設(shè)置字體大小
*/
public fun setTextSize(value: Float): RootLayout {
mTipTextView?.textSize = value
return this
}
/**
* 設(shè)置字體顏色
*/
public fun setTextColor(color: Int): RootLayout {
mTipTextView?.setTextColor(color)
return this
}
上面分別是請(qǐng)求錯(cuò)誤,數(shù)據(jù)為空碍现,沒(méi)有網(wǎng)絡(luò)時(shí)調(diào)用的方法幅疼,除此以外還有設(shè)置字體大小和顏色的方法,使用的Builder模式昼接,所以我們可以鏈?zhǔn)秸{(diào)用爽篷,到這里基本已經(jīng)完成了大部分的功能,應(yīng)該很簡(jiǎn)單吧慢睡,最后就是我們的配置類(lèi)逐工,配置類(lèi)的作用是能夠做更統(tǒng)一的設(shè)置铡溪,在Application中就可以對(duì)其進(jìn)行設(shè)置,下面是詳細(xì)代碼:
companion object {
private val mConfig = Config()
/**
* 獲取配置類(lèi)
*/
public fun getConfig(): Config = mConfig
class Config {
var errorMsg: String = "請(qǐng)求錯(cuò)誤"
private set
var emptyMsg = "數(shù)據(jù)為空"
private set
var networkMsg = "無(wú)法鏈接網(wǎng)絡(luò)"
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
}
}
}
上面是對(duì)作為提示信息的TextView和作為提示圖標(biāo)的ImageView的配置泪喊,我們可以設(shè)置TextView的字體顏色棕硫,大小,可以設(shè)置在數(shù)據(jù)為空窘俺,沒(méi)有網(wǎng)絡(luò)饲帅,請(qǐng)求錯(cuò)誤這三種情況時(shí)的顯示圖標(biāo),到這里瘤泪,就是這個(gè)布局全部的代碼灶泵,應(yīng)該比較簡(jiǎn)單,這是作為項(xiàng)目整理的一個(gè)記錄对途,下面是效果圖