在ios中设置约束的优秀方法或优秀做法是什么,在ipad设备中设计得很好

我已经创建了一个在iphone设备上运行良好的应用程序,我已经尝试过自动布局和约束,以便它可以在ipad上的iphone设备上运行相同,但问题是它可以在iphone中查看,但在ipad设备中距离似乎也是如此广泛的。 例如,如果我设置约束距离是8,它在iphone设备中没问题,但它似乎在ipad设备中很宽。 还有一种方法,我们可以图像或按钮或组件将调整大,以便适合ipad? 是否有良好的做法或设置设计的最佳方式,也适用于ipad。 谢谢 。 正如你在下面的图片中看到的那样,这些数字和位置的距离就是它在手机上的外观。 截图是在ipad中拍摄的。 这就是它在ipad上的外观。 我设法设置按钮开始,跳过和asnwer的约束,但我想调整所有到ipad,包括问题和其他按钮的数字,如你在图像中看到我希望使它大,并使其等于中心。

为简化起见,Apple推荐了一种新的范例。 您应该专注于将布局调整为两种类型的宽度(称为紧凑和常规)和两种类型的高度(也是紧凑型),而不是根据许多设备类型,分辨率,多任务模式和设备方向来考虑您的布局。定期)。 这些区别称为大小类。 然后,您可以使用这些大小类来定义或调整布局。

请参考 。

您可以使用AspectRatio来设置使用storyBoard的约束

静态距离值8对于iPhone是可以的,但在iPad中则非常少,因此要解决您需要根据屏幕尺寸提供距离

脚步

1)在ViewController拖动一个View,并将其设置为Horizontally & vertically输入容器

在此处输入图像描述

2)使用屏幕尺寸设置相等宽度和高度(ViewController)

在此处输入图像描述

3)现在选择高度参数并检查其设置为1的乘数

在此处输入图像描述

4)根据要求改变乘数值

在此处输入图像描述

现在输出与iPhone和iPad上的输出相同,外观相同

间距

1)拖动标签以设置间距,并使用之前添加的视图添加中心水平

在此处输入图像描述

2)为标签添加顶部空间到视图,如下所示

在此处输入图像描述

3)现在选择添加的顶部约束并再次改变其乘数以根据viewScreen大小设置它们之间的间距

选择Top Constraint与乘数1类似

在此处输入图像描述

变化后的乘数/标签向下移动后

在此处输入图像描述

产量

在此处输入图像描述

让我们说在故事板中你有一个skipButton固定在屏幕的底部(你没有改变底部的引脚所以我没有包括它),它的高度为44点,距离屏幕左侧是8点,并且是距离屏幕右侧8点。 这对于iPhone来说很好,但在iPad上,你希望按钮的高度为50点,屏幕左侧为100点,屏幕右侧为100点。

在视图控制器内部,您需要为NSLayoutConstraint类型的约束创建一个出口,并且在其上有一个constant属性,您可以使用它来更改在Storyboard中设置的常量(请参阅下面的代码示例)。

如果您不知道如何进行约束连接,您只需在Storyboard中选择约束,打开“助手编辑器”,然后按住Ctrl键并将约束拖到视图控制器中,并将其命名为您想要命名的任何名称。 这与您连接按钮或标签或imageView的过程完全相同,唯一的区别是您使用约束。

每个应用程序都有一个属性,您可以在其中找到当前使用的设备类型: UIDevice.current.userInterfaceIdiom Apple-正在使用的设备类型

在viewDidLoad中,您可以找到用户使用的设备类型,然后将约束更改为适合iPad的任何大小:

 // skipButton is type UIButton (look at what's next to the name skipButton). You are not changing the button you are changing the constraint on the button. @IBOutlet weak fileprivate var skipButton: UIButton! // the main focus here are the constraints for the saveButton. I just added this here to show that the saveButton is inside this vc. Your focus is changing the below constraints that help position and size the saveButton and not the saveButton itself // ***VERY IMPORTANT*** YOU HAVE TO CONNECT THESE CONSTRAINTS via STORYBOARD (look at the 3 pics below). You do it the same way you would have connected the skipButton above. The difference is you grab the constraint that is on skipButton that you made in storyboard. The skipButton is already connected. These are the constraints that are on it and are completely different from the skipButton itself. // the constraints are of type NSLayoutConstraint (look at the name next to skipButtonLeadingConstraint). This is what you want to change. This and the UIButton above are two completely different things @IBOutlet weak var skipButtonLeadingConstraint: NSLayoutConstraint! // in Storyboard left constraint is set at 8 points from left side of vc @IBOutlet weak var skipButtonTrailingConstraint: NSLayoutConstraint! // in Storyboard right constraint is set at 8 points from right side of vc @IBOutlet weak var skipButtonHeightConstraint: NSLayoutConstraint! // in Storyboard height is set at 44 points override func viewDidLoad() { super.viewDidLoad() // if the user is using an iPad then change the constraints to the below sizes which would make the saveButton's width smaller and also it's height taller. If the user is using anything other then an iPad then it will automatically use the Storyboard constraints and automatically ignore the below code if UIDevice.current.userInterfaceIdiom == .pad{ // when using an iPad left constraint is now set at 100 points from left side of vc skipButtonLeadingConstraint.constant = 100 // when using an iPad right constraint is now set at 100 points from right side of vc skipButtonTrailingConstraint.constant = 100 // when using an iPad height constraint is now set at 50 points high skipButtonHeightConstraint.constant = 50 } } 

下面是如何在Storyboard中添加skipButtonLeadingConstraint。 您可以在跳过按钮的约束下的文档大纲内抓取它(它以蓝色突出显示)

首先在文档大纲中选择约束:

领先的约束

第二步将连接拖到视图控制器并将其命名为skipButtonLeadingConstraint: 从故事板中连接vc内的前导约束

3完成连接: skipButtonLeadingConstraint现已连接