如何实现TableView Header静态化/禁止随列表滚动？

嘿，这个问题我之前开发的时候也碰到过，给你几个实用的解决方案，分不同平台来说，你可以根据自己的开发场景选：

iOS（UIKit）场景 #

方案1：把Header放在TableView外部（最推荐） #

这是最简单也最稳定的方式，直接把原来的Header视图从TableView的tableHeaderView里移出来，放到TableView的父视图中，让Header固定在顶部，TableView从Header的下方开始布局。这样滚动TableView的时候，Header完全不会跟着动。

示例代码：

// 用代码布局的例子
let staticHeader = UIView(frame: CGRect(x: 0, y: 0, width: view.frame.width, height: 80))
staticHeader.backgroundColor = .lightGray
view.addSubview(staticHeader)

let tableView = UITableView(frame: .zero)
tableView.translatesAutoresizingMaskIntoConstraints = false
view.addSubview(tableView)

// 设置约束，让TableView紧贴Header底部
NSLayoutConstraint.activate([
    staticHeader.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor),
    staticHeader.leadingAnchor.constraint(equalTo: view.leadingAnchor),
    staticHeader.trailingAnchor.constraint(equalTo: view.trailingAnchor),
    staticHeader.heightAnchor.constraint(equalToConstant: 80),
    
    tableView.topAnchor.constraint(equalTo: staticHeader.bottomAnchor),
    tableView.leadingAnchor.constraint(equalTo: view.leadingAnchor),
    tableView.trailingAnchor.constraint(equalTo: view.trailingAnchor),
    tableView.bottomAnchor.constraint(equalTo: view.bottomAnchor)
])

方案2：利用分组TableView的悬浮Section Header #

如果你的TableView是分组样式的，想要Section Header固定在顶部，可以开启系统自带的悬浮效果，滚动时当前Section的Header会一直停在顶部，直到下一个Section的Header把它顶上去：

// iOS 15+ 记得去掉默认的顶部间距
tableView.sectionHeaderTopPadding = 0
// 设置TableView为分组样式
tableView.style = .grouped

// 实现TableView代理方法返回Section Header
func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
    let headerView = UIView()
    headerView.backgroundColor = .lightGray
    // 添加Header的内容控件
    return headerView
}

func tableView(_ tableView: UITableView, heightForHeaderInSection section: Int) -> CGFloat {
    return 80 // 设置Header高度
}

Android（RecyclerView）场景 #

方案1：用CoordinatorLayout + AppBarLayout实现静态Header #

如果用Material Design组件，把Header放在AppBarLayout里，RecyclerView放在下方，就能轻松实现静态Header（如果不需要折叠效果，去掉滚动标志即可）：

<androidx.coordinatorlayout.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">

    <com.google.android.material.appbar.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/light_gray">

        <!-- 你的静态Header视图 -->
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="80dp"
            android:orientation="vertical">
            <!-- 这里放Header的内容，比如文本、按钮等 -->
        </LinearLayout>

    </com.google.android.material.appbar.AppBarLayout>

    <androidx.recyclerview.widget.RecyclerView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"/>

</androidx.coordinatorlayout.widget.CoordinatorLayout>

如果想要Header完全固定，不要任何滚动折叠效果，确保LinearLayout里没有app:layout_scrollFlags属性就行。

方案2：自定义LayoutManager固定Header Item #

如果必须把Header作为RecyclerView的第一个Item，那可以自定义LayoutManager，让第一个Item固定在顶部，其他Item正常滚动。不过这种方式相对复杂，适合特殊场景，一般更推荐第一种方案。

总的来说，把Header放在列表外部的方案是最省心的，不会有滚动冲突或者奇怪的布局问题，优先考虑这个哦！

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