對空資料頁面等公共頁面實現的一些思考

Knight_Davion發表於2019-02-28

在實際的專案開發中為了增加使用者體驗,設計的同學會設計空資料介面,錯誤提示頁,網路載入頁等等。通常情況下我們的處理方式是針對每個頁面寫好一個佈局檔案,然後在需要的頁面通過include標籤載入進來,最後在需要顯示的地方控制其隱藏和顯示,這種寫法完全沒有問題,只不過需要手動修改各個介面的佈局檔案,巢狀這些佈局。網上也有很多的小夥伴針對這個問題進行過控制元件的封裝,但最終也避免不了修改xml程式碼,那麼有沒有什麼好的辦法降低這種對佈局檔案的侵入性呢?

其實要解決這個問題也不難,至少在大多數情況下這個解決方式是滿足要求的,為什麼是在大多數情況下呢?往下看就明白了。

這個問題的解決思路就是通過WindowManger的方式去動態的新增或刪除我們要顯示的View。

首先看一下Demo的實現效果

對空資料頁面等公共頁面實現的一些思考

使用步驟:

專案中的Application 中進行初始化

    AresLayout.init(this)// 快取Application Context 引用
    AresLayout.setEmptyLayout(R.layout.layout_empty) //  設定空資料介面的佈局
    AresLayout.setLoadingLayout(R.layout.layout_loading)  // 設定載入時的佈局
    AresLayout.setNetworkErrorLayout(R.layout.layout_network_error) // 設定網路錯誤時的佈局
複製程式碼

在需要展示的地方直接呼叫以下3個方法即可

AresLayout.showEmptyLayout(content, windowManager)

AresLayout.showLoadingLayout(content, windowManager)

AresLayout.showNetworkErrorLayout(content, windowManager)
複製程式碼

兩個引數分別是需要覆蓋的View及當前Activity的windowManager。

注意到沒有,我們沒有修改當前介面的xml程式碼,這樣對程式碼的侵入性就大大降低了。

下面說一下思路(如果你對windowManager的原理比較瞭解的話相信你已經明白了)

showEmptyLayout,showLoadingLayout,showNetworkErrorLayout的原理是一樣的,我們就拿載入空資料頁面的showEmptyLayout說吧

首先AresLayout是一個單例模式的類
setEmptyLayout方法獲取到當前佈局檔案的引用

/**
 * 設定空資料介面的佈局
 */
public fun setEmptyLayout(resId: Int) {
    emptyLayout = getLayout(resId)
    emptyLayout.measure(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT)
}
private lateinit var emptyLayout: ViewGroup
複製程式碼

注意emptyLayout是一個ViewGroup,而不是具體的某個其子類比如LinearLayout,因為現在不確定提供的空資料xml裡的根佈局的具體型別。
對應的getLayout(resId)返回的也是一個ViewGroup

private fun getLayout(resId: Int): ViewGroup {
    val inflater = mContext.getSystemService(Context.LAYOUT_INFLATER_SERVICE) as LayoutInflater
    return inflater.inflate(resId, null) as ViewGroup
}
複製程式碼

接下來是showEmptyLayout方法

 /**
 * 展示空資料介面
 * target的大小及位置決定了window介面在實際螢幕中的展示大小及位置
 */
fun showEmptyLayout(target: View, wm: WindowManager) {
    if (currentLayout != null) {
        wm.removeView(currentLayout)
    }
    isAresShowing = true
    currentLayout = emptyLayout
    wm.addView(currentLayout, setLayoutParams(target))
}
複製程式碼

這個方法中我們把上一步設定好的emptyLayout賦值給了currentLayout,這樣做的目的是在多個介面之間切換時我們只操作currentLayout即可。
最終通過

  wm.addView(currentLayout, setLayoutParams(target))
複製程式碼

這行程式碼,把佈局顯示在了當前的Activity上,那麼是如何控制佈局的顯示大小及位置的呢,看一下setLayoutParams(target)方法

private fun setLayoutParams(target: View): WindowManager.LayoutParams {
    val wlp = WindowManager.LayoutParams()
    wlp.format = PixelFormat.TRANSPARENT
    wlp.flags = (WindowManager.LayoutParams.FLAG_NOT_TOUCH_MODAL
            or WindowManager.LayoutParams.FLAG_NOT_FOCUSABLE
            or WindowManager.LayoutParams.FLAG_ALT_FOCUSABLE_IM)
    var location = IntArray(2)
    target.getLocationOnScreen(location)
    wlp.x = location[0]
    wlp.y = location[1]
    wlp.height = target.height
    wlp.width = target.width
    wlp.type = WindowManager.LayoutParams.FIRST_SUB_WINDOW
    wlp.gravity = Gravity.LEFT or Gravity.TOP
    return wlp
}
複製程式碼

setLayoutParams()方法需要傳入一個View,這個View在螢幕中的位置和大小就是空資料介面的位置和大小,在列表展示類的頁面中,這個View可以是RecyclerView,在其他型別的情況下,傳入對應位置的View即可,比如Demo中的content,其實是一個TextView。

var location = IntArray(2)
target.getLocationOnScreen(location)
複製程式碼

獲取View在螢幕中的位置

    wlp.x = location[0]
    wlp.y = location[1]
    wlp.height = target.height
    wlp.width = target.width
複製程式碼

設定WindowManager.LayoutParams() 在螢幕中顯示的位置和大小

注意這兩行程式碼

wlp.type = WindowManager.LayoutParams.FIRST_SUB_WINDOW
wlp.gravity = Gravity.LEFT or Gravity.TOP
複製程式碼

type 的值是FIRST_SUB_WINDOW,意思是Window是皮膚視窗,顯示於宿主視窗上層。(type還有很多值,其他的暫時沒有嘗試過)

設定Gravity.LEFT or Gravity.TOP是為了解決View的margin問題。這樣一來,我們的emptyLayout就完全能夠和傳入的View重合了,也就達到了我們的最終目的。

當不需要顯示或者介面退出時只需要移除當前Window上的View即可

fun onDestroy(wm: WindowManager) {
    isAresShowing = false
    currentLayout?.let {
        wm.removeView(currentLayout)
        currentLayout = null
    }
}
複製程式碼

為什麼說這種方式使用絕大多數情況呢?
因為下面這個介面就不行

對空資料頁面等公共頁面實現的一些思考

頁面中的右下角有一個Button,如果RecyclerView 部分為空資料頁面,那麼這個Button會被空資料頁面遮蓋,也就是說,空資料頁面是顯示在最上層的,即使你給這個button設定
bringToFront()也是無效的,因為這兩個元件雖說歸根到底都是通過windowmanager新增的,但卻不在同一個view上。

這個問題暫時還沒有好的思路解決,如果你有更好的解決辦法,歡迎留言!

最後奉上demo地址:

github.com/shiweibsw/A…

相關文章