android java中的OneUi风格导航

Question

我是 android 编程的初学者，我想知道如何制作像 in this picture. 这样的 OneUi 风格导航

这是what I made so far. 不幸的是，当我滚动它时，它会完全崩溃，我无法取回它。

我将 CoordinatorLayout 与 AppBarLayout 一起使用，并遵循 material.io 指南中的一些代码，但它没有按我预期的那样工作。我希望应用栏在滚动时短，在顶部时高。

这是我的 XML 布局代码：

<androidx.coordinatorlayout.widget.CoordinatorLayout
    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="#F0F0F0"

    tools:context=".MainActivity">

    <com.google.android.material.appbar.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="256dp">

        <com.google.android.material.appbar.CollapsingToolbarLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"

            app:expandedTitleMarginStart="72dp"
            app:expandedTitleMarginBottom="28dp"

            app:layout_scrollFlags="scroll|snap">

            <com.google.android.material.appbar.MaterialToolbar
                android:layout_width="match_parent"
                android:layout_height="wrap_content"

                app:layout_collapseMode="pin"

                app:contentInsetStart="0dp">

                <RelativeLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content">

                    <TextView
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:gravity="center"

                        android:text="This is a text"
                        android:textSize="50dp"
                        />

                </RelativeLayout>

            </com.google.android.material.appbar.MaterialToolbar>

        </com.google.android.material.appbar.CollapsingToolbarLayout>

    </com.google.android.material.appbar.AppBarLayout>

    <androidx.cardview.widget.CardView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:clipToPadding="false">



    </androidx.cardview.widget.CardView>

</androidx.coordinatorlayout.widget.CoordinatorLayout>

Answer 1

适合您的用例。您需要更改的地方很少。

1. 把AppBarLayout下面的内容放到NestedScrollView里面滚动layout_behavior。

2. 放置一些内容来模拟滚动效果。例如，像高度巨大的文本视图。

3. 将您要折叠的内容放入一个CollapsingToolbarLayout 基本上是在tall 或未折叠时显示的内容。

4. 将您的MaterialToolbar 作为AppBarLayout 的直接子代

示例代码：

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout 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="#F0F0F0"
    tools:context=".MainActivity">

    <com.google.android.material.appbar.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <com.google.android.material.appbar.CollapsingToolbarLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:expandedTitleMarginBottom="28dp"
            app:expandedTitleMarginStart="72dp"
            app:layout_scrollFlags="scroll|snap">

            <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content">

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:gravity="center"
                    android:text="This is collapsing content"
                    android:textSize="32sp" />

            </RelativeLayout>


        </com.google.android.material.appbar.CollapsingToolbarLayout>

        <com.google.android.material.appbar.MaterialToolbar
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:contentInsetStart="0dp"
            app:layout_collapseMode="pin"
            app:title="This is MaterialToolbar" />


    </com.google.android.material.appbar.AppBarLayout>

    <androidx.core.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="com.google.android.material.appbar.AppBarLayout$ScrollingViewBehavior">

        <androidx.cardview.widget.CardView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:clipToPadding="false">

            <TextView
                android:layout_width="match_parent"
                android:layout_height="800dp"
                android:text="Hello Test" />


        </androidx.cardview.widget.CardView>

    </androidx.core.widget.NestedScrollView>

</androidx.coordinatorlayout.widget.CoordinatorLayout>

输出：

未折叠：

已折叠：