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




相关文章
|
1月前
|
XML Java 数据库
安卓项目:app注册/登录界面设计
本文介绍了如何设计一个Android应用的注册/登录界面,包括布局文件的创建、登录和注册逻辑的实现,以及运行效果的展示。
140 0
安卓项目:app注册/登录界面设计
|
8天前
|
数据采集 网络协议 算法
移动端弱网优化专题(十四):携程APP移动网络优化实践(弱网识别篇)
本文从方案设计、代码开发到技术落地,详尽的分享了携程在移动端弱网识别方面的实践经验,如果你也有类似需求,这篇文章会是一个不错的实操指南。
21 1
|
12天前
|
算法 JavaScript Android开发
|
22天前
|
Java 程序员 API
Android|集成 slf4j + logback 作为日志框架
做个简单改造,统一 Android APP 和 Java 后端项目打印日志的体验。
86 1
|
2月前
|
Java 数据库 Android开发
一个Android App最少有几个线程?实现多线程的方式有哪些?
本文介绍了Android多线程编程的重要性及其实现方法,涵盖了基本概念、常见线程类型(如主线程、工作线程)以及多种多线程实现方式(如`Thread`、`HandlerThread`、`Executors`、Kotlin协程等)。通过合理的多线程管理,可大幅提升应用性能和用户体验。
121 15
一个Android App最少有几个线程?实现多线程的方式有哪些?
|
2月前
|
存储 开发工具 Android开发
使用.NET MAUI开发第一个安卓APP
【9月更文挑战第24天】使用.NET MAUI开发首个安卓APP需完成以下步骤:首先,安装Visual Studio 2022并勾选“.NET Multi-platform App UI development”工作负载;接着,安装Android SDK。然后,创建新项目时选择“.NET Multi-platform App (MAUI)”模板,并仅针对Android平台进行配置。了解项目结构,包括`.csproj`配置文件、`Properties`配置文件夹、平台特定代码及共享代码等。
159 2
|
2月前
|
XML Android开发 数据格式
🌐Android国际化与本地化全攻略!让你的App走遍全球无障碍!🌍
在全球化背景下,实现Android应用的国际化与本地化至关重要。本文以一款旅游指南App为例,详细介绍如何通过资源文件拆分与命名、适配布局与方向、处理日期时间及货币格式、考虑文化习俗等步骤,完成多语言支持和本地化调整。通过邀请用户测试并收集反馈,确保应用能无缝融入不同市场,提升用户体验与满意度。
102 3
|
2月前
|
前端开发 Java 数据库
💡Android开发者必看!掌握这5大框架,轻松打造爆款应用不是梦!🏆
在Android开发领域,框架犹如指路明灯,助力开发者加速应用开发并提升品质。本文将介绍五大必备框架:Retrofit简化网络请求,Room优化数据库访问,MVVM架构提高代码可维护性,Dagger 2管理依赖注入,Jetpack Compose革新UI开发。掌握这些框架,助你在竞争激烈的市场中脱颖而出,打造爆款应用。
344 3
|
2月前
|
Java 数据库 Android开发
一个Android App最少有几个线程?实现多线程的方式有哪些?
本文介绍了Android应用开发中的多线程编程,涵盖基本概念、常见实现方式及最佳实践。主要内容包括主线程与工作线程的作用、多线程的多种实现方法(如 `Thread`、`HandlerThread`、`Executors` 和 Kotlin 协程),以及如何避免内存泄漏和合理使用线程池。通过有效的多线程管理,可以显著提升应用性能和用户体验。
69 10
|
1月前
|
安全 网络安全 Android开发
深度解析:利用Universal Links与Android App Links实现无缝网页至应用跳转的安全考量
【10月更文挑战第2天】在移动互联网时代,用户经常需要从网页无缝跳转到移动应用中。这种跳转不仅需要提供流畅的用户体验,还要确保安全性。本文将深入探讨如何利用Universal Links(仅限于iOS)和Android App Links技术实现这一目标,并分析其安全性。
221 0

热门文章

最新文章