QMUI 2 终于来了

简介: QMUI 2 提了很久很久了,在蜗牛般的开发速度下(加班过多,效率低下),终于来了首个对外版本。

QMUI 2 提了很久很久了,在蜗牛般的开发速度下(加班过多,效率低下),终于来了首个对外版本。 你可以前往官网下载 QMUIDemo 体验体验,然后前往Github 给个 star 吧。


这个版本主要是做了以下几个主要修改:


  1. 1.支持库迁移到 Androidx, 最低支持版本升级到 API 19。
  2. 2.支持夜间模式,QMUI 做得更通用一点,提供了换肤功能。
  3. 3.重构 QMUIPopup 与 QMUITabSegment等组件,提供更丰富的功能。
  4. 4.移除旧的以背景切图来实现分隔线的实现方式与相关资源,采用 QMUILayout 方案为替代。

首先要说的是,这个版本与 1.x 版本并不完全兼容,有很多资源的增删改和组件接口与实现的变更,所以升级到 2.x 版本可能需要稍费一点时间,特别是资源配置的变更,可能导致虽然编译没问题,但是UI显示却不正确的现象。 (特别是在文档还没有完善的情况下,这个锅我背了,但还是不可能那么快完善)

引入 QMUI 2


def qmui_version = '2.0.0-alpha02'
implementation "com.qmuiteam:qmui:$qmui_version"
implementation "com.qmuiteam:arch:$qmui_version"
kapt "com.qmuiteam:arch-compiler:$qmui_version" // use annotationProcessor if java

Androidx


迁移到 androidx 的呼声在 github 上是非常高的,一部分人是想要查看源码方便一点,另一部分人我估计是并不知道 jetifier 的方式可以在编译时将 support 包转换为 androidx。


另一个修改是最低支持版本提升到了 API 19。 目前都 2019 年,我都想直接提升到 API 21 了,但还是不敢太激进,只能慢慢来吧。

Dark Mode / 换肤


Android 10 提供了 Dark Mode 的支持,官方提供了两种实现方式:


  • 1.一种是在 value-night, drawable-night 放置 Dark Mode 资源。 当 Dark Mode 打开时,Activity会被重新创建, 然后从 *-night 目录读取资源。
  • 2.另一种是在 AndroidManifest 文件中为 ActivityconfigChanges 加上 uiMode, 不重新重建 Activity, 而走 onConfigurationChanged。在 onConfigurationChanged 里判断当前 uiMode, 然后做自定义处理。

第一种方式就是简单,但是它有两个弊端:


  • 1.Dark Mode 切换时,它需要重建整个 Activity,一般情况还好,你感知不到重建这个过程,但是如果 View 特别大,单单创建 View 就非常耗时了,那么就会明显感知到黑屏(很多产品喜欢把界面逻辑搞得特别复杂,例如 ViewPager 嵌套 ViewPager, 再嵌套 ViewPager, 而且每个 Pager 都还巨复杂)
  • 2.另外一点就是,既然已经支持一套皮肤,为何不能多支持几套?例如全黑白版(伪墨水屏)

因此,QMUI 推荐采取第二种方式,因此 QMUI 提供了换肤功能的支持,夜间模式只是在 onConfigurationChanged 时调用一下换肤接口而已。 当然,开发者也可以创建 *-night 文件夹,并在里面配置 qmui 的各种 color/drawable 设置,以第一种方式去完成夜间模式的适配。 QMUI 只是将组建资源取值 Attr 化,使用何种方式,都是由使用者自己决定。


常规使用方式, 在 Application.onCreate() 里加入你的 skin 支持项:

QMUISkinManager skinManager = QMUISkinManager.defaultInstance(this);
skinManager.addSkin(1, R.style.app_skin_blue);
skinManager.addSkin(2, R.style.app_skin_dark);
skinManager.addSkin(3, R.style.app_skin_white);
skinManager.changeSkin(isDarkMode ? 2 : 1);

