Xamarin在行动中-第11和12章

现在该抽空另一个手机APPLE了，对不起！ 因此，在上一篇文章中，我们为Android上的两个示例应用程序创建了视图。 这次，我们将针对iOS执行相同的操作。

第11章-建立简单的IOS视图

Android和iOS SDK有所不同，但屏幕或视图的基本概念相同。 您具有用于访问这些组件的布局和类。 在iOS中，您有一个UIViewController而不是该视图的Activity。 正如预期的那样，两个应用程序的UI在iOS上的外观都将与Android相同，但是创建这些屏幕的方式将有所不同。

第1节从SquareRt开始讨论构建UI。 第1小节涉及Apple人机界面指南，该指南等同于Material Design。 苹果为此投入了大量时间和研究。 创建一个不遵循这些准则的应用程序，并且如果您请求发布到App Store，则很可能会拒绝您的应用程序。

它遵循三个基本原则：

• 尊重-用户界面应增强内容，而不是分散注意力。 Jim给出的一个很好的例子是天气应用程序。 背景图像可用于传达当前天气，但不应分散数据，例如该天气的位置以及诸如温度和实际当前天气之类的详细信息。
• 清晰度-应该清晰，简单。 页面上不应有太多的“杂音”和简约的感觉。 充分利用组件之间的空间，不要一时将太多数据推到页面上。
• 深度-这是指一种UI分层方法，其中最重要的内容优先。 半透明可用于使此深度更加突出。 另一种技术是使用缩放来控制粒度级别。 Jim以iCal应用为例，其中缩放可以在日/月/年视图之间切换。

最主要的是要彻底阅读准则，以了解您想要实现的想法，并使其与用户习惯于iOS应用程序的外观和风格保持一致。 有常见的模式。

第2小节移至Storyboard，这是Apple的XML布局文件，用于在一处定义一个或多个屏幕的控件的布局。 这意味着您可以从字面上写下与关联控制器定义的每个屏幕的交互作用的故事，以及在这些页面之间导航的方式，称为segues。 当然，我们将坚持在本书上一章中设置的视图模型优先导航。

与在Android中可以在XML的“设计器”和“源”视图之间进行选择的方式不同，对于iOS，该源不是人类可读的，因此标准是使用拖放式设计器。 这是一个非常强大的工具。 第2小节的最后一部分介绍了Apple如何针对不同的屏幕尺寸和方向进行所有处理。

第3小节是关于控件的。 与Android不同，iOS中没有用于放置事物的相对布局。 但是有一些限制，这是我们在本书的第1部分中介绍的。

第4小节讨论屏幕分辨率。 最初，只有一部iPhone具有一种分辨率。 显然，这种情况现在已经改变，使用不同的分辨率，视网膜显示器和iPad。 吉姆通过非正式的小历史课程介绍了所有这些内容。

第5小节让我笑了。 它以管弦乐队为例讨论自动布局和约束，以及如何始终以相同的方式在舞台上进行布局。 作为前音乐学者，我非常喜欢音乐方面的参考！ 甚至有一个管弦乐布局图，无论大小或地点，都喜欢它。 自动布局和约束与此类似。 您可以指定一组规则来控制其布局方式，无论其大小或形状如何。

第6小节讨论图像资源和资产目录。 我必须承认，当我陷入混乱时，我通常会尽量避免这种情况。 如果必须使用图像，我将使用Visual Studio for Mac的神奇插件MFractor，该插件具有内置的图像导入向导，以消除繁琐的工作。 但是，了解Apple如何处理图像尺寸以及在何处添加图像仍然很重要。

第7小节在第1小节的结尾处总结了所涵盖的内容。

第2节是关于构建情节提要及其相关组件。 每个小节都会构建各层。 第1小节从SquareRt应用程序的视图控制器开始。 这不是实际的视图控制器类，而是视图的持有者。 您不能仅将一个按钮或标签添加到情节提要。

第2小节将继续添加平方根符号的图像，就像在Android UI中一样。 该图像将成为屏幕的中心，并用作其他组件的参考点。 它涵盖了将相关图像添加到资产目录并在屏幕上显示它，包括配置约束。

接下来是用于输入要“平方根”值的文本字段，这将在第3小节中讨论。之后是第4小节，其中涉及添加结果标签以显示文本字段中平方根值的答案。

第6小节移至称为尺寸等级的项目。 通过这种方法，可以针对不同的设备尺寸或方向调整UI的外观。 您将进行一些更改以反映某些设备上的方向更改。

第三部分是您开始在SquareRt应用程序视图上工作的地方。 第1小节回答了“什么是视图控制器？”这一问题。

