在ios中设置适用于ipad设备的约束的好方法或好实践是什么

时间:2022-05-16 12:57:58

I have created an app which is working fine in iphone devices , i have tried auto layout and constraints so that it would work same on iphone devices on the ipad , but the problem is its okay to look in iphone but in ipad devices distance seems too wide . for example if i have set constraints distance which is 8 its okay in iphone devices but its seems to wide in ipad device. also is there a way we can image or buttons or components would resize bigger so that will fit to the ipad? is there a good practice or the best way in setting the design that would also work on ipad. Thank You . as you have seen in the image below the distance of those numbers and possitions is how its looks on i phone. the screenshot was take in an ipad . that is how its looks on an ipad . i manage to sets contraints to button start , skip , and asnwer but i wanna resize all to ipad including the questions and the rest of the buttons with numbers as you have seen in the image i want make it big and make it equal to center.

我已经创建了一个应用程序在iphone设备工作正常,我已经尝试自动布局和约束,这样同样会在iphone设备在ipad上,但问题是它可以在iphone但在ipad设备距离太宽。例如,如果我设置了约束距离,在iphone设备中是可以的,但在ipad设备中似乎很宽。还有,有没有一种方法可以让我们的图像、按钮或组件的尺寸变得更大,以适应ipad?在设计时,是否有一个好的实践或最好的方法,也可以在ipad上工作。谢谢你!正如你在下图中看到的,这些数字和可能性的距离是i手机的样子。截图是用ipad拍的。这就是它在ipad上的样子。我成功地设置了按钮开始,跳过,和asnwer的限制但是我想把所有的尺寸都调整到ipad上包括问题和其他带有数字的按钮就像你们在图片中看到的一样我想把它变大,使它等于居中。

3 个解决方案

#1


1  

To simplify things, Apple recommends a new paradigm. Rather than considering your layout in terms of the many device types, resolutions, multitasking modes, and device orientation, you should focus instead on adjusting your layout to two types of widths (called compact and regular) and two types of heights (also compact and regular). These distinctions are called size classes. You can then use these size classes to define or adjust your layout.

为了简化问题,苹果公司推荐了一种新的模式。与其考虑你的布局,比如许多设备类型、分辨率、多任务模式和设备定位,你应该把重点放在调整你的布局到两种类型的宽度(称为紧凑和规则)和两种类型的高度(同样紧凑和规则)。这些区别称为大小类。然后可以使用这些大小类来定义或调整布局。

Please refer.

请参考。

#2


0  

You can make use of AspectRatio for setting constraints using storyBoard

您可以使用AspectRatio使用故事板设置约束

Static distance value 8 is okay for iPhone but very less in iPad , So to solve you need to provide distance according to screen Size

对于iPhone来说,静态距离值8是可以的,但在iPad上则要少得多,所以要解决这个问题,需要根据屏幕大小提供距离。

Steps

步骤

1) Drag a View in ViewController and set it Horizontally & vertically entered in container

1)在ViewController中拖动视图,并将其设置为水平和垂直地输入到容器中

在ios中设置适用于ipad设备的约束的好方法或好实践是什么

2) Set Equal Width and Height with screen Size (ViewController)

2)设置与屏幕大小相同的宽度和高度(ViewController)

在ios中设置适用于ipad设备的约束的好方法或好实践是什么

3) Now select the Height Parameter and check for the multiplier its set to 1

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

在ios中设置适用于ipad设备的约束的好方法或好实践是什么

4) Vary the multiplier value as per requirement

4)根据需要改变乘数值

在ios中设置适用于ipad设备的约束的好方法或好实践是什么

Now output will be same as on iPhone and iPad with equal looks

现在输出将和iPhone和iPad一样,外观相同

Spacing

间距

1) Drag a Label to set spacing and Add it centre horizontaly with the View Added before

拖动标签来设置间距,并将其添加到之前添加的视图中

在ios中设置适用于ipad设备的约束的好方法或好实践是什么

2) Set Top Space to View added for label as shown Below

2)设置顶部空间查看添加的标签,如下图所示

在ios中设置适用于ipad设备的约束的好方法或好实践是什么

3) Now select the Top Constraint added and vary its multiplier again to set spacing between them according to viewScreen size

3)现在选择添加的顶部约束,再次改变它的乘法器,根据屏幕大小设置它们之间的间距

