Question

当我在Android滚动视图中滚动时，它会向下滚动。

但我希望将imageview中的图像锚定到中心。因此，当您向上滚动时，您总能看到图像中人物的脸部。

到目前为止，我无法完成此任务

在下图中创建了类似的效果：

enter image description here

Stockguy image：

enter image description here

到目前为止我的代码（到目前为止还没有完成此操作）：

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

在定义了UpdatingScrollView的Fragment / Activity中，设置滚动侦听器并根据滚动偏移更新图像的下边距。对于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);
        }
    }
});

如何在Android中的滚动视图中将图像锚定到Imageview中的中心？

3 个答案: