You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何实现BottomAppBar向BottomNavigationDrawer的连续过渡效果?

需求说明
  • 不熟悉Compose动画与过渡相关知识,希望使用Java实现BottomAppBar向BottomNavigationDrawer的连续过渡效果,预期效果如下:
    预期效果示意图
  • 参考了Material Design的Reply案例研究(仅能编译通过其Kotlin版本项目),但该案例的过渡效果与需求略有不同
  • 附上参考的BottomAppBar布局代码:
<?xml version="1.0" encoding="utf-8"?>
<!-- Copyright (c) 2019 Google Inc. -->
<layout 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">

    <androidx.coordinatorlayout.widget.CoordinatorLayout
        android:id="@+id/coordinator_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layoutFullscreen="@{true}"
        tools:context="com.materialstudies.reply.ui.MainActivity">

        <com.google.android.material.bottomappbar.BottomAppBar
            android:id="@+id/bottom_app_bar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom"
            app:fabAlignmentMode="center"
            app:fabCradleRoundedCornerRadius="@dimen/bottom_app_bar_fab_cradle_corner_radius"
            app:fabCradleMargin="@dimen/bottom_app_bar_fab_cradle_margin"
            app:hideOnScroll="true">

            <LinearLayout
                android:id="@+id/bottom_app_bar_content_container"
                android:layout_width="wrap_content"
                android:layout_height="@dimen/min_touch_target_size"
                android:layout_marginVertical="@dimen/grid_0_5"
                android:foreground="@drawable/bottom_app_bar_title_foreground"
                android:gravity="center_vertical"
                android:orientation="horizontal"
                android:paddingHorizontal="@dimen/grid_0_5">

                <ImageView
                    android:id="@+id/bottom_app_bar_chevron"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center_vertical"
                    android:contentDescription="@string/bottom_app_bar_chevron_content_desc"
                    app:srcCompat="@drawable/ic_arrow_drop_up"
                    app:tint="?attr/colorOnPrimarySurface" />

                <ImageView
                    android:id="@+id/bottom_app_bar_logo"
                    android:layout_width="@dimen/bottom_app_bar_logo_size"
                    android:layout_height="@dimen/bottom_app_bar_logo_size"
                    android:layout_gravity="center_vertical"
                    android:layout_marginLeft="@dimen/grid_1"
                    android:contentDescription="@string/bottom_app_bar_logo_content_desc"
                    app:srcCompat="@drawable/ic_reply_logo" />

                <TextView
                    android:id="@+id/bottom_app_bar_title"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center_vertical"
                    android:layout_marginHorizontal="@dimen/grid_1"
                    android:text="@string/navigation_inbox"
                    android:textColor="?attr/colorControlNormal"
                    android:textAppearance="?attr/textAppearanceBody1" />
            </LinearLayout>

        </com.google.android.material.bottomappbar.BottomAppBar>

        <com.google.android.material.floatingactionbutton.FloatingActionButton
            android:id="@+id/fab"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:contentDescription="@string/fab_compose_email_content_description"
            app:layout_anchor="@id/bottom_app_bar"
            app:srcCompat="@drawable/asl_edit_reply" />

    </androidx.coordinatorlayout.widget.CoordinatorLayout>
</layout>

内容的提问来源于stack exchange,提问作者user21193451

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.07.17 12:37:04