正确处理屏幕尺寸的方法

时间:2023-02-09 13:29:29

I started developing for iOS around 8 years ago and got back into it a couple years ago. Since the time I started a while back, a lot has changed, in particularly the number of screen sizes we have now.

大约8年前我开始为iOS开发,并在几年前重新开始使用它。从我开始的时间开始,很多时候都发生了变化,尤其是我们现在拥有的屏幕尺寸。

Right now I am designing multiple view controllers in the storyboard for each screen size. I start designing the screen based on the iPhone 6 Plus, my device, and then make new view controllers with different size frames and scale its subviews according the percentage difference between the screen I'm working on vs. my iPhone 6 Plus screen.

现在我正在故事板中为每个屏幕尺寸设计多个视图控制器。我开始基于iPhone 6 Plus,我的设备设计屏幕,然后制作具有不同尺寸框架的新视图控制器,并根据我正在处理的屏幕与iPhone 6 Plus屏幕之间的百分比差异来缩放其子视图。

Here is the code I have which runs when a button is tapped. It determines the user's screen size and displays the appropriate view controller.

这是我点击按钮时运行的代码。它确定用户的屏幕大小并显示相应的视图控制器。

CGRect          screenBounds    = [[UIScreen mainScreen] bounds];
UIStoryboard    *storyboard     = [UIStoryboard storyboardWithName:@"Main" bundle:nil];

MyViewController *myViewController;

if (screenBounds.size.width == 320.0 && screenBounds.size.height == 480.0)
    myViewController = [storyboard instantiateViewControllerWithIdentifier:@"iPhone4MyViewController"];
else if (screenBounds.size.width == 320.0 && screenBounds.size.height == 568.0)
    myViewController = [storyboard instantiateViewControllerWithIdentifier:@"iPhone5MyViewController"];
else if (screenBounds.size.width == 375.0 && screenBounds.size.height == 667.0)
    myViewController = [storyboard instantiateViewControllerWithIdentifier:@"iPhone6MyViewController"];
else if (screenBounds.size.width == 414.0 && screenBounds.size.height == 736.0)
    myViewController = [storyboard instantiateViewControllerWithIdentifier:@"iPhone6PlusMyViewController"];

// Etc. for iPad's, then present

My question is, is this the appropriate way to design and present screens of different sizes? This just seems like doing way more work than I really should being doing.

我的问题是,这是设计和展示不同尺寸屏幕的合适方式吗?这似乎比我真正应该做的更多的工作。

2 个解决方案

#1


1  

First of all you have to use Auto-layout.

首先,您必须使用自动布局。

Secondly while playing with autolayout you will see you can't set your left/right/top/bottom distance according to aspect ratio of your device size.

其次,在使用自动布局时,您将看到无法根据设备大小的宽高比​​设置左/右/上/下距离。

Let's say you have a button which has left distance(leading constraint) 40 from it's superview. You can't use aspect ratio according to device size using autolayout.

假设你有一个按钮,它从它的超视图中留下距离(前导约束)40。您无法使用autolayout根据设备大小使用宽高比。

How to resolve this?

怎么解决这个?

You have to programmatically calculate that distance according to device size.

您必须根据设备大小以编程方式计算该距离。

Create some constants like this.

创建一些像这样的常量。

#define SCREEN_WIDTH ([[UIScreen mainScreen] bounds].size.width)
#define SCREEN_HEIGHT ([[UIScreen mainScreen] bounds].size.height)
#define SCREEN_MAX_LENGTH (MAX(SCREEN_WIDTH, SCREEN_HEIGHT))
#define SCREEN_MIN_LENGTH (MIN(SCREEN_WIDTH, SCREEN_HEIGHT))
#define SCREEN_RATIO_RESPECT_OF_IPHONE_6P (SCREEN_MAX_LENGTH/736.0)

Now if your base layout is iphone6Plus then just multiply SCREEN_RATIO_RESPECT_OF_IPHONE_6P with your left distance(leading constraint). here 736 is iphone 6 plus height.

现在,如果您的基本布局是iphone6Plus,那么只需将SCREEN_RATIO_RESPECT_OF_IPHONE_6P与您的左距离(前导约束)相乘。这里736是iphone 6加高度。

like this

喜欢这个

yourButtonLeftDistance.constant = 30*SCREEN_RATIO_RESPECT_OF_IPHONE_6P

That's it. You are now supporting all devices in portrait mode.

而已。您现在支持纵向模式下的所有设备。

#2


0  

No need to create separate xib's for iPhone 5,6,7. You can simple use Auto layouts , constraints and size classes.

无需为iPhone 5,6,7创建单独的xib。您可以简单地使用自动布局,约束和大小类。

#1


1  

First of all you have to use Auto-layout.

首先,您必须使用自动布局。

Secondly while playing with autolayout you will see you can't set your left/right/top/bottom distance according to aspect ratio of your device size.

其次,在使用自动布局时,您将看到无法根据设备大小的宽高比​​设置左/右/上/下距离。

Let's say you have a button which has left distance(leading constraint) 40 from it's superview. You can't use aspect ratio according to device size using autolayout.

假设你有一个按钮,它从它的超视图中留下距离(前导约束)40。您无法使用autolayout根据设备大小使用宽高比。

How to resolve this?

怎么解决这个?

You have to programmatically calculate that distance according to device size.

您必须根据设备大小以编程方式计算该距离。

Create some constants like this.

创建一些像这样的常量。

#define SCREEN_WIDTH ([[UIScreen mainScreen] bounds].size.width)
#define SCREEN_HEIGHT ([[UIScreen mainScreen] bounds].size.height)
#define SCREEN_MAX_LENGTH (MAX(SCREEN_WIDTH, SCREEN_HEIGHT))
#define SCREEN_MIN_LENGTH (MIN(SCREEN_WIDTH, SCREEN_HEIGHT))
#define SCREEN_RATIO_RESPECT_OF_IPHONE_6P (SCREEN_MAX_LENGTH/736.0)

Now if your base layout is iphone6Plus then just multiply SCREEN_RATIO_RESPECT_OF_IPHONE_6P with your left distance(leading constraint). here 736 is iphone 6 plus height.

现在,如果您的基本布局是iphone6Plus,那么只需将SCREEN_RATIO_RESPECT_OF_IPHONE_6P与您的左距离(前导约束)相乘。这里736是iphone 6加高度。

like this

喜欢这个

yourButtonLeftDistance.constant = 30*SCREEN_RATIO_RESPECT_OF_IPHONE_6P

That's it. You are now supporting all devices in portrait mode.

而已。您现在支持纵向模式下的所有设备。

#2


0  

No need to create separate xib's for iPhone 5,6,7. You can simple use Auto layouts , constraints and size classes.

无需为iPhone 5,6,7创建单独的xib。您可以简单地使用自动布局,约束和大小类。