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

article/2025/9/23 21:45:49

各位同学,早上好,我是你们的老朋友D_clock爱吃葱花,前些天忙着发版本,最近也在看各种各样的新知识,有好多东西想写啊啊啊啊啊。嗯,先冷静捋一下,卖个关子。扯回正题,今天继续为大家推荐一个Github上的开源框架——QMUI Android,出品自腾讯广州研发部QMUI团队。

https://github.com/QMUI

如果是做Web开发的同学,应该会很熟悉QMUI所开源的QMUI Web框架,我之前也是因为弄一个Web页的问题,知道了QMUI Web,然后才了解到QMUI这个团队,前段时间发现他们新开源了QMUI Android这个框架,觉得还蛮接地气的,索性一直暗中观察,今天就来简单介绍下它。并且据官网介绍,目前该项目已经支持了QQ邮箱和微信读书。

QMUI Android是什么?

以下是官方在Github的README中给出的介绍:

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

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

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

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

引入工程中使用也非常简单,参照官方配置文档的手把手教学即可Happy Coding!

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

经过一小段时间的体验之后,我总结了以下几个亮点分享一下。

常见UI效果封装

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

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

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

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

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

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

增强富文本

QMUI Android中提供了很多自定义的Span来帮你解决各种富文本的问题,如:QMUIBlockSpaceSpanQMUICustomTypefaceSpanQMUIAlignMiddleImageSpanQMUIMarginImageSpanQMUITextSizeSpanQMUITouchableSpan等。

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

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

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

QMUIVerticalTextViewQMUISpanTouchFixTextView

简直不要太爽。

工具类

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

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

不足

介绍完以上几大亮点,最后再说点个人觉得唯一的不足之处,就是如果QMUI Android的文档能像QMUI Web一样完善,那就更好了。

期待

总的来说,QMUI Android的发展还是蛮值得继续期待,哦,对了,iOS也有对应的QMUI iOS哦。

不知道后面会不会出现QMUI RN?QMUI 小程序?哈哈,随意脑洞下一下。觉得文章不错的同学,可以帮忙转发、点赞支持哦。

之前的精彩文章

  • 开源整理:有趣的Android动画交互设计

  • 我的互联网知识付费消费观

  • 和BAT的几个朋友一起做了份面试指南



iOS用户赞赏通道


http://chatgpt.dhexx.cn/article/CxQ4IiF9.shtml

相关文章

vue开发移动端,mui框架的各种使用方法

前面提到使用vue开发APP,自己不太熟悉,后来了解到有这个mui框架,然后改变状态栏颜色和监听返回键也是使用的这个框架,后来又遇到了一些问题,但是官网没有写操作方法(也许是没找到),后…

Android原生集成MUI框架进行混合开发

开发APP中我们经常进行原生结合H5进行混合开发,下面将进行详细讲解Android原生集成MUI框架进行混合开发(项目Demo如下,有需要的可以下载查看),下一篇讲述,Android原生和MUI(也适合H5与原生交互&…

MUI 前端框架体验

前端框架有很多&#xff0c;在做混合开发APP 时&#xff0c;MUI 的UI 看起来更像原生APP&#xff0c;所以就选择MUI 来体验一下。 1 首先下载 安装 HBuilder X 2 创建并选择5app 项目 3.比较关键的index页面 Markup <!DOCTYPE html> <html> <head><me…

Android引入QMUI框架

前言 作为一个JAVA后端开发&#xff0c;学习Android开发&#xff0c;Android原生UI控件样式单一&#xff0c;简单&#xff0c;下面考虑引入UI框架QMUI。具体步骤如下&#xff1a; 一、创建一个Empty项目 二、打开QMUI官网查看相关步骤(对新手很不友好) https://qmuiteam.com…

vue框架和uniapp框架区别,前端vue和uniapp哪个好用

uniapp和vue有什么区别&#xff1f; vue和uni-app的区别如下&#xff1a;1、uni-app可以通过打包实现一套代码多端运行&#xff0c;而vue不行。2、uni-app有自动的框架预载&#xff0c;加载页面的速度更快&#xff0c;vue没有。 3、uniapp使用小程序的标签&#xff0c;vue使用…

vue介绍及vue与其它框架的优缺点

一.vue介绍 1.什么是vue.js Vue (读音 /vjuː/&#xff0c;类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是&#xff0c;Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层&#xff0c;不仅易于上手&#xff0c;还便于与第三方库或既有…

MUI框架-05-用MUI做简单App界面

MUI框架-05-用MUI做一个简单App MUI 是一个前端框架&#xff0c;前端框架就像 Bootstrap&#xff0c;EasyUI&#xff0c;Vue ,为了做 app 呢&#xff0c;就有了更加高效的 MUI&#xff0c;我觉得前端框架有很多&#xff0c;也没有必要都取掌握&#xff0c;找一个比较出名的&am…

MUI--高性能前端框架

MUI是什么&#xff1f; 最接近原生APP体验的高性能前端框架。 相比同类框架的优势&#xff1f; 性能和体验的差距&#xff0c;一直是mobile app开发者放弃HTML5的首要原因。 浏览器天生的切页白屏、不忍直视的转页动画、浮动元素的抖动、无法流畅下拉刷新、侧滑抽屉卡顿等问题…

移动端开发框架mui介绍

MUI 官网&#xff1a;https://www.dcloud.io/mui.html MUI 文档&#xff1a;https://dev.dcloud.net.cn/mui/ui/ 演示地址&#xff1a;https://dcloud.io/hellomui/ &#xff08;支持手机和电脑浏览器&#xff09; 开发工具&#xff1a;https://www.dcloud.io/hbuilderx.htm…

MUI(最接近原生APP体验的高性能前端框架)

MUI-最接近原生APP体验的高性能前端框架MUI: 最接近原生APP体验的高性能前端框架https://dev.dcloud.net.cn/mui/ 最接近原生APP体验的高性能前端框架&#xff0c;追求性能体验&#xff0c;是我们开始启动MUI项目的首要目标&#xff0c;轻量必然是重要特征。 MUI不依赖任何第…

关于MUI一个很实用的前端框架

今天也是我接触mui的第一天。首先先上MUI的官网上面瞧一瞧。http://dev.dcloud.net.cn/mui/window/#closewindow我这里上的不是官网&#xff0c; 我是先把他的基本能实现的功能先做了一个简单的了解。下面大家跟着我看&#xff1a; 一、Mui的组件 mui的组件都很原生比如拓展阅读…

MUI框架快速开发

文章目录 创建项目快速编写标题页面主体底部选项卡常用关键词 字体图标事件处理常见手势事件 窗口对象底部选项卡-页面切换底部选项卡窗口对象设置点击事件处理 栅格系统页面传值通过openWindow通过自定义事件 常用关键词参考 创建项目 使用MUI框架搭建项目&#xff0c;首先我…

MUI框架学习——了解MUI

MUI框架-01-介绍-准备-创建项目 从0开始快速高效学习 MUI 框架官方文档&#xff1a;http://dev.dcloud.net.cn/mui/ui/ &#xff08;1&#xff09;MUI 介绍 MUI 是什么&#xff0c;解决了什么问题&#xff1f;MUI 官方号称最接近原生APP体验的高性能前端框架简单的说就是webap…

mui框架

1 MUI介绍 1.1 MUI是什么&#xff0c;解决了什么问题。 &#xff08;1&#xff09;性能和体验的差距&#xff0c;一直是mobile app开发者放弃HTML5的首要原因。 浏览器天生的切页白屏、不忍直视的转页动画、浮动元素的抖动、无法流畅下拉刷新等问题&#xff0c;这些都让HTML5…

MUI框架初级教程

写在前面 本系列文章我们将利用mui基于网易云音乐API实现一个音乐播放器APP&#xff0c;同时基于环形或者融云实现聊天功能。作为本系列文章的第一篇&#xff0c;本文会详细讲解html5中管理应用窗口界面的Webview模块的用法&#xff0c;因为是初级教程篇不过多讲解原理部分&…

MUI框架的基本使用

要使用MUI框架&#xff0c;在Hbuilder中必须新建HTML5 APP&#xff0c;并且创建MUI项目&#xff0c;Hbuilder会自动生成代码 MUI页面的使用&#xff1a; <!DOCTYPE html> <html> <head><meta charset"utf-8"><meta name"viewport&…

MUI框架开发APP详解,一篇就够了

MUI框架开发APP详解&#xff0c;一篇就够了 1.MUI简介2.下载安装hbuilderx3.新建一个5app项目4.制作首页首页头部首页主体 5.制作底部选项卡6.H5plus使用设置页面样式蜂鸣 7.app打包发布基础配置图标配置发行 1.MUI简介 最接近原生APP体验的高性能前端框架 追求性能体验&…

Flask第五天-Mui+HTML5PLUS介绍、APP开发环境、MUI+HMTL5PLUS登录页面、Mui.post实现post请求、Mui.fire

一、MUI框架&#xff08;前端UI框架&#xff09; &#xff08;一&#xff09;MUI框架简介及优劣势分析&#xff1a; 1.MUI基本介绍及优劣势分析 MUI是一套前端框架&#xff0c;由DCLOUD公司研发而成&#xff0c;提供大量H5和js语言组成的组件&#xff0c;大大提高了开发效率&…

Eclipse修改字体大小

字体调整大小1.打开eclipse&#xff0c;点击“window” 2.在下拉菜单中展开找到“preferences”&#xff0c;在左边菜单中点击“general”&#xff0c;找到后展开“appearance”。 3.选择“colors and fonts”。 4.找到basic&#xff0c;点击Text Font&#xff0c;双击鼠标右…

eclipse字体大小设置

eclipse字体大小设置 ①点击菜单上的Window窗口 ②点击Preferences选项 ③General→Appearance→Colors and Fonts ④选中Text Font ⑤点击Edit ⑥更改字体大小