📜  Kotlin 中的 Android 运动布局

📅  最后修改于: 2022-05-13 01:54:51.927000             🧑  作者: Mango

Kotlin 中的 Android 运动布局

MotionLayout是 ConstraintLayout 的特殊版本它是一种有助于管理应用程序中的运动和小部件动画的布局。由于它是 ConstraintLayout 的特殊版本,因此它被制作为 ConstraintLayout 的子类它通过描述如何在不同布局之间转换来为应用程序提供触摸控制动作。简而言之,它非常强大,可用于在应用程序中创建广泛的动画和触控动作。

运动布局

为什么选择 MotionLayout?

  • MotionLayout,正如它的名字所暗示的,首先是一个布局,让你定位你的元素。它实际上是 ConstraintLayout 的子类,并建立在其丰富的布局功能之上。
  • MotionLayout 的创建是为了弥补布局转换和复杂运动处理之间的差距。
  • 在这个范围之外,另一个关键区别是 MotionLayout 是完全声明式的,它可以用 XML 完全描述,不需要任何代码。

方法:

以下是在 Kotlin 中创建动画布局的各个步骤。

第 1 步:启动一个新的 Android Studio 项目
请参考这篇文章详细了解如何创建一个新的 Android Studio项目。

第 2 步:将 MotionLayout 类添加到项目中

这是一个必要的步骤,因为没有这个,我们的应用程序将停止运行。由于 MotionLayout 是 ConstraintLayout 的子类,因此它是 Android 家族的一个相当新的补充,而且我们的项目中默认没有它的可能性非常高。要将其添加到我们的项目中,我们需要将以下依赖项添加到我们的build.gradle: 应用程序中:

在我们所做的更改之后,我们将需要进行gradle 同步。一旦成功,我们就可以继续构建应用程序的其余部分。

第 3 步:将 MotionLayout 作为根布局

在这一步中,我们将设计activity_main.xml 文件。我们将使用 MotionLayout 作为我们的根 XML 元素并定义它的属性,例如高度和宽度。需要注意的是,一个 MotionLayout 可以包含其他布局,例如嵌套在其中的 ConstraintLayout RelativeLayout FrameLayout 。它还包含所有视图,例如 TextView 和按钮 我们想要在我们的 UI 中。让我们看一下activity_main.xml的代码 对于我们的应用程序。

XML


  
    
  
    
  
    
  


XML


  
    
  
        
  
    
  
    
        
            
        
  
        
    
  
    
        
            
        
  
        
    
  


Kotlin
package com.example.motionlayoutgfg1
  
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
  
    class MainActivity : AppCompatActivity() {
  
    override fun onCreate(savedInstanceState: Bundle?)
    {
        super.onCreate(savedInstanceState)
            setContentView(R.layout.activity_main)
    }
}


请注意,在上面的代码中,我们有一个名为app:layoutDescription的属性 其值为@xml/new_xml 这实际上是包含我们的动画是如何以及它应该做什么的描述的文件。我们尚未制作此文件,但将在下一步制作。该代码还有一个 ConstraintLayout,它是动画的一部分。当动画发生时,它基本上会覆盖屏幕。接下来,我们有一个 TextView 将显示在我们的屏幕上。

第 4 步:制作一个新的 xml 文件

就像我们说的那样,我们现在将创建new_xml.xml文件,该文件在我们之前的代码中设置为app:layoutDescription的值。为此,我们首先需要创建一个新的 XML 资源文件。首先,我们将在资源文件夹中创建一个目录并将其命名为xml 。为此,单击应用程序-> res (右键单击)->新建->目录

创建新的xml文件

现在我们有了一个xml 目录,我们将创建一个名为new_xml的文件  在里面。为此,请单击xml(右键单击) -> 新建 -> XML 资源文件并将文件命名为new_xml

创建 XML 资源文件

第 5 步:将代码添加到 new_xml.xml

现在我们已经准备好了一切,我们可以在 new_xml.xml 中定义我们的动画应该如何。我们首先打开一个MotionScene XML 标记。在这个例子中,我们将只使用 Transition 制作一个基本的过渡动画 属性并定义它应该何时发生,即DragUp DragDown , DragLeft通过设置OnSwipe 元素。这是我们的代码的样子:

XML



  
    
  
        
  
    
  
    
        
            
        
  
        
    
  
    
        
            
        
  
        
    
  

第 6 步:MainActivity.kt 文件

现在我们拥有了使我们的应用程序工作所需的一切。需要注意的一点是,到目前为止,我们还没有对MainActivity.kt文件进行任何更改。这是因为我们只是在设计 UI 而不是应用程序的逻辑。如果有人想让他们的应用程序做某事,上面的文件中肯定会有一些代码,但对于这个例子,这就是我们的MainActivity.kt 好像:

科特林

package com.example.motionlayoutgfg1
  
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
  
    class MainActivity : AppCompatActivity() {
  
    override fun onCreate(savedInstanceState: Bundle?)
    {
        super.onCreate(savedInstanceState)
            setContentView(R.layout.activity_main)
    }
}

作为模拟器运行

因为在我们的new_xml.xml  我们定义了我们的动画过渡将在我们向上滑动(dragUp)时发生,这就是我们这样做时输出的样子。