带有自动布局（snapkit）的圆形视图？

Posted 2023-03-15

【中文标题】带有自动布局（snapkit）的圆形视图？

【英文标题】：Circular views with Autolayout (snapkit)?

【发布时间】：2017-11-06 12:04:19

【问题描述】：

我正在尝试制作一个基于自动布局具有自适应大小的圆形视图，目前我设置了约束，然后我尝试在 viewwilllayoutsubviews 方法中对图像进行舍入。

这导致了形状奇怪的非圆形视图，我该如何解决？

初始化：

    profilePic = UIImageView(frame: CGRect.zero)
    profilePic.clipsToBounds = true
    profilePic.contentMode = .scaleAspectFill

约束：

 profilePic.snp.makeConstraints  (make) -> Void in
                make.centerX.equalTo(self).multipliedBy(0.80)
                make.centerY.equalTo(self).multipliedBy(0.40)
                make.size.equalTo(self).multipliedBy(0.22)
            

子视图：

override func viewWillLayoutSubviews() 
        self.navigationMenuView.profilePic.layer.cornerRadius = self.navigationMenuView.profilePic.frame.size.width / 2.0
        self.navigationMenuView.profilePic.layer.borderWidth = 2
        self.navigationMenuView.profilePic.layer.borderColor = UIColor.white.cgColor
    

结果：

【问题讨论】：

尝试在 imageView 中再添加一个约束“纵横比”到 1:1。因为要圆形，就必须有方形的imageView。

【参考方案1】：

我猜你想要这个（对于普通的自动布局很抱歉，但我不使用 snapkit）：

profilePic.heightAnchor.constraint(equalTo: profilePic.widthAnchor).isActive = true
profilePic.widthAnchor.constraint(equalTo: self.view.widthAnchor, multiplier: 0.22).isActive = true

而不是这个：

make.size.equalTo(self).multipliedBy(0.22)

【参考方案2】：

我遇到了同样的问题

这是我的解决方案：

let profilePicHeight: CGFloat = 30.0

将这行代码添加到您的约束中：

profilePic.snp.makeConstraints  (make) -> Void in
            make.height.width.equalTo(self.profilePicHeight)
            ...
        

然后：

override func viewWillLayoutSubviews() 
    self.navigationMenuView.profilePic.layer.cornerRadius = self.profilePicHeight / 2.0
    ...

【参考方案3】：

我在这里的建议是不要把它当作从外面看的圆形视图。使视图本身符合圆形，以便您可以在任何地方使用它。

在视图内部给它诸如...的约束

widthAnchor.constraint(equalTo: heightAnchor).isActive = true

这将使它成为正方形（大小未定）。

然后在函数layoutSubviews...

override func layoutSubviews() 
    super.layoutSubviews()

    layer.cornerRadius = bounds.size.width * 0.5

这将使正方形变成圆形。

【讨论】：

这几乎就是代码已经做的事情了？我在约束中使它成为正方形，然后在子视图中四舍五入

@jackdm 但你仍然告诉它在视图控制器中是正方形的。使视图本身成为正方形是有意义的。另外，我质疑按扣套件的使用。自动布局真的不难做到。我建议放弃它，只学习自动布局。