Selecting Top Constraint looks like with multiplier 1

选择顶部约束看起来就像使用乘数1

在ios中设置适用于ipad设备的约束的好方法或好实践是什么

After Varying Multiplier / Label Moved Down

在不同的乘数/标签下降之后。

在ios中设置适用于ipad设备的约束的好方法或好实践是什么

Output

输出

在ios中设置适用于ipad设备的约束的好方法或好实践是什么

#3


0  

Let's say in Storyboards you have a skipButton pinned to the bottom of the screen (your not changing the bottom pin so I didn't include it), it's 44 points in height, is 8 points from the left side of the screen, and is is 8 points from the right side of the screen. That's fine for iPhones but on the iPad you want the button to be 50 points in height, 100 from the left side of the screen, and 100 points from the right side of the screen.

假设在故事板上写着skipButton屏幕底部的(你不改变底部销所以我不包括),44分高,是8点从屏幕的左侧,并且是8点从屏幕的右边。这对iphone来说没问题,但在iPad上,你希望按钮的高度是50点,屏幕左边是100点,右边是100点。

Inside the view controller you need to make an outlet for those constraints of type NSLayoutConstraint and there is a constant property on it that you can use to change the constant that you set inside Storyboard (see code example below).

在视图控制器中,您需要为NSLayoutConstraint类型的约束创建一个outlet,并且在它上面有一个常量属性,您可以使用它来更改在故事板中设置的常量(参见下面的代码示例)。

In case you don't know how to make the constraint connection all you do is select the constraint inside Storyboard, open the Assistant Editor, then cntrl+drag the constraint to the view controller and name it whatever you want to name it. It's the same exact process as if you was connecting a button or label or imageView the only difference is your using a constraint.

如果您不知道如何进行约束连接,那么只需在故事板中选择约束,打开辅助编辑器,然后cntrl+将约束拖拽到视图控制器中,并对其命名。这与连接按钮、标签或imageView的过程完全相同,唯一的区别就是使用了约束。

Every app has a property where you can find out which type of device is currently being used: UIDevice.current.userInterfaceIdiom Apple -Type of Device Being Used

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

Inside viewDidLoad you find out what type of device the user is using and then you change the constraints to whatever size is suitable to you for iPads:

在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
    }
}

Below is how to add the skipButtonLeadingConstraint in Storyboard. You can grab it inside the Document Outline under the Skip Button's Constraints (it's highlighted in blue)

下面是如何在故事板中添加skipButtonLeadingConstraint。您可以在Skip按钮的约束下在文档大纲中获取它(它用蓝色突出显示)

1st select the constraint in the Document Outline:

选择文件大纲中的约束:

在ios中设置适用于ipad设备的约束的好方法或好实践是什么

2nd drag the connection to the view controller and name it skipButtonLeadingConstraint: 在ios中设置适用于ipad设备的约束的好方法或好实践是什么

将连接拖动到视图控制器,并将其命名为skipButtonLeadingConstraint:

3rd complete the connection: 在ios中设置适用于ipad设备的约束的好方法或好实践是什么

3日完成连接:

#1


1  

To simplify things, Apple recommends a new paradigm. Rather than considering your layout in terms of the many device types, resolutions, multitasking modes, and device orientation, you should focus instead on adjusting your layout to two types of widths (called compact and regular) and two types of heights (also compact and regular). These distinctions are called size classes. You can then use these size classes to define or adjust your layout.

为了简化问题,苹果公司推荐了一种新的模式。与其考虑你的布局,比如许多设备类型、分辨率、多任务模式和设备定位,你应该把重点放在调整你的布局到两种类型的宽度(称为紧凑和规则)和两种类型的高度(同样紧凑和规则)。这些区别称为大小类。然后可以使用这些大小类来定义或调整布局。

Please refer.

请参考。

#2


0  

You can make use of AspectRatio for setting constraints using storyBoard

您可以使用AspectRatio使用故事板设置约束

Static distance value 8 is okay for iPhone but very less in iPad , So to solve you need to provide distance according to screen Size

对于iPhone来说,静态距离值8是可以的,但在iPad上则要少得多,所以要解决这个问题,需要根据屏幕大小提供距离。

Steps

步骤

1) Drag a View in ViewController and set it Horizontally & vertically entered in container

1)在ViewController中拖动视图,并将其设置为水平和垂直地输入到容器中

