如何在TableView的水平滚动条上方添加阴影效果

iOS（UITableView）实现方式 #

方法1：自定义阴影视图绑定滚动状态 #

• 创建一个渐变阴影视图，高度设置为20-30pt，背景采用从透明到半透明深色的线性渐变，匹配你的UI风格。
• 将该视图添加到UITableView底部，位置对应水平滚动条上方（可通过计算滚动条frame微调位置，避免遮挡）。
• 监听滚动事件，当表格未滚动至底部时显示阴影，滚动到底部则隐藏。

代码示例：

// 初始化阴影视图
let shadowView = UIView()
shadowView.frame = CGRect(x: 0, y: tableView.bounds.height - 30, width: tableView.bounds.width, height: 30)

// 添加渐变层
let gradientLayer = CAGradientLayer()
gradientLayer.frame = shadowView.bounds
gradientLayer.colors = [UIColor.clear.cgColor, UIColor.black.withAlphaComponent(0.3).cgColor]
gradientLayer.startPoint = CGPoint(x: 0.5, y: 0)
gradientLayer.endPoint = CGPoint(x: 0.5, y: 1)
shadowView.layer.addSublayer(gradientLayer)

tableView.addSubview(shadowView)

// 监听滚动事件控制显示
func scrollViewDidScroll(_ scrollView: UIScrollView) {
    let isScrolledToBottom = scrollView.contentOffset.y + scrollView.bounds.height >= scrollView.contentSize.height
    shadowView.isHidden = isScrolledToBottom
}

方法2：利用TableView自身Layer添加阴影 #

• 直接给UITableView的layer添加底部阴影，通过调整contentInset让阴影显示在滚动条上方：

tableView.layer.shadowColor = UIColor.black.cgColor
tableView.layer.shadowOffset = CGSize(width: 0, height: -5)
tableView.layer.shadowOpacity = 0.3
tableView.layer.shadowRadius = 5
// 调整内边距避免阴影被内容覆盖
tableView.contentInset = UIEdgeInsets(top: 0, left: 0, bottom: 30, right: 0)

同样通过scrollViewDidScroll方法监听滚动状态，滚动到底部时将阴影透明度设为0即可隐藏。

Android（TableView）实现方式 #

方法1：自定义FooterView实现渐变阴影 #

1. 先创建渐变背景drawable（res/drawable/scroll_shadow.xml）：

<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <gradient
        android:startColor="@android:color/transparent"
        android:endColor="#33000000"
        android:angle="270"/>
</shape>

2. 创建阴影FooterView布局（res/layout/scroll_footer_view.xml）：

<View xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="30dp"
    android:background="@drawable/scroll_shadow"/>

3. 将FooterView添加到TableView并监听滚动状态：

val footerView = LayoutInflater.from(context).inflate(R.layout.scroll_footer_view, tableView, false)
tableView.addFooterView(footerView)

tableView.setOnScrollListener(object : AbsListView.OnScrollListener {
    override fun onScrollStateChanged(view: AbsListView?, scrollState: Int) {}
    
    override fun onScroll(view: AbsListView?, firstVisibleItem: Int, visibleItemCount: Int, totalItemCount: Int) {
        val isAtBottom = firstVisibleItem + visibleItemCount == totalItemCount
        footerView.visibility = if (isAtBottom) View.GONE else View.VISIBLE
    }
})

方法2：借助ScrollView包裹（谨慎使用） #

如果TableView的内容量不大，可将其嵌套在ScrollView中，给ScrollView添加底部阴影，并通过滚动监听控制阴影显示。注意嵌套ScrollView可能引发性能问题，需根据场景评估。

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