QMUI 2 終於來了

QMUI 2 提了好久好久了，在蝸牛般的開發速度下（加班過多，效率低下），終於來了首個對外版本。 你能夠前往官網下載 QMUIDemo 體驗體驗，而後前往Github 給個 star 吧。

這個版本主要是作了如下幾個主要修改：

1. 支持庫遷移到 Androidx， 最低支持版本升級到 API 19。
2. 支持夜間模式，QMUI 作得更通用一點，提供了換膚功能。
3. 重構 QMUIPopup 與 QMUITabSegment等組件，提供更豐富的功能。
4. 移除舊的以背景切圖來實現分隔線的實現方式與相關資源，採用 QMUILayout 方案爲替代。

首先要說的是，這個版本與 1.x 版本並不徹底兼容，有不少資源的增刪改和組件接口與實現的變動，因此升級到 2.x 版本可能須要稍費一點時間，特別是資源配置的變動，可能致使雖然編譯沒問題，可是UI顯示卻不正確的現象。 （特別是在文檔尚未完善的狀況下，這個鍋我背了，但仍是不可能那麼快完善）

引入 QMUI 2

def qmui_version = '2.0.0-alpha01'
implementation "com.qmuiteam:qmui:$qmui_version"
implementation "com.qmuiteam:arch:$qmui_version"
kapt "com.qmuiteam:arch-compiler:$qmui_version" // use annotationProcessor if java
複製代碼

Androidx

遷移到 androidx 的呼聲在 github 上是很是高的，一部分人是想要查看源碼方便一點，另外一部分人我估計是並不知道 jetifier 的方式能夠在編譯時將 support 包轉換爲 androidx。

另外一個修改是最低支持版本提高到了 API 19。 目前都 2019 年，我都想直接提高到 API 21 了，但仍是不敢太激進，只能慢慢來吧。

Dark Mode / 換膚

Android 10 提供了 Dark Mode 的支持，官方提供了兩種實現方式:

• 一種是在 value-night, drawable-night 放置 Dark Mode 資源。 當 Dark Mode 打開時，Activity會被從新建立， 而後從 *-night 目錄讀取資源。
• 另外一種是在 AndroidManifest 文件中爲 Activity 的 configChanges 加上 uiMode， 不從新重建 Activity, 而走 onConfigurationChanged。在 onConfigurationChanged 裏判斷當前 uiMode, 而後作自定義處理。

第一種方式就是簡單，可是它有兩個弊端：

• Dark Mode 切換時，它須要重建整個 Activity，通常狀況還好，你感知不到重建這個過程，可是若是 View 特別大，單單建立 View 就很是耗時了，那麼就會明顯感知到黑屏（不少產品喜歡把界面邏輯搞得特別複雜，例如 ViewPager 嵌套 ViewPager, 再嵌套 ViewPager, 並且每一個 Pager 都還巨複雜）
• 另一點就是，既然已經支持一套皮膚，爲什麼不能多支持幾套？例如全黑白版（僞墨水屏）

所以，QMUI 推薦採起第二種方式，所以 QMUI 提供了換膚功能的支持，夜間模式只是在 onConfigurationChanged 是調用一下換膚接口而已。 固然，開發者也能夠建立 *-night 文件夾，並在裏面配置 qmui 的各類 color/drawable 設置，以第一種方式去完成夜間模式的適配。 QMUI 只是將組建資源取值 Attr 化，使用何種方式，都是由使用者本身決定。

常規使用方式， 在 Application.onCreate() 里加入你的 skin 支持項：

QMUISkinManager skinManager = QMUISkinManager.defaultInstance(this);
skinManager.addSkin(1, R.style.app_skin_blue);
skinManager.addSkin(2, R.style.app_skin_dark);
skinManager.addSkin(3, R.style.app_skin_white);
skinManager.changeSkin(isDarkMode ? 2 : 1);
複製代碼

R.style.app_skin_blue、R.style.app_skin_dark、R.style.app_skin_white 等就是不一樣 skin 下的配置， 而後在 Application.onConfigurationChanged 裏監聽 uiMode 的信息:

