ios - 3 个彼此相邻的 View 以编程方式约束

Question

我正在尝试创建一个自定义 callOutView，为此我有一个 bubbleView，它是 UIView 的子类，在此 View 中我想创建 3 个 View 紧挨着。首先是 imageView，其静态宽度和高度均为 60。然后是 UIView，其动态宽度取决于 bubbleView 的总宽度。然后最后还有另一个静态高度和宽度为 60 的 imageView。我怎样才能做到这一点？我在下面尝试过 snapKit , 但似乎不起作用。

说明我想要什么

我试过的代码

        bubbleView = BubbleView()
        bubbleView?.clipsToBounds = true
        bubbleView?.layer.masksToBounds = true
        self.addSubview(bubbleView!)

        let logoImageView = UIImageView()
        logoImageView.contentMode = UIViewContentMode.ScaleAspectFill
        logoImageView.image = UIImage(data: logoImage!)
        bubbleView?.contentView.addSubview(logoImageView)
        logoImageView.backgroundColor = UIColor.whiteColor()

        let informationView = UIView()
        bubbleView?.contentView.addSubview(informationView)
        informationView.backgroundColor = UIColor.redColor()

        let discView = UIImageView()
        discView.contentMode = UIViewContentMode.ScaleAspectFill
        discView.image = UIImage(data: logoImage!)
        bubbleView?.contentView.addSubview(discView)
        discView.backgroundColor = UIColor.whiteColor()



        logoImageView.snp_makeConstraints { (make) -> Void in
            make.top.equalTo(bubbleView!).offset(0)
            make.left.equalTo(bubbleView!).offset(0)
            make.height.equalTo(60)
            make.right.equalTo(informationView)

        }

        informationView.snp_makeConstraints { (make) -> Void in
            make.top.equalTo(bubbleView!).offset(0)
            make.left.equalTo(logoImageView).offset(0)
            make.height.equalTo(60)
            make.right.equalTo(discView).offset(0)
        }

        discView.snp_makeConstraints { (make) -> Void in
            make.top.equalTo(bubbleView!).offset(0)
            make.left.equalTo(informationView).offset(0)
            make.height.equalTo(60)
            make.right.equalTo(bubbleView!)

        }

Answer 1

你需要设置

• leftView 和 rightView 的宽度限制等于 60。
• middleView.leading 等于 leftView.trailing
• middleView.trailing 等于 rightView.leading。
• all.height 等于 60。
• all.top 等于 parent.top

---

您可以在 Playground 中尝试这个。

import UIKit
import XCPlayground

let parentView = UIView()

parentView.frame.size = CGSize(width: 450, height: 60)
parentView.backgroundColor = UIColor.whiteColor()

let leftView = UIView()
leftView.translatesAutoresizingMaskIntoConstraints = false
leftView.backgroundColor = .blackColor()

let rightView = UIView()
rightView.translatesAutoresizingMaskIntoConstraints = false
rightView.backgroundColor = .grayColor()

let middleView = UIView()
middleView.translatesAutoresizingMaskIntoConstraints = false
middleView.backgroundColor = .lightGrayColor()

// add subview
parentView.addSubview(leftView)
parentView.addSubview(middleView)
parentView.addSubview(rightView)

// config constraints
leftView.leadingAnchor.constraintEqualToAnchor(parentView.leadingAnchor).active = true
leftView.topAnchor.constraintEqualToAnchor(parentView.topAnchor).active = true
leftView.heightAnchor.constraintEqualToConstant(60).active = true
leftView.widthAnchor.constraintEqualToConstant(60).active = true

rightView.trailingAnchor.constraintEqualToAnchor(parentView.trailingAnchor).active = true
rightView.topAnchor.constraintEqualToAnchor(parentView.topAnchor).active = true
rightView.heightAnchor.constraintEqualToConstant(60).active = true
rightView.widthAnchor.constraintEqualToConstant(60).active = true

middleView.leadingAnchor.constraintEqualToAnchor(leftView.trailingAnchor).active = true
middleView.trailingAnchor.constraintEqualToAnchor(rightView.trailingAnchor).active = true
middleView.topAnchor.constraintEqualToAnchor(parentView.topAnchor).active = true
middleView.bottomAnchor.constraintEqualToAnchor(parentView.bottomAnchor).active = true

XCPlaygroundPage.currentPage.liveView = parentView