• Android Navigation 过渡动画


    之前写过一篇。但是没有从很基础开始。。

    这有点不太对。那么今天就来一个从很基础开始的教程

    效果如下

    依赖

    1. implementation 'androidx.navigation:navigation-fragment-ktx:2.5.1'
    2. implementation 'androidx.navigation:navigation-ui:2.5.1'

    第一个页面

    MainActivity
    1. package com.example.shardelement
    2. import androidx.appcompat.app.AppCompatActivity
    3. import android.os.Bundle
    4. import android.widget.Toast
    5. import androidx.navigation.findNavController
    6. import androidx.navigation.ui.setupActionBarWithNavController
    7. class MainActivity : AppCompatActivity() {
    8. override fun onCreate(savedInstanceState: Bundle?) {
    9. super.onCreate(savedInstanceState)
    10. setContentView(R.layout.activity_main)
    11. setupActionBarWithNavController(findNavController(R.id.fcv))
    12. }
    13. override fun onSupportNavigateUp(): Boolean {
    14. val navController = findNavController(R.id.fcv)
    15. return navController.navigateUp() || super.onSupportNavigateUp()
    16. }
    17. }

    的布局  

    activity_main
    1. <androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    2. xmlns:app="http://schemas.android.com/apk/res-auto"
    3. xmlns:tools="http://schemas.android.com/tools"
    4. android:layout_width="match_parent"
    5. android:layout_height="match_parent"
    6. tools:context=".MainActivity">
    7. <fragment
    8. android:id="@+id/fcv"
    9. android:name="androidx.navigation.fragment.NavHostFragment"
    10. android:layout_width="0dp"
    11. app:defaultNavHost="true"
    12. app:navGraph="@navigation/my_nav"
    13. android:layout_height="0dp"
    14. app:layout_constraintBottom_toBottomOf="parent"
    15. app:layout_constraintEnd_toEndOf="parent"
    16. app:layout_constraintStart_toStartOf="parent"
    17. app:layout_constraintTop_toTopOf="parent" />
    18. androidx.constraintlayout.widget.ConstraintLayout>

    里面很简单 一个Fragment但是里面用到了my_nav。这个会在创建三个fragment后再给大家贴出来 先不要着急

    HomeFragment
    -》可以跳转FirstFragment 用的是从左边向右边滑动的动画。

    -》可以跳转SecondedFragment用的是从右边边向右边滑动的动画。

    代码

    1. package com.example.shardelement
    2. import android.os.Bundle
    3. import androidx.fragment.app.Fragment
    4. import android.view.LayoutInflater
    5. import android.view.View
    6. import android.view.ViewGroup
    7. import android.widget.Button
    8. import androidx.navigation.fragment.findNavController
    9. class HomeFragment : Fragment() {
    10. override fun onCreateView(
    11. inflater: LayoutInflater, container: ViewGroup?,
    12. savedInstanceState: Bundle?
    13. ): View? {
    14. // Inflate the layout for this fragment
    15. val view = inflater.inflate(R.layout.fragment_home, container, false)
    16. view.findViewById<Button>(R.id.navToFirst_btn).setOnClickListener {
    17. findNavController().navigate(R.id.action_homeFragment_to_firstFragment)
    18. }
    19. view.findViewById<Button>(R.id.navToSecond_btn).setOnClickListener {
    20. findNavController().navigate(R.id.action_homeFragment_to_seconedFragment)
    21. }
    22. return view
    23. }
    24. }

     布局

    1. <androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    2. xmlns:app="http://schemas.android.com/apk/res-auto"
    3. xmlns:tools="http://schemas.android.com/tools"
    4. android:layout_width="match_parent"
    5. android:layout_height="match_parent"
    6. tools:context=".HomeFragment">
    7. <TextView
    8. android:id="@+id/homeFragment_txt"
    9. android:layout_width="wrap_content"
    10. android:layout_height="wrap_content"
    11. android:text="Home Fragment"
    12. android:textSize="40sp"
    13. android:textStyle="bold"
    14. app:layout_constraintBottom_toBottomOf="parent"
    15. app:layout_constraintEnd_toEndOf="parent"
    16. app:layout_constraintStart_toStartOf="parent"
    17. app:layout_constraintTop_toTopOf="parent" />
    18. <Button
    19. android:id="@+id/navToFirst_btn"
    20. android:layout_width="120dp"
    21. android:layout_height="wrap_content"
    22. android:layout_marginTop="50dp"
    23. android:drawableStart="@drawable/ic_baseline_keyboard_arrow_left"
    24. android:drawableLeft="@drawable/ic_baseline_keyboard_arrow_left"
    25. android:text="First"
    26. app:layout_constraintStart_toStartOf="@+id/homeFragment_txt"
    27. app:layout_constraintTop_toBottomOf="@+id/homeFragment_txt" />
    28. <Button
    29. android:id="@+id/navToSecond_btn"
    30. android:layout_width="120dp"
    31. android:layout_height="wrap_content"
    32. android:layout_marginTop="50dp"
    33. android:drawableEnd="@drawable/ic_baseline_keyboard_arrow_right"
    34. android:drawableRight="@drawable/ic_baseline_keyboard_arrow_right"
    35. android:text="Second"
    36. app:layout_constraintEnd_toEndOf="@+id/homeFragment_txt"
    37. app:layout_constraintTop_toBottomOf="@+id/homeFragment_txt" />
    38. androidx.constraintlayout.widget.ConstraintLayout>

     预览

    用到了俩左边按钮和右边按钮的icon。。其实。。也可以不放。核心不在此就不贴了

    FirstFragment
    1. package com.example.shardelement
    2. import android.os.Bundle
    3. import androidx.fragment.app.Fragment
    4. import android.view.LayoutInflater
    5. import android.view.View
    6. import android.view.ViewGroup
    7. import android.widget.Button
    8. import androidx.navigation.fragment.findNavController
    9. class FirstFragment : Fragment() {
    10. override fun onCreateView(
    11. inflater: LayoutInflater, container: ViewGroup?,
    12. savedInstanceState: Bundle?
    13. ): View? {
    14. // Inflate the layout for this fragment
    15. val view = inflater.inflate(R.layout.fragment_first, container, false)
    16. view.findViewById<Button>(R.id.view_back).setOnClickListener {
    17. findNavController().navigate(R.id.action_firstFragment_to_homeFragment)
    18. }
    19. return view
    20. }
    21. }

    布局

    1. <androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    2. xmlns:app="http://schemas.android.com/apk/res-auto"
    3. android:layout_width="match_parent"
    4. android:layout_height="match_parent">
    5. <TextView
    6. android:id="@+id/tv_tag"
    7. android:layout_width="wrap_content"
    8. android:layout_height="wrap_content"
    9. android:text="First Fragment"
    10. android:textSize="28sp"
    11. app:layout_constraintBottom_toBottomOf="parent"
    12. app:layout_constraintEnd_toEndOf="parent"
    13. app:layout_constraintStart_toStartOf="parent"
    14. app:layout_constraintTop_toTopOf="parent" />
    15. <Button
    16. android:id="@+id/view_back"
    17. android:layout_width="wrap_content"
    18. android:layout_height="wrap_content"
    19. android:layout_marginTop="20dp"
    20. android:text="BACK"
    21. app:layout_constraintEnd_toEndOf="parent"
    22. app:layout_constraintStart_toStartOf="parent"
    23. app:layout_constraintTop_toBottomOf="@+id/tv_tag" />
    24. androidx.constraintlayout.widget.ConstraintLayout>

     其实第二个Fragment和他一样。。

    真不是为了凑字数。就是为了完整教程来吧

    SecondedFragment
    1. package com.example.shardelement
    2. import android.os.Bundle
    3. import androidx.fragment.app.Fragment
    4. import android.view.LayoutInflater
    5. import android.view.View
    6. import android.view.ViewGroup
    7. import android.widget.Button
    8. import androidx.navigation.fragment.findNavController
    9. class SecondedFragment : Fragment() {
    10. override fun onCreateView(
    11. inflater: LayoutInflater, container: ViewGroup?,
    12. savedInstanceState: Bundle?
    13. ): View? {
    14. // Inflate the layout for this fragment
    15. val view = inflater.inflate(R.layout.fragment_seconed, container, false)
    16. view.findViewById<Button>(R.id.view_back).setOnClickListener {
    17. findNavController().navigate(R.id.action_seconedFragment_to_homeFragment)
    18. }
    19. return view
    20. }
    21. }

    代码

    1. <androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    2. xmlns:app="http://schemas.android.com/apk/res-auto"
    3. android:layout_width="match_parent"
    4. android:layout_height="match_parent">
    5. <TextView
    6. android:id="@+id/tv_tag"
    7. android:layout_width="wrap_content"
    8. android:layout_height="wrap_content"
    9. android:text="Seconded Fragment"
    10. android:textSize="28sp"
    11. app:layout_constraintBottom_toBottomOf="parent"
    12. app:layout_constraintEnd_toEndOf="parent"
    13. app:layout_constraintStart_toStartOf="parent"
    14. app:layout_constraintTop_toTopOf="parent" />
    15. <Button
    16. android:id="@+id/view_back"
    17. android:layout_width="wrap_content"
    18. android:layout_height="wrap_content"
    19. android:layout_marginTop="20dp"
    20. android:text="BACK"
    21. app:layout_constraintEnd_toEndOf="parent"
    22. app:layout_constraintStart_toStartOf="parent"
    23. app:layout_constraintTop_toBottomOf="@+id/tv_tag" />
    24. androidx.constraintlayout.widget.ConstraintLayout>

    那么预览我就给一个咯

    下面是核心。重点 敲黑板

    资源文件新建

     my_nav.xml

    剩下的我用哔哩哔哩展示把。。为了给大家一个更为骚而快的操作效果。。更详细的效果

    下面先贴上去代码。后续看下如何操作的朋友可以看下哔哩哔哩的教学视频哦

    1. <navigation xmlns:android="http://schemas.android.com/apk/res/android"
    2. xmlns:app="http://schemas.android.com/apk/res-auto"
    3. xmlns:tools="http://schemas.android.com/tools"
    4. android:id="@+id/my_nav.xml"
    5. app:startDestination="@id/homeFragment">
    6. <fragment
    7. android:id="@+id/homeFragment"
    8. android:name="com.example.shardelement.HomeFragment"
    9. android:label="fragment_home"
    10. tools:layout="@layout/fragment_home">
    11. <action
    12. android:id="@+id/action_homeFragment_to_firstFragment"
    13. app:destination="@id/firstFragment"
    14. app:enterAnim="@anim/from_left"
    15. app:exitAnim="@anim/to_right"
    16. app:popEnterAnim="@anim/from_right"
    17. app:popExitAnim="@anim/to_left" />
    18. <action
    19. android:id="@+id/action_homeFragment_to_seconedFragment"
    20. app:destination="@id/seconedFragment"
    21. app:enterAnim="@anim/from_right"
    22. app:exitAnim="@anim/to_left"
    23. app:popEnterAnim="@anim/from_left"
    24. app:popExitAnim="@anim/to_right" />
    25. fragment>
    26. <fragment
    27. android:id="@+id/firstFragment"
    28. android:name="com.example.shardelement.FirstFragment"
    29. android:label="FirstFragment">
    30. <action
    31. android:id="@+id/action_firstFragment_to_homeFragment"
    32. app:destination="@id/homeFragment"
    33. app:enterAnim="@anim/from_right"
    34. app:exitAnim="@anim/to_left" />
    35. fragment>
    36. <fragment
    37. android:id="@+id/seconedFragment"
    38. android:name="com.example.shardelement.SecondedFragment"
    39. android:label="SeconedFragment">
    40. <action
    41. android:id="@+id/action_seconedFragment_to_homeFragment"
    42. app:destination="@id/homeFragment"
    43. app:enterAnim="@anim/from_left"
    44. app:exitAnim="@anim/to_right" />
    45. fragment>
    46. navigation>

    from_left.xml

    1. <set
    2. android:duration="800"
    3. xmlns:android="http://schemas.android.com/apk/res/android">
    4. <translate
    5. android:fromXDelta="-100%"
    6. android:toXDelta="0%"
    7. />
    8. set>

    from_right.xml

    1. <set
    2. android:duration="800"
    3. xmlns:android="http://schemas.android.com/apk/res/android">
    4. <translate
    5. android:fromXDelta="100%"
    6. android:toXDelta="0%"
    7. />
    8. set>

    to_left.xml

    1. <set
    2. android:duration="800"
    3. xmlns:android="http://schemas.android.com/apk/res/android">
    4. <translate
    5. android:fromXDelta="0%"
    6. android:toXDelta="-100%"
    7. />
    8. set>

    to_right.xml

    1. <set
    2. android:duration="800"
    3. xmlns:android="http://schemas.android.com/apk/res/android">
    4. <translate
    5. android:fromXDelta="0%"
    6. android:toXDelta="100%"
    7. />
    8. set>

    哔哩哔哩地址

    哔哩哔哩上面有更啰嗦的讲解

    视频去哪了呢?_哔哩哔哩_bilibili

  • 相关阅读:
    智能制造存在哪些难点?如何去解决?
    new,malloc
    Matplotlib | 世界足球俱乐部排名可视化
    正点原子lwIP学习笔记——NTP实时时间实验
    java使用MD5加密
    java编程输出菱形
    18_ue4捡钥匙进房间
    Ban or Pick, What‘s the Trick
    带你深入理解泛型
    Docker学习——⑥
  • 原文地址:https://blog.csdn.net/mp624183768/article/details/126338041