使用Kongzue全家桶元件建立專案全攻略(一、引入和沉浸式的那些事兒)

weixin_34007291發表於2018-11-28

[更新於 2018.12.18]

前言

本文主要介紹如何使用在Github開源的Kongzue全家桶元件快速建立新專案,以及處理響應式、許可權等操作的方法。
本文中演示的步驟成品將會在最終開源至Github,有興趣可以前往下載(https://github.com/kongzue/Example)。
本篇將講述如何引入Kongzue全家桶元件以及沉浸式相關的那些事兒。

①引用元件

目前Kongzue全家桶能夠提供的元件主要由基礎框架以及額外的對話方塊、軟體更新、網路請求上傳、相簿選擇拍照、標題欄和底部導航欄元件組成。
首先可以根據 https://kongzue.github.io/ 提供的指導方案,或者手動前往 https://github.com/kongzue 檢視最新的開源元件,並準備引用到專案中:

//對話方塊
implementation 'com.kongzue.dialog:dialog:2.4.2'
//基礎框架
implementation 'com.kongzue.baseframework:baseframework:6.6.0'
//是否需要更新元件及模組:
implementation 'com.kongzue.kongzueupdatesdk:kongzueupdatesdk:1.4.1'
//是否需要選擇圖片、拍照的功能:
implementation 'com.kongzue.takephoto:takephoto:2.0.8'
//若是需要訪問網路功能
implementation 'com.kongzue.baseokhttp_v3:baseokhttp_v3:3.0.4'
//若是需要底部導航欄
implementation 'com.kongzue.tabbar:tabbar:1.5.3'
//若是需要頂部標題欄+沉浸式適配方案2
implementation 'com.kongzue.titlebar:titlebar:1.2.4'
//若是需要資料庫
implementation 'com.kongzue.kongzuedb:kongzuedb:1.0.1'
//下拉重新整理上拉載入
implementation 'com.scwang.smartrefresh:SmartRefreshLayout:1.1.0-alpha-14'
//輪播圖框架
implementation 'com.youth.banner:banner:1.4.10'
//Fresco圖片框架
implementation 'com.facebook.fresco:fresco:0.12.0'
implementation 'com.android.support.constraint:constraint-layout:1.1.3'

②建立專案

當前使用最新的Android Studio3.2.1建立一個新的專案


1976622-0726e1c492ec2357.png
新專案.png

進入build.gradle(Module)新增上述引用,並刪除不必要的引用:


1976622-9ac725b3d063a99d.png
implementation.png

③關於Activity的修改

回到我們預設建立的MainActivity,可以看到它預設是繼承自AppCompatActivity的,此時我們有更好的選擇,將他的繼承改為BaseActivity(com.kongzue.baseframework.BaseActivity),按照IDE提示重寫三個方法(移動游標到紅線報錯行,按下Alt+回車,預設第一個選單項即是重寫選項),接著可以看到onCreate方法被拉了一條線,不再推薦使用,因為在BaseActivity中我們通過註解實現介面的建立,刪除onCreate方法,在MainActivity的類名上使用@Layout(R.layout.activity_main)註解進行宣告,即可完成MainActivity的修改和建立:

1976622-7b898c70ffdb55b2.png
Create BaseActivity.png

在BaseActivity中,我們將一個Activity的所有事件劃分為三大塊:即繫結佈局、載入資料和繫結事件,這三塊對應著需要重寫的initViews()、initDatas(JumpParameter paramer)和setEvents()三個方法,完整的使用方法後便會有講述。
之所以去除onCreate方法,是因為在BaseActivity中,使用@Layout(layoutId)註解的形式方便我們在開發過程中可以快速找到一個Activity的佈局引用,同時使用這種方式,BaseActivity會自動載入繫結佈局,並實現沉浸式適配。

④對於佈局的修改和沉浸式

Android 預設建立的專案是帶標題欄的,但其使用和功能並沒有titlebar元件來的方便容易,因此首先我們需要在res/values/styles中將AppTheme的風格由預設的“Theme.AppCompat.Light.DarkActionBar”設定為“Theme.AppCompat.Light.NoActionBar”以去掉預設介面自帶的的ActionBar。


1976622-2d446e84e2a8c460.png
修改styles

一個介面一般所具備的元素有,標題欄、內容以及底欄Tabbar,這裡我們先將activity_main的佈局改為線性排布模式,並在其中添置一個標題欄、內容區以及底部導航欄。
標題欄使用titlebar元件實現,底部導航欄使用tabbar實現:


1976622-34792e2a9b0def81.png
XML佈局

需要注意的是由於我們使用的BaseActivity中自帶了沉浸式適配方式,使用titlebar的屬性statusBarTransparent會產生衝突,因此此處不啟用titlebar的沉浸式程式碼,而使用僅設定狀態列Padding的模式,即statusBarTransparentOnlyPadding = "true"。
同時,因為BaseActivity自帶的沉浸式也會使底部導航欄沉浸,因此tabbar必須開啟paddingNavigationBar="true"屬性,此時tabbar會自動生成一段底部高度,該高度在有底部導航欄的手機上等於底部導航欄高度。
具體屬性和設定可以參考對應的元件使用說明:

頂部標題欄titlebar文件:
https://github.com/kongzue/TitleBar
底部導航欄tabbar文件:
https://github.com/kongzue/Tabbar

回到程式碼中,繫結佈局,並設定tabbar的按鈕:


1976622-265461873c904f4c.png
設定元件

在有底部導航欄的手機上導航欄一般處於黑色背景狀態,為了讓介面更加和諧,我們可以在Activity上使用註解@NavigationBarBackgroundColor(a = 0)來使底部導航欄背景透明,同時可以使用註解@DarkNavigationBarTheme(true)來使底部導航欄按鈕呈現深色狀態。完整版的MainActivity類如下圖所示:


1976622-d10a51ddb0fb0bff.png
沉浸式2

此時,主介面大體上就完成了。執行下結果瞧瞧?
1976622-5bd683ac71a1f62a.png
執行效果

還不錯,另外因為是主介面,要使標題欄的返回按鈕隱藏,可以使用noBackButton="true"來隱藏,具體可以參考titlebar的文件。

關於沉浸式的二談

首先,BaseActivity預設就會開啟沉浸式適配,這將導致你的佈局被系統螢幕頂部的狀態列和底部的導航欄所遮蓋,這時如何保證內容不背這些“安全區外”的區域所遮擋,則需要以下手段:

一,在我以往的文章中有介紹安卓“安全區”設立的方式,通過

android:fitsSystemWindows="true"

這句程式碼設立安全區的方式來進行內容安全區的設立,被標記了fitsSystemWindows的佈局系統預設會給它設定一個PaddingTop和PaddingBottom來將其中的內容壓制到合理的範圍內(即排除掉頂部狀態列和底部導航欄的允許App自行使用的區域)那麼這麼搞我們如果需要設定背景圖啊之類的可能就沒辦法“沉浸”到狀態列下了。此時可以嘗試第二種方案:

二,使用元件解決這些毛病
在Kongzue全家桶元件中有頂部TitleBar和底部TabBar兩個元件,他們分別帶有statusBarTransparentOnlyPadding和paddingNavigationBar方法,開啟這些方法他們會自動生成一段padding來將內容頂到安全區內,但又保留背景的空間,這樣就可以實現一體式的沉浸了,但他們的使用場景有限,如果我們不想或不能使用這些元件時,可以自行進行相應的沉浸式開發:

三,自行沉浸式
首先把需要“沉浸”到狀態列、導航欄背景的佈局(例如一個設定有背景圖的ImageView)放在最底下的佈局,讓他們本身就處於沉浸式的範圍內,然後建立安全區佈局,將內容放在安全區佈局內即可。在需要實現既是內容也需要沉浸的佈局,手動設定其setPadding(...)方法,根據需要填充其top、bottom值為BaseActivity提供的getStatusBarHeight()或getNavbarHeight()即可。


咕咕咕咕咕咕...

好吧,這是個系列文章,第一篇主要是沉浸式相關的設定方式,先講到這裡,後續的坑還有玩轉Kongzue對話方塊元件以及高效開發篇,有生之年一定寫完,敬請期待!
另外喜歡本系列文章請點一下下邊的喜歡,你的支援是我前進的動力!

已釋出的目錄:

一、引入和沉浸式的那些事兒

二、跳轉,許可權,我閉著眼~(上)

二、跳轉,許可權,我閉著眼~(下)

相關文章