Проблема с CoordinatorLayout и ImageView, которая регулирует ширину при прокрутке

Я пытаюсь поместить 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 scrollTypes, безрезультатно. Кто-нибудь знает, возможно ли это, и если да, может предоставить любые указатели на то, что я делаю неправильно или не делаю.

Нужно ли мне создать свой собственный CoordinatorLayout.Behavior, чтобы выполнить это?

Ответы

Ответ 1

Вы можете добиться того, чего хотите, отслеживая вертикальное смещение AppBarLayout. Он имеет прекрасный метод addOnOffsetChangedListener, поэтому вы можете масштабировать изображение в зависимости от смещения AppBarLayout.

Итак, есть три вещи, которые вы должны сделать, чтобы заставить его работать:

  • Вам нужно поместить свое изображение в папку drawable-nodpi, чтобы предотвратить его масштабирование для разных размеров экрана.
  • Измените свойство ImageView scaleType на matrix - это необходимо, поскольку мы сами изменим матрицу этого ImageView.

  • Внесите addOnOffsetChangedListener для вас AppBarLayout следующим образом:

    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 width and height
        final int dwidth = imageView.getDrawable().getIntrinsicWidth();
        final int dheight = imageView.getDrawable().getIntrinsicHeight();

        //get view 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 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, а затем просто рассчитать масштаб и перевод матрицы в зависимости от verticalOffset. Если значение шкалы меньше 1.0f, то мы только достигли точки, в которой соотношение сторон изображения равно отношению к коэффициенту масштабируемости, и нам больше не нужно масштабировать.

Примечание

  • Он работал бы по вашему желанию только с изображением, ширина которого > высота, иначе его поведение будет таким же, как centerCrop
  • Это будет работать, только если ваш parallaxMultiplier находится между 0 и 1.

Как он выглядит для меня:

введите описание изображения здесь