文章总结： 文档介绍了Android开发中实现沉浸模式的方法，通过添加代码隐藏状态栏和导航栏；使用LaunchedEffect和AnimatedVisibility函数创建开屏动画，实现淡入淡出效果；设计登录界面，包括TextField输入账号密码、Button触发登录验证；登录验证函数CheckUser检查输入非空并用Toast显示提示；最后在MainActivity中调用这些函数。建议开发者复制代码到AndroidStudio运行，并尝试其他动画效果。 综合评分： 76 文章分类： 移动安全,安全开发,安全培训,应用安全

【Android学习笔记】第5课 阶段实战——开屏动画与登录页面设计

原创

网安小杨

网络安全小杨

2025年12月14日 19:51 浙江

前面我们学习了Android UI编程中的线性布局及Text、TextField、Icon、Image等组件，这节课我们小试牛刀，尝试用这些布局和组件设计一个开屏动画和登录界面。

一、沉浸模式

正常情况下，Android应用程序的界面包括上部的状态栏、底部的导航栏等多个系统元素，如下图所示：

所谓沉浸模式，就是通过隐藏状态栏、导航栏及实现透明效果等措施，从而给用户提供一个全屏界面，一种完全沉浸的体验。这种模式在手游、开屏动画中经常使用。

设置沉浸模式的方法很多，也很简单，因为最新版的Android Studio在创建项目时，默认的主题就是NoActionBar：

我们只需要在MainActivity的SetContent上方，添加一行代码，即可实现沉浸模式，代码见下图：

是不是So Easy？当然还有其他方法，你也可以尝试尝试。

二、开屏动画

此处设置沉浸模式，是为了实现开屏动画效果。我们在打开微信时，就有一个全屏显示的图片，稍等片刻就会消失，然后出现登录界面。我们今天要设计的开屏动画，就是下面这个图片，像素不能太低，尺寸不能太小。将这个图片命名为wx，并复制粘贴到项目的Drawable目录里。

然后我们开始编写@Composable函数，命名为StartImage，全部代码如下：

该函数代码共3部分，解释如下：

1、声明一个状态变量isVusible，初始值为true。

2、调用LanchedEffect函数，判断isVisible的值：当值为true时，延迟3秒，变为false。

3、调用AnimatedVisibity函数，该函数有3个参数：visible的值为true或false，决定是否显示所包含的组件；enter的值为fadeIn，即淡入，也就是所包含的组件由模糊逐渐变清晰；exit的值为fadeOut，即淡出，也就是所包含的组件由清晰逐渐变模糊。该函数包含一个Image组件，用于显示Drawable目录下的wx图片。

这样，淡入淡出的开屏动画就设计完毕了。其实AnimatedVisibity函数的enter和exit参数还有其他的值可供选择，能实现其他的动画效果，请自行尝试。

三、登录界面

打开应用程序，显示开屏图片，3秒后状态变量isVisible变为false，开屏图片消失，出现登录界面，下面我们来编写这个登录界面。

这也是个@Composableb函数，我们将其命名为Login，代码如下：

代码有点长，但并不复杂，后面我们还要做进一步的优化。解释如下：

1、声明3个状态变量，其中uid是用户输入的账号，默认值为空；pwd是用户输入的密码，默认值也为空；contex是应用的上下文，通过LocalCoutext.current获取当前的上下文。

2、接下来是个Column布局，该布局的大小是fillMaxSize,所包含的组件垂直和水平居中。

3、Column布局所包含的组件，从上到下依次为：

（1）Image组件，用于显示学校的logo，大小为150dp，形状为圆形。请提前将命名为school的图片拷贝到Drawable目录下。

（2）Spacer组件，就是一个间隔，高度为20dp。

（3）TextField组件，带有Grey颜色的边框，边框4个角稍和弧度。该组件用于输入账号，用户输入的信息将赋值给状态变量uid。

（4）Spacer组件，高度为8dp。

（5）TextField组件，用于输入密码，用户输入的信息将赋值给状态变量pwd。该组件与前面的TextField不同之处是带有visualTransformation参数，输入的密码显示为*号，用于保密。

（6）Spacer组件，高度为8dp。

（7）Button组件，按钮上面显示“点击登录”文字。这个组件之前没有介绍过，请多关注。它带有2个参数：modifier用于设置尺寸和边距；onClick用于点击时调用CheckUser函数，并传递uid、pwd、context3个参数。CheckUser函数后面再做介绍。

（8）Spacer组件，高度为50dp。

（9）Row布局。这个线性布局中的行布局，所包含的组件在水平方向上从左往右排列。Modifier.fillMaxWidth用于设置行宽，horizontalArrangement用于设置行对齐方式。该组件内包含两个Text组件，分别用来显示“忘记密码”和“注册账号”。这两项功能我们以后再做设计。

四、验证登录

上面的Button组件在点击时，将调用CheckUser函数，用于检验用户的登录信息。我们来编写这个函数。

这个函数是普通函数，不是用于构建UI界面的，所以不能用@Compose修饰。该调用函数需要传递3个参数，分别是String类型的uid、String类型的pwd和Context类型的context。

函数体内是if……else条件语句，先对uid和pwd做非空判断，即账号或密码任意一个为空时给出提示，用Toast显示。Toast.makeText也是新知识点，请注意一下它的用法。

如果账号和密码都不为空，则通过Toast给出用户输入的账号和密码。其实真正开发时不会用Toast显示用户信息，而是查询后台数据库，判断是否是合法用户。目前我们还没有做后端开发，暂时这么简单处理。

五、函数调用

本节课我们编写了两个@Composable函数StartImage()和Login()，一个普通函数CheckUser()。CheckUser在Login中的单击Button时调用，另外两个@Composable函数在哪里调用呢？我们回到MainActivity，在项目主题里添加一个Column布局，布局里调用StartImage和Login函数即可，代码如下图红框所示：

至此，我们就完成了代码的编写，但最终效果如何呢？请打开模拟器，让代码跑起来吧。

左上为开屏动画，等3秒后画面消失，出现右上的登录界面。不输入任何信息，直接点一下“点击登录”按钮，会弹出提示“账号或密码不能为空”。如果输入信息，会弹出提示框，显示输入的账号和密码：

跟预计的基本一致，Very Good！Coding up!

查看原文：《【Android学习笔记】第5课 阶段实战——开屏动画与登录页面设计》