Reduzieren/Größe ändern Bild auf Blättern wie Whatsapp Profil

Question

Ich erstelle eine App mit einem Recyclerview. Und über dem RV habe ich ein Bild, das beim Scrollen kleiner werden sollte. Das funktioniert, aber der RV scrollt auch. Ich möchte, dass das Bild zuerst kleiner wird und dann beginnt die Recycleransicht zu scrollen. Aber wie kann ich das machen? Hier ist meine XML:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
android:layout_width="match_parent" 
android:layout_height="match_parent" 
xmlns:app="http://schemas.android.com/apk/res-auto"> 

<LinearLayout 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:orientation="vertical"> 

    <LinearLayout 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:background="@drawable/b" 
     android:id="@+id/test_photo" 
     android:orientation="horizontal"> 
     <TextView 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:text="test"/> 

    </LinearLayout> 
    <LinearLayout 
     android:layout_width="fill_parent" 
     android:layout_height="wrap_content" 
     app:layout_anchor="@+id/test_photo" 
     android:background="@color/colorPrimary" 
     app:layout_anchorGravity="bottom|start"> 
     <TextView 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:textColor="@color/colorWhite" 
      android:textSize="30sp" 
      android:text="username"/> 
    </LinearLayout> 

    <android.support.v7.widget.RecyclerView 
     android:id="@+id/user_view_fragment" 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" /> 
</LinearLayout> 

Und das ist der Code die Größe des Bildes:

rv.addOnScrollListener(new RecyclerView.OnScrollListener() { 
       float state = 0.0f; 

       @Override 
       public void onScrolled(RecyclerView recyclerView, int dx, final int dy) { 
        Log.e("Y",Integer.toString(dy)); 
        state+=dy; 
        LinearLayout img = (LinearLayout) findViewById(R.id.test_photo); 
        Log.e("STATE", Float.toString(state)); 
        if(state >= 500){ 
         img.getLayoutParams().height = minWidth; 
         img.getLayoutParams().width = minWidth; 
         img.requestLayout(); 
        } 
        if(state <= 0){ 
         img.getLayoutParams().height = imgHeight; 
         img.getLayoutParams().width = imgHeight; 
         img.requestLayout(); 
        } 
        if(state > 0 && state < 500){ 

         //up 
         img.getLayoutParams().height = (int)(imgHeight - ((float)(imgHeight-minWidth)/500)*state); 
         img.getLayoutParams().width = (int)(imgHeight - ((float)(imgHeight-minWidth)/500)*state); 
         img.requestLayout(); 

        } 
       } 
      }); 

Danke für die Hilfe!

EDIT:

<?xml version="1.0" encoding="utf-8"?> 

<android.support.design.widget.AppBarLayout 
    android:id="@+id/app_bar" 
    android:layout_width="match_parent" 
    android:layout_height="320dp" 
    android:fitsSystemWindows="true" 
    android:theme="@style/AppTheme.AppBarOverlay"> 

    <com.obware.alifsto.HelpClasses.CollapsingImageLayout 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" 
     android:fitsSystemWindows="true" 
     android:minHeight="108dp" 
     app:layout_scrollFlags="scroll|exitUntilCollapsed"> 

     <ImageView 
      android:id="@+id/background" 
      android:layout_width="match_parent" 
      android:layout_height="match_parent" 
      android:fitsSystemWindows="true" 
      android:scaleType="centerCrop" 
      android:src="@drawable/sunset" /> 

     <android.support.v7.widget.Toolbar 
      android:id="@+id/toolbar" 
      android:layout_width="match_parent" 
      android:layout_height="?attr/actionBarSize" /> 

     <ImageView 
      android:id="@+id/avatar" 
      android:layout_width="96dp" 
      android:layout_height="96dp" 
      android:layout_gravity="bottom|center_horizontal" 
      android:layout_marginBottom="96dp" 
      android:src="@drawable/logo_blau_weiss" 
      android:transitionName="@string/transition_userview_image"/> 

     <TextView 
      android:id="@+id/title" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:layout_gravity="bottom|center_horizontal" 
      android:layout_marginBottom="48dp" 
      android:text="Title" 
      android:textAppearance="?android:attr/textAppearanceLarge" 
      android:textStyle="bold" /> 

     <TextView 
      android:id="@+id/subtitle" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:layout_gravity="bottom|center_horizontal" 
      android:layout_marginBottom="24dp" 
      android:text="Subtitle " 
      android:transitionName="@string/transition_userview_username" 
      android:textAppearance="?android:attr/textAppearanceMedium" /> 

    </com.obware.alifsto.HelpClasses.CollapsingImageLayout> 

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


<android.support.v7.widget.RecyclerView 
    android:id="@+id/user_interface_recycler" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:clipToPadding="false" 
    app:layout_behavior="@string/appbar_scrolling_view_behavior"> 


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

Answer 1

Die Art und Weise, dies zu tun möchte, ist mit CoordinatorLayout und AppBarLayout und verwenden Sie alles, was Material Design Scrollen Güte.

