Android MotionLayout：以最简单的方式创建类似Twitter的“福师大APP”的启动动画(1)

最新推荐文章于 2024-07-25 20:49:13 发布

2401_84149368

最新推荐文章于 2024-07-25 20:49:13 发布

阅读量558

点赞数 26

分类专栏：程序员文章标签： android

本文链接：https://blog.csdn.net/2401_84149368/article/details/138052070

版权

程序员专栏收录该内容

291 篇文章 0 订阅

订阅专栏

运行效果如下：

在这里插入图片描述

清理：

要删除工具栏，导航栏，状态栏和文本并向背景添加颜色，请执行以下操作：

打开styles.xml
将基础主题的父级从_Theme.AppCompat.Light.DarkActionBar替换_为_Theme.AppCompat.Light.NoActionBar。_（如果您此时运行该应用程序，将会看到操作栏/工具栏消失了）
通过将_android：windowFullscreen_设置为true（隐藏状态栏）并将_android：background_设置为默认颜色，为您的应用添加新的自定义设置

4.打开_activity_main.xml_并从布局中删除TextView以删除“ Hello World！”文本。

5.现在，在_MainActivity.kt中_，添加以下行以隐藏系统导航栏（如果复制并粘贴这些行出现 Unresolved reference build errors，请单击未解决的对象，然后按Alt + Enter添加库）：

override fun onWindowFocusChanged(hasFocus: Boolean) {

super.onWindowFocusChanged(hasFocus)

if (hasFocus) {

hideSystemUIAndNavigation(this)

}

private fun hideSystemUIAndNavigation(activity: Activity) {

val decorView: View = activity.window.decorView

decorView.systemUiVisibility =

(View.SYSTEM_UI_FLAG_IMMERSIVE

// Set the content to appear under the system bars so that the

// content doesn’t resize when the system bars hide and show.

or View.SYSTEM_UI_FLAG_LAYOUT_STABLE

or View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION

or View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN // Hide the nav bar and status bar

or View.SYSTEM_UI_FLAG_HIDE_NAVIGATION

or View.SYSTEM_UI_FLAG_FULLSCREEN)

}

6.运行该应用程序。

现在，您基本上会看到一个空屏幕，以默认颜色作为背景：

在这里插入图片描述

添加福师大的校徽及设置其背景色：

在开始动画之前，我们只需要设置一些样式即可：红色背景及福师大校徽。

首先开始：

打开colors.xml
将_colorPrimary_和_colorPrimaryDark_更改为的红色。
将福师大校徽复制到drawable文件夹下。
打开_activity_main.xml_，然后将校徽设置为宽度和高度都为128dp的ImageView。

<ImageView

android:layout_width=“128dp”

android:layout_height=“128dp”

android:src=“@drawable/fjnu”

app:layout_constraintTop_toTopOf=“parent”

app:layout_constraintStart_toStartOf=“parent”

app:layout_constraintEnd_toEndOf=“parent”

app:layout_constraintBottom_toBottomOf=“parent”

5.运行该应用程序，然后查看新更改。

在这里插入图片描述

添加动作🚴‍♀️

====================================================================

更新ConstraintLayout：

由于MotionLayout是ConstraintLayout的一部分，并且目前仅在v2.0中有效，因此要使用它，我们首先需要更新ConstraintLayout依赖项：

打开_build.gradle_ (Module)
在依赖项部分添加此行，或将您的_constraintlayout_依赖项替换为：

implementation ‘androidx.constraintlayout:constraintlayout:2.0.0-beta4’

添加动画：

为了最终使动画栩栩如生，您需要执行一些简单的步骤

打开_activity_main.xml。_
将activity_main.xml的布局设置为MotionLayout。
在xml目录下添加一个新的_activity_motion_scene.xml_。
_activity_motion_scene.xml_的设置的动画内容如下：
将校徽缩小，缩小的校徽停留0.5到1秒并逆时针旋转360度。
最后，将其放大以填满整个屏幕

<?xml version="1.0" encoding="utf-8"?>

<MotionScene

xmlns:android=“http://schemas.android.com/apk/res/android”

xmlns:motion=“http://schemas.android.com/apk/res-auto”>

<Transition

motion:constraintSetEnd=“@+id/end”

motion:constraintSetStart=“@id/start”

motion:duration=“1000”>

<KeyAttribute