Android UI

腾讯开源的Android UI框架——QMUI Android

2018-01-31   Android开发中文站

今天推荐一个Github上的开源框架——QMUI Android，出品自腾讯广州研发部QMUI团队。该开源项目致力于提高Android项目UI开发效率的解决方案

QMUI Android简介

官方在Github的介绍：

QMUI Android的设计目的是用于辅助快速搭建一个具备基本设计还原效果的Android项目，同时利用自身提供的丰富控件及兼容处理，让开发者能专注于业务需求而无需耗费精力在基础代码的设计上。不管是新项目的创建，或是已有项目的维护，均可使开发效率和项目质量得到大幅度提升。

简单的说，它就是一个封装完善的Android UI组件库，使用它可以解决你很多日常开发需求的UI问题。目前，它主要包含以下两个部分：

• UI控件：BottomSheet、Tab、圆角 ImageView、下拉刷新等，使用方便灵活，并且支持自定义控件的样式；

• 常用工具类：如设备信息、屏幕信息、键盘管理、状态栏管理等；

官网：http://qmuiteam.com/android

Github 源码：https://github.com/QMUI/QMUI_Android

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

据官网介绍，目前该项目已经在QQ邮箱和微信读书中使用。

功能特性

全局 UI 配置

只需要修改一份配置表就可以调整 App 的全局样式，包括组件颜色、导航栏、对话框、列表等。一处修改，全局生效。

丰富的 UI 控件

提供丰富常用的 UI 控件，例如 BottomSheet、Tab、圆角 ImageView、下拉刷新等，使用方便灵活，并且支持自定义控件的样式。

高效的工具方法

提供高效的工具方法，包括设备信息、屏幕信息、键盘管理、状态栏管理等，可以解决各种常见场景并大幅度提升开发效率。

功能列表

请查看官网的功能列表

常见UI效果控件和封装

QMUI Android中提供了很多常见使用的UI效果封装，比如下面这些：

1、QMUIDialog：它提供了一系列常用的对话框，解决了使用系统默认对话框时在不同 Android 版本上的表现不一致的问题。

并且可以使用不同的Builder来构建不同类型的对话框，这些Builder都拥有设置title和添加底部按钮的功能。

2、QMUIGroupListView：通用的列表，常用于App的设置界面，由于它的父类不是ListView而是LinearLayout，所以，需要配合ScrollView使用。并且它还提供了一个Section的概念对列表进行分块，按照官方的介绍可以配合其所提供的QMUIGroupListView.Section, QMUICommonListItemView、QMUIGroupListSectionHeaderFooterView使用。

3、QMUIFloatLayout：类似CSS中的浮动布局，从左到右排列子View并自动换行，同时还提供控制子View之间的垂直/水平间距和水平对齐方向、限制子View个数或行数等特性。

4、除了以上一些UI效果之外，还有诸如进度条效果（QMUIProgressBar）、下拉刷新（QMUIPullRefreshLayout）、类似于PopupWindow的悬浮弹层（QMUIPopup、QMUIListPopup）、加载中的等待效果（QMUILoadingView）等等还有好多。

增强富文本

QMUI Android中提供了很多自定义的Span来帮你解决各种富文本的问题，如：QMUIBlockSpaceSpan、QMUICustomTypefaceSpan、QMUIAlignMiddleImageSpan、QMUIMarginImageSpan、QMUITextSizeSpan、QMUITouchableSpan等。

还有为文字和表情混排提供支持的QMUIQQFaceView、QMUIQQFaceCompiler、IQMUIQQFaceManager，而且相比系统自带的ImageSpan实现，QMUI还做了一定的优化工作，具体可以对比效果图中的expend time（因为录制gif图所以没滑动太快，正常情况下，这个性能差距会更大）。

QMUIQQFaceView实现效果	QMUIQQFaceView和默认ImageSpan性能比对

并且，还提供了支持垂直排版文字的QMUIVerticalTextView，以及QMUISpanTouchFixTextView修复了原生TextView和ClickableSpan一起使用时的一些的bug。

QMUIVerticalTextView	QMUISpanTouchFixTextView

Demo 下载及预览

Demo 预览：

下面开始使用

1，老生常谈，gradle中添加依赖

compile ‘com.qmuiteam:qmui:1.0.4′

在此之前要配置JCenter

repositories {google()jcenter()mavenLocal()}

2，配置主题

把项目的theme指向

QMUI.Compat

3，你可以通过在项目中的 theme 中用 (value) 的形式来覆盖 QMUI 组件的默认表现。具体可指定的属性名请参考 @style/QMUI.Compat 或 @style/QMUI 中的属性。

工具类

工具类的话，也有不少，官方给的文档言简意赅，给大家截图好了。

这些工具类，在平常开发中都是很实用的。