如何实现滚动TextView内容时隐藏ImageView及对应布局方案咨询

Hey there! Let's work through your questions about hiding an ImageView when scrolling a TextView—this is a great way to maximize screen space for content as users scroll.

The core idea is to listen to the scroll events of your TextView, detect the downward scroll direction, then toggle or animate the ImageView's visibility accordingly. Here's a step-by-step implementation:

First, make sure your TextView is scrollable by adding these attributes to its XML:

<TextView
    android:id="@+id/scrollable_text"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:scrollbars="vertical"
    android:maxLines="1000" /> <!-- A large value ensures content can scroll -->

Next, attach a scroll listener to your TextView in your activity/fragment code (Kotlin example included; Java logic is nearly identical):

val scrollableText = findViewById<TextView>(R.id.scrollable_text)
val topImageView = findViewById<ImageView>(R.id.top_image)

scrollableText.setOnScrollChangeListener { _, _, scrollY, _, oldScrollY ->
    // Detect downward scroll: scrollY > oldScrollY means we're moving down
    if (scrollY > oldScrollY && topImageView.visibility == View.VISIBLE) {
        // Smoothly animate the ImageView out of view (slide up + fade out)
        topImageView.animate()
            .translationY(-topImageView.height.toFloat())
            .alpha(0f)
            .setDuration(300)
            .withEndAction {
                topImageView.visibility = View.GONE
            }
            .start()
    }
    // Optional: Bring the ImageView back when scrolling up
    else if (scrollY < oldScrollY && topImageView.visibility == View.GONE) {
        topImageView.visibility = View.VISIBLE
        topImageView.animate()
            .translationY(0f)
            .alpha(1f)
            .setDuration(300)
            .start()
    }
}

This code triggers a smooth animation to hide the ImageView when the user scrolls down. If you want the ImageView to reappear on upward scroll, the else clause handles that with a reverse animation.

For this UI, ConstraintLayout is the most flexible choice (though a vertical LinearLayout works too). It lets you easily position the ImageView at the top, with the TextView below it, and automatically adjusts spacing when the ImageView hides.

初始效果 #

• The ImageView is fully visible at the top of the screen.
• The TextView sits directly below the ImageView, with its content starting beneath the image.

最终效果 #

• The ImageView is hidden (slid up and faded out).
• The TextView expands to fill the space previously occupied by the ImageView, starting at the top of the screen.

Here's the ConstraintLayout XML to build this structure:

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    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">

    <!-- Top ImageView to hide on scroll -->
    <ImageView
        android:id="@+id/top_image"
        android:layout_width="match_parent"
        android:layout_height="150dp"
        android:src="@drawable/your_image"
        android:scaleType="centerCrop"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"/>

    <!-- Scrollable TextView below the ImageView -->
    <TextView
        android:id="@+id/scrollable_text"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:text="@string/long_scrollable_content"
        android:padding="16dp"
        android:scrollbars="vertical"
        android:maxLines="1000"
        app:layout_constraintTop_toBottomOf="@id/top_image"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"/>

</androidx.constraintlayout.widget.ConstraintLayout>

When the ImageView is set to GONE, ConstraintLayout automatically adjusts the TextView's top constraint to the parent's top, making it fill the screen seamlessly.

If you prefer LinearLayout, here's a quick alternative:

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <ImageView
        android:id="@+id/top_image"
        android:layout_width="match_parent"
        android:layout_height="150dp"
        android:src="@drawable/your_image"
        android:scaleType="centerCrop"/>

    <TextView
        android:id="@+id/scrollable_text"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:text="@string/long_scrollable_content"
        android:padding="16dp"
        android:scrollbars="vertical"
        android:maxLines="1000"/>

</LinearLayout>

With this setup, the TextView (with layout_weight="1") will take over the entire vertical space once the ImageView is hidden.

内容的提问来源于stack exchange，提问作者ARLEQUINA