ios - 角标(Badge) View 如何使用全自动布局方法创建

Question

自从我尝试创建一个右上角有一个简单角标(Badge)的自定义 View 以来已经有一段时间了。
自定义 View 由 3 部分组成。

1. red 中有自定义 View ，它包含:
2. 蓝色容器 View
3. 绿色角标(Badge) View 一个简单的UILabel

容器 View 和角标(Badge) View 是兄弟 View 。
目前容器 View 包含一个 UIImageView

该 View 必须满足这些要求:

1. 全自动布局方法
2. 以编程方式制作
3. 自定义 View 必须仅考虑蓝色框架(容器 View )对齐
   

为什么？想象一下，您需要通过将顶部边缘与另一个 View 或按钮的顶部边缘对齐来定位该 View ，如果只考虑容器中显示的内容会不会很好？
在这里你可以看到我是如何设置约束的。标签位于容器 View 的右上角。

func setUpConstraint() {
        var horContraints = [NSLayoutConstraint]()
        horContraints.append(NSLayoutConstraint(item: containerView, attribute: .Leading, relatedBy: .Equal, toItem: self, attribute: .Leading, multiplier: 1, constant: 0))
        horContraints.append(NSLayoutConstraint(item: containerView, attribute: .Trailing, relatedBy: .Equal, toItem: badge, attribute: .CenterX, multiplier: 1, constant: 0))
        horContraints.append(NSLayoutConstraint(item: badge, attribute: .Trailing, relatedBy: .Equal, toItem: self, attribute: .Trailing, multiplier: 1, constant: 0))
        var verContraints = [NSLayoutConstraint]()
        verContraints.append(NSLayoutConstraint(item: containerView, attribute: .Bottom, relatedBy: .Equal, toItem: self, attribute: .Bottom, multiplier: 1, constant: 0))
        verContraints.append(NSLayoutConstraint(item: containerView, attribute: .Top, relatedBy: .Equal, toItem: badge, attribute: .CenterY, multiplier: 1, constant: 0))
        verContraints.append(NSLayoutConstraint(item: badge, attribute: .Top, relatedBy: .Equal, toItem: self, attribute: .Top, multiplier: 1, constant: 0))
        addConstraints(verContraints + horContraints)        
        containerView.addConstraint(NSLayoutConstraint(item: containerView, attribute: .Height, relatedBy: .Equal, toItem: containerView, attribute: .Width, multiplier: 1, constant: 0))
}

容器 View 也有纵横比约束以保持正方形大小。
正如您从图片中看到的那样，一切似乎都很好，除了当我尝试将自定义 View 约束到其父 View 的中心时，它似乎没有对齐，因为我希望 View 以容器 View (带有图像的 View )。角标(Badge)是一种装饰，如影子，我不想考虑。

为了正确对齐它，我试图通过添加一个将“切割”一半标签大小的插图来覆盖对齐矩形。

   override func alignmentRectInsets() -> UIEdgeInsets {
        let badgeSize = badge.bounds.size
        return UIEdgeInsets(top: badgeSize.height / 2, left: 0, bottom: 0, right: badgeSize.width / 2)
    }

我也尝试过不同的配置，但我从来没有能够适应想要的位置

如果我尝试使用其他 2 种方法 alignmentRectForFrame 和 frameForAlignmentRect(删除 alignmentRectInsets)，它们永远不会被调用。
这是我想获得的:

我创建了一个 little sample code

Answer 1

如果问题是您希望other View (“内容 View ”，显示图像)在最终 super View 中居中，那么简单地进行居中约束(center x to center x , center y to center y) 在 super View 和内容 View 之间。没有法律规定约束必须存在于 View 与其直接父 View 之间；您可以在任何 对 View 之间进行约束(这是约束的妙处之一)。

我制作了一个快速模型，看起来很像您的“这是我想要获得的”图片:

如您所见，Moe(中间的 Pep Boy，在图像中间)正好位于父 View 的中心(由绿线显示)。

为简单起见，整个界面是用代码创建的，因此我可以向您展示整个界面。在这里:

// create the custom view
let customView = UIView()
customView.translatesAutoresizingMaskIntoConstraints = false
self.view.addSubview(customView)
customView.backgroundColor = UIColor.redColor()
NSLayoutConstraint.activateConstraints([
    customView.widthAnchor.constraintEqualToConstant(100),
    customView.heightAnchor.constraintEqualToConstant(100),
    ])

// add the content view (image) to the custom view
let contentView = UIImageView(image: UIImage(named:"pep.jpg")!)
contentView.translatesAutoresizingMaskIntoConstraints = false
customView.addSubview(contentView)
NSLayoutConstraint.activateConstraints([
    contentView.leadingAnchor.constraintEqualToAnchor(customView.leadingAnchor),
    contentView.bottomAnchor.constraintEqualToAnchor(customView.bottomAnchor),
    contentView.heightAnchor.constraintEqualToAnchor(customView.heightAnchor, constant: -10),
    contentView.widthAnchor.constraintEqualToAnchor(customView.widthAnchor, constant: -10)
    ])

// add the badge (label) to the custom view
let badge = UILabel()
badge.translatesAutoresizingMaskIntoConstraints = false
customView.addSubview(badge)
badge.backgroundColor = UIColor.greenColor().colorWithAlphaComponent(0.5)
badge.font = UIFont(name: "GillSans", size: 14)
badge.textAlignment = .Center
badge.text = "567"
NSLayoutConstraint.activateConstraints([
    badge.centerXAnchor.constraintEqualToAnchor(contentView.trailingAnchor),
    badge.centerYAnchor.constraintEqualToAnchor(contentView.topAnchor),
    ])


// position the whole thing with respect to the content view
NSLayoutConstraint.activateConstraints([
    contentView.centerXAnchor.constraintEqualToAnchor(self.view.centerXAnchor),
    contentView.centerYAnchor.constraintEqualToAnchor(self.view.centerYAnchor),
    ])

---

但这不是您问题的完整答案。您现在应该问:是的，但是当我尝试使用 alignmentRectInsets 时出了什么问题？答案是:您忘记了 alignmentRectInsets 会影响与内部 View 以及外部 View 的对齐。换句话说，您当然可以改用该方法，但是您必须相应地调整内容 View 的位置。

所以，这是我使用 alignmentRectInsets 进行的重写。首先，我将为我们的自定义 View 定义一个自定义 View 子类:

class AlignedView : UIView {
    override func alignmentRectInsets() -> UIEdgeInsets {
        return UIEdgeInsetsMake(10, 0, 0, 10)
    }
}

现在是重写。我在上一个示例中更改的所有行旁边放了一个星号 (*):

// create the custom view
let customView = AlignedView() // *
customView.translatesAutoresizingMaskIntoConstraints = false
self.view.addSubview(customView)
customView.backgroundColor = UIColor.redColor()
NSLayoutConstraint.activateConstraints([
    customView.widthAnchor.constraintEqualToConstant(100),
    customView.heightAnchor.constraintEqualToConstant(100),
    ])

// add the content view (image) to the custom view
let contentView = UIImageView(image: UIImage(named:"pep.jpg")!)
contentView.translatesAutoresizingMaskIntoConstraints = false
customView.addSubview(contentView)
NSLayoutConstraint.activateConstraints([
    contentView.leadingAnchor.constraintEqualToAnchor(customView.leadingAnchor),
    contentView.bottomAnchor.constraintEqualToAnchor(customView.bottomAnchor),
    contentView.heightAnchor.constraintEqualToAnchor(customView.heightAnchor), // *
    contentView.widthAnchor.constraintEqualToAnchor(customView.widthAnchor) // *
    ])

// add the badge (label) to the custom view
let badge = UILabel()
badge.translatesAutoresizingMaskIntoConstraints = false
customView.addSubview(badge)
badge.backgroundColor = UIColor.greenColor().colorWithAlphaComponent(0.5)
badge.font = UIFont(name: "GillSans", size: 14)
badge.textAlignment = .Center
badge.text = "567"
NSLayoutConstraint.activateConstraints([
    badge.centerXAnchor.constraintEqualToAnchor(contentView.trailingAnchor),
    badge.centerYAnchor.constraintEqualToAnchor(contentView.topAnchor),
    ])


// position the whole thing with respect to the custom view

NSLayoutConstraint.activateConstraints([
    customView.centerXAnchor.constraintEqualToAnchor(self.view.centerXAnchor), // *
    customView.centerYAnchor.constraintEqualToAnchor(self.view.centerYAnchor), // *
    ])

这给出了与之前完全相同的视觉结果。