CoordinatorLayout 和 ImageView 在滚动时调整宽度的问题

Question

我正在尝试将 ImageView 放在 CollapsingToolbarLayout 中，它在加载时占据整个屏幕，当您滚动内容时，16x9 分辨率的图像宽度会调整大小，直到图像占据屏幕的整个宽度。那时，我希望图像的视差为 app:layout_collapseParallaxMultiplier 0.5

使用此 XML 布局：

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.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">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/app_bar"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fitsSystemWindows="true"
        android:theme="@style/AppTheme.AppBarOverlay">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/toolbar_layout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:fitsSystemWindows="true"
            app:contentScrim="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

            <ImageView
                android:id="@+id/img_hero"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:adjustViewBounds="true"
                android:scaleType="centerCrop"
                android:src="@drawable/lake"
                app:layout_collapseMode="parallax"
                app:layout_collapseParallaxMultiplier="0.5"/>

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_collapseMode="none"
                app:popupTheme="@style/AppTheme.PopupOverlay"/>

        </android.support.design.widget.CollapsingToolbarLayout>
    </android.support.design.widget.AppBarLayout>

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

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="@dimen/fab_margin"
        app:layout_anchor="@id/app_bar"
        app:layout_anchorGravity="bottom|end"
        app:srcCompat="@android:drawable/ic_dialog_email"/>

</android.support.design.widget.CoordinatorLayout>

完成以下：

下图显示了图片的实际边界是什么：

当我滚动时，我希望显示更多的图像宽度，因为图像的高度缩小并导致以下结果：

一旦我达到这一点，这就是我希望 0.5 的折叠视差倍数生效的地方。

我弄乱了许多不同的滚动行为，尝试了所有 ImageView 滚动类型，但无济于事。有谁知道这是否可行，如果可行，可以提供任何关于我做错或不做的指示。

我是否需要创建自己的自定义 CoordinatorLayout.Behavior 才能完成此操作？

Answer 1

您可以通过跟踪 AppBarLayout 的垂直偏移来实现您想要的效果。它有漂亮的方法 addOnOffsetChangedListener，因此您可以根据 AppBarLayout.

的偏移量缩放图像

因此，您必须三件事才能使其正常工作：

您需要将图像放入 drawable-nodpi 文件夹，以防止 Android 针对不同的屏幕尺寸缩放图像。
将您的 ImageView 的属性 scaleType 更改为 matrix - 这是必需的，因为我们将自行更改此 ImageView 的矩阵。

通过以下方式为您AppBarLayout实施addOnOffsetChangedListener：

final ImageView imageView = (ImageView) findViewById(R.id.img_hero);
AppBarLayout appBarLayout = (AppBarLayout) findViewById(R.id.app_bar);
appBarLayout.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() {
    @Override
    public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {
        Matrix matrix = new Matrix(imageView.getImageMatrix());

        //get image's width and height
        final int dwidth = imageView.getDrawable().getIntrinsicWidth();
        final int dheight = imageView.getDrawable().getIntrinsicHeight();

        //get view's width and height
        final int vwidth = imageView.getWidth() - imageView.getPaddingLeft() - imageView.getPaddingRight();
        int vheight = imageView.getHeight() - imageView.getPaddingTop() - imageView.getPaddingBottom();

        float scale;
        float dx = 0, dy = 0;
        float parallaxMultiplier = ((CollapsingToolbarLayout.LayoutParams) imageView.getLayoutParams()).getParallaxMultiplier();

        //maintain the image's aspect ratio depending on offset
        if (dwidth * vheight > vwidth * dheight) {
            vheight += (verticalOffset); //calculate view height depending on offset
            scale = (float) vheight / (float) dheight; //calculate scale
            dx = (vwidth - dwidth * scale) * 0.5f; //calculate x value of the center point of scaled drawable
            dy = -verticalOffset * (1 - parallaxMultiplier); //calculate y value by compensating parallaxMultiplier
        } else {
            scale = (float) vwidth / (float) dwidth;
            dy = (vheight - dheight * scale) * 0.5f;
        }

        int currentWidth = Math.round(scale * dwidth); //calculate current intrinsic width of the drawable

        if (vwidth <= currentWidth) { //compare view width and drawable width to decide, should we scale more or not
            matrix.setScale(scale, scale);
            matrix.postTranslate(Math.round(dx), Math.round(dy));
            imageView.setImageMatrix(matrix);
        }
    }
});

我在这里所做的只是获取 ImageView 的源代码以确定其具有 centerCrop 比例类型时的边界，然后根据 [=23= 计算矩阵的比例和平移].如果缩放值小于 1.0f，那么我们刚刚达到视图的纵横比等于可绘制对象的纵横比的地步，我们不需要再缩放。

注:

它会如你所愿地工作，只适用于宽度 > 高度的图像，否则它的行为将与 centerCrop
只有当您的 parallaxMultiplier 介于 0 和 1 之间时才有效。

我觉得如何：

CoordinatorLayout 和 ImageView 在滚动时调整宽度的问题

Issue with CoordinatorLayout and ImageView that adjusts width while scrolling

android

android-imageview

parallax

android-coordinatorlayout

android-collapsingtoolbarlayout