Swift中如何调整视图层级让子视图显示在UITextField边框上方？

问题原因 #

1. bringSubviewToFront 是UIView用于管理子视图层级的API，仅作用于UIView类型的子元素，对你添加的CALayer类型子图层无效，因此调用后无效果。
2. 你将addSublayer逻辑放在layoutSubviews方法中，每次视图触发布局都会重复添加同一个图层，导致图层层级混乱，zPosition的设置无法生效。
3. 若UITextField开启了clipsToBounds属性，超出自身bounds的红色视图区域会被直接裁剪，也会导致无法呈现浮在边框上层的效果。
4. UITextField自带的系统边框、文本绘制图层默认层级高于普通自定义子图层，即使设置zPosition也可能被系统内部图层覆盖。

解决方案 #

方案1：改用UIView实现红色悬浮层（最推荐） #

直接使用UIView作为红色视图，借助UIView的层级管理API实现置顶，避免图层层级混乱问题：

// 自定义UITextField类内声明属性
private let redView: UIView = {
    let view = UIView()
    view.backgroundColor = .red
    view.translatesAutoresizingMaskIntoConstraints = false
    return view
}()

override init(frame: CGRect) {
    super.init(frame: frame)
    commonSetup()
}

required init?(coder: NSCoder) {
    super.init(coder: coder)
    commonSetup()
}

private func commonSetup() {
    // 关闭裁剪，允许超出自身bounds的内容显示
    clipsToBounds = false
    addSubview(redView)
    // AutoLayout约束对应你要的位置效果
    NSLayoutConstraint.activate([
        redView.leadingAnchor.constraint(equalTo: leadingAnchor, constant: 10),
        redView.bottomAnchor.constraint(equalTo: topAnchor, constant: 10),
        redView.widthAnchor.constraint(equalToConstant: 100),
        redView.heightAnchor.constraint(equalToConstant: 30)
    ])
    // 将红色视图带到所有子视图最上层
    bringSubviewToFront(redView)
}

方案2：坚持使用CALayer的修复方案 #

如果必须用CALayer实现，要避免重复添加图层，每次布局后手动调整图层顺序：

// 自定义UITextField类内声明属性，仅初始化一次
private let redlayer = CALayer()

override init(frame: CGRect) {
    super.init(frame: frame)
    layerSetup()
}

required init?(coder: NSCoder) {
    super.init(coder: coder)
    layerSetup()
}

private func layerSetup() {
    clipsToBounds = false
    // 仅添加一次图层，不要放在layoutSubviews中
    layer.addSublayer(redlayer)
    redlayer.zPosition = .greatestFiniteMagnitude
}

override func layoutSubviews() {
    super.layoutSubviews()
    redlayer.backgroundColor = UIColor.red.cgColor
    redlayer.frame = CGRect(x: 10, y: -10, width: 100, height: 30)
    // 每次布局后手动将红色图层插到所有子图层最顶部
    if let sublayersCount = layer.sublayers?.count {
        layer.insertSublayer(redlayer, at: UInt32(sublayersCount - 1))
    }
}

方案3：最稳妥的层级方案（无覆盖风险） #

如果上述两种方案仍被系统图层覆盖，可以将红色视图作为UITextField父视图的子元素，层级天然高于UITextField：

// 自定义UITextField类内新增逻辑
override func didMoveToSuperview() {
    super.didMoveToSuperview()
    guard let superview = superview else { return }
    redView.removeFromSuperview()
    superview.addSubview(redView)
    // 约束保持和textField的相对位置
    NSLayoutConstraint.activate([
        redView.leadingAnchor.constraint(equalTo: leadingAnchor, constant: 10),
        redView.bottomAnchor.constraint(equalTo: topAnchor, constant: 10),
        redView.widthAnchor.constraint(equalToConstant: 100),
        redView.heightAnchor.constraint(equalToConstant: 30)
    ])
}

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