OneUi风格的导航Android java

Question

我是android编程的初学者，我想知道如何制作如图所示的OneUi风格的导航。

这就是我到目前为止所做的。不幸的是，当我滚动它，它将完全崩溃，我无法得到它回来。

我使用了AppBarLayout的CoordinatorLayout，并遵循材料中的一些代码。但是它没有像我预期的那样工作。我希望应用程序栏在滚动时短，在顶部时高。

以下是我的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

对于您的用例。你需要改变的事情很少。

>

将AppBarLayout下面的内容放在NestedScrollView中，以滚动layout_behavior。

放一些内容来模仿滚动效果。例如，具有巨大高度的文本视图。

将要折叠的内容放入一个折叠工具栏布局中，当其高或未折叠时，基本上可以显示这些内容。

把你的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>

输出：

未折叠：

倒塌：