R.style.app_skin_blueR.style.app_skin_darkR.style.app_skin_white 等就是不同 skin 下的配置, 然后在 Application.onConfigurationChanged 里监听 uiMode 的信息:

if((newConfig.uiMode & Configuration.UI_MODE_NIGHT_MASK) == Configuration.UI_MODE_NIGHT_YES){
    QDSkinManager.changeSkin(QDSkinManager.SKIN_DARK);
}else if(QDSkinManager.getCurrentSkin() == QDSkinManager.SKIN_DARK){
    QDSkinManager.changeSkin(QDSkinManager.SKIN_BLUE);
}

当然,对于启动 LauncherActivity 的背景,是没有机会走到 QMUI 的换肤机制的,因此要退化到第一种 Dark Mode 的实现方案。


那么业务上我们如何对 View 来设置呢? 有以下方式:

  • 1.如果你采用的是 xml, 可以通过 QMUI 提供的 qmui_skin_xxx 的设置项来设置你 skin。
  • 2.如果你想在 java 代码中设置 skin, 那么需要采用 QMUISkinValueBuilder 来构建 value, 再通过 QMUISkinHelper.setSkinValue 来设置,稍显复杂,如果通过是 kotlin 的话,QMUI 提供了 View.skin 方法,可以快速实现。
  • 3.还有一种尚在开发的方式, 我把它叫做 skin-maker。 目的是可以让设计师通过点点点的方式进行 skin 设置,然后导出一份配置文件,放到工程里,通过字节码注入完成 skin 设置,这样可以将整个配置工作交给设计,不用每做个新业务都要考虑换肤。 理想是美好的,现实是目前做了一个 Demo 版,有兴趣的可以在 QMUIDemo 上体验体验,流程是通的,但还有很多问题没解决。

QMUIPopup 重写


QMUIPopup 之前的实现是比较糟糕的,采用了 .9.png 的方式实现了背景阴影,因为阴影是占位置的,所以边缘距离过大,如果 anchorView 在很边缘的位置,会出现箭头错位或者显示不理想的情况,很多人踩了这个坑,而解约方案只能是提供一个阴影小一点的背景图。


因此,这个版本完全重写了它,采用了 QMUILayout 的方式实现阴影,所以你想完全贴边也是可以的。 除此之外, 2.x 版本提供了 QMUIQuickActionQMUIFullScreenPopup , 前者样式来源于微信读书阅读器的快捷菜单,当然实现不一样(虽然微信读书上的那个也是我写的,但是当年的实现,不忍直视)。 后者可以用于实现微信读书各种想法浮层,去年读书各种浮层兴起,并且还有键盘交互,我算是有一些心得吧,也提取了出来。


一个简单的使用例子:

QMUIPopups.popup(getContext(), QMUIDisplayHelper.dp2px(getContext(), 250))
        .preferredDirection(QMUIPopup.DIRECTION_BOTTOM)
        .view(textView)
        .edgeProtection(QMUIDisplayHelper.dp2px(getContext(), 20))
        .offsetX(QMUIDisplayHelper.dp2px(getContext(), 20))
        .offsetYIfBottom(QMUIDisplayHelper.dp2px(getContext(), 5))
        .shadow(true)
        .arrow(true)
        .animStyle(QMUIPopup.ANIM_GROW_FROM_CENTER)
        .onDismiss(new PopupWindow.OnDismissListener() {
            @Override
            public void onDismiss() {
                Toast.makeText(getContext(), "onDismiss", Toast.LENGTH_SHORT).show();
            }
        })
        .show(v);

组织形式比以前的舒服多了吧。

更多修改


当然,除了 QMUIPopup 的重写,其它组件也都有很大的改动:

1.QMUITabSegment 大面积重写,提供了两张图片切换、不同 Tab 不同设置等功能,扩展也更加灵活。

2.QMUIBottomSheet.BottomListSheetBuilder 添加了很多人期待的居中设置

