QMUI 2 终于来了

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

这个版本主要是作了如下几个主要修改:android

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

首先要说的是,这个版本与 1.x 版本并不彻底兼容,有不少资源的增删改和组件接口与实现的变动,因此升级到 2.x 版本可能须要稍费一点时间,特别是资源配置的变动,可能致使虽然编译没问题,可是UI显示却不正确的现象。 (特别是在文档尚未完善的状况下,这个锅我背了,但仍是不可能那么快完善)git

引入 QMUI 2

def qmui_version = '2.0.0-alpha01'
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。github

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

Dark Mode / 换肤

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

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

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

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

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

常规使用方式, 在 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 来设置呢? 有如下方式:

  • 若是你采用的是 xml, 能够经过 QMUI 提供的 qmui_skin_xxx 的设置项来设置你 skin。
  • 若是你想在 java 代码中设置 skin, 那么须要采用 QMUISkinValueBuilder 来构建 value, 再经过 QMUISkinHelper.setSkinValue 来设置,稍显复杂,若是经过是 kotlin 的话,QMUI 提供了 View.skin 方法,能够快速实现。
  • 还有一种尚在开发的方式, 我把它叫作 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 。

本来连接: blog.cgsdream.org/2019/12/01/…

相关文章
相关标签/搜索