使用Kongzue全家桶元件建立專案全攻略(一、引入和沉浸式的那些事兒)
[更新於 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建立一個新的專案
進入build.gradle(Module)新增上述引用,並刪除不必要的引用:
③關於Activity的修改
回到我們預設建立的MainActivity,可以看到它預設是繼承自AppCompatActivity的,此時我們有更好的選擇,將他的繼承改為BaseActivity(com.kongzue.baseframework.BaseActivity),按照IDE提示重寫三個方法(移動游標到紅線報錯行,按下Alt+回車,預設第一個選單項即是重寫選項),接著可以看到onCreate方法被拉了一條線,不再推薦使用,因為在BaseActivity中我們通過註解實現介面的建立,刪除onCreate方法,在MainActivity的類名上使用@Layout(R.layout.activity_main)註解進行宣告,即可完成MainActivity的修改和建立:
在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。
一個介面一般所具備的元素有,標題欄、內容以及底欄Tabbar,這裡我們先將activity_main的佈局改為線性排布模式,並在其中添置一個標題欄、內容區以及底部導航欄。
標題欄使用titlebar元件實現,底部導航欄使用tabbar實現:
需要注意的是由於我們使用的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的按鈕:
在有底部導航欄的手機上導航欄一般處於黑色背景狀態,為了讓介面更加和諧,我們可以在Activity上使用註解@NavigationBarBackgroundColor(a = 0)來使底部導航欄背景透明,同時可以使用註解@DarkNavigationBarTheme(true)來使底部導航欄按鈕呈現深色狀態。完整版的MainActivity類如下圖所示:
此時,主介面大體上就完成了。執行下結果瞧瞧?
還不錯,另外因為是主介面,要使標題欄的返回按鈕隱藏,可以使用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對話方塊元件以及高效開發篇,有生之年一定寫完,敬請期待!
另外喜歡本系列文章請點一下下邊的喜歡,你的支援是我前進的動力!
已釋出的目錄:
相關文章
- vue全家桶 ---建立一個新的vue專案Vue
- React全家桶專案React
- 測試在專案流程中的那些事兒
- 關於自定義元件的那些事兒元件
- 說說ITSM專案實戰那些事兒(三)
- 多項式全家桶
- Node檔案操作那些事兒
- react全家桶實現招聘app-專案準備(一)ReactAPP
- React中元件邏輯複用的那些事兒React元件
- PMP認證|做了專案經理才知道的那些事兒
- 使用 etcd 和 grpc 遇到的版本衝突的那些事兒RPC
- https的那些事兒HTTP
- webpack的那些事兒Web
- XSS和字符集的那些事兒
- 用react全家桶+antDesign寫了一個習慣管理專案React
- VUE全家桶之vuex的使用Vue
- 聊聊springboot專案全域性異常處理那些事兒Spring Boot
- vscode建立的專案使用vue3+vite+ts在使用 @ 引入元件時候報紅線VSCodeVueVite元件
- Spring全家桶一覽Spring
- 有關指標的那些事兒《一》指標
- PHP那些事兒PHP
- Redis那些事兒Redis
- babel那些事兒Babel
- Eval家族的那些事兒
- vue全家桶 ---axios的使用和二次封裝VueiOS封裝
- 使用 vue-cli3 建立專案並引入 elementVue
- Python和單元測試那些事兒Python
- iOS APP啟動-Main函式之前的那些事兒iOSAPPAI函式
- 可能是 GitHub 上第一款 Vue 全家桶 + TypeScript 的完整專案GithubVueTypeScript
- 雲原生java的那些事兒Java
- util.promisify 的那些事兒
- iOS 截圖的那些事兒iOS
- HTTP 快取的那些事兒HTTP快取
- 漏洞檢測的那些事兒
- 關於 sudo 的那些事兒
- 面試的那些事兒--01面試
- uniapp——元件的建立使用和元件的生命週期函式APP元件函式
- 聊聊Django應用的部署和效能的那些事兒Django