如何使用autolayout缩放所有屏幕尺寸的视图？ [英] How to use autolayout to scale view for all screen sizes?

问题描述

我的应用的主导航视图使用UIButtons和背景图片。我在IB中使用autolayout来布局视图。

The main navigation view of my app uses UIButtons with background images. I'm using autolayout in IB to lay out the view.

我希望iphone 4,5上的视图看起来相同（或类似，只是适当缩放）， 6和6plus。我尝试过使用纵向和横向约束，但很难弄清楚如何使用宽高比约束。

I want the view to look the same (or similar, just scaled appropriately) on iphone 4, 5, 6, and 6plus. I have tried using vertical and horizontal constraints but have trouble figuring out how to use the aspect ratio constraint.

这就是iphone 5上的视图。

This is what the view looks like on an iphone 5.

以下是我到目前为止在iphone 6上的内容。

Here is what I've got so far on an iphone 6

这就是我想在iphone 6 / 6plus上看起来的样子。

This is what I want it to look like on an iphone 6/6plus.

如何使用autolayout缩放视图，使其在所有iphone屏幕尺寸上看起来相同或相似？

How do I use autolayout to scale the view so that it looks the same or similar for all iphone screen sizes?

推荐答案

我做了一些修补，我相信我找到了解决方案。我将演示如何对视图中间的两个较大的正方形进行操作。

I've done some tinkering and I believe I've found a solution. I will demonstrate how to do it for the two larger squares roughly in the middle of your view.

这是参考图像：

首先，您需要创建一个横跨超视图整个宽度的容器（我的蓝色视图），其高度等于或大于内部正方形（橙色）。

此视图需要以下约束：将中心X与Superview对齐，将中心Y与Superview对齐（ OR 约束以使其达到您想要的Y位置），高度等于：[平方高度]，尾随空间到超级视图，前导空间到Superview。

First, you need to create a container (my blue view) that spans the entire width of the superview, and has a height the same or larger than your inner squares (orange).
This view needs the following constraints: Align Center X to Superview, Align Center Y to Superview (OR constraints to give it the Y position you desire), Height Equals: [square height], Trailing Space to Superview, Leading Space to Superview.

内部橙色方块必须放在容器内，并且必须给出以下限制：将中心X与Superview对齐，前导超级视图的空间（值=正方形和超视图边缘之间的空间），尾随空格到[其他视图]（v alue =正方形之间的空间）。选择两个正方形，并添加宽高比，等宽和等高约束。

粗体中的项目取决于您选择的正方形。左边的应该有超前视图的前导空格和其他视图的尾随空格，右边的应该交换这些约束。

The inner orange squares must be placed inside the container, and must be given the following constraints: Align Center X to Superview, Leading Space to Superview (value = space between square and edge of superview), Trailing Space to [other view] (value = space between squares). Select the two squares together, and add Aspect Ratio, Equal Width and Equal Height constraints.
The items in bold depend on which square you're selecting. The left one should have leading space to superview and trailing space to the other view, and the right one should have these constraints swapped.

这应该会给你带来你期望的效果autolayout。

This should give you your desired effect with autolayout.

这篇关于如何使用autolayout缩放所有屏幕尺寸的视图？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！