Also im Wesentlichen was Sie tun, ist ein spezielles Layout ähnlich CollapsingToolbarLayout zu erstellen. Für meine Demo habe ich Code aus dieser Klasse als Inspiration verwendet, um mein kollabierendes Bildlayout zum Laufen zu bringen.

Was macht es Arbeit wird das Layout als direkter Nachkomme von AppBarLayout Hinzufügen dann ein AppBarLayout.OnOffsetChangeListener erstellen und mit dem AppBarLayout Registrierung. Wenn Sie dies tun, erhalten Sie Benachrichtigungen, wenn der Benutzer scrollt und das Layout nach oben scrollt.

Ein weiterer wichtiger Punkt ist die Einstellung einer Mindesthöhe. AppBarLayout verwendet die Mindesthöhe, um zu bestimmen, wann das Scrollen Ihres Layouts gestoppt werden soll, sodass Sie einen minimierten Layoutbereich erhalten.

Hier ist ein Codeauszug:

class OnOffsetChangedListener implements AppBarLayout.OnOffsetChangedListener { 

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

      final int insetTop = mLastInsets != null ? mLastInsets.getSystemWindowInsetTop() : 0; 
      final int scrollRange = appBarLayout.getTotalScrollRange(); 
      float offsetFactor = (float) (-verticalOffset)/(float) scrollRange; 
      Log.d(TAG, "onOffsetChanged(), offsetFactor = " + offsetFactor); 


      int childCount = getChildCount(); 
      for (int i = 0; i < childCount; i++) { 
       View child = getChildAt(i); 
       final ViewOffsetHelper offsetHelper = getViewOffsetHelper(child); 

       if (child instanceof Toolbar) { 
        if (getHeight() - insetTop + verticalOffset >= child.getHeight()) { 
         offsetHelper.setTopAndBottomOffset(-verticalOffset); // pin 
        } 
       } 

       if (child.getId() == R.id.background) { 
        int offset = Math.round(-verticalOffset * .5F); 
        offsetHelper.setTopAndBottomOffset(offset); // parallax 
       } 

       if (child.getId() == R.id.avatar) { 

        float scaleFactor = 1F - offsetFactor * .5F ; 
        child.setScaleX(scaleFactor); 
        child.setScaleY(scaleFactor); 

        int topOffset = (int) ((mImageTopCollapsed - mImageTopExpanded) * offsetFactor) - verticalOffset; 
        int leftOffset = (int) ((mImageLeftCollapsed - mImageLeftExpanded) * offsetFactor); 
        child.setPivotX(0); 
        child.setPivotY(0); 
        offsetHelper.setTopAndBottomOffset(topOffset); 
        offsetHelper.setLeftAndRightOffset(leftOffset); 
       } 

       if (child.getId() == R.id.title) { 

        int topOffset = (int) ((mTitleTopCollapsed - mTitleTopExpanded) * offsetFactor) - verticalOffset; 
        int leftOffset = (int) ((mTitleLeftCollapsed - mTitleLeftExpanded) * offsetFactor); 
        offsetHelper.setTopAndBottomOffset(topOffset); 
        offsetHelper.setLeftAndRightOffset(leftOffset); 
        Log.d(TAG, "onOffsetChanged(), offsetting title top = " + topOffset + ", left = " + leftOffset); 
        Log.d(TAG, "onOffsetChanged(), offsetting title mTitleLeftCollapsed = " + mTitleLeftCollapsed + ", mTitleLeftExpanded = " + mTitleLeftExpanded); 
       } 

       if (child.getId() == R.id.subtitle) { 

        int topOffset = (int) ((mSubtitleTopCollapsed - mSubtitleTopExpanded) * offsetFactor) - verticalOffset; 
        int leftOffset = (int) ((mSubtitleLeftCollapsed - mSubtitleLeftExpanded) * offsetFactor); 
        offsetHelper.setTopAndBottomOffset(topOffset); 
        offsetHelper.setLeftAndRightOffset(leftOffset); 
       } 
      } 
     } 
    } 

Die Linien child.setScaleX() und child.setScaleY() sind der Code, der tatsächlich die Größe des Bildes ändert.

Demo-App ist auf GitHub um https://github.com/klarson2/Collapsing-Image. Genießen.

---

EDIT: Nach einem TabLayout Hinzufügen ich einen Fehler erkennen ich in meinem Layout gemacht, die die AppBarLayout eine feste Höhe machen sollte, dann macht die individuelle Kollabieren Bauteilhöhe match_parent sein. Das macht es so, dass Sie die TabLayout nicht sehen können, die der App-Leiste hinzugefügt wird. Ich änderte das Layout, so dass AppBarLayout Höhe war wrap_content und die benutzerdefinierte kollabierende Komponente hatte die feste Höhe. Dies ermöglicht das Hinzufügen von zusätzlichen Komponenten wie TabLayout zu AppBarLayout. Dies wurde in der letzten Revision von GitHub korrigiert.