如何在布局中间的 CollapsingToolbarLayout 中更改 ImageView 下方的工具栏位置？

Question

我想构建如下所示的布局：

默认布局类似于：

<?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"
    android:fitsSystemWindows="true"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.google.android.material.appbar.AppBarLayout
        android:id="@+id/appbar"
        android:fitsSystemWindows="true"
        android:layout_height="wrap_content"
        android:layout_width="match_parent">

        <com.google.android.material.appbar.CollapsingToolbarLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:toolbarId="@+id/toolbar"
            app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed|snap"
            app:contentScrim="?attr/colorPrimary">

             <ImageView
                android:id="@+id/imageView"
                android:layout_width="match_parent"
                android:layout_height="500dp"
                android:scaleType="centerCrop"
                app:layout_collapseMode="parallax"
                app:srcCompat="@drawable/lionking" /> 

             <com.google.android.material.appbar.MaterialToolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:menu="@menu/my_menu"
                app:layout_collapseMode="pin"
                android:background="?attr/colorPrimary"
                android:minHeight="?attr/actionBarSize"
                android:theme="?attr/actionBarTheme" /> 
        </com.google.android.material.appbar.CollapsingToolbarLayout>
    </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">
        <include layout="@layout/item_nested_scrollview"/>
    </androidx.core.widget.NestedScrollView>

</androidx.coordinatorlayout.widget.CoordinatorLayout>

现在要将工具栏位置更改为 imageView 下方，我使用 linearlayout（垂直方向）创建了一个新文件，并将 Imageview 和工具栏放入其中，所以上面的代码变成了这样：

<com.google.android.material.appbar.AppBarLayout
    android:id="@+id/appbar"
    android:fitsSystemWindows="true"
    android:layout_height="wrap_content"
    android:layout_width="match_parent">

    <com.google.android.material.appbar.CollapsingToolbarLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:toolbarId="@+id/toolbar"
        app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed|snap"
        app:contentScrim="?attr/colorPrimary">

        <include layout="@layout/toolbar_in_middle"/>

    </com.google.android.material.appbar.CollapsingToolbarLayout>
</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">

    <include layout="@layout/item_nested_scrollview"/>

</androidx.core.widget.NestedScrollView>

包含在上述文件中的LinearLayout文件"toolbar_in_middle.xml"是：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical" android:layout_width="match_parent"
    app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed|snap"
    android:layout_height="match_parent">

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="match_parent"
        android:layout_height="500dp"
        android:scaleType="centerCrop"
        app:layout_collapseMode="parallax"
        app:srcCompat="@drawable/lionking" />

    <com.google.android.material.appbar.MaterialToolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        app:menu="@menu/my_menu"
        app:layout_collapseMode="pin" />
</LinearLayout>

布局中间的布局显示工具栏按需显示，但行为无法正常工作，ImageView 不适用于视差模式，工具栏也无法正常工作。尽管两者都有 app:layout_scrollFlags 属性。

如何调试这个问题，或者如何解决它？
另一个问题是关于工具栏的透明度，如何正确地做到这一点？

最终目标是构建布局，其行为与 Samsung weather app.

中的布局相似

Answer 1

由于 CollapsingToolbarLayout 基本上是一个 FrameLayout，child 视图将默认放置在顶部，但您可以简单地设置 layout_gravity 来更改此行为。其他东西在您的布局中看起来不错。但下面列出了我认为您可能需要的其他一些更改：

我不认为你的 colorPrimary 默认情况下是透明的，所以创建一个颜色资源以获得屏幕截图中所需的透明度。
通常 exitUntilCollapsed 标志作为折叠工具栏的滚动标志。
默认情况下，折叠工具栏会用工具栏标题替换折叠标题。如果你不想设置 app:titleEnabled="false".

所以布局看起来像：

    <com.google.android.material.appbar.AppBarLayout
        android:id="@+id/appbar"
        android:fitsSystemWindows="true"
        android:layout_height="wrap_content"
        android:layout_width="match_parent">

        <com.google.android.material.appbar.CollapsingToolbarLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:toolbarId="@+id/toolbar"
            app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed|exitUntilCollapsed|snap"
            app:contentScrim="?attr/colorPrimary"
            app:titleEnabled="false">

            <ImageView
                android:id="@+id/imageView"
                android:layout_width="match_parent"
                android:layout_height="500dp"
                android:scaleType="centerCrop"
                app:layout_collapseMode="parallax"
                app:srcCompat="@drawable/ic_launcher_foreground" />

            <com.google.android.material.appbar.MaterialToolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_collapseMode="pin"
                android:background="@color/color_primary_half_transparent"
                android:minHeight="?attr/actionBarSize"
                android:theme="?attr/actionBarTheme"
                android:layout_gravity="bottom"
                app:title="Test"/>
        </com.google.android.material.appbar.CollapsingToolbarLayout>
    </com.google.android.material.appbar.AppBarLayout>

而 color/color_primary_half_transparent.xml 看起来像：

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:alpha="0.5" android:color="?colorPrimary" />
</selector>

如何在布局中间的 CollapsingToolbarLayout 中更改 ImageView 下方的工具栏位置？

How to change toolbar location bellow ImageView in CollapsingToolbarLayout, in the middle of layout?

android

android-layout

android-toolbar

android-collapsingtoolbarlayout

android-appbarlayout