不同 ui 项平板电脑对齐方式

Question

我是 ios(android 开发人员) 的新手。我正在使用故事板和自动布局。

为了优化 tablet 的应用程序，我在情节提要中使用了常规宽度常规高度中的尺寸。

我想在 ipad 和 iphone 模式下对齐 ui 个项目。例如，我有一个 table 的文本字段，在 iphone 上占据了整个宽度。在 ipad 上，我想在一个单元格中放置两个或三个文本字段。我怎样才能为 ipad 进行不同的 ui 实现，所以逻辑应该保持不变。

但是那里没有答案。

Answer 1

Jenya Kirmiza,

大小 Class 是你想要的 :) 大小 classes 与 iOS8 一起引入是为了避免通用应用程序的多个故事板，同时为开发人员为不同的设备设计不同的 UI :)

我希望您知道尺寸Classes，以防您不知道每个设备在其不同方向上都属于 Apple 定义的尺寸Class之一。

这里要注意的一件重要事情是 iPad 在其两个方向上都落在常规 x 常规尺寸 class

除了 iphone 6S 和 iphone 6s + 之外的所有 iPhones 都将下降到

Copact Width x Regular Height - Portrait mode
Compact Width X Compact Height - Landscape Mode

Iphone 6s和6s+跌至

Copact Width x Regular Height - Portrait mode
Regular Width X Compact Height - Landscape Mode

现在您已经掌握了所有大小的信息 classes 让我们解决这个问题。当您在屏幕中央打开故事板时，可以选择决定大小 class :)

所以当你看到默认情况下将处于 wAny wAny 模式时，请继续打开你的故事板这意味着无论你添加什么组件并向其添加约束都将适用于所有尺寸class不管怎样。

因此您看到添加在屏幕中心的文本字段在所有设备中都显示在中心可能是 iPhone 或 iPad。

为了解释，我将添加两个名为 Firstname 和 LastName 的文本字段 :) 让我们开始在保持 wAny wAny 模式的情节提要中向它们添加文本字段和约束。

现在我添加了两个文本字段，一个在另一个下面，在任何模式下覆盖整个屏幕宽度:) 这对我来说在所有 iPhone 设备上都可以正常工作:)

但我想在 iPad 中并排排列它们。现在我们知道 iPad 在两个方向上都属于 Regular x Regular sizee class :)

所以只需更改故事板 class 中的大小

现在当您看到时，您会看到两个文本字段已经一个接一个添加了:)

现在 select 那些我们想要以不同方式对齐它们的文本字段不是吗 :) 所以必须删除已经添加到它们的约束 :)

现在将它们移动到彼此相邻的位置并正确添加约束 :)

现在就这样运行在 iPhone 和 iPad :) 您将在 iPhone 中将 textFields 一个放在下面，在 [=73= 中将一个放在另一个旁边] :)

iPhone 输出：

iPad 输出：

希望这对您有所帮助:)

different ui items alignment for tablet