3.QMUICommonListItemView 更改父类为 ConstraintLayout, 重写布局,可以设置高度 wrap_content 以支持超长标题或副标题

4.提供了 QMUISlider 组件

5....

最后,目前的版本没有经过充分的测试和实践,可能会存在比较多的问题,欢迎大家提 issue。

目录
相关文章
|
XML Java Android开发
Android Studio开发APP启动程序时开屏简单动画效果快速有效解决方案
Android Studio开发APP启动程序时开屏简单动画效果快速有效解决方案
1521 0
Android Studio开发APP启动程序时开屏简单动画效果快速有效解决方案
|
存储 设计模式 XML
QMUI实战(四)— QMUI 换肤的实现
QMUI 2 一个最大的特色就是支持了换肤(夜间模式),今天就来聊聊 QMUI 换肤的使用与实现。
894 0
|
10月前
|
存储 安全 Java
Android DataStore:安全存储和轻松管理数据
Android DataStore:安全存储和轻松管理数据
|
3月前
|
XML Java Android开发
Android App手势冲突处理中上下左右滑动的处理以及侧滑边缘菜单的讲解及实战(附源码 可直接使用)
Android App手势冲突处理中上下左右滑动的处理以及侧滑边缘菜单的讲解及实战(附源码 可直接使用)
257 0
|
Android开发
Android | Fragment.setUserVisibleHint()懒加载过时问题优化
Fragment.setUserVisibleHint()懒加载过时问题优化
471 0
|
前端开发 Android开发 iOS开发
QMUI Android 该凉凉了
在微信听书最新的版本,累死累活的开发中,我还是把 Jetpack Compose 引入了工程中, 在新的原生界面开发中,用 Compose 来写 UI 了, 贼特么舒服,所以说, QMUI Android 要么重做出一个 Compose 版本,要么就该删库跑路了。
559 0
|
XML 缓存 Android开发
QMUI实战(二)—Activity 和 Fragment,我们该选择谁?
在一开始,官方只提供了 Activity 来作为 UI 界面的载体,因此我们也别无选择,只能用它。而在 Android 3.0 后,Fragment 也面世了,它一开始是用于适配平板的,以邮件列表与详情的适配为例,手机端够小,因此开始展示列表,点击进入详情,而平板够大,则可以列表显示在左侧,详情显示在右侧,点击列表只是切换详情。对于这种适配场景,列表页和详情页必须在同一个 Activity 里了,而这便是我所知道的 Fragment 诞生的场景了。
165 0
|
Android开发
Android 中ViewPager嵌套RecyclerView出现滑动冲突的解决方案
Android 中ViewPager嵌套RecyclerView出现滑动冲突的解决方案
838 0
|
测试技术 Android开发 Kotlin
QMUI实战(一)—为何我们要使用 LauncherActivity?
QMUI 2 发布了,但是里面换肤等相关的很多东西,如果不讲,那么很多人估计就只能复制粘贴下 QMUIDemo 的代码,而并不能用好 QMUI, 或者是通过 QMUI 来提升自己的 UI 开发能力,毕竟现在很多 Android 开发都是轻 UI 而重数据流,遇到需要复杂 UI 的地方,在 Github 上随便找个组件套上去就行了,如果找得到刚好符合需求的还好,如果找到的不是那么切合需求,那一天的状态很可能就是“一壶茶、一包烟、几个间距颜色调一天”了。
194 0
|
XML Java BI
QMUILayout, 让 UI 开发更简单
在 Android UI开发过程中,我们会觉得非常繁琐的事情是什么呢?分隔线、圆角、边框、阴影、点击态等,在以往的实践中,我们都是通过 drawable 去实现的,非常麻烦。以分隔线为例,如果左右都打通,那还能复用,但现在的设计师都喜欢左边或右边有一定的 inset,而 inset 的值并非一成不变的,这不经意间就使得项目添加了数不清的 drawable,因此目前大多数人都开始尝试不使用 drawble 去解决这些问题了,QMUI 也不例外。
218 0