Comment redimensionner mon imageview dans mon scrollview comme il est fait dans cette image?

j'ai créé un scrollview et un imageview y est placé. Je voudrais sur scroll pour lui redimensionner de la même façon qu'il est fait dans l'image ci-dessous, mais jusqu'à présent j'ai eu peu de succès.

dans mes tentatives, l'image est redimensionnée sur scroll mais il reste de l'espace après la redimensionnement. Comment voulez-vous modifier le ci-dessous:

Image:

enter image description here

mon Code so loin:

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

}
26
demandé sur erakitin 2015-01-19 17:50:11

1 réponses

Il est simple exemple ci-dessous qui montre comment réaliser l'effet de parallaxe.

tout d'Abord, mettez votre ImageView et d'autres vues dans 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>

est égale à la ImageViews'hauteur (@dimen/contact_photo_height dans notre exemple).

alors nous devrions écouter faire défiler la position de la ScrollView et changer la position de 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
répondu erakitin 2015-04-16 08:44:55