我正在尝试放置一个ImageView
in a CollapsingToolbarLayout
它在加载时占据整个屏幕,并且当您滚动内容时,16x9 分辨率图像宽度会调整大小,直到图像占据屏幕的整个宽度。那时,我希望图像具有视差app:layout_collapseParallaxMultiplier
of 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
来完成这个?
您可以通过跟踪垂直偏移来实现您想要的AppBarLayout
。它有一个美丽的方法addOnOffsetChangedListener
,因此您可以根据偏移量缩放图像AppBarLayout
.
所以,有three为了让它发挥作用,你必须做的事情:
- 您需要将图像放入
drawable-nodpi
文件夹,以防止 Android 针对不同的屏幕尺寸进行缩放。
- 改变你的
ImageView
的财产scaleType
to 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'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,那么我们刚刚达到视图的长宽比等于可绘制对象的长宽比的程度,并且我们不需要缩放更多。
Note:
- 它会按照您的意愿工作,仅适用于宽度>高度的图像,否则其行为将与
centerCrop
- 只有当你的
parallaxMultiplier
介于 0 和 1 之间。
它对我来说怎么样:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)