在ios中设置适用于ipad设备的约束的好方法或好实践是什么

2) Set Equal Width and Height with screen Size (ViewController)

2)设置与屏幕大小相同的宽度和高度(ViewController)

在ios中设置适用于ipad设备的约束的好方法或好实践是什么

3) Now select the Height Parameter and check for the multiplier its set to 1

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

在ios中设置适用于ipad设备的约束的好方法或好实践是什么

4) Vary the multiplier value as per requirement

4)根据需要改变乘数值

在ios中设置适用于ipad设备的约束的好方法或好实践是什么

Now output will be same as on iPhone and iPad with equal looks

现在输出将和iPhone和iPad一样,外观相同

Spacing

间距

1) Drag a Label to set spacing and Add it centre horizontaly with the View Added before

拖动标签来设置间距,并将其添加到之前添加的视图中

在ios中设置适用于ipad设备的约束的好方法或好实践是什么

2) Set Top Space to View added for label as shown Below

2)设置顶部空间查看添加的标签,如下图所示

在ios中设置适用于ipad设备的约束的好方法或好实践是什么

3) Now select the Top Constraint added and vary its multiplier again to set spacing between them according to viewScreen size

3)现在选择添加的顶部约束,再次改变它的乘法器,根据屏幕大小设置它们之间的间距

Selecting Top Constraint looks like with multiplier 1

选择顶部约束看起来就像使用乘数1

在ios中设置适用于ipad设备的约束的好方法或好实践是什么

After Varying Multiplier / Label Moved Down

在不同的乘数/标签下降之后。

在ios中设置适用于ipad设备的约束的好方法或好实践是什么

Output

输出

在ios中设置适用于ipad设备的约束的好方法或好实践是什么

#3


0  

Let's say in Storyboards you have a skipButton pinned to the bottom of the screen (your not changing the bottom pin so I didn't include it), it's 44 points in height, is 8 points from the left side of the screen, and is is 8 points from the right side of the screen. That's fine for iPhones but on the iPad you want the button to be 50 points in height, 100 from the left side of the screen, and 100 points from the right side of the screen.

假设在故事板上写着skipButton屏幕底部的(你不改变底部销所以我不包括),44分高,是8点从屏幕的左侧,并且是8点从屏幕的右边。这对iphone来说没问题,但在iPad上,你希望按钮的高度是50点,屏幕左边是100点,右边是100点。

Inside the view controller you need to make an outlet for those constraints of type NSLayoutConstraint and there is a constant property on it that you can use to change the constant that you set inside Storyboard (see code example below).

在视图控制器中,您需要为NSLayoutConstraint类型的约束创建一个outlet,并且在它上面有一个常量属性,您可以使用它来更改在故事板中设置的常量(参见下面的代码示例)。

In case you don't know how to make the constraint connection all you do is select the constraint inside Storyboard, open the Assistant Editor, then cntrl+drag the constraint to the view controller and name it whatever you want to name it. It's the same exact process as if you was connecting a button or label or imageView the only difference is your using a constraint.

如果您不知道如何进行约束连接,那么只需在故事板中选择约束,打开辅助编辑器,然后cntrl+将约束拖拽到视图控制器中,并对其命名。这与连接按钮、标签或imageView的过程完全相同,唯一的区别就是使用了约束。

Every app has a property where you can find out which type of device is currently being used: UIDevice.current.userInterfaceIdiom Apple -Type of Device Being Used

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

Inside viewDidLoad you find out what type of device the user is using and then you change the constraints to whatever size is suitable to you for iPads:

在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
    }
}

Below is how to add the skipButtonLeadingConstraint in Storyboard. You can grab it inside the Document Outline under the Skip Button's Constraints (it's highlighted in blue)

下面是如何在故事板中添加skipButtonLeadingConstraint。您可以在Skip按钮的约束下在文档大纲中获取它(它用蓝色突出显示)

1st select the constraint in the Document Outline:

选择文件大纲中的约束:

在ios中设置适用于ipad设备的约束的好方法或好实践是什么

2nd drag the connection to the view controller and name it skipButtonLeadingConstraint: 在ios中设置适用于ipad设备的约束的好方法或好实践是什么

将连接拖动到视图控制器,并将其命名为skipButtonLeadingConstraint:

3rd complete the connection: 在ios中设置适用于ipad设备的约束的好方法或好实践是什么

3日完成连接: