向下滚动将图像调整为一半 [英] Resize the image to half on scrolling down

问题描述

我想获得下图所示的内容:

I want to obtain something like in the photo below:

图像固定在顶部屏幕上.当用户开始滚动时，图像将(平滑地)调整为原始大小的一半(200dp至100dp，带有类似scaleType:centerCrop的内容)，并且如果用户继续滚动(在图像之后为100dp)，图像将保留固定在顶部，并且滚动条仅适用于其余视图.

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.

关于如何在java类中实现onScrollListener或类似方法以获得这种效果的任何想法?

Any ideas of how to implement the onScrollListener or some similar method in the java class to obtain that effect?

我在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>

推荐答案

使用这种方式

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

这篇关于向下滚动将图像调整为一半的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！