Android MVVM框架使用(十三)UI更新 (App启动白屏优化、适配Android10.0深色模式)

简介: Android MVVM框架使用(十三)UI更新 (App启动白屏优化、适配Android10.0深色模式)

前言


在上一篇文章中完成了对记事本的功能增强,本篇文章中就着重来说一下UI方面的内容。先看看本篇文章的效果图


518e95edb22e4c769507756202fee085.gif

3839a09fd0e244a5b3f2ad1682e68891.gif


你也可以下载体验一下。


b5efa816c205488798a711b7deb8e432.png


正文


 我的MVVM-Demo的启动也是有白屏的,我们先观察一下啥样。



你多观察一下,会发现有一个短暂的白屏。


4f8a33f14aa04e308d5b6a2d0a62175e.gif


一、启动白屏优化


 首先我们处理白屏的问题,首先我想的是更改一下启动页的样式,之前是一片白,现在我改成绿色的,绿才有安全感,要想代码过得去,样式就得带点绿,手动滑稽。


那么首先在colors.xml中增加一个颜色值:


<color name="green">#2EAD4D</color>


1. 样式文件


这里我们需要重新设计一下一个启动页的样式,在写样式之前,先写样式文件,在drawable下新增一个splash_bg.xml,里面的代码如下:


<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@color/green"/>
    <item>
        <bitmap
            android:gravity="center"
            android:src="@drawable/ic_mvvm_logo_white" />
    </item>
</layer-list>


这里的图标没有的可以去我源码里面去拿,然后在themes.xml中新增一个样式。


  <style name="SplashThemePlus" parent="Theme.MaterialComponents.DayNight.NoActionBar">
        <item name="colorPrimary">@color/green</item>
        <item name="colorPrimaryVariant">@color/green</item>
        <item name="statusBarBackground">@color/green</item>
        <item name="android:statusBarColor">@color/green</item>
        <item name="android:windowBackground">@drawable/splash_bg</item>
    </style>


然后设置到AndroidManifest.xml中,设置一下:


fd5c327d1a0e49ffb7fc364b0d7e13fd.png


2. 修改页面


下面修改activity_splash.xml中的代码:


<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".ui.activity.SplashActivity">
    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Model · View · ViewModel"
        android:textColor="@color/white"
        android:textSize="24sp"
        android:textStyle="bold"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.9" />
    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="初学者-Study"
        android:textColor="@color/white"
        android:textSize="18sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView2"
        app:layout_constraintVertical_bias="0.35000002" />
</androidx.constraintlayout.widget.ConstraintLayout>


这里只有两个TextView。下面回到SplashActivity,修改代码如下:


@AndroidEntryPoint
public class SplashActivity extends BaseActivity {
    @Inject
    MVUtils mvUtils;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(ActivitySplashBinding.inflate(getLayoutInflater()).getRoot());
        new Handler().postDelayed(() -> jumpActivityFinish(mvUtils.getBoolean(Constant.IS_LOGIN) ? MainActivity.class : LoginActivity.class),400);
    }
}


代码比之前要更简洁一些了。运行一下:


518e95edb22e4c769507756202fee085.gif


还记得之前的页面的主要颜色是Android这个版本默认的紫色,现在都改成绿色,自行改动,改起来很简单,改完之后,运行一遍看看,检查一下,感觉改成绿色比原来这个紫色要好看很多。


二、适配深色模式


 在Android10.0中推出了深色模式,深色模式有以下的优点:更好的用户体验、减少耗电量为弱视以及对强光敏感的用户提高可视性。


那么我们的App怎么去适配这个模式呢?首先我们观察一下项目的res文件夹,切换到Project模式。


4ce5de2ca81b4e2389115f1688c4040c.png


 你会发现这里有一个value-night文件夹,它里面只有一个themes.xml,简单明了的说就是当你的手机系统打开了深色模式的开关,你的App就会自动去使用values-night下的资源文件,包括样式,颜色,文字。这里面有很重要的一点,那就是你的资源ID在普通模式下和深色模式下需要一致,内容可以不一致,也可以一致。


