Question

我正在尝试使用Xcode中的情节提要创建一个如下所示的视图。

为此，我添加了带有约束的按钮和标签，但这是我得到的结果。文本不在复选框下方开始。实现此目的的一种方法是创建2个标签，并将this字符串之后的字符串添加到2个标签，并将其放在第一个标签下。

还有更好的方法吗？另外，当您单击“阅读更多”时，文本也可以展开。

Answer 1

您可以使按钮的开头和标签相同（标签上方的按钮），并在标签文本的开头插入一些空字符

Answer 2

您可以采取一种方法。在视图中使用按钮和标签

然后将视图分为两个视图，左边一个保留按钮，右边一个保留标签。在左右之间

按钮的约束将按您的意愿设置为，顶部，后跟零和高度

标签的约束将是前导，顶部，尾部和底部。

Answer 3

您可以通过使用UITextView并设置 ExclusionPath 来完成此操作。

ExclusionPath （或路径）在文本视图的textContainer中定义了一个区域，该区域应环绕文本。

如果禁用UITextView的滚动，选择和编辑，其行为将与UILabel相似，但也会为您带来 ExclusionPath

的优势

这是一个简单的示例-许多硬编码的值，因此您可能希望将其设为自定义类-但这应该可以助您一臂之力：

class TextViewLabel: UITextView {

    override init(frame: CGRect, textContainer: NSTextContainer?) {
        super.init(frame: frame, textContainer: textContainer)
        commonInit()
    }

    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        commonInit()
    }

    func commonInit() -> Void {
        isScrollEnabled = false
        isEditable = false
        isSelectable = false
        textContainerInset = UIEdgeInsets.zero
        textContainer.lineFragmentPadding = 0
    }

}

class ExclusionViewController: UIViewController {

    let checkBox: UIButton = {
        let v = UIButton()
        v.translatesAutoresizingMaskIntoConstraints = false
        return v
    }()

    let theTextViewLabel: TextViewLabel = {
        let v = TextViewLabel()
        v.translatesAutoresizingMaskIntoConstraints = false
        v.backgroundColor = .yellow
        v.text = "I agree to receive information about this application and all the updates related to this..."
        v.font = UIFont.systemFont(ofSize: 20.0)
        return v
    }()

    var isChecked: Bool = false

    override func viewDidLoad() {
        super.viewDidLoad()

        view.addSubview(theTextViewLabel)
        theTextViewLabel.addSubview(checkBox)

        let cbWidth = CGFloat(20)

        NSLayoutConstraint.activate([

            theTextViewLabel.topAnchor.constraint(equalTo: view.topAnchor, constant: 100.0),
            theTextViewLabel.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 40.0),
            theTextViewLabel.widthAnchor.constraint(equalToConstant: 240.0),

            checkBox.topAnchor.constraint(equalTo: theTextViewLabel.topAnchor, constant: 2.0),
            checkBox.leadingAnchor.constraint(equalTo: theTextViewLabel.leadingAnchor, constant: 0.0),
            checkBox.widthAnchor.constraint(equalToConstant: cbWidth),
            checkBox.heightAnchor.constraint(equalToConstant: cbWidth),

            ])

        theTextViewLabel.textContainer.exclusionPaths = [
            UIBezierPath(rect: CGRect(x: 0, y: 0, width: cbWidth + 8.0, height: cbWidth))
        ]

        updateCheckboxImage()

        checkBox.addTarget(self, action: #selector(checkBoxTapped), for: .touchUpInside)

    }

    func updateCheckboxImage() -> Void {
        if isChecked {
            checkBox.setImage(UIImage(named: "SmallChecked"), for: .normal)
        } else {
            checkBox.setImage(UIImage(named: "SmallUnChecked"), for: .normal)
        }
    }

    @objc func checkBoxTapped() -> Void {
        isChecked = !isChecked
        updateCheckboxImage()
    }

}

结果：

（我将这两个图像用于复选框）：

将标签环绕UIbutton

3 个答案: