Android UI

xiaoxiao2021-02-28  7

腾讯开源的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。

QMUIVerticalTextViewQMUISpanTouchFixTextView

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 中的属性。

工具类

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

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

转载请注明原文地址: https://www.6miu.com/read-1900244.html

最新回复(0)