iOS开发教程| 具有自动布局的自适应接口设计

在开发适用于iOS的APP时，很少有同一屏幕在纵向和横向方向上组成不同的情况。 今天，我们为您提供此IOS开发教程。 然后，您将能够为您的应用程序开发自适应界面。

多年来，使用Xcode面对这种问题的方式有所不同。从通过代码重新定位组件，到为每个版本创建不同的布局。

自动版式提供了一种管理此工厂的新方法。 “尺寸类别特定的布局”由每个xib中的一个选项组成，该选项允许根据屏幕的不同尺寸定义特定的行为。不仅对方向更改有用，而且对不同的屏幕尺寸或布局容器中的更改（例如iPad上的SplitView的主视图控制器）有用。

该工具允许针对不同的屏幕尺寸和配置建立不同的行为，而无需诉诸于代码更改或拥有更多xib文件。

在Xcode 8中被选项Vary for traits取代，该选项具有非常相似的行为，尽管在初次使用时可能会引起混淆。

让我们通过此功能提供的选项进行一些导航，并使用AutoLayout中的约束制作一个示例屏幕，这使我们仅使用界面元素组成的更改即可重复使用相同的设计。

该示例将非常简单，并且我们将在纵向和横向（垂直和水平）中使用具有不同可视化效果的AutoLayout。

iOS开发：创建ViewController

首先，我们创建了一个新的Xcode项目。在向导中，我们选择“单一视图应用程序”。创建的项目由其AppDelegate和ViewController以及Main.storyboard组成。

在此示例中，我们将替换Main。带有xib文件的情节提要，其中仅包含我们要设计的屏幕。

为此，我们创建一个名为ViewController.xib的xib文件，并在ViewController.m类中添加以下代码：

-（id）init {ViewController * controller = [super initWithNibName：NSStringFromClass（[self class]）bundle：nil]; 返回控制器； }

在xib中，在Identity Inspector的Custom Class字段中建立我们的类的名称很重要：

并将“连接检查器”中的“视图”字段拖到控制器的主视图中。

到目前为止，我们已经创建了视图的控制器，并与其文件生成器接口链接。仅需要从AppDelegate.m中打开它

–（BOOL）应用程序：（UIApplication *）应用程序didFinishLaunchingWithOptions：（NSDictionary *）launchOptions {

//应用程序启动后进行自定义的替代点。

ViewController * viewController = [[ViewController alloc] init];

UINavigationController * navigationController = [[UINavigationController alloc] initWithRootViewController：viewController];

self.window.rootViewController = navigationController;

返回是；

自动版式

现在，将字段添加到我们的控制器中。我们将设置一个Login屏幕，其中包含一个徽标，几个用于添加用户和密码的文本框，最后是一个页脚。

为此，我们将使用AutoLayout，在以下部分中，我们将注意，当我们将iPhone置于“横向”位置时，无需滚动，因为Vary可以动态更改组件的位置特质。

有多种方法可以创建此屏幕，其中有些可能更简单，更直观，但是我们将选择使用iOS 9中引入的UIStackView组件，因为它会自动执行一些功能，从长远来看，我们会更舒适地使用。

首先，让我们以纵向和横向的方式添加要保留在屏幕底部的页脚，因此我们只需要添加标签并将其固定在视图底部和侧面即可。如果文本的高度可能超过一行，我们将使高度保持动态，并使用“标签对齐”将文本在字段中居中。

现在，我们在视图中添加一个垂直的UIStackView，它将包含2个元素：一侧是徽标，另一侧是用户和密码字段。然后将其锚定到视图的4个侧面。

现在，我们将添加2个将使它们成为容器的UIView，因为UIStackView不允许我们为每个元素建立单独的边距。实际上，它是不允许添加背景或边缘的组件，因为它不是UIView本身，而是一个扩展的唯一目的是放置视图。

当将两个UIView都添加到UIStackView时，Xcode会抱怨我们缺少约束。的确是这样，因为不知道每个视图将占用多少空间，因此无法将剩余空间分配给另一个视图。通过屏幕的组成，我们希望徽标在屏幕顶部占据主导地位，而文本框位于底部。因此，我们将选择使用等高约束为每个视图分配一半和一半。

为了清楚起见，将包含徽标的视图将为黄色，而将包含登录框的视图将为蓝色。我们应该有这样的东西：

我们要做的就是添加徽标和文本框。让我们从第一个开始，将视图放置在黄色视图内，并将其分配为垂直和水平居中的唯一约束。

我们已经有了“徽标”（为方便起见，我使用了UILabel，但出于实际目的，它是相同的）。现在，对于访问区域，我们将使用另一个垂直的UIStackView，其中有3个具有透明背景（透明颜色）的视图。其中两个带有一个带有图标和一个文本框，另一个带有访问按钮。

我们将新的垂直UIStackView添加到蓝色UIView，并在内部添加3 UIView。

现在，Xcode不知道每个视图将占据多少宽度，高度，或者UIStackView本身在我们的蓝色UIView中将位于何处。因此，获得缺少约束的通知是正常的。现在让我们忽略它们。

接下来，我们将在前两个视图中添加用户和密码图标，以及一个UITextView。这将是我们设置宽度的唯一组件。由于我们不希望它是动态的并且适合屏幕的宽度（它可能会占用太多空间，并且在视觉上不会很吸引人）。

这些图标已添加到Assets.xcassets文件夹，名称为pass_ic和user_ic。关于约束，图标将锚定在左侧，垂直居中，并具有30×30的固定大小（因为我们的图标在这些近似尺寸内）。

例如，该文本框的宽度为200，它将通过左约束固定在父视图和图标的右侧，上方和下方。它还将具有44的高度，因此足够舒适。

已经定义了第一个UIView的高度（这是UITextView的高度，因为它具有固定的高度并且固定在上下两个位置），并且具有宽度（它将是UITextView + UIImageView +分隔线）在它们之间，因为所有这些值都是固定的。一旦完成所有3个视图，UIStackView容器就可以推断宽度和高度所需的大小。