问题
I want to obtain something like in the photo below:
The image is fixed to the top screen. When the user start scrolling, the image will resize (smoothly) at half of it's original size (200dp to 100dp, with something like scaleType:centerCrop
) and if the user keeps scrolling (after the image it's at 100dp), the image will remain fixed to top and the scroll will work only for the rest of the view.
Also, if the user will scroll up, the image will become (smoothly) to it's original size.
I don't want to move into the image and get it's upper part or it's lower part, just to resize it.
Any ideas of how to implement the onScrollListener
or some similar method in the java class to obtain that effect?
The code I have in XML:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="@+id/sharkIv"
android:layout_width="match_parent"
android:layout_height="200dp"
android:layout_alignParentTop="true"
android:contentDescription="@string/image"
android:scaleType="centerCrop"
android:src="@drawable/shark" />
<ScrollView
android:id="@+id/scrollView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@id/sharkIv">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:id="@+id/loremTv"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec aliquam molestie purus ut lacinia. Maecenas non dapibus est. Sed nec mollis dui. Nunc non tristique ipsum. Sed posuere eget libero sed semper. Sed et vulputate felis. Aliquam porta nec tellus sed sollicitudin. Praesent sollicitudin dapibus purus in condimentum. Phasellus sodales nibh nec lacus egestas, in molestie turpis imperdiet. Nam ornare vitae augue id rhoncus. Suspendisse posuere ullamcorper dui at vehicula. Cras vel nisl in lorem pellentesque ornare. Phasellus congue sodales libero, semper vehicula felis hendrerit ac.
Phasellus feugiat libero ut risus auctor lobortis. Sed ultrices vestibulum dictum. Proin eleifend dolor vitae ipsum suscipit, in tempus odio volutpat. Nulla id faucibus mauris. Maecenas iaculis dapibus lacus. Sed pellentesque, enim ut consequat placerat, augue lacus dapibus ligula, id faucibus nunc quam ut mauris. Vivamus sed magna arcu. Phasellus id nibh a sapien convallis tempor non id massa. Etiam sollicitudin eleifend lorem. Duis feugiat, quam id varius ultrices, lacus sapien pulvinar metus, non tincidunt mauris velit sit amet quam. Nulla arcu purus, maximus quis feugiat vel, rutrum et eros. Mauris ultricies pretium justo. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed dictum dignissim consectetur.
Mauris euismod scelerisque odio, at fringilla ipsum sodales vel. Maecenas nec lobortis magna. Nullam posuere nisi nec sem varius, sit amet venenatis arcu ullamcorper. Aliquam eu faucibus mi, eget molestie nunc. Morbi nulla erat, efficitur ut sodales nec, venenatis a nunc. Nam fermentum ligula id felis faucibus, quis malesuada mauris tristique. Nulla consectetur leo vel lorem fermentum, quis euismod ligula faucibus. Nullam pulvinar egestas dui sed convallis.
Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum sed quam nec enim vulputate blandit. Donec nec tempus felis. Etiam sagittis in sapien sed pretium. Donec ultrices nisl justo, sit amet varius dui consequat luctus. Suspendisse potenti. Vivamus nec posuere purus. Etiam laoreet mi non arcu tempus, suscipit luctus arcu posuere. Proin lobortis sapien orci, sit amet interdum erat pretium id. In gravida neque egestas eros pretium, id fringilla magna lacinia. Sed commodo accumsan libero quis egestas. Donec tempus malesuada purus sit amet maximus. Nullam cursus eu metus eget consequat. Pellentesque ultrices, nisl sit amet scelerisque bibendum, mauris tortor luctus magna, ut gravida tellus tellus et ex.
Suspendisse sit amet nulla nibh. In eu dui cursus sem vestibulum vestibulum. Integer justo tortor, molestie vel efficitur vitae, mattis sed est. Vestibulum non justo aliquet, fermentum sem nec, euismod est. Sed rhoncus consequat est id tempus. Pellentesque gravida finibus rhoncus. Nunc id dolor et ex tristique tempor nec nec sem. Curabitur at imperdiet massa. Maecenas at nulla non sapien faucibus blandit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos." />
<!-- other TextViews, ImageViews and stuff -->
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<ImageView
android:layout_width="match_parent"
android:layout_height="200dp"
android:contentDescription="@string/image" />
</LinearLayout>
</ScrollView>
</RelativeLayout>
回答1:
Use this way
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@android:color/background_light"
android:fitsSystemWindows="true"
>
<android.support.design.widget.AppBarLayout
android:id="@+id/main.appbar"
android:layout_width="match_parent"
android:layout_height="300dp"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
android:fitsSystemWindows="true"
>
<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/main.collapsing"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginStart="48dp"
app:expandedTitleMarginEnd="64dp"
>
<ImageView
android:id="@+id/main.backdrop"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="fitXY"
android:fitsSystemWindows="true"
android:src="@mipmap/ic_launcher"
app:layout_collapseMode="parallax"
/>
<android.support.v7.widget.Toolbar
android:id="@+id/main.toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
app:layout_collapseMode="parallax"
/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior"
>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="20sp"
android:lineSpacingExtra="8dp"
android:text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec aliquam molestie purus ut lacinia. Maecenas non dapibus est. Sed nec mollis dui. Nunc non tristique ipsum. Sed posuere eget libero sed semper. Sed et vulputate felis. Aliquam porta nec tellus sed sollicitudin. Praesent sollicitudin dapibus purus in condimentum. Phasellus sodales nibh nec lacus egestas, in molestie turpis imperdiet. Nam ornare vitae augue id rhoncus. Suspendisse posuere ullamcorper dui at vehicula. Cras vel nisl in lorem pellentesque ornare. Phasellus congue sodales libero, semper vehicula felis hendrerit ac.
Phasellus feugiat libero ut risus auctor lobortis. Sed ultrices vestibulum dictum. Proin eleifend dolor vitae ipsum suscipit, in tempus odio volutpat. Nulla id faucibus mauris. Maecenas iaculis dapibus lacus. Sed pellentesque, enim ut consequat placerat, augue lacus dapibus ligula, id faucibus nunc quam ut mauris. Vivamus sed magna arcu. Phasellus id nibh a sapien convallis tempor non id massa. Etiam sollicitudin eleifend lorem. Duis feugiat, quam id varius ultrices, lacus sapien pulvinar metus, non tincidunt mauris velit sit amet quam. Nulla arcu purus, maximus quis feugiat vel, rutrum et eros. Mauris ultricies pretium justo. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed dictum dignissim consectetur.
Mauris euismod scelerisque odio, at fringilla ipsum sodales vel. Maecenas nec lobortis magna. Nullam posuere nisi nec sem varius, sit amet venenatis arcu ullamcorper. Aliquam eu faucibus mi, eget molestie nunc. Morbi nulla erat, efficitur ut sodales nec, venenatis a nunc. Nam fermentum ligula id felis faucibus, quis malesuada mauris tristique. Nulla consectetur leo vel lorem fermentum, quis euismod ligula faucibus. Nullam pulvinar egestas dui sed convallis.
Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum sed quam nec enim vulputate blandit. Donec nec tempus felis. Etiam sagittis in sapien sed pretium. Donec ultrices nisl justo, sit amet varius dui consequat luctus. Suspendisse potenti. Vivamus nec posuere purus. Etiam laoreet mi non arcu tempus, suscipit luctus arcu posuere. Proin lobortis sapien orci, sit amet interdum erat pretium id. In gravida neque egestas eros pretium, id fringilla magna lacinia. Sed commodo accumsan libero quis egestas. Donec tempus malesuada purus sit amet maximus. Nullam cursus eu metus eget consequat. Pellentesque ultrices, nisl sit amet scelerisque bibendum, mauris tortor luctus magna, ut gravida tellus tellus et ex.
Suspendisse sit amet nulla nibh. In eu dui cursus sem vestibulum vestibulum. Integer justo tortor, molestie vel efficitur vitae, mattis sed est. Vestibulum non justo aliquet, fermentum sem nec, euismod est. Sed rhoncus consequat est id tempus. Pellentesque gravida finibus rhoncus. Nunc id dolor et ex tristique tempor nec nec sem. Curabitur at imperdiet massa. Maecenas at nulla non sapien faucibus blandit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos."
android:padding="10dp"
/>
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>
来源:https://stackoverflow.com/questions/53099251/resize-the-image-to-half-on-scrolling-down