Come posso ancorare un'immagine al centro all'interno di un'imagine in una vista a scorrimento, in Android?

Question

Quando si scorre all'interno del mio scrollview Android, scorre verso il basso come dovrebbe.

Ma mi piacerebbe che l'immagine nell'immaginario fosse ancorata al centro. Quindi vedi sempre il volto della persona nell'immagine mentre scorri verso l'alto.

Finora non sono stati in grado di realizzare questo

Un effetto simile è creato ad immagine di seguito:

immagine

Stockguy:

Il mio codice finora (che finora non realizzare questo):

<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

mi piacerebbe prendere un approccio diverso con quello.

provare a costruire il layout in base alla seguente frammento:

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

Utilizzando il GestureDetector.SimpleOnGestureListener è possibile rilevare quando l'utente scorre sul layout dei contenuti e aggiornare le dimensioni dell'immagine e l'alfa di conseguenza per ottenere l'effetto che descrivi.

Answer 2

vorrei implementare questo utilizzando un callback di scorrimento sulla ScrollView, questo non esiste per impostazione predefinita, ma è facile da crea estendendo ScrollView:

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); 
    } 
} 

consentendo di sostituire ScrollView nel layout con com.your.package.UpdatingScrollView.

Nel frammento/attività in cui è definito UpdateScrollView si imposta il listener di scorrimento e si aggiorna il margine inferiore dell'immagine in base all'offset di scorrimento. Per ogni 2 pixel del quale è stato fatto scorrere ScrollView, è necessario aggiornare il margine inferiore di -1 pixel che farà spostare l'immagine sullo schermo a metà della velocità del resto del contenuto.

Quindi qualcosa di simile:

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

per ottenere un effetto di parallasse come sull'immagine che hai postato prova seguente codice. È un modo molto semplice

Disposizione:

<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 margine superiore è uguale al ImageViews' altezza s.

Ascolto posizione di scorrimento del ScrollView e cambiando la posizione di 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; 
    } 
} 

spero che sarà di aiuto.