如何判断ScrollView是否处于顶部并实现TabLayout图标滚动显隐

嘿，这个需求其实挺常见的，实现起来也不复杂，我给你拆解下具体的实现步骤和细节：

核心就是监听ScrollView的滚动位置，判断它是否处于顶部状态：

• 当ScrollView的滚动Y值为0（初始顶部）时，隐藏TabLayout上的图标
• 当ScrollView向下滚动（Y值大于0）时，显示图标
• 滚动回顶部（Y值回到0）时，再次隐藏图标

首先在你的现有布局基础上，给TabLayout添加需要显示/隐藏的图标控件，比如一个ImageView：

<LinearLayout 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:orientation="vertical">

    <com.google.android.material.tabs.TabLayout
        android:id="@+id/tabLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabMode="fixed">

        <!-- 你的Tab项，根据需求添加 -->
        <com.google.android.material.tabs.TabItem
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Tab 1"/>
        <com.google.android.material.tabs.TabItem
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Tab 2"/>

        <!-- 需要控制显示/隐藏的图标，初始设为gone -->
        <ImageView
            android:id="@+id/tabIcon"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/your_icon_resource"
            android:visibility="gone"
            android:layout_gravity="end|center_vertical"
            android:padding="8dp"/>
    </com.google.android.material.tabs.TabLayout>

    <ScrollView
        android:id="@+id/scrollView"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <!-- 你的内容容器，里面放其他控件 -->
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            android:padding="16dp">

            <!-- 这里填充你的实际内容，确保足够长能让ScrollView滚动 -->
            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="测试内容行1"
                android:textSize="18sp"/>
            <!-- 重复添加更多内容，让ScrollView可滚动 -->
        </LinearLayout>
    </ScrollView>
</LinearLayout>

接下来给ScrollView设置滚动监听，根据滚动Y值控制图标的显示状态：

Java版本 #

public class YourActivity extends AppCompatActivity {

    private ScrollView scrollView;
    private ImageView tabIcon;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.your_layout);

        scrollView = findViewById(R.id.scrollView);
        tabIcon = findViewById(R.id.tabIcon);

        // 设置滚动监听
        scrollView.setOnScrollChangeListener(new View.OnScrollChangeListener() {
            @Override
            public void onScrollChange(View v, int scrollX, int scrollY, int oldScrollX, int oldScrollY) {
                // 判断是否滚动到顶部：scrollY为0时隐藏，否则显示
                if (scrollY == 0) {
                    if (tabIcon.getVisibility() == View.VISIBLE) {
                        tabIcon.setVisibility(View.GONE);
                    }
                } else {
                    if (tabIcon.getVisibility() == View.GONE) {
                        tabIcon.setVisibility(View.VISIBLE);
                    }
                }
            }
        });
    }
}

Kotlin版本 #

class YourActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.your_layout)

        val scrollView = findViewById<ScrollView>(R.id.scrollView)
        val tabIcon = findViewById<ImageView>(R.id.tabIcon)

        scrollView.setOnScrollChangeListener { _, _, scrollY, _, _ ->
            // 一行代码搞定状态切换
            tabIcon.visibility = if (scrollY == 0) View.GONE else View.VISIBLE
        }
    }
}

如果想要更流畅的用户体验，可以给图标添加淡入淡出动画，避免生硬的切换：

Kotlin动画示例 #

scrollView.setOnScrollChangeListener { _, _, scrollY, _, _ ->
    if (scrollY == 0) {
        // 隐藏时的淡出动画
        tabIcon.animate()
            .alpha(0f)
            .setDuration(300)
            .withEndAction { tabIcon.visibility = View.GONE }
            .start()
    } else {
        // 显示时的淡入动画
        tabIcon.visibility = View.VISIBLE
        tabIcon.animate()
            .alpha(1f)
            .setDuration(300)
            .start()
    }
}

Java动画示例 #

scrollView.setOnScrollChangeListener(new View.OnScrollChangeListener() {
    @Override
    public void onScrollChange(View v, int scrollX, int scrollY, int oldScrollX, int oldScrollY) {
        if (scrollY == 0) {
            // 淡入动画
            AlphaAnimation hideAnim = new AlphaAnimation(1f, 0f);
            hideAnim.setDuration(300);
            hideAnim.setAnimationListener(new Animation.AnimationListener() {
                @Override
                public void onAnimationStart(Animation animation) {}

                @Override
                public void onAnimationEnd(Animation animation) {
                    tabIcon.setVisibility(View.GONE);
                }

                @Override
                public void onAnimationRepeat(Animation animation) {}
            });
            tabIcon.startAnimation(hideAnim);
        } else {
            // 淡出动画
            tabIcon.setVisibility(View.VISIBLE);
            AlphaAnimation showAnim = new AlphaAnimation(0f, 1f);
            showAnim.setDuration(300);
            tabIcon.startAnimation(showAnim);
        }
    }
});

• 如果ScrollView的内容顶部有padding，初始scrollY可能不为0，这时候可以把判断条件改成scrollY > 10（阈值根据实际情况调整），避免轻微滚动就触发显示
• 确保TabLayout的布局模式允许图标放在合适的位置（比如上面用了layout_gravity="end|center_vertical"让图标靠右居中），如果是自定义Tab项，也可以把图标整合到Tab的自定义布局里
• 如果使用的是NestedScrollView，监听逻辑是完全一样的，直接替换ScrollView即可

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