web-dev-qa-db-ja.com

この画像で行われているように、私のスクロールビュー内で私の画像ビューのサイズを変更するにはどうすればよいですか?

私はscrollviewを作成し、その中にimageviewを配置しました。下の画像と同じようにスクロールしてサイズを変更したいのですが、これまでのところほとんど成功していません。

私の試みでは、スクロール時に画像のサイズが変更されましたが、サイズ変更後にスペースが残っています。以下をどのように変更しますか:

画像:

enter image description here

これまでの私のコード:

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

MainActivity:

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

}
29
user4424557

視差効果を実現する方法を示す簡単な例を以下に示します。

まず、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;
    }
}
24
erakitin