UIStackView 背景颜色的探究

这里每天共享一个 iOS 的新知识，快来重视我吧

UIStackView

UIStackView 是在 iOS 9 中推出的一个新的视图类。用于在横向或纵向中安置视图调集的简化界面。随着最低版别的进步，目前在日常的开发中运用 UIStackView 现已越来越多了。

设置布景色彩无效的问题

最近发现一个小问题，给 UIStackView 设置布景色彩之后，在 iOS 13 及以下的设备中无效。

UIStackView 尽管继承自 UIView，但它不是 UIView 的普通子类。在 iOS 13 之前，它一直都是一个 “非烘托子类”，也便是不参与烘托，只用作布局。因此当你设置其 backgroundColor 后没有任何作用。

一般的做法是在 UIStackView 中刺进一个新的 UIView，来作为布景，比方下边这个扩展的实现。

extension UIStackView {
    func addBackground(color: UIColor) {
        let subView = UIView(frame: bounds)
        subView.backgroundColor = color
        subView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
        insertSubview(subView, at: 0)
    }
}

运用的时候能够这样写：

stackView.addBackground(color: .red)

iOS 14 对此做了优化，在 iOS 14 上是能够正常经过 backgroundColor 设置布景色彩的，因此这个扩展中能够加入对版别的判断：

extension UIStackView {
    func addBackground(color: UIColor) {
       if #available(iOS 14.0, *) {
            backgroundColor = color
        } else {
            let subView = UIView(frame: bounds)
            subView.backgroundColor = color
            subView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
            insertSubview(subView, at: 0)
        }
    }
}

iOS 14 做了什么

接下来探求一下为什么在 iOS 14 中就能够正常设置布景色彩了。

一个首要的改动是在 iOS 14 中， UIStackView 的内部 layer 已从本来的 CATransformLayer 更改为运用 CALayer 。

CATransformLayer 能够用来创建 3D 图层层次结构，与 CALayer 不同的地方在于，它不会把自己烘托出来。这就意味着它会忽略 backgroundColor 等属性。

证明这一点很简单，咱们只需要在 iOS 13 和 iOS 14 的控制台打印一下 UIStackView 对象：

在 iOS 13 上：

(lldb) po rootStackView
<UIStackView: 0x7fdc0270b3c0; frame = (0 0; 0 0);
layer = <CATransformLayer: 0x600002de3e40>>

能够看到其对应的 layer 对象是 CATransformLayer。

在 iOS 14 上：

(lldb) po rootStackView
<UIStackView: 0x7fa253f0bdc0; frame = (0 0; 0 0);
layer = <CALayer: 0x600003339440>>

能够看到其对应的 layer 对象是 CALayer。

因为 iOS 14 上用的是 CALayer，所以咱们能够像操作正常的 UIView 一样对 UIStackView 进行设置了。但是假如你的使用兼容 iOS 14 以下系统，还需要做好兼容性适配。

本文同步自微信公众号 “iOS新知”，每天按时共享一个新知识，这里仅仅同步，想要及时学到就来重视我吧！