第2小节讨论了视图生命周期及其处理方法，例如ViewDidLoad。 这与您在上一章中在Android中了解到的生命周期相似。

第3小节为您创建了应用程序所需的视图控制器。 由于采用视图模型优先方法，该视图控制器将再次需要MVVMCross的几个配置位。

第4小节将视图控制器连接到视图。 第一步是告诉情节提要中的视图控制器使用哪个后备视图控制器类。 使用情节提要板的问题还在于，与您在Android上所做的不同，您无法在控件上绑定自定义属性。 相反，您可以在“窗口小部件”选项卡中设置它们的名称，这将在视图控制器类中创建一个属性。 这实际上是designer.cs文件，而不是视图控制器本身。 这是设计器文件的用途之一。

第5小节用于绑定视图控制器。 正如Jim所说，一旦从情节提要中加载视图，就需要将控件绑定到视图模型。 您可以在ViewDidLoad方法中执行此操作。 调用此方法时，所有属性均已设置，因此您可以安全地继续进行操作并绑定控件，因为它们已被初始化。 吉姆将指导您完成此操作。

第4节是本章的常用总结，然后再进行繁荣，您将在两个平台上都完成SquareRt！

第12章-建立更高级的IOS视图

与Android一样，iOS方面的第二章是为Countr创建更复杂的视图。 这将涉及一个表格视图，用于列出计数器，导航栏按钮，设置应用程序图标，启动屏幕和外观API。 大家都非常熟悉，因为与第10章中介绍的Android相同。

第1节与第11章第1章的SquareRt一样，讨论了此应用程序需要哪些UI视图和组件。 为此，您将需要两个屏幕。 显示所有计数器列表的主视图和用于添加新计数器的详细视图。

小节1逐步创建了主视图。 这将需要一个表视图和一个表视图控制器。 与SquareRt一样，您需要从特殊的MVVMCross类扩展，这次将其称为MvxTableViewController。 您还需要在情节提要中为视图设置背景视图控制器并设置ID。

您还需要设置一个表源。 这是因为表需要知道从何处获取数据以及要显示什么。 MVVMCross再次介绍了您，您可以编写实现此方法的类来节省一些工作。 之后，您可以配置每个表单元格。 这将是到计数器的一对一映射，每一行都是一个计数器。

本节将介绍很多内容，因为表格需要大量的设置和理解，因此值得花时间阅读和理解。

第2小节讨论导航栏和按钮。 这是因为当您的应用中有多个屏幕时，您需要一种让用户知道他们所处的屏幕以及如何返回上一页的方法。 MVVMCross实际上在默认情况下在幕后使用了一个导航视图控制器，因此您无需显式设置它。 但是，您仍将在右上角添加一个自定义“添加”按钮以添加新的计数器。 好触发到该页面的导航。

您将在第3小节中为详细信息视图创建UI。实际上，这是一个非常简单的屏幕，只有一个文本字段用于输入新的计数器名称和一个完成按钮来保存它。 创建它的模式与其他视图相同。 创建新的视图文件，将所需的控件拖到情节提要上，设置ID并设置属性名称。 然后进入视图文件，扩展MvxViewController类并设置属性以告诉它从情节提要中加载UI。

哇，你完成了！ 现在运行该应用程序，您将拥有一个闪亮的iOS Countr应用程序：D。 与Android等效部分一样，Jim很好地解释了应用程序从启动到交互的过程。

第2节介绍应用程序图标和启动屏幕。 与Android一样，默认情况下，应用程序图标是MVVMCross徽标，我们将对其进行更改。

第1小节介绍了应用程序图标。 直到我的时刻。 iOS需要使用20种图标（是的），以适应不同的用途和大小。 幸运的是，您可以使用与第10章中的Android版本相同的源来生成这些图像。

第2小节讨论启动屏幕。 与Android一样，在加载应用程序时会短暂显示一个屏幕，这是用户看到的第一个视图，因此您希望它变得明智。 您还将了解应用程序生命周期和默认情况下创建的AppDelegate.cs类。

已经存在launchscreen.xib文件，因此您可以对其进行编辑以自定义启动屏幕。 理想情况下，您希望它与具有相同背景和图像的Android版本相同。

我们完了！！！ 两个具有很多功能和一大堆新知识的跨平台本机应用程序！

我只是对这些帖子中的每个部分进行了详细介绍，但是我向您保证，所有内容都包含许多令人惊奇的信息，值得购买这本书！

现在，当然，第3部分将讨论如何使您的应用程序正式投入生产，以适合应用程序商店以及该过程中的其他重要步骤（如测试）。 但是目前，我们有可以在本地运行的应用程序。 恭喜你！