折叠工具栏的视差效果不起作用，header 中的图像被压扁

Question

在博客 Design Support Library: Collapsing Toolbar Layout 博客文章中有一张 header 具有良好视差效果的图像：

在 a simple test project at GitHub 中，我试图实现类似的效果 - 但由于某种原因图像被压扁了：

在 activity_main.xml 中，我尝试了 scaleType 的所有可能值，但图像仍然失真：

        <ImageView
            android:id="@+id/header_image_view"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@drawable/header"
            android:scaleType="centerCrop"
            app:layout_collapseMode="parallax" />

请问我在这里遗漏了什么？

更新：

我已经尝试按照 Apurva 的建议更改为 match_parent（感谢 +1）：

        <ImageView
            android:id="@+id/header_image_view"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@drawable/header2"
            android:scaleType="centerCrop"
            app:layout_collapseMode="parallax" />

但这无济于事 - header 图像被压扁了：

Answer 1

您是否提到在教程中作者使用 SquareImageView？

他覆盖了onMeasure方法：

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    super.onMeasure(widthMeasureSpec, heightMeasureSpec);

    int width = getMeasuredWidth();
    setMeasuredDimension(width, width);
}

Class 已实施 here

Answer 2

默认情况下，背景会拉伸以适合。您应该在 ImageView.

上设置 android:src 而不是 android:background

<ImageView
    android:id="@+id/header_image_view"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:src="@drawable/header2"
    android:scaleType="centerCrop"
    app:layout_collapseMode="parallax" />

折叠工具栏的视差效果不起作用，header 中的图像被压扁

Parallax effect with collapsing toolbar not working, image in header squished

android

parallax

android-toolbar

android-design-library

android-coordinatorlayout