iOS26适配指南之UIScrollView

介绍

在 iOS 26 中,UIScrollView 迎来了两个重要增强,主要聚焦于滚动边缘的视觉效果和与浮动容器的交互体验。这些改进不仅让滚动过渡更自然,还提升了在复杂界面中内容的可读性。

UIScrollEdgeEffect

过去,当内容滚动到边缘时,系统会使用回弹(bounce)或发光(glow)效果来提示用户。但在 iOS 26 中,Apple 增加了类型为UIScrollEdgeEffect的属性topEdgeEffect、leftEdgeEffect、bottomEdgeEffect与rightEdgeEffect,用于设置滚动边缘的效果。

UIScrollEdgeElementContainerInteraction

除了边缘效果,Apple 还引入新的交互UIScrollEdgeElementContainerInteraction,可以将导航栏、标签栏、工具栏或者自定义浮动视图标记为边缘元素容器,当内容滚动到该容器下方时,系统会自动添加一个渐变模糊效果,从而保证叠加内容的可读性。

案例

代码

swift 复制代码
import UIKit

class ViewController: UIViewController {
    lazy var scrollView: UIScrollView = {
        let scrollView = UIScrollView()
        scrollView.translatesAutoresizingMaskIntoConstraints = false
        scrollView.addSubview(contentView)
        scrollView.contentSize = contentView.frame.size
        // iOS26新增
        // scrollView.bottomEdgeEffect.style = .hard
        return scrollView
    }()

    lazy var contentView: UIView = {
        let view = UIView()
        view.backgroundColor = .black
        view.translatesAutoresizingMaskIntoConstraints = false
        return view
    }()

    lazy var stackView: UIStackView = {
        var config = UIButton.Configuration.clearGlass()
        config.title = "Action"
        let button1 = UIButton(type: .system)
        button1.configuration = config
        let button2 = UIButton(type: .system)
        config.title = "More"
        button2.configuration = config
        let stackView = UIStackView(arrangedSubviews: [button1, button2])
        stackView.axis = .horizontal
        stackView.spacing = 16
        stackView.translatesAutoresizingMaskIntoConstraints = false
        // iOS26新增
        let interaction = UIScrollEdgeElementContainerInteraction()
        interaction.scrollView = scrollView
        interaction.edge = .bottom
        // 关联视图
        stackView.addInteraction(interaction)
        return stackView
    }()

    override func viewDidLoad() {
        super.viewDidLoad()

        view.addSubview(scrollView)
        view.addSubview(stackView)

        NSLayoutConstraint.activate([
            scrollView.topAnchor.constraint(equalTo: view.topAnchor),
            scrollView.bottomAnchor.constraint(equalTo: view.bottomAnchor),
            scrollView.leadingAnchor.constraint(equalTo: view.leadingAnchor),
            scrollView.trailingAnchor.constraint(equalTo: view.trailingAnchor),
            contentView.topAnchor.constraint(equalTo: scrollView.contentLayoutGuide.topAnchor),
            contentView.leadingAnchor.constraint(equalTo: scrollView.contentLayoutGuide.leadingAnchor),
            contentView.bottomAnchor.constraint(equalTo: scrollView.contentLayoutGuide.bottomAnchor),
            contentView.trailingAnchor.constraint(equalTo: scrollView.contentLayoutGuide.trailingAnchor),
            contentView.widthAnchor.constraint(equalTo: scrollView.frameLayoutGuide.widthAnchor),
            contentView.heightAnchor.constraint(equalToConstant: 1000),
            stackView.centerXAnchor.constraint(equalTo: view.centerXAnchor),
            stackView.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor, constant: -20)
        ])
    }
}

效果

相关推荐
黑化旺仔5 小时前
【OC】Runtime:类元数据、加载初始化与消息派发
开发语言·macos·ios·objective-c
songgeb6 小时前
iOS App支持设置RTL语言的实践
ios·swift·ui kit
软泡芙6 小时前
【iOS】swift启动屏显示黑屏
ios
用户69371750013848 小时前
当你向领导申请 AI 编程工具预算时,如果领导追问“能提效多少,有量化数据吗”,你该怎么回答?
android·后端·ios
Layer8 小时前
一些脱离 Mac 依赖的 Agent 操作 iPhone 实现
ios·ai编程·测试
用户693717500138410 小时前
当我说 Claude 搭配 GLM-5.3-Flash 太好用了,同事却提醒我:你可能正在失去对代码的掌控
android·后端·ios
茶底世界之下10 小时前
一键裁方会丢掉什么?用 Awaking 给园林照片做两种画幅
ios
Marco_Marco13511 小时前
定位SDK接入实战:Android/iOS/鸿蒙三端怎么选、怎么接
android·ios·harmonyos
老李IT笔记1 天前
关掉设备上的 AI 扩展:两个键各管一层,配错了等于没配
人工智能·ios·智能手机
2501_915921431 天前
iOS应用耗电测试:使用Energy Log、Keymob和Instruments进行性能监控与能源消耗分析
android·ios·小程序·https·uni-app·iphone·webview