如何在Android中的滾動視圖中將圖像錨定到Imageview中的中心？

Question

當我在Android滾動視圖中滾動時，它會向下滾動。

但我希望imageview中的圖像能夠錨定到中心。 因此，當您向上滾動時，您總會看到圖像中人物的臉部。

到目前為止，我還沒有完成這個任務

在下圖中創建了類似的效果：

Stockguy圖片：

到目前為止我的代碼（到目前為止還沒有實現）：

<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

為了實現像你發布的圖像上的視差效果，請嘗試以下代碼。 這是一種非常簡單的方式。

布局：

<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的上邊距等於ImageViews的高度。

偵聽ScrollView滾動位置和更改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;
    }
}

希望它會有所幫助。

Answer 2

我會采用不同的方法。

嘗試根據以下代碼段構建您的布局：

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

使用GestureDetector.SimpleOnGestureListener您可以檢測用戶何時滾動內容布局並相應地更新圖像大小和alpha以獲得您描述的效果。

Answer 3

我將使用ScrollView上的滾動回調來實現它，默認情況下這不存在，但通過擴展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);
    }
}

因此，使用com.your.package.UpdatingScrollView替換布局中的ScrollView。

在Fragment / Activity中，其中定義了UpdatingScrollView，您可以設置滾動偵聽器並根據滾動偏移更新圖像的下邊距。 對於ScrollView已滾動的每2個像素，您需要將底部邊距更新為-1像素，這將使圖像以其他內容的一半速率向上移動到屏幕上。

所以像這樣：

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