如果你不想去适配深色模式,你希望深色模式和正常模式都一样,很简单,你把values下的内容再复制一份到values-night中,将values-night中的内容全部覆盖掉。


下面来说一下适配的要点。


1. 颜色


 深色模式下最重要的一点就是设置颜色和主题样式,当前我们是给了一个green的色值作为主题颜色,下面我们改一下,这将是一个比较繁琐的工作,但是做完之后,你会觉得很Nice…


 我改是直接拿这个MVVM-Demo去进行改动的,改动后的源码也会提交的GitHub上,因此在后面的内容中我不会每一个地方都讲一遍,毕竟实在是太多了,而且改起来比较繁琐,这里也奉劝一下,如果你的项目一开始没有做这个适配的话,而你的颜色值样式什么的都没有很规范的话,不建议你直接在自己的项目进行操作,要花很多时间去改。


 预防针我已经打过了,下面进行正式的改动,首先呢?是颜色,也就是colors.xml,深色模式下会使用values-night中的资源文件,因此我们需要在values-night下面也创建一个colors.xml。


5d87081ee9e643dc834b0d3d3f99177a.png


下面我简单用两张图说明一下:


9128839e00ce4b55be3763bb13859fd7.png

659cfa010f91465eb652b698bad460f1.png

第一张图是正常模式,第二张图是深色模式。两个资源的name一样,value不一样,也就是说正常情况下你的颜色是绿色,深色模式下就是黑色。


而在你的themes.xml中使用的就是这个colors.xml中的色值。


2. 样式


 有了颜色之后,根据颜色设置的样式也会有相应的改变,而你要做的就是先通过你values下的themes.xml去设置好需要的颜色,然后再把这个文件themes.xml复制到values-night下,覆盖掉原有的themes.xml即可。下面我把values-night下的themes.xml的代码贴一下:


<resources xmlns:tools="http://schemas.android.com/tools">
    <!-- Base application theme. -->
    <style name="Theme.MVVMDemo" parent="Theme.MaterialComponents.DayNight.NoActionBar">
        <!-- Primary brand color. -->
        <item name="colorPrimary">@color/color_primary</item>
        <item name="colorPrimaryVariant">@color/color_primary_variant</item>
        <item name="colorOnPrimary">@color/color_on_primary</item>
        <!-- Secondary brand color. -->
        <item name="colorSecondary">@color/color_secondary</item>
        <item name="colorSecondaryVariant">@color/color_secondary_variant</item>
        <item name="colorOnSecondary">@color/color_on_secondary</item>
        <!-- Status bar color. -->
        <item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</item>
        <item name="android:forceDarkAllowed" tools:targetApi="q">true</item>
        <!-- Customize your theme here. -->
    </style>
    <!-- Base application theme. -->
    <style name="HomeTheme" parent="Theme.MaterialComponents.DayNight.NoActionBar">
        <!-- Primary brand color. -->
        <item name="colorPrimary">@color/color_primary</item>
        <item name="colorPrimaryVariant">@color/color_primary_variant</item>
        <item name="colorOnPrimary">@color/color_on_primary</item>
        <!-- Secondary brand color. -->
        <item name="colorSecondary">@color/color_secondary_variant</item>
        <item name="colorSecondaryVariant">@color/color_secondary_variant</item>
        <item name="colorOnSecondary">@color/white</item>
        <!-- Status bar color. -->
        <item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</item>
        <!-- Customize your theme here. -->
    </style>
    <style name="SplashTheme" parent="Theme.MaterialComponents.DayNight.NoActionBar">
        <item name="colorPrimary">@color/color_primary</item>
        <item name="android:statusBarColor">@color/color_primary</item>
        <!-- Secondary brand color. -->
        <item name="colorSecondary">@color/color_secondary_variant</item>
        <item name="colorSecondaryVariant">@color/color_secondary_variant</item>
        <item name="colorOnSecondary">@color/white</item>
    </style>
    <style name="SplashThemePlus" parent="Theme.MaterialComponents.DayNight.NoActionBar">
        <item name="colorPrimary">@color/color_primary</item>
        <item name="colorPrimaryVariant">@color/color_primary_variant</item>
        <item name="statusBarBackground">@color/color_primary</item>
        <item name="android:statusBarColor">@color/color_primary</item>
        <item name="android:windowBackground">@drawable/splash_bg</item>
    </style>
    <!--主页面样式-->
    <style name="MainTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/color_primary</item>
        <item name="colorPrimaryDark">@color/color_primary</item>
        <item name="colorAccent">@color/white</item>
        <item name="android:statusBarColor">@android:color/transparent</item>
    </style>
    <!--图片页面样式-->
    <style name="ImageTheme" parent="Theme.MaterialComponents.DayNight.NoActionBar">
        <item name="android:background">@android:color/transparent</item>
        <item name="android:statusBarColor" tools:targetApi="lollipop">@android:color/transparent
        </item>
        <item name="android:windowTranslucentStatus">false</item>
        <item name="android:windowTranslucentNavigation">true</item>
    </style>
    <!-- 圆角图片 -->
    <style name="roundedImageStyle">
        <item name="cornerFamily">rounded</item>
        <item name="cornerSize">24dp</item>
    </style>
    <!-- 圆角图片 -->
    <style name="roundedImageStyle_6">
        <item name="cornerFamily">rounded</item>
        <item name="cornerSize">6dp</item>
    </style>
    <!-- 圆形图片 -->
    <style name="circleImageStyle">
        <item name="cornerFamily">rounded</item>
        <item name="cornerSize">50%</item>
    </style>
    <style name="loading_dialog" parent="android:style/Theme.Dialog">
        <item name="android:windowFrame">@null</item>
        <item name="android:windowNoTitle">true</item>
        <item name="android:windowBackground">@drawable/shape_bg_radius_24</item>
        <item name="android:windowIsFloating">true</item>
        <item name="android:windowContentOverlay">@null</item>
    </style>
    <!--自定义对话框-->
    <style name="dialog" parent="@android:style/Theme.Dialog">
        <item name="android:windowFrame">@null</item>
        <item name="android:windowIsFloating">true</item>
        <item name="android:windowIsTranslucent">true</item>
        <item name="android:windowBackground">@android:color/transparent</item>
        <item name="android:backgroundDimEnabled">true</item>
        <item name="android:windowNoTitle">true</item>
    </style>
    <!--对话框弹出和消失动画-->
    <style name="dialog_from_bottom_anim">
        <item name="android:windowEnterAnimation">@anim/dialog_from_bottom_anim_in</item>
        <item name="android:windowExitAnimation">@anim/dialog_from_bottom_anim_out</item>
    </style>
    <style name="dialog_from_top_anim">
        <item name="android:windowEnterAnimation">@anim/dialog_from_top_anim_in</item>
        <item name="android:windowExitAnimation">@anim/dialog_from_top_anim_out</item>
    </style>
    <style name="dialog_scale_anim">
        <item name="android:windowEnterAnimation">@anim/dialog_scale_anim_in</item>
        <item name="android:windowExitAnimation">@anim/dialog_scale_anim_out</item>
    </style>
    <style name="dialog_from_right_anim">
        <item name="android:windowEnterAnimation">@anim/dialog_from_right_anim_in</item>
        <item name="android:windowExitAnimation">@anim/dialog_from_right_anim_out</item>
    </style>
    <style name="BottomSheetDialogStyle" parent="Theme.Design.BottomSheetDialog">
        <item name="android:windowFrame">@null</item>
        <item name="android:windowIsFloating">true</item>
        <item name="android:windowIsTranslucent">true</item>
        <item name="android:background">@android:color/transparent</item>
        <item name="android:backgroundDimEnabled">true</item>
    </style>
    <style name="BottomSheetDialogStyle_Light" parent="Theme.Design.BottomSheetDialog">
        <item name="android:windowFrame">@null</item>
        <item name="android:windowIsFloating">true</item>
        <item name="android:windowIsTranslucent">true</item>
        <item name="android:background">@android:color/transparent</item>
        <item name="android:backgroundDimEnabled">false</item>
    </style>
</resources>


下面我们用一个xml来举例说明


3. 修改背景


就拿登录页面的xml来说明,现在是这样的。


c7a762974a934c428480df3afc468d99.png


我们在设置页面的背景颜色的时候就要想到它在默认情况下和在深色模式的区别。


9288c7ca6b704ef29dfbb52d594c4815.png


将鼠标悬停在这个颜色值上会出现一个弹窗,告诉你这个页面在默认和深色模式下的背景颜色的色值,通过这个你就知道你的改动有没有效果。其他的颜色就同理了,当然了也有一些颜色是不变的,比如这个登录按钮的登录两个字,现在是白色,在深色模式下它也是白色。

a4a28323f6974f68838a655d30cb3ab5.png



不过这里你要是不去设置颜色值的话,就需要在theme.xml去设置了。像这种常规的文字颜色,背景颜色改动起来其实是很简单的。那么我们难度上升一下,item颜色要怎么去改。


4. 菜单适配


 这张图我想你应该不陌生,如果你是一篇一篇看过来的话,这是深色模式下的样子。


141950dd77534e97b3d2587716f4f5c1.png


上面的头像那个部分实际上我只改动了背景颜色,因为默认是绿色。下面的菜单Item,需要改动了。这里的改动其实不在nav_menu.xml中


338f75be86f64fd1ac7450665b5ccf45.png


而在NavigationView中,如下图所示:


b1051d77f3a44d429979e1168e0cd3e7.png


通过itemIconTint改图标颜色,通过itemTextColor改文字颜色即可。


5. BottomNavigationView


 在App的HomeActivity中是通过BottomNavigationView去进行底部导航的,那么它的item有一个选中的效果,还有未选中的效果,同时还需要适配深色模式,这要怎么搞呢?


首先在res下创建一个color文件夹,在这个文件夹里我们可以创建用于控制颜色变化的资源,比如新建一个bvn_color_selector.xml,里面的代码如下:


<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="@color/green" android:state_checked="true"/>
    <item android:color="@color/bnv_check_color" android:state_checked="false"/>
</selector>

504c4714abdb490aa2dfe89c49b57cdc.png


那么我们只要在activity_home.xml中使用它就行了,如下图所示:


58ee934b0f0a47078b276fe2b944eff0.png


同时我还把背景颜色改掉了。


6. TabLayout


7eece6c485ac4aaaa351d7f15f58147b.png


这里我们只需要改一下文字颜色和下划线颜色,你可以能会问,没有改背景颜色,这取决于它的父布局,你只需要改父布局的背景颜色就行了。


7. FloatingActionButton


浮动按钮的改动有一点特殊,如果你的样式主题中是NoActionBar,那么你直接通过tint去改变图标颜色是不行的,而是通过页面的样式的colorOnSecondary属性去设置的图标颜色,这里在深色模式下改成白的。


76b42b2513234988986bfc05c6543fb3.png


同样你需要改一下按钮的背景颜色,如下图所示


78b98f6f7f604a87b9f51d70aa5d31de.png


8. 深色模式判断


 有时候我们需要根据当前是否为深色模式去设置一些参数,比如记事本页面的状态栏,在默认情况下是黑色的深色模式,在深色模式下需要状态栏浅色模式,这里就需要判断一下,我们可以写一个方法在BaseActivity中。方法代码如下:


  protected boolean isNight() {
        UiModeManager uiModeManager = (UiModeManager) context.getSystemService(Context.UI_MODE_SERVICE);
        return uiModeManager.getNightMode() == UiModeManager.MODE_NIGHT_YES;
    }


这个方法你同样可以写在BaseFragment中,然后去NoteActivity和EditActivity中调用。


4bf194e7022641c2be97502ef8275003.png


9. WebView设置


在WebView中也可以设置是否为夜间模式。


2412591a1c30472382d0d117b871dcf2.png


10. 地图设置


 之前我们在App中设置了地图,那么同样也是可以根据这个判断去设置当前地图的样式。


fafdbc9ed675498abff401e3a9cc4605.png


这样即可。下面我们来看一下深色模式的效果图。


3839a09fd0e244a5b3f2ad1682e68891.gif




相关文章
|
7天前
|
存储 JavaScript 开发者
探索鸿蒙新世界:ArkUI框架实战指南,解锁HarmonyOS应用UI设计的无限可能!
【10月更文挑战第19天】ArkUI框架是华为鸿蒙系统中用于开发用户界面的核心工具,支持ArkTS和eTS两种开发语言。本文介绍了ArkUI的基本概念、组件使用、布局管理和状态管理,通过示例代码帮助开发者轻松构建美观、高效的跨设备UI。
30 3
|
24天前
|
前端开发 JavaScript 测试技术
android做中大型项目完美的架构模式是什么?是MVVM吗?如果不是,是什么?
android做中大型项目完美的架构模式是什么?是MVVM吗?如果不是,是什么?
72 2
|
24天前
|
存储 前端开发 Java
Android MVVM架构模式下如何避免内存泄漏
Android采用MVVM架构开发项目,如何避免内存泄漏风险?怎样避免内存泄漏?
77 1
|
5天前
|
开发框架 人工智能 小程序
小程序常见的 UI 框架
【10月更文挑战第17天】小程序 UI 框架为开发者提供了便捷的工具和资源,帮助他们快速构建高质量的小程序界面。在选择框架时,需要综合考虑各种因素,以找到最适合项目的解决方案。随着技术的不断进步,UI 框架也将不断发展和创新,为小程序开发带来更多的便利和可能性。
12 2
|
7天前
|
存储 前端开发 测试技术
Android kotlin MVVM 架构简单示例入门
Android kotlin MVVM 架构简单示例入门
16 1
|
15天前
|
调度 Android开发 开发者
构建高效Android应用:探究Kotlin多线程优化策略
【10月更文挑战第11天】本文探讨了如何在Kotlin中实现高效的多线程方案,特别是在Android应用开发中。通过介绍Kotlin协程的基础知识、异步数据加载的实际案例,以及合理使用不同调度器的方法,帮助开发者提升应用性能和用户体验。
36 4
|
2月前
|
存储 缓存 编解码
Android经典面试题之图片Bitmap怎么做优化
本文介绍了图片相关的内存优化方法,包括分辨率适配、图片压缩与缓存。文中详细讲解了如何根据不同分辨率放置图片资源,避免图片拉伸变形;并通过示例代码展示了使用`BitmapFactory.Options`进行图片压缩的具体步骤。此外,还介绍了Glide等第三方库如何利用LRU算法实现高效图片缓存。
61 20
Android经典面试题之图片Bitmap怎么做优化
|
14天前
|
缓存 测试技术 C#
使用Radzen Blazor组件库开发的基于ABP框架炫酷UI主题
【10月更文挑战第20天】本文介绍了使用 Radzen Blazor 组件库开发基于 ABP 框架的炫酷 UI 主题的步骤。从准备工作、引入组件库、设计主题、集成到 ABP 框架,再到优化和调试,详细讲解了每个环节的关键点和注意事项。通过这些步骤,你可以打造出高性能、高颜值的应用程序界面。
|
2月前
|
JavaScript
Ant Design Vue UI框架的基础使用,及通用后台管理模板的小demo【简单】
这篇文章介绍了如何使用Ant Design Vue UI框架创建一个简单的后台管理模板,包括创建Vue项目、安装和使用ant-design-vue、以及编写后台管理通用页面的代码和样式。
Ant Design Vue UI框架的基础使用,及通用后台管理模板的小demo【简单】
|
20天前
|
前端开发 开发者 UED
UI 框架:nav-ui&uni-ui&vant
本文档介绍了`nav-ui`、`uni-ui`和`vant`三个UI库的基本使用方法,包括图标、表格和树的使用示例,以及如何在项目中安装和配置这些UI组件。对于`nav-ui`,详细说明了图标组件的安装与使用,包括本地图标和第三方图标库的集成方式。`uni-ui`部分则重点讲解了CSS的使用方法。最后,`vant`部分提供了从项目创建到组件安装的具体步骤,以及如何将下载的组件正确地集成到项目中。