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圖像縮放

回答

相關問題