CollapsingToolbarLayout图像缩放

我一直在阅读，整天没有任何成功。CollapsingToolbarLayout图像缩放

基本上希望能够在android.support.design.widget.CollapsingToolbarLayout中设置ImageView，根据检测到的onOffsetChanged更改更改其高度，以便在折叠以适应整个图像时“缩小”宽度和“放大”时扩展到正常的centerCrop行为。

我试图在onOffsetChanged中设置ImageView高度，但这会导致由于CollapsingToolbarLayout而导致的其他问题也在重新定位。

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

任何人都可以提供示例代码（如果可能的话）？

也看到this project但同样类似的限制。其他项目也是如此。

来源

2017-06-28 George

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

在代码中，店使用matrix.set(imageView.getImageMatrix());

而且取决于折叠式工具的滚动，你可以用matrix.postScale()缩放图像，最后用imageView.setImageMatrix(matrix)设置回ImageView的一个Matrix初始ImageMatrix。这可以给你放大/缩小效果。

来源

2017-06-28 20:36:19 Balamurugan

@George你好。如果此答案帮助您解决了问题，请将其标记为已接受。 – Balamurugan

-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>

来源

2017-06-28 22:50:51 George

CollapsingToolbarLayout图像缩放

回答

相关问题