if((newConfig.uiMode & Configuration.UI_MODE_NIGHT_MASK) == Configuration.UI_MODE_NIGHT_YES){
    QDSkinManager.changeSkin(QDSkinManager.SKIN_DARK);
}else if(QDSkinManager.getCurrentSkin() == QDSkinManager.SKIN_DARK){
    QDSkinManager.changeSkin(QDSkinManager.SKIN_BLUE);
}
複製代碼

固然，對於啓動 LauncherActivity 的背景，是沒有機會走到 QMUI 的換膚機制的，所以要退化到第一種 Dark Mode 的實現方案。

那麼業務上咱們如何對 View 來設置呢? 有如下方式：

• 若是你採用的是 xml， 能夠經過 QMUI 提供的 qmui_skin_xxx 的設置項來設置你 skin。
• 若是你想在 java 代碼中設置 skin， 那麼須要採用 QMUISkinValueBuilder 來構建 value, 再經過 QMUISkinHelper.setSkinValue 來設置，稍顯複雜，若是經過是 kotlin 的話，QMUI 提供了 View.skin 方法，能夠快速實現。
• 還有一種尚在開發的方式， 我把它叫作 skin-maker。 目的是可讓設計師經過點點點的方式進行 skin 設置，而後導出一份配置文件，放到工程裏，經過字節碼注入完成 skin 設置，這樣能夠將整個配置工做交給設計，不用每作個新業務都要考慮換膚。 理想是美好的，現實是目前作了一個 Demo 版，有興趣的能夠在 QMUIDemo 上體驗體驗，流程是通的，但還有不少問題沒解決。

QMUIPopup 重寫

QMUIPopup 以前的實現是比較糟糕的，採用了 .9.png 的方式實現了背景陰影，由於陰影是佔位置的，因此邊緣距離過大，若是 anchorView 在很邊緣的位置，會出現箭頭錯位或者顯示不理想的狀況，不少人踩了這個坑，而解約方案只能是提供一個陰影小一點的背景圖。

所以，這個版本徹底重寫了它，採用了 QMUILayout 的方式實現陰影，因此你想徹底貼邊也是能夠的。 除此以外， 2.x 版本提供了 QMUIQuickAction 和 QMUIFullScreenPopup , 前者樣式來源於微信讀書閱讀器的快捷菜單，固然實現不同（雖然微信讀書上的那個也是我寫的，可是當年的實現，不忍直視）。 後者能夠用於實現微信讀書各類想法浮層，去年讀書各類浮層興起，而且還有鍵盤交互，我算是有一些心得吧，也提取了出來。

一個簡單的使用例子：

QMUIPopups.popup(getContext(), QMUIDisplayHelper.dp2px(getContext(), 250))
        .preferredDirection(QMUIPopup.DIRECTION_BOTTOM)
        .view(textView)
        .edgeProtection(QMUIDisplayHelper.dp2px(getContext(), 20))
        .offsetX(QMUIDisplayHelper.dp2px(getContext(), 20))
        .offsetYIfBottom(QMUIDisplayHelper.dp2px(getContext(), 5))
        .shadow(true)
        .arrow(true)
        .animStyle(QMUIPopup.ANIM_GROW_FROM_CENTER)
        .onDismiss(new PopupWindow.OnDismissListener() {
            @Override
            public void onDismiss() {
                Toast.makeText(getContext(), "onDismiss", Toast.LENGTH_SHORT).show();
            }
        })
        .show(v);
複製代碼

組織形式比之前的舒服多了吧。

更多修改

固然，除了 QMUIPopup 的重寫，其它組件也都有很大的改動：

1. QMUITabSegment 大面積重寫，提供了兩張圖片切換、不一樣 Tab 不一樣設置等功能，擴展也更加靈活。
2. QMUIBottomSheet.BottomListSheetBuilder 添加了不少人期待的居中設置
3. QMUICommonListItemView 更改父類爲 ConstraintLayout， 重寫佈局，能夠設置高度 wrap_content 以支持超長標題或副標題
4. 提供了 QMUISlider 組件
5. ...

最後，目前的版本沒有通過充分的測試和實踐，可能會存在比較多的問題，歡迎你們提 issue 。

本來連接： blog.cgsdream.org/2019/12/01/…