如何在我的滚动视图中调整我的图像视图的大小，就像在这张图片中所做的那样？

Question

我创建了一个滚动视图，并在其中放置了一个图像视图。我希望在滚动时以与下图中相同的方式调整大小，但到目前为止我收效甚微。

在我的尝试中，图像在滚动时调整了大小，但是在调整大小后还剩下 space。您将如何修改以下内容：

图片：

到目前为止我的代码：

activity_main.xml

<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="fitXY"
            android:id="@+id/contactPic"
            android:src="@drawable/stock"
            android:clickable="true"/>

主要活动：

@Override
public void onScrollChanged(ObservableScrollView scrollView, int x, int y, int oldx, int oldy) {
    final ImageView contactPicture = (ImageView) findViewById(R.id.contactPic);
    final RelativeLayout contactLayout = (RelativeLayout) findViewById(R.id.ContactRLayout);
    if (scrollView == contactScrollView) {
        View view = (View) scrollView.getChildAt(scrollView.getChildCount() - 1);
        int distanceFromPageEnd = (view.getBottom() - (scrollView.getHeight() + scrollView.getScrollY()));

        Log.e("onScrollChanged", "distance from bottom = " + String.valueOf(distanceFromPageEnd));
        if (distanceFromPageEnd >= 1408)
        {
       contactPicture.getLayoutParams().height = (distanceFromPageEnd - 1408);
        contactPicture.requestLayout();
        }
    }

ScrollViewListener:

    public interface ScrollViewListener {

        void onScrollChanged(ObservableScrollView scrollView, int x, int y, int oldx, int oldy);

    }

ObservableScrollView:

public class ObservableScrollView extends ScrollView {

    private ScrollViewListener scrollViewListener = null;

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

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

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

    public void setScrollViewListener(ScrollViewListener scrollViewListener) {
        this.scrollViewListener = scrollViewListener;
    }

    public void onOverScrolled(int scrollX, int scrollY, boolean clampedX, boolean clampedY) {
        super.onOverScrolled(scrollX, scrollY, clampedX, clampedY);
    }

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

}

Answer 1

下面有一个简单的例子展示了如何实现视差效果。

首先，将您的 ImageView 和其他观点放入 FrameLayout:

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

    <FrameLayout
        android:id="@+id/flWrapper"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

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

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

            <!-- Other Views -->

        </LinearLayout>

    </FrameLayout>
</ScrollView>

LinearLayout 的上边距等于 ImageViews 的高度（在我们的示例中为 @dimen/contact_photo_height）。

然后我们应该监听 ScrollView 的滚动位置并更改 ImageView 的位置：

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

    mScrollView = (ScrollView) findViewById(R.id.scrollView);
    mPhotoIV = (ImageView) findViewById(R.id.contactPic);
    mWrapperFL = (FrameLayout) findViewById(R.id.flWrapper);

    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 could set to ActionBar background
        float alpha = scrollY / (float) mImageViewHeight;
    }
}

如何在我的滚动视图中调整我的图像视图的大小，就像在这张图片中所做的那样？

How do I resize my imageview within my scrollview as it is done in this image?

android

image

android-layout

android-intent

android-activity