Swift:AutoLayout表现怪异 [英] Swift: AutoLayout acting weird

问题描述

以下是我的困境，以及为了解自己的情况而采取的步骤.

Below is my dilemma and the steps I took to arrive at my situation.

我的第一步

我创建了一个名为BubbleView的类:

I create a class called BubbleView:

import UIKit
import SnapKit


class BubbleView : UIView {
    
    var label:UILabel!
    
    var text:String = "" {
        didSet {
            guard label != nil else {return}
            label.text = text
        }
    }
            
    init() {
        super.init(frame: .zero)
        setupUI()
    }
    
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    
    func setupUI() {
        self.clipsToBounds = true
        self.backgroundColor = .systemBlue
        self.layer.cornerRadius = 15
        
        label = UILabel()
        label.textColor = .white
        label.numberOfLines = 0
        addSubview(label)
        
        label.snp.makeConstraints { (make) in
            make.edges.equalToSuperview().inset(10)
        }
    }
}

第2步

我创建一个视图控制器并添加我的BubbleView:

I create a view controller and add my BubbleView:

import UIKit
import SnapKit


class ViewController: UIViewController {
    
    var bubble: BubbleView!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        setupUI()
    }
    
    override func viewDidAppear(_ animated: Bool) {
        super.viewDidAppear(animated)
        DispatchQueue.main.asyncAfter(deadline: .now() + 3) {
            self.bubble.text = "Lorem ipsum dolor sit amet, consectetur adipiscing elit."
        }
    }
                        
    func setupUI() {
        bubble = BubbleView()
        bubble.text = "Hello"
        view.addSubview(bubble)
        
        bubble.snp.makeConstraints { (make) in
            make.width.equalToSuperview().multipliedBy(0.7).priority(.low)
            make.width.lessThanOrEqualToSuperview().multipliedBy(0.7)
            make.top.right.equalTo(self.view.safeAreaLayoutGuide).inset(20)
        }
    }
}

我的问题

我的问题是，当我执行bubble.text = "Hello"时，右侧会有大量的尾随空间，如下所示:

My problem is, when I do bubble.text = "Hello", there is a large amount of trailing space to the right as shown below:

我正在尝试摆脱此尾随空格，以便图像看起来更像:

I am trying to get rid of this trailing space so the image looks more like:

我需要的

将设备旋转到横向模式时，我需要BubbleView进行调整以占据屏幕的70％，所以看起来像这样:

When the device is rotated into landscape mode, I need the BubbleView to resize to take up 70% of the screen, so it looks something like so:

到目前为止，气泡视图确实可以做到这一点，但它始终具有令人讨厌的尾随空间，如第一幅图所示.通过删除BubbleView上的以下约束:

So far, the bubble view does do this, but it always has the annoying trailing space as shown in the first image. By removing the following constraint on the BubbleView:

make.width.equalToSuperview().multipliedBy(0.7).priority(.low)

它解决了尾随空间的问题，但是，当我旋转设备时，宽度不会更新为0.7 *设备的宽度，如下所示:

It fixes the trailing space issue, however, when I rotate the device, the width doesn't update to 0.7 * the width of the device, as shown below:

帮助

所以，我想知道是否有人知道只有少量文本时如何删除BubbleView上的尾随空格，但是如果设备旋转时它仍会保留填充0.7 * screen width的行为，而不是保持相同的宽度.

So, I am wondering if anyone knows how to remove the trailing space on the BubbleView when there is only a small amount of text, but still keep the behaviour when the device is rotated that it fills up 0.7 * screen width if necessary, instead of keeping the same width.

非常感谢您抽出宝贵的时间！

Thank you so much for your time!

推荐答案

最终通过实现我的UICollectionViewCell类来解决此问题:

Solved by eventually implementing my UICollectionViewCell class like this:

import UIKit
import SnapKit


class BubbleCell : UICollectionViewCell {
    
    var label:UILabel!
    var background:UIView!
    
    var text:String = "" {
        didSet {
            guard label != nil else {return}
            label.text = text
        }
    }
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        setupUI()
    }
    
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    
    func setupUI(spacing:CGFloat=2) {
                    
        label = UILabel()
        label.textColor = .white
        label.numberOfLines = 0
        contentView.addSubview(label)
        
        background = UIView()
        background.backgroundColor = .systemBlue
        background.layer.cornerRadius = 17
        background.clipsToBounds = true
        contentView.addSubview(background)
        contentView.sendSubviewToBack(background)
                
        label.snp.makeConstraints { (make) in
            make.top.bottom.equalToSuperview().inset(10 + spacing)
            make.right.equalToSuperview().inset(20)
            make.width.lessThanOrEqualToSuperview().multipliedBy(0.7)
        }
        
        background.snp.makeConstraints { (make) in
            make.top.equalTo(self.label).inset(-10)
            make.bottom.equalTo(self.label).offset(10)
            make.left.equalTo(self.label).inset(-15)
            make.right.equalTo(self.label).offset(15)
        }
    }
}

这篇关于Swift:AutoLayout表现怪异的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！