Swift Dynamic Label

大家好，我是Tony，距离上次发帖有好久了。其实最近也挺迷茫的，不知道该是写中文贴还是英文贴。希望有大家给出自己的意见。好了言归正传。今天想给大家分享一个如何让UILabel长度随着文字长度变化而变化。

什么意思呢？我先给大家看两站图就知道了。

screenshot1.png screenshot2.png

这里能有两个元素，一个是background view，另一个是UILabel。并且呢View随着Label宽度变化而变化。

这里是怎么做到的呢？这里向大家介绍一下AutoConstraints。它是用来设置地方和大小的。和frame有着类似的功能。当然它比frame的功能更强大。我先把code给大家：

import UIKit

class ViewController: UIViewController {
    
    let progressTextVisualEffectView: UIVisualEffectView = {
        let blurEffect = UIBlurEffect(style: .dark)
        let blur = UIVisualEffectView(effect: blurEffect)
        blur.layer.cornerRadius = 12
        blur.clipsToBounds = true
        blur.translatesAutoresizingMaskIntoConstraints = false
        return blur
    }()
    
    let progressLabel: UILabel = {
        let label = UILabel()
        label.translatesAutoresizingMaskIntoConstraints = false
        label.text = "1 / 12"
        label.textColor = UIColor(white: 1, alpha: 0.7)
        label.font = UIFont.systemFont(ofSize: 15, weight: .semibold)
        return label
    }()

    override func viewDidLoad() {
        super.viewDidLoad()
        
        view.addSubview(progressTextVisualEffectView)
        NSLayoutConstraint.activate([
            progressTextVisualEffectView.centerXAnchor.constraint(equalTo: view.centerXAnchor),
            progressTextVisualEffectView.centerYAnchor.constraint(equalTo: view.centerYAnchor),
            progressTextVisualEffectView.heightAnchor.constraint(equalToConstant: 50)
            ])
        
        progressTextVisualEffectView.contentView.addSubview(progressLabel)
        NSLayoutConstraint.activate([
            progressLabel.topAnchor.constraint(equalTo: progressTextVisualEffectView.topAnchor),
            progressLabel.bottomAnchor.constraint(equalTo: progressTextVisualEffectView.bottomAnchor),
            progressLabel.leftAnchor.constraint(equalTo: progressTextVisualEffectView.leftAnchor, constant: 10),
            progressLabel.rightAnchor.constraint(equalTo: progressTextVisualEffectView.rightAnchor, constant: -10)
            ])
    }

}

首先是两个原件：progressTextVisualEffectView和progressLabel。大家不太清楚的可能就是在ViewDidload里面的是什么了。我来一个一个解释：

首先分成两个部分，第一个部分是来告诉iPhone后面那个模糊特效放在哪。

1.这里是说把模糊特效放在view里面

view.addSubview(progressTextVisualEffectView)

2.其次是说怎么安排progressTextVisualEffectView。
第一行说和view的centerX平行，也就是说view的横向中心在哪，这个progressTextVisualEffectView的横向中心就在哪儿。
第二行同理，View的纵向中心在哪儿，这个progressTextVisualEffectView的纵向中心就在哪儿。
第三行设置了这个progressTextVisualEffectView的高度，为50.

NSLayoutConstraint.activate([
            progressTextVisualEffectView.centerXAnchor.constraint(equalTo: view.centerXAnchor),
            progressTextVisualEffectView.centerYAnchor.constraint(equalTo: view.centerYAnchor),
            progressTextVisualEffectView.heightAnchor.constraint(equalToConstant: 50)
            ])

正常情况下如果单一运行现在的程序，那程序会crash因为你没有告诉我这个progressTextVisualEffectView的宽度是多少。当然这里我建议不会的同学呢去试一试。但是，这就是AutoConstraints的厉害之处了。当我们加入了另一个元素之后，程序会自己分析出progressTextVisualEffectView所需要的宽度了。

大概就是这样了。这只是个很简单的trick。如果有任何疑问，可以留言问我，我非常原因解答。并且我也是在学习的。也会有不会的地方。