大家好,我是Tony,距离上次发帖有好久了。其实最近也挺迷茫的,不知道该是写中文贴还是英文贴。希望有大家给出自己的意见。好了言归正传。今天想给大家分享一个如何让UILabel长度随着文字长度变化而变化。
什么意思呢?我先给大家看两站图就知道了。
这里能有两个元素,一个是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。如果有任何疑问,可以留言问我,我非常原因解答。并且我也是在学习的。也会有不会的地方。