以编程方式在具有约束的按钮上添加图像 (Swift)
Programmatically Add Image Over a Button with Constraints (Swift)
感觉好像遗漏了一些简单的东西,但我想不通。我正在尝试以编程方式在按钮上添加图像。在这种情况下,自定义按钮上有 Facebook 徽标。我希望底部位于按钮的左侧上方,因此我将图像的约束锚定在按钮的左侧。
但是,我无法对图像施加正确的约束,因为按钮的大小是可变的,具体取决于 phone 屏幕大小(宽度设置为乘数)。我认为只需将图像内容模式设置为纵横比就可以解决这个问题,但实际情况是图像的右侧是根据其完整尺寸设置的。
我该如何处理?我想也许我可以计算按钮的高度并用它来设置图像的宽度。我不确定该怎么做,而且我觉得我错过了一个更优雅的解决方案。谢谢!
let customFacebookButton = UIButton(type: .system)
let facebookLogo: UIImageView = {
let imageView = UIImageView(image: UIImage(named: "facebookLogo"))
imageView.translatesAutoresizingMaskIntoConstraints = false
imageView.contentMode = .scaleAspectFit
return imageView
}()
view.addSubview(facebookLogo)
facebookLogo.topAnchor.constraint(equalTo: customFacebookButton.topAnchor, constant: 10).isActive = true
facebookLogo.bottomAnchor.constraint(equalTo: customFacebookButton.bottomAnchor, constant: -10).isActive = true
facebookLogo.leadingAnchor.constraint(equalTo: customFacebookButton.leadingAnchor, constant: 10).isActive = true
// Custom Button Constraints in case it's helpful
customFacebookButton.topAnchor.constraint(equalTo:
loginTextViewTitle.bottomAnchor, constant: 30).isActive = true
customFacebookButton.centerXAnchor.constraint(equalTo: view.safeAreaLayoutGuide.centerXAnchor).isActive = true
customFacebookButton.heightAnchor.constraint(equalToConstant: 50).isActive = true
customFacebookButton.widthAnchor.constraint(equalTo: view.safeAreaLayoutGuide.widthAnchor, multiplier: 0.8).isActive = true
您可以计算徽标的纵横比并将其与图像的高度结合使用
if let image = facebookLogo.image
{
let ratio = image.size.width / image.size.height
facebookLogo.widthAnchor.constraint(equalTo: facebookLogo.heightAnchor, multiplier: ratio).isActive = true
}
这样即使您调整按钮的大小,徽标的宽度也会以正确的比例调整大小
感觉好像遗漏了一些简单的东西,但我想不通。我正在尝试以编程方式在按钮上添加图像。在这种情况下,自定义按钮上有 Facebook 徽标。我希望底部位于按钮的左侧上方,因此我将图像的约束锚定在按钮的左侧。
但是,我无法对图像施加正确的约束,因为按钮的大小是可变的,具体取决于 phone 屏幕大小(宽度设置为乘数)。我认为只需将图像内容模式设置为纵横比就可以解决这个问题,但实际情况是图像的右侧是根据其完整尺寸设置的。
我该如何处理?我想也许我可以计算按钮的高度并用它来设置图像的宽度。我不确定该怎么做,而且我觉得我错过了一个更优雅的解决方案。谢谢!
let customFacebookButton = UIButton(type: .system)
let facebookLogo: UIImageView = {
let imageView = UIImageView(image: UIImage(named: "facebookLogo"))
imageView.translatesAutoresizingMaskIntoConstraints = false
imageView.contentMode = .scaleAspectFit
return imageView
}()
view.addSubview(facebookLogo)
facebookLogo.topAnchor.constraint(equalTo: customFacebookButton.topAnchor, constant: 10).isActive = true
facebookLogo.bottomAnchor.constraint(equalTo: customFacebookButton.bottomAnchor, constant: -10).isActive = true
facebookLogo.leadingAnchor.constraint(equalTo: customFacebookButton.leadingAnchor, constant: 10).isActive = true
// Custom Button Constraints in case it's helpful
customFacebookButton.topAnchor.constraint(equalTo:
loginTextViewTitle.bottomAnchor, constant: 30).isActive = true
customFacebookButton.centerXAnchor.constraint(equalTo: view.safeAreaLayoutGuide.centerXAnchor).isActive = true
customFacebookButton.heightAnchor.constraint(equalToConstant: 50).isActive = true
customFacebookButton.widthAnchor.constraint(equalTo: view.safeAreaLayoutGuide.widthAnchor, multiplier: 0.8).isActive = true
您可以计算徽标的纵横比并将其与图像的高度结合使用
if let image = facebookLogo.image
{
let ratio = image.size.width / image.size.height
facebookLogo.widthAnchor.constraint(equalTo: facebookLogo.heightAnchor, multiplier: ratio).isActive = true
}
这样即使您调整按钮的大小,徽标的宽度也会以正确的比例调整大小