这是我的第一个 iOS 应用,我使用的是 Swift。我正在关注 CodeWithChris.com 上的教程。
用户将通过点击一系列图标来确定他们拥有的设备型号。到目前为止,我已经使用了一些约束来将图标正确放置在 iPhone 6 显示屏上。当使用 iPhone 5S/5c/5 或 4S/4 显示尺寸时,图标和文本仍然以 iPhone 6 的完整尺寸呈现,并且它们从屏幕上消失。
这是我构建布局的过程:
- 抓取 JSON 并将其解析为 NSArray。返回 ["iPhone", "Android", "Windows", "iPad"]
- 为 NSArray 中的每一项创建 UIView 对象。将 Name 变量设置为关联的名称。
- 使用 addSubview() 放置每个 UIView
- 将高度、宽度和底部边距约束应用于 UIView
- 根据其在行中的位置设置 UIView 位置约束
- 将图标 (UIImageViews) 添加到每个 UIView
- 根据设备类型设置高度和宽度限制
- 添加文本标签
我使用了一堆约束来放置 UIView 和 UIImageView。如何根据设备的屏幕尺寸使这些约束动态化?
iPhone 6,contentView 为蓝色,UIView 为红色
iPhone 6
iPhone 5/5S/5c
iPhone 4S/4
这是我添加设备 UIView 并应用约束的地方:
// Loop through the array of DeviceTypes to add each to the UIView
for index in 0...deviceTypes.count-1 {
// Grab the current device
var thisDevice:DeviceType = deviceTypes[index]
// Add to the view!
contentView.addSubview(thisDevice)
thisDevice.setTranslatesAutoresizingMaskIntoConstraints(false)
// How tall is the Device UIView
var heightConstraint:NSLayoutConstraint = NSLayoutConstraint(item: thisDevice, attribute: NSLayoutAttribute.Height, relatedBy: NSLayoutRelation.Equal, toItem: nil, attribute: NSLayoutAttribute.NotAnAttribute, multiplier: 1, constant: 200)
// How wide is the device UIView
var widthConstraint:NSLayoutConstraint = NSLayoutConstraint(item: thisDevice, attribute: NSLayoutAttribute.Width, relatedBy: NSLayoutRelation.Equal, toItem: nil, attribute: NSLayoutAttribute.NotAnAttribute, multiplier: 1, constant: 130)
// How far is the bottom of the UIView from the top of the contentView
var bottomMarginConstraint:NSLayoutConstraint = NSLayoutConstraint(item: thisDevice, attribute: NSLayoutAttribute.Top, relatedBy: NSLayoutRelation.Equal, toItem: contentView, attribute: NSLayoutAttribute.Top, multiplier: 1, constant: 100)
// Add thisDevice's UIView constraints
thisDevice.addConstraints([heightConstraint, widthConstraint])
contentView.addConstraint(bottomMarginConstraint)
thisDevice.backgroundColor = UIColor.redColor()
// set UIView position constraints based on place in row
if (index > 0) {
// device is second or further in row
var deviceOnTheLeft = deviceTypes[index-1]
var leftMarginConstraint:NSLayoutConstraint = NSLayoutConstraint(item: thisDevice, attribute: NSLayoutAttribute.Left, relatedBy: NSLayoutRelation.Equal, toItem: deviceOnTheLeft, attribute: NSLayoutAttribute.Right, multiplier: 1, constant: 10)
contentView.addConstraint(leftMarginConstraint)
}
else {
// device is first in row
var leftMarginConstraint:NSLayoutConstraint = NSLayoutConstraint(item: thisDevice, attribute: NSLayoutAttribute.Left, relatedBy: NSLayoutRelation.Equal, toItem: contentView, attribute: NSLayoutAttribute.Left, multiplier: 1, constant: 0)
// Add constraint
contentView.addConstraint(leftMarginConstraint)
}
以下是我对图标图像应用的约束:
func addDeviceImages() {
// Set right image based on deviceType name
self.frontImageView.image = UIImage(named: self.Name!)
// Set translates autoresizing mask to fault
self.frontImageView.setTranslatesAutoresizingMaskIntoConstraints(false)
// Add the imageview to the view
self.addSubview(self.frontImageView)
if (self.Name == "Windows") {
self.addImageSizeConstraints(90, height: 160)
}
else if (self.Name == "iPad"){
self.addImageSizeConstraints(120, height: 180)
}
else if (self.Name == "iPhone"){
self.addImageSizeConstraints(85, height: 175)
}
else if (self.Name == "Android"){
self.addImageSizeConstraints(95, height: 185)
}
}
func addImageSizeConstraints(width: CGFloat, height: CGFloat) {
// Set the size constraints for the imageview based on the values passed in
var heightConstraint:NSLayoutConstraint = NSLayoutConstraint(item: self.frontImageView, attribute: NSLayoutAttribute.Height, relatedBy: NSLayoutRelation.Equal, toItem: nil, attribute: NSLayoutAttribute.NotAnAttribute, multiplier: 1, constant: height)
var widthConstraint:NSLayoutConstraint = NSLayoutConstraint(item: self.frontImageView, attribute: NSLayoutAttribute.Width, relatedBy: NSLayoutRelation.Equal, toItem: nil, attribute: NSLayoutAttribute.NotAnAttribute, multiplier: 1, constant: width)
self.frontImageView.addConstraints([heightConstraint, widthConstraint])
// Set the position of the imageview in the UIView
var verticalConstraint:NSLayoutConstraint = NSLayoutConstraint( item: self.frontImageView, attribute: NSLayoutAttribute.Bottom, relatedBy: NSLayoutRelation.Equal, toItem: self, attribute: NSLayoutAttribute.Bottom, multiplier: 1, constant: -25)
var horizontalConstraint:NSLayoutConstraint = NSLayoutConstraint( item: self.frontImageView, attribute: NSLayoutAttribute.Left, relatedBy: NSLayoutRelation.Equal, toItem: self, attribute: NSLayoutAttribute.Left, multiplier: 1, constant: 5)
self.addConstraints([horizontalConstraint,verticalConstraint])
}
最佳答案
您使用了错误类型的约束。您的宽度限制是绝对的——您正在设置一个固定的常量
。相反,使 constant
为 0,宽度取决于高度,使用正确固定宽高比的 multiplier
值。这样,随着高度的变化,宽度也会随之变化。对图像之间的间隔做同样的事情 - 使间隔取决于父 View 的宽度,作为乘数。
关于不同屏幕尺寸的 iOS 缩放约束,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30603443/