腾讯开源超实用的UI轮子库,我是轮子搬运工
QMUI_Android
功能特性
全局 UI 配置
只需要修改一份配置表就可以调整 App 的全局样式,包括组件颜色、导航栏、对话框、列表等。一处修改,全局生效。
丰富的 UI 控件
提供丰富常用的 UI 控件,例如 BottomSheet、Tab、圆角 ImageView、下拉刷新等,使用方便灵活,并且支持自定义控件的样式。
高效的工具方法
提供高效的工具方法,包括设备信息、屏幕信息、键盘管理、状态栏管理等,可以解决各种常见场景并大幅度提升开发效率。
功能列表
-
QMUIAnimationListView
-
使
ListView
支持添加/删除 Item 的动画,支持自定义动画效果。 -
QMUIBottomSheet
-
在
Dialog
的基础上重新定制了show()
和hide()
时的动画效果, 使Dialog
在界面底部升起和降下。提供了以下两个面板样式:-
列表样式:使用
QMUIBottomSheet.BottomListSheetBuilder
生成。 -
宫格类型:使用
QMUIBottomSheet.BottomGridSheetBuilder
生成。
-
-
QMUICommonListItemView
-
用作通用列表
QMUIGroupListView
里的 Item,也可单独使用。支持以下样式:-
展示一行文字。
-
在右侧或下方增加一行说明文字。
-
在 item 右侧显示一个开关或箭头或自定义的View
-
-
QMUIDialog
-
提供了一系列常用的对话框,解决了使用系统默认对话框时在不同 Android 版本上的表现不一致的问题。使用不同的 Builder 来构建不同类型的对话框,这些 Builder 都拥有设置 title 和添加底部按钮的功能,不同的 Builder 特有的作用如下:
-
MessageDialogBuilder
: 消息类型的对话框 Builder。通过它可以生成一个带标题、文本消息、按钮的对话框。 -
ConfirmMessageDialogBuilder
: 带 Checkbox 的消息确认框 Builder。 -
EditTextDialogBuilder
: 带输入框的对话框 Builder。 -
MenuDialogBuilder
: 菜单对话框 Builder。 -
CheckableDialogBuilder
: 单选类型的对话框 Builder。 -
MultiCheckableDialogBuilder
: 多选类型的对话框 Builder。 -
CustomDialogBuilder
: 自定义对话框内容区域的 Builder。 -
AutoResizeDialogBuilder
: 随键盘升降自动调整Dialog
高度的 Builder
-
-
QMUIEmptyView
-
通用的空界面控件,支持显示 loading、主标题和副标题、图片。
-
QMUIFloatLayout
-
类似 CSS 里
float: left
的浮动布局,从左到右排列子 View 并自动换行。支持以下特性:-
控制子
View
之间的垂直/水平间距。 -
控制子
View
的水平对齐方向(左对齐/居中/右对齐)。 -
限制子
View
的个数或行数。
-
-
QMUIFontFitTextView
-
使
TextView
在宽度固定的情况下,文字多到一行放不下时能缩小文字大小来自适应。 -
QMUIGroupListView
-
通用的列表,常用于 App 的设置界面,注意其父类不是
ListView
而是LinearLayout
,所以一般要配合ScrollView
使用。提供了 Section 的概念,用来将列表分块。 配合QMUIGroupListView.Section
,QMUICommonListItemView
和QMUIGroupListSectionHeaderFooterView
使用。 -
QMUIGroupListSectionHeaderFooterView
-
用作通用列表
QMUIGroupListView
里每个 Section 的头部或尾部,也可单独使用。 -
QMUIItemViewsAdapter
-
一个带 cache 功能的“列表型数据-View”的适配器,适用于自定义
View
需要显示重复单元ListView
的情景,cache 功能主要是保证在需要多次刷新数据或布局的情况下(ListView
或RecycleView
的 itemView)复用已存在的View
。QMUI 用于QMUITabSegment
中Tab
与数据的适配。 -
QMUIKeyboardHelper
-
提供更加便捷的方式针对给定的 EditText 显示/隐藏软键盘,并且提供了工具方法判断键盘是否当前可见。
-
QMUILinkTextView
-
使
TextView
能自动识别 URL、电话、邮箱地址,相比TextView
有以下特点:-
可以设置链接的样式。
-
可以设置链接的点击事件。
-
-
QMUILoadingView
-
用于显示 Loading 的
View
,支持颜色和大小的设置。 -
QMUIObservableScrollView
-
可以监听滚动事件的
ScrollView
,并能在滚动回调中获取每次滚动前后的偏移量。 -
QMUIPopup
-
提供一个浮层,支持自定义浮层的内容,支持在指定
View
的任一方向旁边展示该浮层,支持自定义浮层出现/消失的动画。 -
QMUIListPopup
-
继承自
QMUIPopup
,在QMUIPopup
的基础上,支持显示一个列表。 -
QMUIProgressBar
-
一个进度条控件,通过颜色变化显示进度,支持环形和矩形两种形式,主要特性如下:
-
支持在进度条中以文字形式显示进度,支持修改文字的颜色和大小。
-
可以通过
xml
属性修改进度背景色,当前进度颜色,进度条尺寸。 -
支持限制进度的最大值。
-
-
QMUIPullRefreshLayout
-
下拉刷新控件。支持自定义 RefreshView(表示正在刷新的 View),触发刷新的位置等特性。
-
QMUIQQFaceView
-
支持显示表情的伪
TextView
(继续自定义 View,而不是真正的TextView
), 实现了TextView
的maxLine
、ellipsize
、textSize
、textColor
等基本功能。 -
支持与
QMUITouchableSpan
配合使用实现内容可点击。
-
-
QMUIQQFaceCompiler
-
QMUIQQFaceView
的内容解析器,将文本内容解析成QMUIQQFaceView
想要的数据格式。 -
IQMUIQQFaceManager
-
QMUIQQFaceView
资源管理接口,使用QMUIQQFaceView
必须实现这个接口以提供表情资源。 -
QMUIRadiusImageView
-
提供为图片添加圆角、边框、剪裁到圆形或其他形状等功能。
-
QMUIRoundButton
-
对
Button
提供圆角功能,支持以下特性:-
指定圆角的大小。
-
分别指定不同方向的圆角大小。
-
指定圆角的大小为高度的一半,并跟随高度变化自适应圆角大小。
-
支持分别指定背景色和边框色,指定颜色时支持使用 color 或
ColorStateList
。
-
-
QMUIRoundButtonDrawable
-
使用该
Drawable
可以方便地生成圆角矩形/圆形Drawable
,提供设置背景色、描边大小和颜色、圆角自适应 View 高度等特性。 -
QMUISpanTouchFixTextView
-
相比
TextView
,修正了两个常见问题:-
修正了
TextView
与ClickableSpan
一起使用时,点击ClickableSpan
也会触发TextView
的事件的问题。 -
修正了
TextView
默认情况下如果添加了ClickableSpan
之后就无法把点击事件传递给TextView
的 Parent 的问题。
-
-
QMUITabSegment
-
用于横向多个
Tab
的布局,包含多个特性:-
可以用
xml
或QMUITabSegment
提供的 set 方法统一配置文字颜色、icon 位置、是否要下划线等。 -
每个
Tab
都可以非常灵活的配置,内容上支持文字和 icon 的显示,icon 支持选中态,支持内容的排版对齐方向设置,支持显示红点,支持插入自定义的View
,支持监听双击事件等。 -
可以通过
setupWithViewPager(ViewPager)
方法与ViewPager
绑定。
-
-
QMUITipDialog
-
提供一个浮层展示在屏幕中间,提供了以下两种样式:
-
使用
QMUITipDialog.Builder
生成,提供了一个图标和一行文字的样式, 其中图标有 Loading、成功、失败等类型可选。 -
使用
QMUITipDialog.CustomBuilder
生成,支持传入自定义的layoutResId
。
-
-
QMUITopBar
-
通用的顶部 Bar。提供了以下功能:
更多可参考 wiki 文档
-
在左侧/右侧添加图片按钮/文字按钮/自定义View。
-
设置标题/副标题,且支持设置标题/副标题的水平对齐方式。
-
-
QMUITopBarLayout
-
对
QMUITopBar
的包裹类,并代理了QMUITopBar
的方法。配合QMUIWindowInsetLayout
使用,可使QMUITopBar
在支持沉浸式状态栏的界面中顶部延伸到状态栏。 -
QMUIVerticalTextView
-
在
TextView
的基础上支持文字竖排。 -
QMUITouchableSpan
-
继承自
ClickableSpan
,支持 normal 态和 press 态时有不同的背景颜色以及字体颜色。建议配合QMUISpanTouchFixTextView
或其子类使用,便于事件传递的协调。 -
QMUIWindowInsetLayout
-
配合沉浸式状态栏使用,用于协调子
View
的fitSystemWindows
。 -
QMUIWrapContentListView
-
支持高度值为
wrap_content
的ListView
,解决原生ListView
在设置高度为wrap_content
时高度计算错误的 bug。 -
QMUIBlockSpaceSpan
-
通过在段落之间设置该 span,实现段间距的效果。
-
QMUICustomTypefaceSpan
-
支持以
Typeface
的方式设置span
的字体,实现自定义字体的效果。 -
QMUIAlignMiddleImageSpan
-
继承自
ImageSpan
,在此基础上实现让span
垂直居中的效果。 -
QMUIMarginImageSpan
-
继承自
QMUIMarginImageSpan
,在此基础上支持设置图片的左右间距。 -
QMUITextSizeSpan
-
支持调整字体大小的
span
。AbsoluteSizeSpan
可以调整字体大小,但在中英文混排下由于decent的不同,无法根据具体需求进行底部对齐或者顶部对齐。而QMUITextSizeSpan
则可以多传一个参数,让你可以根据具体情况来决定偏移值。 -
QMUIStickySectionLayout
-
支持二级结构的列表的折叠与展开;支持滚动时悬浮当前 section header; 支持在section list 或 section item list 前后添加自定义
View
。 更多可参考 wiki 文档。
Helper Classes
-
QMUIColorHelper
-
颜色处理工具类,按照功能类型来划分,总共包含以下几个特性:
-
为一个颜色设置透明度。
-
根据指定比例,在两个颜色值之间计算出一个颜色值。
-
将颜色值转换为字符串。
-
-
QMUIDeviceHelper
-
获取设备信息的工具类,按照功能类型来划分,总共包含以下几个特性:
-
判断设备为手机/平板。
-
判断设备是否为魅族手机。
-
判断当前系统是否为 Flyme 系统。
-
判断当前系统是否为 MIUI 系统。
-
判断当前是否拥有悬浮窗权限。
-
-
QMUIDisplayHelper
-
屏幕相关的工具类,按照功能类型来划分,总共包含以下几个特性:
-
方便地获取一个
DisplayMetrics
实例。 -
获取屏幕信息,包括屏幕密度、屏幕宽度和高度、状态栏高度、ActionBar 高度等。
-
获取设备硬件信息,包括是否有可用摄像头、是否有硬件菜单、是否有网络、SD Card 是否可用、当前选择的国家语言等。
-
判断当前是否处于全屏状态,控制进入/退出全屏状态。
-
dp 与 px 数值的相互转化。
-
-
QMUIDrawableHelper
-
快速绘制一张指定大小、颜色、边框的图片,支持形状为圆角矩形和圆形。
-
快速绘制一张带上分隔线或下分隔线的图片。
-
快速绘制一张可带圆角的渐变图片。
-
将当前图片的颜色换成另一个颜色。
-
将两张图片叠加后生成一张新的图片。
-
对某个
View
截图生成图片。
-
-
QMUIPackageHelper
-
提供简便的方式获取 App 的版本信息,可以单独获取主版本号、次版本号以及修正版本号。
-
QMUIResHelper
-
封装了更加便捷的方法,用于获取当前
Theme
下的Attr
值,支持Float
、Color
、ColorStateList
、Drawable
和Dimen
类型的Attr
。 -
QMUISpanHelper
-
提供了方法使得
QMUIMarginImageSpan
能被更便捷地使用。 -
QMUIStatusBarHelper
-
状态栏相关的工具类,按照功能类型来划分,总共包含以下几个特性:
-
快速实现沉浸式状态栏(支持 4.4 以上版本的
MIUI
和Flyme
,以及 5.0 以上版本的其他Android
)。 -
快速设置状态栏为黑色或白色字体图标(支持 4.4 以上版本
MIUI
和Flyme
,以及 6.0 以上版本的其他Android
)。 -
提供多个常用的工具方法,如获取状态栏高度、判断当前是否全屏等等。
-
-
QMUIViewHelper
-
View 工具类,按照功能类型来划分,总共包含以下几个特性:
-
对
ImageView
进行处理,可以按比例缩放图片。 -
对
View
做背景颜色变化动画,支持多个动画参数。 -
对
View
做进退场动画,支持透明度变化和上下位移两种方式。 -
提供多个常用的
View
相关工具方法,如对View
设置单个方向的padding
、从ViewStub
中获取一个View
、判断ListView
是否已经滚动到底部等等。
-
开始使用
qmui
1. 引入库
最新的库会上传到 JCenter 仓库上,请确保配置了 JCenter 仓库源,然后直接引用:
implementation 'com.qmuiteam:qmui:1.2.0'
至此,QMUI 已被引入项目中。
2. 配置主题
把项目的 theme
的 parent
指向 QMUI.Compat
,至此,QMUI 可以正常工作。
3. 覆盖组件的默认表现
你可以通过在项目中的 theme
中用 <item name="(name)">(value)</item>
的形式来覆盖 QMUI 组件的默认表现。具体可指定的属性名请参考 @style/QMUI.Compat
中的属性。
arch
1. 引入库
arch 库会依赖 qmui 库, 因此也需要引入 qmui 库
implementation com.qmuiteam:arch:0.3.1
2. 在 Application#onCreate 中初始化
QMUISwipeBackActivityManager.init(this);
最后
如果你看到了这里,觉得文章写得不错就给个赞呗?如果你觉得那里值得改进的,请给我留言。一定会认真查询,修正不足。谢谢。
最后针对Android程序员,我这边给大家整理了一些资料,包括不限于高级UI、性能优化、移动架构师、NDK、混合式开发(ReactNative+Weex)微信小程序、Flutter等全方面的Android进阶实践技术;希望能帮助到大家,也节省大家在网上搜索资料的时间来学习,也可以分享动态给身边好友一起学习!
需要展开的架构学习笔记导图的加群免费获取 Android架构设计大群(185873940)
PS:群内有许多技术大牛,高手如云,有任何问题,欢迎广大网友一起来交流,群内还不定期免费分享高阶Android学习视频资料和面试资料包~