• Motion Editor (一) UI 搭建

    1. 项目配置文件

      MotionEditor: 可视化动画编辑工具

      1.1 修改 AndroidManifest.xml 文件中样式

    android:theme="@style/Theme.AppCompat.NoActionBar"

      1.2 build.gradle 文件添加引用库

    1.     buildFeatures {
    2.         viewBinding = true
    3.     }
    4.   
    5.     def nav_version = "2.5.2"
    6.     // Kotlin
    7.     implementation "androidx.navigation:navigation-fragment-ktx:$nav_version"
    8.     implementation "androidx.navigation:navigation-ui-ktx:$nav_version"

    2. 添加资源文件

      2.1 创建系统矢量图片，根据文件名称，在系统矢量图库中查找添加，如 ic_baseline_looks_one.xml

    1. <vector xmlns:android="http://schemas.android.com/apk/res/android"
    2.     android:width="24dp"
    3.     android:height="24dp"
    4.     android:tint="#FFFFFF"
    5.     android:viewportWidth="24"
    6.     android:viewportHeight="24">
    7.     <path
    8.         android:fillColor="@android:color/white"
    9.         android:pathData="M19,3L5,3c-1.1,0 -2,0.9 -2,2v14c0,1.1 0.9,2 2,2h14c1.1,0 2,-0.9 2,-2L21,5c0,-1.1 -0.9,-2 -2,-2zM14,17h-2L12,9h-2L10,7h4v10z" />
    10. vector>

      2.2 添加 String.xml 中文字

    1.     <string name="navigation_view_header_text">MotionLayoutDemostring>
    2.     <string name="menu_straight">直线string>
    3.     <string name="menu_curve">曲线string>
    4.     <string name="menu_cycle">周期string>
    5.     <string name="menu_rotation">旋转string>
    6.     <string name="menu_swing">摆荡string>
    7.     <string name="menu_transition">过渡string>
    8.     <string name="menu_complex">复杂string>
    9.     <string name="menu_text">文字string>
    10.     <string name="menu_image">图片string>
    11.     <string name="action_about">关于string>
    12.     <string name="about_motion_user">关于 MotionLayout 的使用string>

      2.3 创建导航菜单布局 menu_main_drawer.xml

    1. "1.0" encoding="utf-8"?>
    2. <menu xmlns:android="http://schemas.android.com/apk/res/android">
    3.     <group android:checkableBehavior="single">
    4.         <item
    5.             android:id="@+id/straightFragment"
    6.             android:icon="@drawable/ic_baseline_looks_one"
    7.             android:title="@string/menu_straight" />
    8.         <item
    9.             android:id="@+id/curveFragment"
    10.             android:icon="@drawable/ic_baseline_looks_two"
    11.             android:title="@string/menu_curve" />
    12.         <item
    13.             android:id="@+id/cycleFragment"
    14.             android:icon="@drawable/ic_baseline_looks_three"
    15.             android:title="@string/menu_cycle" />
    16.         <item
    17.             android:id="@+id/rotationFragment"
    18.             android:icon="@drawable/ic_baseline_looks_four"
    19.             android:title="@string/menu_rotation" />
    20.         <item
    21.             android:id="@+id/swingFragment"
    22.             android:icon="@drawable/ic_baseline_looks_five"
    23.             android:title="@string/menu_swing" />
    24.         <item
    25.             android:id="@+id/transitionFragment"
    26.             android:icon="@drawable/ic_baseline_looks_six"
    27.             android:title="@string/menu_transition" />
    28.         <item
    29.             android:id="@+id/textFragment"
    30.             android:icon="@drawable/ic_baseline_text_fields"
    31.             android:title="@string/menu_text" />
    32.         <item
    33.             android:id="@+id/imageFragment"
    34.             android:icon="@drawable/ic_baseline_photo_filter"
    35.             android:title="@string/menu_image" />
    36.         <item
    37.             android:id="@+id/complexFragment"
    38.             android:icon="@drawable/ic_baseline_favorite_border"
    39.             android:title="@string/menu_complex" />
    40.     group>
    41. menu>

      2.4 创建关于菜单布局 menu_main_about.xml

    1. "1.0" encoding="utf-8"?>
    2. <menu xmlns:app="http://schemas.android.com/apk/res-auto"
    3.     xmlns:android="http://schemas.android.com/apk/res/android">
    4.     <item
    5.         android:id="@+id/action_settings"
    6.         android:orderInCategory="100"
    7.         android:title="@string/action_about"
    8.         app:showAsAction="collapseActionView" />
    9. menu>

    3. 创建 Fragment 布局

      依次创建 StraightFragment，CurveFragment，CycleFragment，RotationFragment，SwingFragment，TransitionFragment，TextFragment，ImageFragment,ComplexFragment 页面

      3.1 只需创建空页面，例如创建StraightFragment，StraightFragment.kt

    1. //直线动画
    2. class StraightFragment : Fragment() {
    3.     override fun onCreateView(
    4.         inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?
    5.     ): View? {
    6.         // Inflate the layout for this fragment
    7.         return inflater.inflate(R.layout.fragment_straight, container, false)
    8.     }
    9. }

      3.2 布局 fragment_straight.xml

    1. <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    2.     xmlns:tools="http://schemas.android.com/tools"
    3.     android:layout_width="match_parent"
    4.     android:layout_height="match_parent"
    5.     tools:context=".ui.StraightFragment">
    6.     <TextView
    7.         android:layout_width="match_parent"
    8.         android:layout_height="match_parent"
    9.         android:text="@string/hello_blank_fragment" />
    10. FrameLayout>

    4. 根据 Fragment 创建导航 navigation.xml

    1. "1.0" encoding="utf-8"?>
    2. <navigation xmlns:android="http://schemas.android.com/apk/res/android"
    3.     xmlns:app="http://schemas.android.com/apk/res-auto"
    4.     xmlns:tools="http://schemas.android.com/tools"
    5.     android:id="@+id/navigation"
    6.     android:label="@string/menu_straight"
    7.     app:startDestination="@id/straightFragment">
    8.  
    9.     <fragment
    10.         android:id="@+id/straightFragment"
    11.         android:name="com.example.motion.ui.StraightFragment"
    12.         android:label="@string/menu_straight"
    13.         tools:layout="@layout/fragment_straight" />
    14.     <fragment
    15.         android:id="@+id/curveFragment"
    16.         android:name="com.example.motion.ui.CurveFragment"
    17.         android:label="@string/menu_curve"
    18.         tools:layout="@layout/fragment_curve" />
    19.     <fragment
    20.         android:id="@+id/cycleFragment"
    21.         android:name="com.example.motion.ui.CycleFragment"
    22.         android:label="@string/menu_cycle"
    23.         tools:layout="@layout/fragment_cycle" />
    24.     <fragment
    25.         android:id="@+id/rotationFragment"
    26.         android:name="com.example.motion.ui.RotationFragment"
    27.         android:label="fragment_rotation"
    28.         tools:layout="@layout/fragment_rotation" />
    29.     <fragment
    30.         android:id="@+id/swingFragment"
    31.         android:name="com.example.motion.ui.SwingFragment"
    32.         android:label="@string/menu_swing"
    33.         tools:layout="@layout/fragment_swing" />
    34.     <fragment
    35.         android:id="@+id/transitionFragment"
    36.         android:name="com.example.motion.ui.TransitionFragment"
    37.         android:label="@string/menu_transition"
    38.         tools:layout="@layout/fragment_transition" />
    39.     <fragment
    40.         android:id="@+id/textFragment"
    41.         android:name="com.example.motion.ui.TextFragment"
    42.         android:label="@string/menu_text"
    43.         tools:layout="@layout/fragment_text" />
    44.     <fragment
    45.         android:id="@+id/imageFragment"
    46.         android:name="com.example.motion.ui.ImageFragment"
    47.         android:label="@string/menu_image"
    48.         tools:layout="@layout/fragment_image" />
    49.     <fragment
    50.         android:id="@+id/complexFragment"
    51.         android:name="com.example.motion.ui.ComplexFragment"
    52.         android:label="@string/menu_complex"
    53.         tools:layout="@layout/fragment_complex" />
    54. navigation>

    5. Main 主页实现

      5.1 子布局 content_main.xml

    1. "1.0" encoding="utf-8"?>
    2. <androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    3.     xmlns:app="http://schemas.android.com/apk/res-auto"
    4.     xmlns:tools="http://schemas.android.com/tools"
    5.     android:layout_width="match_parent"
    6.     android:layout_height="match_parent"
    7.     app:layout_behavior="com.google.android.material.appbar.AppBarLayout$ScrollingViewBehavior"
    8.     tools:showIn="@layout/app_bar_main">
    9.     <androidx.fragment.app.FragmentContainerView
    10.         android:id="@+id/fragmentContainerView"
    11.         android:name="androidx.navigation.fragment.NavHostFragment"
    12.         android:layout_width="match_parent"
    13.         android:layout_height="match_parent"
    14.         app:defaultNavHost="true"
    15.         app:navGraph="@navigation/navigation" />
    16. androidx.constraintlayout.widget.ConstraintLayout>

      5.2 子布局 app_bar_main.xml

    1. "1.0" encoding="utf-8"?>
    2. <androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    3.     xmlns:app="http://schemas.android.com/apk/res-auto"
    4.     android:layout_width="match_parent"
    5.     android:layout_height="match_parent">
    6.  
    7.     <com.google.android.material.appbar.AppBarLayout
    8.         android:id="@+id/appbar"
    9.         android:layout_width="match_parent"
    10.         android:layout_height="wrap_content"
    11.         android:theme="@style/AppTheme.AppBarOverlay">
    12.  
    13.         <androidx.appcompat.widget.Toolbar
    14.             android:id="@+id/toolbar"
    15.             android:layout_width="match_parent"
    16.             android:layout_height="?attr/actionBarSize"
    17.             android:background="?attr/colorPrimary"
    18.             app:popupTheme="@style/AppTheme.PopupOverlay" />
    19.     com.google.android.material.appbar.AppBarLayout>
    20.  
    21.     <include
    22.         android:id="@+id/include_content"
    23.         layout="@layout/content_main" />
    24. androidx.coordinatorlayout.widget.CoordinatorLayout>

      5.3 navigation 头布局 navigation_view_header_layout.xml

    1. "1.0" encoding="utf-8"?>
    2. <androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    3.     xmlns:app="http://schemas.android.com/apk/res-auto"
    4.     android:layout_width="match_parent"
    5.     android:layout_height="200dp"
    6.     android:background="@drawable/bg2">
    7.  
    8.     <TextView
    9.         android:id="@+id/textView"
    10.         android:layout_width="wrap_content"
    11.         android:layout_height="wrap_content"
    12.         android:text="@string/navigation_view_header_text"
    13.         android:textColor="@color/white"
    14.         android:textSize="32sp"
    15.         android:textStyle="bold"
    16.         app:layout_constraintBottom_toBottomOf="parent"
    17.         app:layout_constraintEnd_toEndOf="parent"
    18.         app:layout_constraintHorizontal_bias="0.123"
    19.         app:layout_constraintStart_toStartOf="parent"
    20.         app:layout_constraintTop_toTopOf="parent"
    21.         app:layout_constraintVertical_bias="0.808" />
    22. androidx.constraintlayout.widget.ConstraintLayout>

      5.4 布局 activity_main.xml

    1. "1.0" encoding="utf-8"?>
    2. <androidx.drawerlayout.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    3.     xmlns:app="http://schemas.android.com/apk/res-auto"
    4.     xmlns:tools="http://schemas.android.com/tools"
    5.     android:id="@+id/drawerLayout"
    6.     android:layout_width="match_parent"
    7.     android:layout_height="match_parent"
    8.     tools:context=".MainActivity"
    9.     tools:openDrawer="start">
    10.  
    11.     <include
    12.         android:id="@+id/include_app_bar"
    13.         layout="@layout/app_bar_main" />
    14.  
    15.     <com.google.android.material.navigation.NavigationView
    16.         android:id="@+id/navigationView"
    17.         android:layout_width="wrap_content"
    18.         android:layout_height="match_parent"
    19.         android:layout_gravity="start"
    20.         android:fitsSystemWindows="true"
    21.         app:headerLayout="@layout/navigation_view_header_layout"
    22.         app:itemIconTint="@color/white"
    23.         app:itemTextAppearance="@style/TextAppearance.AppCompat.Medium"
    24.         app:itemTextColor="@color/white"
    25.         app:menu="@menu/menu_main_drawer" />
    26. androidx.drawerlayout.widget.DrawerLayout>

      5.5 创建 MainActivity.kt

    1. class MainActivity : AppCompatActivity() {
    2.     private lateinit var binding: ActivityMainBinding
    3.     private lateinit var navController: NavController
    4.     private lateinit var appBarConfiguration: AppBarConfiguration
    5.     override fun onCreate(savedInstanceState: Bundle?) {
    6.         super.onCreate(savedInstanceState)
    7.         binding = ActivityMainBinding.inflate(layoutInflater)
    8.         with(binding){
    9.             setContentView(root)
    10.             setSupportActionBar(includeAppBar.toolbar)
    11.             val navHostFragment = includeAppBar.includeContent.fragmentContainerView.getFragment()
    12.             navController = navHostFragment.navController
    13.             val set = setOf(
    14.                 R.id.straightFragment,
    15.                 R.id.curveFragment,
    16.                 R.id.cycleFragment,
    17.                 R.id.rotationFragment,
    18.                 R.id.swingFragment,
    19.                 R.id.transitionFragment,
    20.                 R.id.complexFragment,
    21.                 R.id.textFragment,
    22.                 R.id.imageFragment
    23.             )
    24.             appBarConfiguration = AppBarConfiguration(set,drawerLayout)
    25.             setupActionBarWithNavController(navController, appBarConfiguration)
    26.             navigationView.setupWithNavController(navController)
    27.         }
    28.     }
    29.  
    30.     override fun onSupportNavigateUp(): Boolean {
    31.         return navController.navigateUp(appBarConfiguration) || super.onSupportNavigateUp()
    32.     }
    33.  
    34.     override fun onCreateOptionsMenu(menu: Menu?): Boolean {
    35.         menuInflater.inflate(R.menu.menu_main_about, menu)
    36.         return super.onCreateOptionsMenu(menu)
    37.     }
    38.  
    39.     override fun onOptionsItemSelected(item: MenuItem): Boolean {
    40.         if(item.itemId == R.id.action_settings){
    41.             AlertDialog.Builder(this).setPositiveButton("Ok",null)
    42.                 .setMessage(R.string.about_motion_user)
    43.                 .create()
    44.                 .show()
    45.         }
    46.         return super.onOptionsItemSelected(item)
    47.     }
    48. }

    6. 效果图

           

  • 相关阅读:
    [渗透测试]—7.1 漏洞利用开发和Shellcode编写
    Node.js：pnpm - 速度快、节省磁盘空间的软件包管理器
    【网络】网络编程——带你手搓简易TCP服务端（echo服务器）+客户端（四种版本）
    以梦为马，不负韶华｜电巢科技&延安大学飞鹰计划实习班精彩回顾
    AMEYA360：蔡司扫描电镜Sigma系列：扫描电子显微镜的用途原来这么多
    DTSE Tech Talk | 第10期：云会议带你入门音视频世界
    爬虫过程和反爬
    【opencv】windows10下opencv4.8.0-cuda C++版本源码编译教程
    JAVA 0基础 布尔型
    JVM学习笔记——垃圾回收篇
  • 原文地址：https://blog.csdn.net/u011193452/article/details/127450361