Swift4中如何为UIView自定义子类添加内部底部边框？

嗨，这个需求我之前做项目的时候经常碰到，特意写了个通用的UIView扩展，完美适配自定义子类，分享给你！

内部底部边框和普通的layer.border不同，它是在视图的内部区域显示，不会超出视图的 bounds。核心思路是给目标视图添加一个小的UIView作为边框，通过AutoLayout精准控制它的位置和大小，这样既灵活又不会影响原视图的布局。

import UIKit

extension UIView {
    /// 给视图添加可自定义的内部底部边框
    /// - Parameters:
    ///   - color: 边框的颜色
    ///   - width: 边框的厚度
    ///   - horizontalPadding: 边框左右两侧的内边距（默认0，即贴满视图宽度）
    ///   - bottomOffset: 边框距离视图底部的偏移量（默认0，紧贴底部内侧）
    func addInnerBottomBorder(color: UIColor, 
                              width: CGFloat, 
                              horizontalPadding: CGFloat = 0,
                              bottomOffset: CGFloat = 0) {
        // 创建边框视图
        let borderView = UIView()
        borderView.backgroundColor = color
        borderView.translatesAutoresizingMaskIntoConstraints = false
        // 给边框加个tag，方便后续移除
        borderView.tag = 888
        addSubview(borderView)
        
        // 通过AutoLayout固定位置
        NSLayoutConstraint.activate([
            borderView.leadingAnchor.constraint(equalTo: leadingAnchor, constant: horizontalPadding),
            borderView.trailingAnchor.constraint(equalTo: trailingAnchor, constant: -horizontalPadding),
            borderView.bottomAnchor.constraint(equalTo: bottomAnchor, constant: -bottomOffset - width/2),
            borderView.heightAnchor.constraint(equalToConstant: width)
        ])
    }
    
    /// 移除已添加的内部底部边框
    func removeInnerBottomBorder() {
        subviews.forEach { view in
            if view.tag == 888 {
                view.removeFromSuperview()
            }
        }
    }
}

不管是你的自定义UIView子类，还是系统原生的UIView，都能直接调用这个方法：

在自定义UIView子类中使用 #

class YourCustomView: UIView {
    override init(frame: CGRect) {
        super.init(frame: frame)
        setupCustomStyle()
    }
    
    required init?(coder: NSCoder) {
        super.init(coder: coder)
        setupCustomStyle()
    }
    
    private func setupCustomStyle() {
        // 添加一个灰色、厚度1pt、左右各留16pt内边距的内部底部边框
        addInnerBottomBorder(color: UIColor.systemGray4, width: 1, horizontalPadding: 16)
    }
}

在ViewController中给视图添加边框 #

class YourViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
        
        let testView = YourCustomView(frame: CGRect(x: 50, y: 100, width: 300, height: 60))
        testView.backgroundColor = .white
        view.addSubview(testView)
        
        // 也可以后续动态添加/移除边框
        // testView.addInnerBottomBorder(color: .red, width: 2)
        // testView.removeInnerBottomBorder()
    }
}

• 如果需要支持动态布局（比如视图宽度变化），AutoLayout会自动适配边框的宽度，不用额外处理
• 要是需要修改边框样式，直接移除旧边框再添加新的即可
• 可以根据需求扩展参数，比如添加顶部/左侧/右侧的内部边框，逻辑和底部的完全一致

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