Wie kann ich ein Bild in einer Bildansicht in einem Scrollview in der Mitte verankern, in Android?

Question

Wenn ich innerhalb meines Android Scrollview scrollen, scrollt es nach unten wie es sollte.

Aber ich möchte das Bild in der Bildansicht in der Mitte verankern. So sehen Sie immer das Gesicht der Person im Bild, während Sie nach oben scrollen.

Bisher habe ich nicht in der Lage gewesen, diesen

Einen ähnlichen Effekt zu erreichen, ist in dem Bild erstellt unter:

Stockguy Bild:

Mein Code bisher (was bisher ist dies nicht zu erreichen):

<ScrollView xmlns:android="http://schemas.android.com/apk/res/android" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:fillViewport="true" 
    android:scrollbars="none" 
    android:background="#FAFAFA" 
    android:id="@+id/cScrollview" 
    > 

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:tools="http://schemas.android.com/tools" 
    android:layout_width="match_parent" 
    android:layout_height="1100dp" 
    tools:context=".MainActivity" 
    android:id="@+id/CRLayout"> 

     <ImageView 
      android:layout_gravity="center" 
      android:adjustViewBounds="true" 
      android:layout_width="601dp" 
      android:layout_height="250dp" 
      android:paddingTop="0dp" 
      android:paddingLeft="0dp" 
      android:paddingRight="0dp" 
      android:scaleType="centerCrop" 
      android:id="@+id/contactPic" 
      android:src="@drawable/stockguy"/> 

      .... 


      </RelativeLayout> 
</ScrollView> 

Answer 1

ich damit einen anderen Ansatz nehmen würde.

Versuchen Sie Ihr Layout Aufbau basiert auf dem folgenden Code-Schnipsel:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
      android:orientation="vertical" 
      android:layout_width="match_parent" 
      android:layout_height="match_parent"> 
<ImageView 
    android:id="@+id/image" 
    android:layout_width="match_parent" 
    android:background="#00FF00" 
    android:scaleType="centerCrop" 
    android:layout_height="200dp"/> 
<FrameLayout 
    android:id="@+id/content" 
    android:layout_below="@+id/image" 
    android:background="#FF0000" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent"/> 
</RelativeLayout> 

Mit der GestureDetector.SimpleOnGestureListener Sie können erkennen, wenn der Benutzer einen Bildlauf auf den Inhalt Layout und die Bildgröße und Alpha aktualisieren entsprechend den Effekt, den Sie beschreiben, zu erhalten.

Answer 2

ich dies mit einem Scroll-Rückruf auf dem Scroll implementieren würde, das gibt es nicht standardmäßig, sondern ist einfach, sich selbst zu schaffen, indem Scroll erstreckt:

public class UpdatingScrollView extends ScrollView { 

    private OnScrollChangedListener mScrollChangedListener; 

    public interface OnScrollChangedListener { 
     public void onScrollChanged(int x, int y, int oldx, int oldy); 
    } 

    public UpdatingScrollView(Context context) { 
     super(context); 
    } 

    public UpdatingScrollView(Context context, AttributeSet attrs) { 
     super(context, attrs); 
    } 

    public UpdatingScrollView(Context context, AttributeSet attrs, int defStyle) { 
     super(context, attrs, defStyle); 
    } 

    public void setOnScrollChangedListener(OnScrollChangedListener listener) { 
     mScrollChangedListener = listener; 
    } 

    @Override 
    protected void onScrollChanged(int x, int y, int oldx, int oldy) { 
     super.onScrollChanged(x, y, oldx, oldy); 
     if (mScrollChangedListener != null) mScrollChangedListener.onScrollChanged(x, y, oldx, oldy); 
    } 
} 

So ersetzen Scroll in Ihrem Layout mit com.your.package.UpdatingScrollView.

In Ihrem Fragment/Activity, in dem UpdatingScrollView definiert ist, legen Sie den Scroll-Listener fest und aktualisieren den unteren Rand des Bildes basierend auf dem Scroll-Offset. Für alle 2 Pixel, die in der ScrollView gescrollt wurden, müssen Sie den unteren Rand um -1 Pixel aktualisieren, damit das Bild mit der halben Rate des Rests des Inhalts auf dem Bildschirm angezeigt wird.

So etwas wie folgt aus:

scrollView.setOnScrollChangedListener(new OnScrollChangedListener() { 
    @Override 
    public void onScrollChanged(int x, int y, int oldx, int oldy) { 
     // I think y will be negative when scrolled 
     if(y >= -image.getHeight()) { 
      RelativeLayout.LayoutParams lp = (RelativeLayout.LayoutParams) image.getLayoutParams(); 
      lp.setMargins(0, 0, 0, y/2); 
      image.setLayoutParams(lp); 
     } 
    } 
}); 

Answer 3

Parallaxeffekt wie auf Bild zu erzielen, die Sie versuchen geschrieben Code folgen. Es ist ein sehr einfacher Weg.

Layout:

<ScrollView xmlns:android="http://schemas.android.com/apk/res/android" 
    android:id="@+id/scrollView" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent"> 

    <RelativeLayout 
     android:id="@+id/rlWrapper" 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content"> 

     <ImageView 
      android:id="@+id/ivContactPhoto" 
      android:layout_width="match_parent" 
      android:layout_height="@dimen/contact_photo_height" 
      android:scaleType="centerCrop" 
      android:src="@drawable/stockguy" /> 

     <LinearLayout 
      android:layout_width="match_parent" 
      android:layout_height="@dimen/contact_photo_height" 
      android:layout_marginTop="250dp"> 

      <!-- Other Views --> 

     </LinearLayout> 

    </RelativeLayout> 
</ScrollView> 

LinearLayout 's oberer Rand ist gleich die ImageViews' s Höhe.

Listening Bildlaufposition des ScrollView und Wechselposition von ImageView:

@Override 
protected void onCreate(Bundle savedInstanceState) { 
    <...> 

    mScrollView = (ScrollView) findViewById(R.id.scrollView); 
    mPhotoIV = (ImageView) findViewById(R.id.ivContactPhoto); 
    mWrapperRL = (RelativeLayout) findViewById(R.id.rlWrapper); 

    mScrollView.getViewTreeObserver().addOnScrollChangedListener(new ScrollPositionObserver()); 

    <...> 
} 

private class ScrollPositionObserver implements ViewTreeObserver.OnScrollChangedListener { 

    private int mImageViewHeight; 

    public ScrollPositionObserver() { 
     mImageViewHeight = getResources().getDimensionPixelSize(R.dimen.contact_photo_height); 
    } 

    @Override 
    public void onScrollChanged() { 
     int scrollY = Math.min(Math.max(mScrollView.getScrollY(), 0), mImageViewHeight); 

     // changing position of ImageView 
     mPhotoIV.setTranslationY(scrollY/2); 

     // alpha you can set to ActionBar background 
     float alpha = scrollY/(float) mImageViewHeight; 
    } 
} 

Hoffe, es hilft.