騰訊開源的Android UI框架——QMUI Android

NO IMAGE

各位同學,早上好,我是你們的老朋友D_clock愛吃蔥花,前些天忙著發版本,最近也在看各種各樣的新知識,有好多東西想寫啊啊啊啊啊。嗯,先冷靜捋一下,賣個關子。扯回正題,今天繼續為大家推薦一個Github上的開源框架——QMUI Android,出品自騰訊廣州研發部QMUI團隊。

https://github.com/QMUI

如果是做Web開發的同學,應該會很熟悉QMUI所開源的QMUI Web框架,我之前也是因為弄一個Web頁的問題,知道了QMUI Web,然後才瞭解到QMUI這個團隊,前段時間發現他們新開源了QMUI Android這個框架,覺得還蠻接地氣的,索性一直暗中觀察,今天就來簡單介紹下它。並且據官網介紹,目前該專案已經支援了QQ郵箱和微信讀書。

640?wx_fmt=png&wxfrom=5&wx_lazy=1

QMUI Android是什麼?

以下是官方在Github的README中給出的介紹:

QMUI Android的設計目的是用於輔助快速搭建一個具備基本設計還原效果的Android專案,同時利用自身提供的豐富控制元件及相容處理,讓開發者能專注於業務需求而無需耗費精力在基礎程式碼的設計上。不管是新專案的建立,或是已有專案的維護,均可使開發效率和專案質量得到大幅度提升。

簡單的說,它就是一個封裝完善的Android UI元件庫,使用它可以解決你很多日常開發需求的UI問題。目前,它主要包含以下兩個部分:

  • UI控制元件:BottomSheet、Tab、圓角 ImageView、下拉重新整理等,使用方便靈活,並且支援自定義控制元件的樣式;

  • 常用工具類:如裝置資訊、螢幕資訊、鍵盤管理、狀態列管理等;

引入工程中使用也非常簡單,參照官方配置文件的手把手教學即可Happy Coding!

0?wx_fmt=png

官方配置文件:http://qmuiteam.com/android/page/start.html

經過一小段時間的體驗之後,我總結了以下幾個亮點分享一下。

常見UI效果封裝

QMUI Android中提供了很多常見使用的UI效果封裝,比如下面這些:

1、QMUIDialog:它提供了一系列常用的對話方塊,解決了使用系統預設對話方塊時在不同 Android 版本上的表現不一致的問題。

0?wx_fmt=gif

並且可以使用不同的Builder來構建不同型別的對話方塊,這些Builder都擁有設定title和新增底部按鈕的功能。

2、QMUIGroupListView:通用的列表,常用於App的設定介面,由於它的父類不是ListView而是LinearLayout,所以,需要配合ScrollView使用。並且它還提供了一個Section的概念對列表進行分塊,按照官方的介紹可以配合其所提供的QMUIGroupListView.Section, QMUICommonListItemViewQMUIGroupListSectionHeaderFooterView使用。

0?wx_fmt=gif

3、QMUIFloatLayout:類似CSS中的浮動佈局,從左到右排列子View並自動換行,同時還提供控制子View之間的垂直/水平間距和水平對齊方向、限制子View個數或行數等特性。

0?wx_fmt=gif

4、除了以上一些UI效果之外,還有諸如進度條效果(QMUIProgressBar)、下拉重新整理(QMUIPullRefreshLayout)、類似於PopupWindow的懸浮彈層(QMUIPopupQMUIListPopup)、載入中的等待效果(QMUILoadingView)等等還有好多。

增強富文字

QMUI Android中提供了很多自定義的Span來幫你解決各種富文字的問題,如:QMUIBlockSpaceSpanQMUICustomTypefaceSpanQMUIAlignMiddleImageSpanQMUIMarginImageSpanQMUITextSizeSpanQMUITouchableSpan等。

0?wx_fmt=gif

還有為文字和表情混排提供支援的QMUIQQFaceViewQMUIQQFaceCompilerIQMUIQQFaceManager,而且相比系統自帶的ImageSpan實現,QMUI還做了一定的優化工作,具體可以對比效果圖中的expend time(因為錄製gif圖所以沒滑動太快,正常情況下,這個效能差距會更大)。

QMUIQQFaceView實現效果QMUIQQFaceView和預設ImageSpan效能比對

0?wx_fmt=gif

0?wx_fmt=gif

並且,還提供了支援垂直排版文字的QMUIVerticalTextView,以及QMUISpanTouchFixTextView修復了原生TextView和ClickableSpan一起使用時的一些的bug。

QMUIVerticalTextViewQMUISpanTouchFixTextView

0?wx_fmt=gif

0?wx_fmt=gif

簡直不要太爽。

工具類

工具類的話,也有不少,官方給的文件言簡意賅,給大家截圖好了。

0?wx_fmt=png

0?wx_fmt=png

這些工具類,在平常開發中都是很實用的。

不足

介紹完以上幾大亮點,最後再說點個人覺得唯一的不足之處,就是如果QMUI Android的文件能像QMUI Web一樣完善,那就更好了。

期待

總的來說,QMUI Android的發展還是蠻值得繼續期待,哦,對了,iOS也有對應的QMUI iOS哦。

0?wx_fmt=png

不知道後面會不會出現QMUI RN?QMUI 小程式?哈哈,隨意腦洞下一下。覺得文章不錯的同學,可以幫忙轉發、點贊支援哦。

之前的精彩文章

0?wx_fmt=gif

iOS使用者讚賞通道

0?wx_fmt=png