Android ScrollView 滑动实现标题栏渐变背景色

说明

• 定义了一个内部接口 ScrollViewListener，用于回调滚动状态。
• 重写了 onScrollChanged 方法，确保每次滚动都会通知注册的监听器。
• 提供了多种构造函数以兼容不同的 XML 加载方式。

三、具体使用 (MainActivity.java)

在 Activity 中初始化视图，绑定监听器，并根据滚动位置更新标题栏颜色。

package com.example.titlebarcolor;

import android.app.Activity;
import android.graphics.Color;
import android.os.Bundle;
import android.view.ViewTreeObserver;
import android.view.ViewTreeObserver.OnGlobalLayoutListener;
import android.widget.ArrayAdapter;
import android.widget.ImageView;
import android.widget.ListView;
import android.widget.TextView;

public class MainActivity extends Activity implements ObservableScrollView.ScrollViewListener {

    private ObservableScrollView scrollView;
    private ListView listView;
    private ImageView imageView;
    private TextView textView;
    private int imageHeight;

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

        // 初始化视图引用
        scrollView = findViewById(R.id.scrollview);
        listView = findViewById(R.id.listview);
        imageView = findViewById(R.id.imageview);
        textView = findViewById(R.id.textview);

        initListeners();
        initData();
    }

    private void initListeners() {
        // 使用 ViewTreeObserver 获取图片高度，避免过早测量导致高度为 0
        ViewTreeObserver vto = imageView.getViewTreeObserver();
        vto.addOnGlobalLayoutListener(new OnGlobalLayoutListener() {
            @Override
            public void onGlobalLayout() {
                imageView.getViewTreeObserver().removeGlobalOnLayoutListener(this);
                imageHeight = imageView.getHeight();
                // 设置滚动监听
                scrollView.setScrollViewListener(MainActivity.this);
            }
        });
    }

    private void initData() {
        ArrayAdapter<String> adapter = new ArrayAdapter<>(
                MainActivity.this,
                android.R.layout.simple_list_item_1,
                getResources().getStringArray(R.array.data)
        );
        listView.setAdapter(adapter);
    }

    @Override
    public void onScrollChanged(ObservableScrollView scrollView, int x, int y,
                                int oldx, int oldy) {
        // 根据滚动距离 y 计算透明度
        if (y <= 0) {
            // 滚动到顶部以上，背景完全透明
            textView.setBackgroundColor(Color.argb(0, 227, 29, 26));
        } else if (y > 0 && y <= imageHeight) {
            // 滚动过程中，计算 Alpha 值
            float scale = (float) y / imageHeight;
            float alpha = 255 * scale;
            // 设置半透明背景，仿知乎滑动效果
            textView.setBackgroundColor(Color.argb((int) alpha, 227, 29, 26));
        } else {
            // 滚动超过图片高度，背景完全不透明
            textView.setBackgroundColor(Color.argb(255, 227, 29, 26));
        }
    }
}

关键逻辑解析

1. ViewTreeObserver：在 onCreate 中直接获取 getHeight() 可能返回 0，因为此时视图尚未完成测量。使用 OnGlobalLayoutListener 可确保在布局完成后获取准确高度。
2. Color.argb：使用 ARGB 模式构建颜色。前两个参数分别为 Alpha（透明度）和 RGB 分量。Alpha 范围是 0-255。
3. 线性插值：scale = y / imageHeight 将滚动距离归一化为 0.0 到 1.0 之间，再乘以 255 得到 Alpha 值。

四、布局文件配置 (activity_main.xml)

布局结构需要包含自定义 ScrollView、顶部图片区域、列表区域以及悬浮的标题栏。

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <com.example.titlebarcolor.ObservableScrollView
        android:id="@+id/scrollview"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scrollbars="none">

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

            <ImageView
                android:id="@+id/imageview"
                android:layout_width="match_parent"
                android:layout_height="200dp"
                android:background="@drawable/header_bg" />

            <ListView
                android:id="@+id/listview"
                android:layout_width="match_parent"
                android:layout_height="wrap_content" />

        </LinearLayout>
    </com.example.titlebarcolor.ObservableScrollView>

    <!-- 标题栏，位于 ScrollView 之上 -->
    <TextView
        android:id="@+id/textview"
        android:layout_width="match_parent"
        android:layout_height="48dp"
        android:gravity="center"
        android:text="我是标题"
        android:textSize="18sp"
        android:textColor="#FFFFFF"
        android:background="#00000000" />

</RelativeLayout>

布局要点

• 相对定位：TextView 使用 RelativeLayout 的子元素，默认位于最上层，覆盖在 ScrollView 内容之上。
• ScrollView 属性：android:scrollbars="none" 隐藏滚动条以获得更干净的视觉效果。
• 图片资源：header_bg 需替换为实际的项目资源文件。

五、常见问题与优化建议

1. 性能优化

• 在 onScrollChanged 中频繁调用 setBackgroundColor 可能会引起重绘。如果列表项较多，建议仅在颜色值发生变化时才更新背景。
• 对于复杂的动画效果，可考虑使用 ValueAnimator 进行插值，但本例中的简单计算对性能影响较小。

2. 状态栏适配

• 如果标题栏需要与系统状态栏融合，需注意 TextView 的 paddingTop 设置，确保不被状态栏遮挡。
• 在 Android 5.0+ 版本中，可通过 WindowInsets 或 fitsSystemWindows 属性自动适配。

3. 兼容性处理

• ViewTreeObserver 在 API 11 及以上推荐使用 addOnGlobalLayoutListener，低版本需注意移除监听器防止内存泄漏。
• 代码中已包含 removeGlobalOnLayoutListener，确保不会造成内存泄漏。

4. 颜色选择

• 示例中使用红色系 (227, 29, 26)，实际项目中应根据品牌色调整 RGB 值。
• 若需支持深色模式，建议在 values-night/colors.xml 中定义对应的颜色资源。

六、总结

通过自定义 ScrollView 监听滚动事件并结合简单的数学计算，我们可以轻松实现标题栏背景色的渐变效果。这种方法不仅代码量少，而且兼容性好，适用于大多数 Android 列表场景。开发者只需注意视图测量的时机以及颜色值的动态计算即可。