时间戳

首页 > 解决方案 > CollapsingToolbarLayout 在 ImageView 中显示填充底部

android - CollapsingToolbarLayout 在 ImageView 中显示填充底部

问题描述

当在 CollapsingToolbarLayout 中将 android:fitsSystemWindows="true" 和 android:adjustViewBounds="true" 一起用于 ImageView 时，它会在底部为 ImageView 提供填充

我发布它的答案来帮助这个参考这个问题解决方案来帮助其他人解决我很久以前提出的 github 问题

预期行为： 在此处输入图像描述

当前行为： 在此处输入图像描述

布局 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:fitsSystemWindows="true">

<androidx.core.widget.NestedScrollView
    android:id="@+id/nestedScrollView"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior">

    <include
        android:id="@+id/include_bundle_detail_layout"
        layout="@layout/include_bundle_detail_layout" />

</androidx.core.widget.NestedScrollView>

<com.google.android.material.appbar.AppBarLayout
    android:id="@+id/appBarLayout"
    style="@style/Widget.Base.AppBarLayout"
    android:fitsSystemWindows="true">

    <com.google.android.material.appbar.CollapsingToolbarLayout
        android:id="@+id/collapsingToolbarLayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fitsSystemWindows="true"
        app:contentScrim="?attr/colorPrimarySurface"
        app:layout_scrollFlags="scroll|exitUntilCollapsed"
        app:titleEnabled="false">

        <ImageView
            android:id="@+id/imageView_bundleOfferImage"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:adjustViewBounds="true"
            android:fitsSystemWindows="true"
            android:scaleType="centerCrop"
            android:visibility="gone"
            app:layout_collapseMode="parallax"
            tools:ignore="ContentDescription"
            tools:src="@drawable/playstore_feature_graphic"
            tools:visibility="visible" />

        <View
            android:id="@+id/view_image_upper_gradient"
            android:layout_width="match_parent"
            android:layout_height="96dp"
            android:background="@drawable/gradient_black_transparent"
            android:visibility="gone"
            app:layout_collapseMode="pin"
            tools:visibility="visible" />

        <androidx.appcompat.widget.Toolbar
            android:id="@+id/toolbar"
            style="@style/Widget.Base.Toolbar"
            android:layout_height="?attr/actionBarSize"
            app:layout_collapseMode="pin" />

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

</com.google.android.material.appbar.AppBarLayout>
</androidx.coordinatorlayout.widget.CoordinatorLayout>

样式.xml

   <style name="Widget.Base.Toolbar">
        <item name="android:layout_width">match_parent</item>
        <item name="android:layout_height">?actionBarSize</item>
        <item name="android:paddingTop">24dp</item>
    </style>

标签： androidmaterial-designmaterial-components-androidmaterial-components

解决方案

要解决这个问题，您需要将 android:fitsSystemWindows="true" 从根添加到每个子视图，直到您想要在状态栏下方显示的视图，然后将 android:fitsSystemWindows="false" 设置为您想要自动获取的视图根据状态栏高度进行填充，因此这将解决图像视图上的填充问题，但现在黑色渐变行为很奇怪，并且要修复工具栏的大小，我已经使用窗口插入检查代码在下面手动将填充设置为代码中的渐变那

布局

<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:fitsSystemWindows="true">

    <androidx.core.widget.NestedScrollView
        android:id="@+id/nestedScrollView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fitsSystemWindows="false"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <include
            android:id="@+id/base_model_detail_layout_include"
            layout="@layout/base_model_detail_layout_include" />

    </androidx.core.widget.NestedScrollView>

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

        <com.google.android.material.appbar.CollapsingToolbarLayout
            android:id="@+id/collapsingToolbarLayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:fitsSystemWindows="true"
            android:minHeight="?actionBarSize"
            app:contentScrim="?colorPrimarySurface"
            app:layout_scrollFlags="scroll|exitUntilCollapsed|snap"
            app:statusBarScrim="?colorPrimarySurface"
            app:titleEnabled="false">

            <ImageView
                android:id="@+id/imageView_bundleOffer"
                style="@style/Widget.PNBO.BundleOfferDetailFragment.ImageView"
                android:fitsSystemWindows="true"
                android:visibility="gone"
                tools:ignore="ContentDescription"
                tools:src="@drawable/playstore_feature_graphic"
                tools:visibility="visible" />

            <View
                android:id="@+id/view_image_upper_gradient"
                android:layout_width="match_parent"
                android:layout_height="?actionBarSize"
                android:background="@drawable/gradient_black_transparent"
                android:fitsSystemWindows="true"
                android:visibility="gone"
                app:layout_collapseMode="pin"
                tools:visibility="visible" />

            <com.google.android.material.appbar.MaterialToolbar
                android:id="@+id/toolbar"
                android:fitsSystemWindows="false"
                style="@style/Widget.PNBO.BundleOfferDetailFragment.Toolbar" />

        </com.google.android.material.appbar.CollapsingToolbarLayout>
    </com.google.android.material.appbar.AppBarLayout>
</androidx.coordinatorlayout.widget.CoordinatorLayout>

科特林代码

    private fun setUpSystemBars() {

        binding.root.apply {

            ViewCompat.setOnApplyWindowInsetsListener(this) { _, insets ->

                val top = insets.getInsets(WindowInsetsCompat.Type.statusBars()).top
                val height: Int

                binding.viewImageUpperGradient?.also {
                    height = it.layoutParams.height
                    it.layoutParams.height = height + top
                }

                insets
            }
        }
    }

推荐阅读