英文:
Trying to center a rotated label inside a background image
问题
我有以下的代码:
import UIKit
class ViewController: UIViewController {
override func viewDidLoad() {
super.viewDidLoad()
// 创建背景图像视图
let backgroundImage = UIImageView(image: UIImage(named: "cardStock1"))
backgroundImage.translatesAutoresizingMaskIntoConstraints = false
backgroundImage.layer.borderWidth = 2
backgroundImage.layer.borderColor = UIColor.darkGray.cgColor
backgroundImage.layer.shadowColor = UIColor.darkGray.cgColor
backgroundImage.layer.shadowOffset = CGSize(width: 4, height: 4)
view.addSubview(backgroundImage)
NSLayoutConstraint.activate([
backgroundImage.leadingAnchor.constraint(equalTo: view.leadingAnchor),
backgroundImage.trailingAnchor.constraint(equalTo: view.trailingAnchor),
backgroundImage.topAnchor.constraint(equalTo: view.topAnchor),
backgroundImage.bottomAnchor.constraint(equalTo: view.bottomAnchor)
])
let label1 = UILabel()
label1.translatesAutoresizingMaskIntoConstraints = false
label1.text = "Hello World"
label1.font = UIFont.init(name: "HelveticaNeue-Light", size: 55)
label1.textColor = .gray
label1.rotate(degrees: -7)
view.addSubview(label1)
NSLayoutConstraint.activate([
label1.centerXAnchor.constraint(equalTo: view.centerXAnchor),
label1.centerYAnchor.constraint(equalTo: view.centerYAnchor),
label1.widthAnchor.constraint(equalToConstant: 300),
label1.heightAnchor.constraint(equalToConstant: 160)
])
}
}
extension UIView {
func rotate(degrees: CGFloat) {
rotate(radians: CGFloat.pi * degrees / 180.0)
}
func rotate(radians: CGFloat) {
self.transform = CGAffineTransform(rotationAngle: radians)
self.layoutIfNeeded() // 旋转后更新布局
}
}
运行这段代码后,标签没有居中在图像内部。您可以如何适当地调整代码。
英文:
I have the following code:
import UIKit
class ViewController: UIViewController {
override func viewDidLoad() {
super.viewDidLoad()
// Create the background image view
let backgroundImage = UIImageView(image: UIImage(named: "cardStock1"))
backgroundImage.translatesAutoresizingMaskIntoConstraints = false
backgroundImage.layer.borderWidth = 2
backgroundImage.layer.borderColor = UIColor.darkGray.cgColor
backgroundImage.layer.shadowColor = UIColor.darkGray.cgColor
backgroundImage.layer.shadowOffset = CGSize(width: 4, height: 4)
view.addSubview(backgroundImage)
NSLayoutConstraint.activate([
backgroundImage.leadingAnchor.constraint(equalTo: view.leadingAnchor),
backgroundImage.trailingAnchor.constraint(equalTo: view.trailingAnchor),
backgroundImage.topAnchor.constraint(equalTo: view.topAnchor),
backgroundImage.bottomAnchor.constraint(equalTo: view.bottomAnchor)
])
let label1 = UILabel()
label1.translatesAutoresizingMaskIntoConstraints = false
label1.text = "Hello World"
label1.font = UIFont.init(name: "HelveticaNeue-Light", size: 55)
label1.textColor = .gray
label1.rotate(degrees: -7)
view.addSubview(label1)
NSLayoutConstraint.activate([
label1.centerXAnchor.constraint(equalTo: view.centerXAnchor),
label1.centerYAnchor.constraint(equalTo: view.centerYAnchor),
label1.widthAnchor.constraint(equalToConstant: 300),
label1.heightAnchor.constraint(equalToConstant: 160)
])
}
}
extension UIView {
func rotate(degrees: CGFloat) {
rotate(radians: CGFloat.pi * degrees / 180.0)
}
func rotate(radians: CGFloat) {
self.transform = CGAffineTransform(rotationAngle: radians)
self.layoutIfNeeded() // Update layout after rotation
}
}
Running this code, the label is not centered within the image. How can i adjust the code appropriately.
Thanks for the reply. This code change results in this image:
答案1
得分: 1
为了使标签居中,您需要更新标签的约束,目前您设置的约束将标签的中心设置为视图的中心。要在图像内居中标签,您可以按如下方式更新约束:
NSLayoutConstraint.activate([
label1.centerXAnchor.constraint(equalTo: backgroundImage.centerXAnchor),
label1.centerYAnchor.constraint(equalTo: backgroundImage.centerYAnchor),
label1.widthAnchor.constraint(equalToConstant: 300),
label1.heightAnchor.constraint(equalToConstant: 160)
])
英文:
To centre the label you need to update the constraints for the label, currently you set the constraints set the centre of the label to the centre of the view. To centre the label within the image, you can update the constraints as follows,
NSLayoutConstraint.activate([
label1.centerXAnchor.constraint(equalTo: backgroundImage.centerXAnchor),
label1.centerYAnchor.constraint(equalTo: backgroundImage.centerYAnchor),
label1.widthAnchor.constraint(equalToConstant: 300),
label1.heightAnchor.constraint(equalToConstant: 160)
])
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论