【Android笔记#7】底部导航栏动态效果：MotionLayout+ImagFilterView实现+NavHostFragment使用

最新推荐文章于 2024-08-30 22:48:38 发布

张纸

最新推荐文章于 2024-08-30 22:48:38 发布

阅读量1.2k

点赞数 1

分类专栏： Android 文章标签： android java

本文链接：https://blog.csdn.net/jelly_bean/article/details/112463638

版权

本文介绍了如何基于B站UP主longway的教程，使用MotionLayout和ImagFilterView创建带有动画效果的Android底部导航栏。导航栏需要满足切换Fragment、图片切换、动画效果、滑动切换和消息红点等需求。文中详细阐述了MotionLayout的配置、NavHostFragment的使用，以及如何绑定和管理Fragment的切换动画。文章最后提出了几个实现过程中遇到的问题，期待进一步解答。

摘要由CSDN通过智能技术生成

本文基于B站UP主longway教程编写：第57集底部导航栏动态效果

效果图

在这里插入图片描述

一个理想中的应用导航栏，应该达到什么需求标准？

1.能够切换Fragment
2.点击切换图片
3.附带动画效果
4.滑动切换
5.右上角带消息红点

理想归理想，还得看需求实现，对于底部按钮动画用MotionLayout+ImagFilterView简单便捷又能取得不错的效果。

布局结构

在这里插入图片描述
MotionLayout作为ConstraintLayout的子类，AS4.0可以直接将ConstraintLayout转为MotionLayout，并且作为导航栏的一个子项。而每一个MotionLayout里面有不同内容的ImagFilterView和TextView。

MotionLayout

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.motion.widget.MotionLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="?attr/selectableItemBackgroundBorderless"
    app:layoutDescription="@xml/motionlayout_scene">

    <androidx.constraintlayout.utils.widget.ImageFilterView
        android:id="@+id/imageView"
        android:layout_width="30dp"
        android:layout_height="30dp"
        android:scaleType="center"
        android:scaleX="0.5"
        android:scaleY="0.5"
        app:altSrc="@drawable/ic_resell_fill_24"
        app:layout_constraintBottom_toTopOf="@+id/textView"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:srcCompat="@drawable/ic_resell_outline_24" />

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/fragment1"
        android:textSize="12sp"
        android:textStyle="bold"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/imageView" />
</androidx.constraintlayout.motion.widget.MotionLayout>

正如绝大多数复杂控件一样，MotionLayout也需要配置一个XML配置文件，并且在app:layoutDescription属性中引用，另外，以下属性可以为MotionLayout增加点触水波特效：

android:background="?attr/selectableItemBackgroundBorderless"

配置文件

<?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="300">
       <KeyFrameSet>
           <KeyCycle
               motion:wavePeriod="1"
               android:translationX="10dp"
               motion:waveOffset="0dp" />
           <KeyCycle
               motion:wavePeriod="1"
               android:translationX="10dp"
               motion:waveOffset="0dp" />
           <KeyCycle
               motion:motionTarget="@+id/imageView"
               motion:wavePeriod="1"
               android:translationX="5dp"
               motion:framePosition="1"
               motion:waveOffset="0dp" /