你能给UIStackView边框吗？

Question

我试图UIStackViews在我的ViewController边界中分开5个.我给他们每个人一个IBOutlet,然后打电话给他们viewDidLoad使用该layer财产但无济于事.是不可能以编程方式给出堆栈视图边框？

码:

@IBOutlet weak var stackView1: UIStackView!
@IBOutlet weak var stackView2: UIStackView!
@IBOutlet weak var stackView3: UIStackView!
@IBOutlet weak var stackView4: UIStackView!
@IBOutlet weak var stackView5: UIStackView!

override func viewDidLoad() {
    super.viewDidLoad()

    stackView1.layer.borderWidth = 5
    stackView2.layer.borderWidth = 5
    stackView3.layer.borderWidth = 5
    stackView4.layer.borderWidth = 5
    stackView5.layer.borderWidth = 5   
}

Answer 1

不幸的是,这是无法做到的.UIStackView很不寻常,因为它是一个"非渲染"视图,它执行布局(使用自动布局约束)但不显示自身.它有一个像所有UIViews一样的层,但它被忽略了.

请参阅"管理堆栈视图的外观"下的Apple文档:

UIStackView是UIView的非渲染子类.它不提供自己的任何用户界面.相反,它只管理其排列视图的位置和大小.因此,某些属性(如backgroundColor)对堆栈视图没有影响.同样,您不能覆盖layerClass,drawRect:或drawLayer:inContext:

Answer 2

可以通过在堆栈视图中查看边框来实现此目的.这可能是很多工作,可能会有某些情况要么无法工作,要么必须解决,因此可能不值得付出努力.您需要嵌套堆栈视图,以便可以在水平和垂直方向上提供边框.在我的Bordered Stack Views博客文章中,我将详细介绍这一点.但基本上我有常规视图的背景设置为我选择的颜色,我根据堆栈视图的轴的方向给出高度或宽度约束1.以下是界面构建器中内置的2x2网格的完整层次结构:

导致这个结果:

这是我的github repo这个例子的链接,所以你可以看到storyboard文件.

Answer 3

您可以在UIView中嵌入stackView,然后设置该视图的边框(颜色,宽度等),然后将stackView约束到UIView,如top,left,right,height.

Answer 4

这是我找到并使用的一段方便的代码：

extension UIView {
    func addTopBorderWithColor(color: UIColor, width: CGFloat) {
        let border = CALayer()
        border.backgroundColor = color.cgColor
        border.frame = CGRect(x:0,y: 0, width:self.frame.size.width, height:width)
        self.layer.addSublayer(border)
    }

    func addRightBorderWithColor(color: UIColor, width: CGFloat) {
        let border = CALayer()
        border.backgroundColor = color.cgColor
        border.frame = CGRect(x: self.frame.size.width - width,y: 0, width:width, height:self.frame.size.height)
        self.layer.addSublayer(border)
    }

    func addBottomBorderWithColor(color: UIColor, width: CGFloat) {
        let border = CALayer()
        border.backgroundColor = color.cgColor
        border.frame = CGRect(x:0, y:self.frame.size.height - width, width:self.frame.size.width, height:width)
        self.layer.addSublayer(border)
    }

    func addLeftBorderWithColor(color: UIColor, width: CGFloat) {
        let border = CALayer()
        border.backgroundColor = color.cgColor
        border.frame = CGRect(x:0, y:0, width:width, height:self.frame.size.height)
        self.layer.addSublayer(border)
    }

    func addMiddleBorderWithColor(color: UIColor, width: CGFloat) {
        let border = CALayer()
        border.backgroundColor = color.cgColor
        border.frame = CGRect(x:self.frame.size.width/2, y:0, width:width, height:self.frame.size.height)
        self.layer.addSublayer(border)
    }
}

只需在这样的任何视图上使用：

bottomControls.addMiddleBorderWithColor(color: buttonBorderColor, width: 3.0)

来源：如何在 UIButton 上仅添加 TOP 边框？