使用缩放

时间:2017-06-28 16:38:46

标签: android parallax

我一整天都在阅读,但没有取得任何成功。

基本上希望能够在android.support.design.widget.CollapsingToolbarLayout中设置一个ImageView来改变它的高度,具体取决于检测到的onOffsetChanged变化,以便在折叠时“缩小”以适合整个图像宽度扩展时执行“放大”以执行正常的centerCrop行为。

我尝试在onOffsetChanged中设置ImageView高度,但这会导致其他问题,因为CollapsingToolbarLayout也会重新定位它。

我在ParallaxListView项目中看到的示例功能,但希望使用CollapsingToolbarLayout。

任何人都可以提供示例代码(如果可能的话)?

enter image description here

同样见this project但又有类似限制。其他项目也是如此。

enter image description here

2 个答案:

答案 0 :(得分:3)

您可以尝试使用android:scaleType="matrix"进行折叠图片的布局定义。

在代码中, 使用ImageMatrix

将初始Matrix存储在matrix.set(imageView.getImageMatrix());

根据折叠工具栏的滚动,您可以使用matrix.postScale()缩放图像,最后使用imageView.setImageMatrix(matrix)将其设置回ImageView。这可以为您提供放大/缩小效果。

答案 1 :(得分:-1)

我设法最终使用以下代码为其他任何人提供帮助。展开时代码将适合宽度,折叠时适合高度。如果需要,可以将其更改为进一步缩放(缩放)。

不确定是否编写了最佳代码,欢迎提出建议。要测量位图和视图并计算最小/最大比例,我使用第一次调用onOffsetChanged,这似乎工作正常。

公共类MyActivity扩展AppCompatActivity实现AppBarLayout.OnOffsetChangedListener {

private float collapsedScale;
private float expandedScale;


@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);

    setContentView(R.layout.my_activity_layout);

    Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
    setSupportActionBar(toolbar);

    getSupportActionBar().setDisplayHomeAsUpEnabled(true);

    setTitle(entry.label);

    photoView = (ImageView) findViewById(R.id.photo_image);

    AppBarLayout mAppBarLayout = (AppBarLayout) findViewById(R.id.appbar);
    mAppBarLayout.addOnOffsetChangedListener(this);

}

@Override
public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {

    int maxScroll = appBarLayout.getTotalScrollRange();

    float scrollPercent = (float) Math.abs(verticalOffset) / (float) maxScroll;

    if (collapsedScale == 0) {

        Drawable photo = photoView.getDrawable();

        int bitmapWidth = photo.getIntrinsicWidth();
        int bitmapHeight = photo.getIntrinsicHeight();

        collapsedScale = (float)photoView.getWidth()/(float)bitmapWidth;
        expandedScale = (float)photoView.getHeight()/(float)bitmapHeight;

        scalePhotoImage(photoView, expandedScale);

    } else {

        scalePhotoImage(photoView, collapsedScale + (expandedScale - collapsedScale) * (1f - scrollPercent));
    }
}

private static void scalePhotoImage(ImageView photoView, float scale) {

    Drawable photo = photoView.getDrawable();

    int bitmapWidth = photo.getIntrinsicWidth();
    int bitmapHeight = photo.getIntrinsicHeight();

    float offsetX = (photoView.getWidth() - bitmapWidth) / 2F;
    float offsetY = (photoView.getHeight() - bitmapHeight) / 2F;

    float centerX = photoView.getWidth() / 2F;
    float centerY = photoView.getHeight() / 2F;

    Matrix imageMatrix = new Matrix();
    imageMatrix.setScale(scale, scale, centerX, centerY);
    imageMatrix.preTranslate(offsetX, offsetY);

    photoView.setImageMatrix(imageMatrix);
}
}

我的布局     

<android.support.design.widget.AppBarLayout
    android:id="@+id/appbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:fitsSystemWindows="true"
    app:elevation="6dp"
    android:theme="@style/AppTheme.AppBarOverlay">

    <android.support.design.widget.CollapsingToolbarLayout
        android:id="@+id/collapsing_toolbar"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_scrollFlags="scroll|exitUntilCollapsed|snap"
        app:contentScrim="@android:color/transparent">

        <ImageView
            android:id="@+id/photo_image"
            android:layout_width="match_parent"
            android:layout_height="300dp"
            android:src="@drawable/demo_photo"
            android:fitsSystemWindows="true"
            android:scaleType="matrix"
            app:layout_collapseMode="parallax"/>

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="100dp"
            android:theme = "@style/ToolBarStyle"
            app:layout_collapseMode="pin">

        </android.support.v7.widget.Toolbar>

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

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

<android.support.v4.widget.NestedScrollView 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"
    app:layout_behavior="@string/appbar_scrolling_view_behavior">

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

</android.support.v4.widget.NestedScrollView>