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

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我创建了具有线性布局(垂直方向)的新文件，并将图像视图和工具栏放入其中，因此上面的代码如下所示：

<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不能在parralax模式下工作，工具栏也不像应该的那样工作。尽管两者都有app:layout_scrollFlags属性。

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

最后的目标是在三星天气应用。中构建布局，其行为类似于布局

Answer 1

由于CollapsingToolbarLayout基本上是一个FrameLayout，因此在默认情况下，子视图将放置在顶部，但您可以简单地设置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>