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

Question

我试图把一个ImageView在CollapsingToolbarLayout其中占据了整个屏幕上的负载,当你滚动内容时,16:9高分辨率图像的宽度大小调整,直到图像占据屏幕的整个宽度.那时,我希望图像的视差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的崩溃视差乘数生效的地方.

我已经搞砸了许多不同的滚动行为,尝试了所有的ImageViewscrollTypes,但没有用.有没有人知道这是否可能,如果可以的话,可以提供任何关于我做错或不做的指示.

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

Answer 1

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

因此,要使其工作,您需要做三件事:

1. 您需要将图像放入drawable-nodpi文件夹,以防止Android针对不同的屏幕尺寸进行缩放.
2. 将你ImageView的财产scaleType改为matrix- 这是必要的,因为我们将ImageView自己改变这个矩阵.

3. 通过下一个方式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'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缩放类型时的边界,然后根据需要计算矩阵的比例和平移verticalOffset.如果比例值小于1.0f,那么我们刚刚达到我们的视图的纵横比等于drawable的纵横比的点,我们不需要扩展更多.

注意:

1. 它可以按照你的意愿工作,只有宽度>高度的图像,否则它的行为将是相同的 centerCrop
2. 它只有在你parallaxMultiplier介于0和1之间时才有效.

它是如何找我的: