首页 iOS..& Swift Books iOS..Apprentice

7
新看 由Eli Ganim撰写

靶心 看起来不错,游戏元素已经完成,并且您的待办事项列表中还剩一个项目 - “使其看起来很漂亮”。

你必须承认游戏仍然看起来不太好。如果您将此作为当前形式的应用商店,我不确定很多人会很高兴下载。幸运的是,iOS让您轻松创建漂亮的应用程序,所以让我们给予 靶心 改造并添加一些视觉风力。

本章涵盖以下内容:

  • 重新审视景观方向:项目变更使景观方向支持更好。
  • 升起图形:用自定义图形替换App UI,以使其更加抛光。
  • 关于屏幕:将一个关于应用程序的屏幕添加到应用程序,使其看起来很外壳。

重新审视景观方向

首先,让我们在待办事项列表中快速重新审视另一个项目 - “将应用程序放在横向方向上。”你已经做到了,对了吗?但是,关于该项目,有一点点清洁。

横向模式下的应用程序不显示iPhone状态栏,除非您告诉他们。这对你的应用很棒 - 游戏需要更加沉浸的经验,并且状态吧减损了这一点。

即使系统自动处理为游戏隐藏状态栏,仍然可以做到有一件事以改善方式 靶心 处理状态栏。

➤去 项目设置 屏幕并向下滚动到 部署信息。在下面 状态栏样式, 查看 隐藏状态栏.

这将确保在应用程序启动期间隐藏状态栏。

应用程序启动时隐藏状态栏
应用程序启动时隐藏状态栏

在应用程序启动时隐藏状态栏是一个好主意。操作系统需要几秒钟将应用程序加载到内存中并启动它,在此期间状态栏保持可见,除非您使用此选项隐藏它。

这只是一个小细节,但Mediocre App和一个大应用程序之间的区别是大量的应用程序让所有的小细节都正确。

这就是它。运行应用程序,您将看到状态栏是历史记录。

info.plist.

从项目设置屏幕中的大多数选项,例如支持的设备方向以及状态栏是否在启动期间可见,存储在您的应用程序的Info.Plist文件中。

Info.Plist是应用程序包中的一个配置文件,告诉iOS该应用程序的行为方式。它还介绍了应用程序的某些特征,例如版本号,它不太适合其他任何地方。

使用一些早期版本的Xcode,您通常必须用手编辑信息,但使用最新的Xcode版本,这几乎不需要。您可以直接从项目设置屏幕中进行大部分更改。

但是,很高兴知道Info.Plist存在以及它看起来像什么。

➤去 项目导航员 并选择命名的文件 info.plist. 在其内容中偷看。

Info.Plist文件只是一个配置选项及其值的列表。大多数这些都可能对你有意义,但这没关系 - 他们也不总是对我有意义。

注意选项 状态栏最初隐藏。它有值是的。这是您刚刚更改的选项。

加剧图形

摆脱状态栏只是第一步。我们想从这个开始:

打哈欠…
打哈欠…

对于更像这样的东西:

实际控件不会改变。您将简单地使用图像来精明他们的外观,您还可以调整颜色和字体。

您可以在背景上放置一个图像,在按钮上,甚至在滑块上,以自定义每个的外​​观。您使用的图像通常应该是PNG格式,但JPG文件也会工作。

添加图像资产

如果您是艺术挑战,那么别担心,您提供了一组图像。但是,如果你确实有MAD Photoshop技能,那么所有人都可以随意设计(和使用)您自己的图像。

附带本书的资源文件夹包含命名图像的子文件夹。您将首先将这些图像导入Xcode项目。

项目导航员, 找 assets.xcassets. 然后点击 on it.

此项目称为应用程序的资产目录,它包含所有应用程序的图像。

现在,它是空的,只包含App图标的占位符,您将很快添加。

资产目录最初是空的
资产目录最初是空的

➤在次级窗格的底部,一个带有Appicon的那个,有一个 + 按钮。单击它,然后选择 进口… option:

选择导入将现有图像放入资产目录中
选择导入将现有图像放入资产目录中

Xcode显示文件选择器。选择 图片 来自资源的文件夹,然后按 ⌘+ A. 要选择此文件夹中的所有文件。

选择要导入的图像
选择要导入的图像
点击 打开 和Xcode将该文件夹中的所有图像文件复制到资产目录中:

图像现在在资产目录中
图像现在在资产目录中

如果Xcode添加了名为“映像”的文件夹而不是单个图像文件,则重试,此时确保在单击“打开”之前选择图像文件夹中的文件而不是文件夹本身。

笔记:而不是使用 进口… 菜单选项如上所述,您也可以简单地将Finder拖到Xcode资产目录视图上的必要文件。常见的是,在Xcode中有不止一种方法可以做同样的事情。

1x,2x和3x显示屏

在资产目录中设置的每个图像都有一个用于“2x”图像的插槽,但您也可以指定1x和3x图像。在不同尺寸中具有多个相同图像的同一图像允许您的应用支持各种IPhone和IPAD的存在。

1x 是用于低分辨率屏幕,那些具有大的块状像素的那些。存在实际上可以运行iOS 12的低分辨率设备 - 它们太旧而无法打扰 - 所以您不太可能再次遇到许多1x图像。 1x只是一个关注的问题,如果您正在进行一个仍需要支持iOS 9或以上的应用程序。

2x 是高分辨率视网膜屏幕。这涵盖了最现代的iPhone,iPod触及和iPad。视网膜图像是低分辨率图像的两倍,因此2倍。您导入的图像刚才是2x图像。

3x 是iPhone Plus设备的超高分辨率视网膜高清屏幕。如果您希望您的应用在这些直线的iPhone型号上具有额外的清晰图像,那么您可以将它们丢弃到资产目录中的“3x”插槽中。

有一个用于图像文件的特殊命名约定。如果文件名结束 @2x 或者 @3x 然后这被认为是视网膜或视网膜高清版。低分辨率1x图像没有特殊名称(您不必写入@ 1x)。

把壁纸拿起

让我们首先改变DELAB白色背景 牛眼 更加花哨的东西。

➤打开 main.storyboard., 打开 图书馆 面板(通过顶部工具栏)并找到一个 图像视图。 (提示:如果在库面板顶部的搜索框中键入“映像”,则会快速过滤掉所有其他视图。)

➤在现有用户界面的顶部拖动图像视图。只要它在公牛的眼睛视图控制器内,就并不重要。

将图像视图拖入视图控制器
将图像视图拖入视图控制器

➤使用图像视图仍然选择,转到 尺寸检查员 (这是属性检查器旁边的一个),并将X和Y设置为0,宽度为568和高度至320。

这将使图像视图覆盖整个屏幕。

图像视图的大小检查器设置
图像视图的大小检查器设置

➤去 属性检查员 用于图像视图。在顶部有一个名为的选项 图像。单击向下箭头并选择 背景 来自 list.

这将使从资产目录中命名为“背景”的图像到图像视图中。

在图像视图上设置背景图像
在图像视图上设置背景图像

只有一个问题:图像现在涵盖了所有其他控件。有一个简单的修复;您必须在其他视图后面移动图像视图。

➤使用所选图像视图,在 编辑 Xcode在屏幕顶部的菜单栏中的菜单,选择 安排▸送回.

有时Xcode为您提供了困难的时间(它仍然有几个错误),您可能不会看到已启用的发送到返回项目。如果是这样,请尝试去选择图像视图,然后再次选择它。现在可以使用菜单项。

或者,在文档大纲中拾取图像视图,并将其拖动到视图列表的顶部,仅在安全区域以下,以完成同样的事情。列出了文档大纲视图中的项目,以便最靠的项目位于列表的顶部,并且最前面的位置位于底部。

您的界面现在应该看起来像这样:

与新的背景图像的游戏
与新的背景图像的游戏

那些照顾背景。在新图形上运行应用程序和播放。

改变标签

因为背景图像非常暗,所以黑色文本标签已经变得难以阅读。幸运的是,界面构建器让您更改标签颜色。当您在它时,您也可能会更改字体。

➤仍然在故事板中,选择顶部的标签,打开 属性检查员 然后点击 颜色 项目显示颜色值下拉列表。选择 风俗… 在列表的底部。

在标签上设置文本颜色
在标签上设置文本颜色

这将打开颜色选择器,该拾取器有几种选择颜色的方法。

如果您看到的只是灰度滑块,请选择 RGB滑块 从顶部的拾取器。

彩色选择器
彩色选择器

➤挑选纯白色,红色:255,绿色:255,蓝色:255,不透明度:100%。或者,你可以简单地挑选 白色 从最初的下拉,而不是打开颜色选择器,但很高兴知道颜色选择器在您想要进行自定义颜色。

➤单击 阴影 来自属性检查器的项目。这使您可以向标签添加一个微妙的阴影。默认情况下,此颜色是透明的(也称为“清晰颜色”),因此您不会看到阴影。使用彩色选择器,选择纯黑色,半透明,红色:0,绿色:0,蓝色:0,不透明:50%。

笔记:有时在更改颜色或影子属性时,视图的背景颜色也会更改。这是Xcode中的错误。如果发生这种情况,请将其恢复为清晰。

➤更改 阴影偏移 宽度:0,高度:1。将阴影放在标签下方。

你选择的影子非常微妙。如果您不确定它实际上可见,则切换1到0之间的高度偏移几次。仔细看看,你应该能够看到差异。

➤单击 [T] 图标的图标 字体 属性。这将打开字体选择器。

默认情况下,选择系统字体。使用用户设备的标准系统字体。系统字体足够好,但我们想要一些更令人兴奋的游戏。

字体选择器与系统字体
字体选择器与系统字体

➤选择 字体:习惯。这使得家庭领域能够。选择 家庭:arial圆形mt大胆。将尺寸设置为16。

设置标签的字体
设置标签的字体

➤标签也有一个属性 自动反应。确保将其设置为 固定字体大小.

如果已启用,则自动反光链接将动态地更改字体的大小如果文本大于将适合标签。这在某些应用中很有用,但不是在这个应用程序中。相反,您将更改标签的大小以适合文本而不是其他方式。

➤选择标签,按 ⌘= 在键盘上,或选择 适合内容的大小 来自 编辑 menu.

如果禁用拟合内容菜单项的大小,则更选中标签并再次选择它。有时Xcode会对所选择的内容混淆。可怜的东西。

标签现在将变得略大或更小,使其在文本周围互相贴心。如果在更改字体时被切断,则现在所有文本都将再次显示。

您不必一个逐个为其他标签设置这些属性;这将是一个大苦差事。您可以通过选择多个标签,然后将这些更改应用于整个选择来加速该过程。

➤单击 分数:标签选择它。抓住 然后点击 圆形的: 标签。现在两个标签都将被选中。重复您上面的这些标签所做的内容:

  • 将颜色设置为纯白色,100%不透明。
  • 将阴影设置为纯黑色,50%不透明。
  • 将阴影偏移设置为宽度0,高度1。
  • 将字体设置为呈圆形MT粗体,尺寸16。
  • 确保AutoshRink设置为固定字体大小。

如果文本不再适合得分和圆形标签,就像在此屏幕截图中看到的一样:

字体太大,无法符得分和圆形标签中的所有文本
字体太大,无法符得分和圆形标签中的所有文本

您可以通过拖动手柄调整它们的调整大小来使标签更大,或者您可以使用 适合内容的大小 option (⌘=)。

提示:Xcode智能足以记住最近使用的颜色。只需一直进入颜色选择器,您可以简单地从最近使用的颜色菜单中选择颜色,这是单击任何颜色选项时的下拉列表的一部分:

快速访问最近使用的颜色和几个方便的预设
快速访问最近使用的颜色和几个方便的预设

锻炼:你还有一些标签去。重复你刚才为其他标签做了什么。他们都应该变成白色,具有相同的阴影,具有相同的字体。但是,滑块(1和100)两侧的两个标签将具有字体大小14,而另一个标签(将保持目标值,分数和圆数字的那些)将具有字体大小20所以它们脱颖而出。

因为你改变了一些标签的大小,所以你仔细构造的布局可能已经搞砸了一下。你可能想清理一下。

此时,游戏屏幕应该看起来像这样:

在造型标签后,故事板的样子是什么样的
在造型标签后,故事板的样子是什么样的

好吧,它开始看起来像现在的东西。顺便说一下,随时可以尝试字体和颜色。如果你想让它看起来完全不同,那就前进了。这是你的应用程序!

按钮

更改按钮的外观非常相同。

➤选择 打我! 按钮。在里面 尺寸检查员 将其宽度设置为100及其高度至37。

➤居中背景图像内圈上的按钮的位置。

➤去 属性检查员。改变 类型 从系统到 风俗.

“系统”按钮只有标签,没有边框。通过使它是自定义按钮,您可以根据您的意愿方式样式。

➤还在 属性检查员,按箭头上的箭头 背景 领域并选择 按钮正常 来自 list.

➤设置 字体arial圆形mt大胆,大小20。

➤设置 文字颜色 为红色:96,绿色:30,蓝色:0,不透明:100%。这是一种深棕色。

➤设置 阴影颜色 纯白色,不透明度为50%。阴影偏移应为宽度0,高度1。

混合

将不透明度设置为小于100%的任何东西会使颜色稍微透明(不透明度为0%完全透明)。部分透明度使颜色混合在背景中并使其看起来更柔软。

尝试将阴影颜色设置为100%不透明纯白色并注意到差异。

这完成了击中我的设置​​!在其“默认”状态下按钮:

击中我的属性!默认状态下的按钮
击中我的属性!默认状态下的按钮

按钮可以具有多个状态。点击按钮并按住下来,应显示“按下”,以便在抬起手指时会让您知道该按钮将被激活。这被称为 突出显示 状态,是用户的重要视觉提示。

➤仍然选择按钮,单击 状态配置 设置和挑选 突出显示 从菜单。现在本节中的属性反映了按钮的突出显示状态。

背景 字段,选择 按钮突出显示.

➤确保突出显示的 文字颜色 与之前的颜色与(红色96,绿色30,蓝色0,或者只是从最近使用的颜色菜单中选择它)。改变 阴影颜色 再次到半透明的白色。

➤检查 在亮点上扭转 选项。这将使用户在用户点击按钮时按下标签的外观。

您也可以更改其他属性,但不要被带走。突出效果不应该过于震动。

突出显示的属性打我!按钮
突出显示的属性打我!按钮

要测试Interface Builder中按钮的突出显示外观,您可以切换 突出显示 盒子里的盒子 控制 部分,但确保再次关闭它或者按钮将在显示屏幕时突出显示按钮。

这是为了打我!按钮。造型开始按钮非常相似,除了您将用图标替换其标题文本。

➤选择 重来 按钮并更改以下属性:

  • 将类型设置为自定义。
  • 从按钮中删除文本“开始”。
  • 用于图像选择 startovericon..
  • 用于背景选择 SmallButton..
  • 将宽度和高度设置为32。

您不会在此按钮上设置一个突出显示的状态 - 让uikit照顾这一点。如果未为突出显示的状态指定不同的图像,则ukit将自动使按钮变暗以指示它被按下。

➤对此进行相同的变化 按钮,但这次选择 infobutton. for the image.

用户界面几乎完成了。只留下滑块......

几乎完成了!
几乎完成了!

滑块

不幸的是,您只能在接口构建器中自定义一个稍微的滑块。对于更高级的自定义,这款游戏需要 - 将自己的图像放在拇指和轨道上 - 您必须诉诸编写代码。

Do note that everything you’ve done so far in Interface Builder you could also have done in code. Setting the color on a button, for example, can be done by sending the setTitleColor() message to the button. (You would normally do this in viewDidLoad.)

但是,在视觉编辑器(如接口构建器)之类的视觉编辑器中比写入等效源代码,更容易更容易且更快更快。但对于你没有选择的滑块。

➤去吧 ViewController.swift., and add the following to viewDidLoad():

let thumbImageNormal = UIImage(named: "sliderthumb-normal.")!
slider.setThumbImage(thumbImageNormal, for: .normal)

let thumbImageHighlighted = UIImage(named: "SliderThumb-Highlighted")!
slider.setThumbImage(thumbImageHighlighted, for: .highlighted)

let insets = UIEdgeInsets(top: 0, left: 14, bottom: 0, right: 14)

let trackLeftImage = UIImage(named: "SliderTrackLeft")!
let trackLeftResizable =
                 trackLeftImage.resizableImage(withCapInsets: insets)
slider.setMinimumTrackImage(trackLeftResizable, for: .normal)

let trackRightImage = UIImage(named: "SliderTrackRight")!
let trackRightResizable =
                 trackRightImage.resizableImage(withCapInsets: insets)
slider.setMaximumTrackImage(trackRightResizable, for: .normal)

这在滑块上设置了四个图像:两个用于拇指和两个用于轨道。 (如果您想知道“拇指”是什么,那是滑块中心中的小圈子,拖动到设置滑块值的那个。)

拇指像按钮一样工作,以便它为正常(未按下)状态和突出显示状态的图像获得图像。

滑块使用拇指(绿色)左侧的轨道的不同图像,以及拇指右侧的轨道(灰色)。

➤运行应用程序。你必须承认它看起来很棒!

游戏与定制的滑块图形
游戏与定制的滑块图形

到.png或不.png

如果您回忆说,您导入到资产目录中的图像都有文件名 [email protected] and so on.

When you create a UIImage object, you don’t use the original filename but the name that is listed in the asset catalog, sliderthumb-normal..

这意味着你可以离开 @2x 位和钻头 .png. file extension.

关于屏幕

您的游戏看起来很棒,完成了您的待办事项列表。所以,这是否意味着你完成了 牛眼?

不是那么快!记住这一点 游戏屏幕上的按钮?尝试点击它。它做了什么吗?不?

ooops!看起来我们忘记为该按钮添加任何功能!现在是时候纠正了 - 让我们将“关于”屏幕添加到游戏中,该游戏显示有关游戏的一些信息,并在用户点击时显示它 button.

最初,屏幕将看起来像这样的东西(但我们很快就会让它更新):

新的关于屏幕
新的关于屏幕

这个新屏幕包含一个 文字视图 使用GamePlay规则和按钮关闭屏幕。

大多数应用程序都有多个屏幕,甚至非常简单。因此,这与学习如何在应用程序添加其他屏幕时的时间是好的。

我已经指出了几次:你的应用中的每个屏幕都有自己的视图控制器。如果您认为“屏幕”,请思考“查看控制器”。

Xcode automatically created the main ViewController object for you, but you’ll have to create the view controller for the About screen yourself.

添加新视图控制器

➤转到Xcode的 文件 菜单并选择 新▸文件...... 在弹出的窗口中,选择 可可触摸课程 模板(如果你没有看到它,那么确保 iOS. 在顶部选择)。

选择Cocoa Touch类的文件模板
选择Cocoa Touch类的文件模板

点击 下一页。 Xcode为您提供了一些填写的选项:

新文件的选项
新文件的选项

选择以下内容:

  • 班级: aboutViewController..

  • 子类: UIViewController..

  • 还创建XIB文件:未选中此框。

  • 语言: 迅速.

点击 下一页。 Xcode会询问您在哪里保存此新视图控制器。

保存新文件
保存新文件

➤选择 靶心 文件夹(该文件夹应已被选中)。

还要肯定 团体靶心 并且在靶向列表中有一个复选标记 目标。 (如果没有看到此面板,请单击对话框底部的选项按钮。)

➤单击 创建.

Xcode将创建一个新文件并将其添加到您的项目中。正如您可能已经猜到的那样,新文件是 aboutviewController.swift..

在接口构建器中设计视图控制器

要设计新的视图控制器,您需要访问接口构建器。

➤打开 main.storyboard.。尚未在故事板中表示关于查看控制器的场景。所以,你必须先添加这个。

➤从这一点 图书馆, 选择 查看控制器 并将其拖动到帆布,向主视图控制器的右侧。

从对象库拖动新视图控制器
从对象库拖动新视图控制器

这个新的视图控制器完全是空白的。您可能需要重新排列故事板,以便两个视图控制器不重叠。接口构建器并不是整洁它在哪里放在哪里。

➤拖动一个新的 按钮 在屏幕上并给它标题 关闭。将其放在视野底部底部的某个地方(使用蓝色指南来帮助定位)。

➤拖动A. 文字视图 在视图上并使其涵盖按钮上方的大部分空间。

您可以在库中找到这些组件。如果您不想滚动,可以通过在顶部的字段中键入字段来过滤组件:

搜索文本组件
搜索文本组件

请注意,还有一个文本字段,这是一个单行文本组件 - 这不是您想要的。您正在寻找文本视图,它可以包含多行文本。

拖动文本视图和按钮到画布上,它应该看起来像这样:

关于故事板的关于屏幕
关于故事板的关于屏幕

➤双击文本视图以使其内容可编辑。默认情况下,文本视图包含一堆拉丁占位符文本(也称为“Lorem Ipsum”)。

将此新文本输入文本视图:

*** Bull’s Eye ***

Welcome to the awesome game of Bull’s Eye where you can win points and fame by dragging a slider.

Your goal is to place the slider as close as possible to the target value. The closer you are, the more points you score. Enjoy!

您还可以将该文本输入到属性检查器中 文本 如果您发现更容易的话,则为文本视图。

➤确保取消选中 可编辑 复选框在属性检查器中。否则,用户实际上可以键入文本视图,您不希望它。

屏幕的设计是现在完成的。

文本视图的属性检查器
文本视图的属性检查器

显示新视图控制器

那么当用户按下时,您如何打开这个新的屏幕 按钮?故事板对此有一个整洁的技巧: segues. (像愚蠢的踏板车一样发音为“SEG-Way”)。 SEGUE是从一个屏幕到另一个屏幕的过渡。他们真的很容易添加。

➤单击 按钮在 查看控制器 选择它。然后按住 控制 并拖延到了 关于 screen.

从一个视图控制器控制 - 拖动到另一个视图控制才能制作SEGUE
从一个视图控制器控制 - 拖动到另一个视图控制才能制作SEGUE

➤放开鼠标按钮,出现有几个选项的弹出窗口。选择 呈现出色的.

选择要创建的SEGUE类型
选择要创建的SEGUE类型

现在,两个屏幕之间会出现箭头。此箭头表示来自主场景的SEGUE到关于场景。

➤单击箭头以选择它。 SEGUUS也有属性。在里面 属性检查员, 选择 过渡, 翻转水平。这是uikit将在这些屏幕之间移动的动画。

更改SEGUE的属性
更改SEGUE的属性

➤现在您可以运行应用程序。按 按钮查看新屏幕。

有一个录像带的关于屏幕
有一个录像带的关于屏幕

关于屏幕应该出现一个整洁的动画。好,似乎工作。

驳回关于查看控制器

你有没有注意到这里有一个明显的问题?点击关闭按钮似乎没有效果。一旦用户进入关于屏幕,他们永远不会离开......这听起来不像是良好的用户界面设计,这是吗?

SEGUES的问题是他们只有一种方式。要关闭此屏幕,您必须将一些代码连接到关闭按钮。作为一个Budding IOS开发人员,您已经知道如何做到这一点:使用动作方法!

This time you will add the action method to aboutViewController. instead of ViewController, because the Close button is part of the About screen, not the main game screen.

➤打开 aboutviewController.swift. 并用以下内容替换其内容:

import UIKit

class AboutViewController: UIViewController {
  @IBAction func close() {
    dismiss(animated: true, completion: nil)
  }
}

The code in the 关闭() action method tells UIKit to close the About screen with an animation.

If you had said dismiss(animated: false, …), then there would be no page flip and the main screen would instantly reappear. From a user experience perspective, it’s often better to show transitions from one screen to another via an animation.

That leaves you with one final step, hooking up the Close button’s Touch Up Inside event to this new 关闭 action.

➤打开故事板和控制 - 拖累 关闭 按钮到关于场景的视图控制器。嗯,奇怪, 关闭 应在此弹出窗口中列出操作,但它不是。相反,当您制作SEGUE时,这与您看到的弹出相同:

弹出窗口中未列出“关闭”操作
弹出窗口中未列出“关闭”操作

锻炼:如果您可以发现错误,则奖励积分。这是一个非常常见的 - 令人沮丧! - 错误。

The problem is that this scene in the storyboard doesn’t know yet that it is supposed to represent the aboutViewController..

为视图控制器设置类

You first added the aboutviewController.swift. source file, and then dragged a new view controller on to the storyboard. But, you haven’t told the storyboard that the design for this new view controller belongs to aboutViewController.. That’s why in the Document Outline it just says View Controller and not 关于查看控制器. That’s the design of the screen done for now. ➤幸运的是,这很容易纠正。在接口构建器中,选择关于场景的 查看控制器 然后去 身份检查员 (这是属性检查器左侧的标签/图标)。

➤下 定制类, 进入 aboutViewController..

关于屏幕的身份检查员
关于屏幕的身份检查员

Xcode应在键入前几个字符后为您自动完成此操作。如果没有,则仔细检查您真的选择了视图控制器,而不是其中内部的视图之一。 (视图控制器还应在故事板上有一个蓝色边框,以指示选择它。)

现在您应该能够将关闭按钮连接到Action方法。

➤控制 - 从中​​拖动 关闭 按钮到 关于查看控制器 在文档轮廓中(或故事板中场景顶部的黄色圆圈)。现在应该是旧帽子。现在的弹出菜单确实有一个选项 关闭 行动(在已发送事件下)。将按钮连接到该操作。

➤再次运行应用程序。您现在应该能够从关于屏幕返回。

好的,这确实让我们一个关于屏幕的工作,但它看起来有点平原不是吗?如果您添加了您对主屏幕的一些设计更改,该怎么办?

锻炼:将背景图像添加到约屏幕。另外,更改约屏幕上的关闭按钮,看起来像打我!按钮并使用属性检查器中的文本视图属性进行播放。你现在应该自己做这件事。小菜一碟!如果陷入困境,请参阅主屏幕的说明。

完成后,您应该有一个关于屏幕看起来像这样的东西:

关于屏幕的新的和改进
关于屏幕的新的和改进

这看起来不错,但它可能会更好。那么你如何改善它?

使用Web视图进行HTML内容

➤现在选择 文字视图 然后按 删除 键盘上的钥匙。 (是的,你也扔掉了,毕竟这些改变了!但是不要悲伤的文字视图太多,你会更好地替换它。)

➤放一个 WebKit视图 在其位置(一如既往地,您可以在对象库中找到此视图)。有两个Web视图选项 - 一个旧的Web视图,被推荐推荐,或者准备退休,以及Webkit视图。确保您选择WebKit视图。

This view can show web pages. All you have to do is give it the URL to a web site or the name of a file to load. The WebKit View object is named WKWebView.

对于此应用程序,您将从应用程序包中显示静态HTML页面,因此实际上不必在线上网并下载任何内容。

➤去 项目导航员 并右键单击 靶心 组(黄色文件夹)。从菜单中,选择 将文件添加到“bullseye”...

使用右键单击菜单将现有文件添加到项目中
使用右键单击菜单将现有文件添加到项目中

➤在文件选择器中,选择 靶心.html. 来自资源文件夹的文件。这是一个包含游戏手术的HTML5文档。

选择要添加的文件
选择要添加的文件

确保 如果需要复制物品 被选中,下面 添加到目标,前面有一个复选标记 靶心。 (如果没有看到这些选项,请单击对话框底部的选项按钮。)

➤按 添加 将HTML文件添加到项目中。

➤in. aboutviewController.swift.,添加Web视图的插座:

class AboutViewController: UIViewController {
  @IBOutlet weak var webView: WKWebView!
  . . .
}

在添加上述行后,Xcode将很快抱怨。错误应该看起来像这样:

Xcode抱怨WKWebView
Xcode抱怨WKWebView

What does this error mean? It means that Xcode, or rather the compiler, does not know what WKWebView is.

但这怎么样?我们从Xcode自己的对象库中选择了组件,因此应该支持它,对吧?

答案在于您的视图控制器源文件顶部的此代码行为:

import UIKit

You probably saw this line and wondered what it was about. That statement tells the compiler that you want to use the objects from a framework named UIKit. Frameworks, or libraries if you prefer, bundle together one or more objects which perform a particular type of task (or tasks). The UIKit library provides all ther UI components for iOS.

So why does UIKit not contain WKWebView, you ask? That’s because the previously mentioned deprecated WebView is the one which is included with UIKit. The newer (and improved) WKWebView comes from a different framework called WebKit.

➤点击您的 靶心'''项目文件

➤走了 建立阶段 标签并扩展 链接二进制与库 category.

➤单击 little + button and search for webkit.framework. 然后点击 添加.

添加WebKit框架
添加WebKit框架

现在您可以访问WebKit框架的所有奇迹。所有剩下的都是实际使用它。

➤在顶部添加以下代码 aboutviewController.swift., right below the existing import statement:

import WebKit

That tells the compiler that we want to use objects from the WebKit framework and since now the compiler knows about all the objects in the WebKit framework, the Xcode error will go away.

➤ storyboard file, connect the WKWebView 到 this new outlet. The easiest way to do this is to Control-drag from 关于查看控制器 (在文件大纲中)到 网络视图.

➤in. aboutviewController.swift., add a viewDidLoad() implementation:

override func viewDidLoad() {
  super.viewDidLoad()

  if let url = Bundle.main.url(forResource: "靶心",
                             withExtension: "html") {
    let request = URLRequest(url: url)
    webView.load(request)
  }
}

这将使用Web视图显示HTML文件。

代码首先获取URL(统一资源定位器) 靶心.html. 应用程序包中的文件。您可能熟悉Interwors的URL是一种识别资源位置的方法,如网页。在这里,URL在应用程序包中提供HTML文件的位置。

It then creates a URLRequest using that URL since that’s one of the easiest ways to send a load request to the web view.

最后,代码要求Web视图加载URL请求指定的内容。

➤运行应用程序,然后按INFO按钮。关于屏幕应显示在游戏模式的描述中,这次以HTML文档的形式:

关于所有荣耀的关于屏幕
关于所有荣耀的关于屏幕

恭喜!这完成了游戏。所有功能都在那里和(希望)没有错误破坏乐趣。

您可以找到完成应用程序的项目文件 07 - 新外观 在源代码文件夹中。

有一个技术问题?想报告一个错误吗? 您可以向官方书籍论坛中的书籍作者提出问题和报告错误 这里.

有反馈分享在线阅读体验吗? 如果您有关于UI,UX,突出显示或我们在线阅读器的其他功能的反馈,您可以将其发送到设计团队,其中表格如下所示:

© 2021 Razeware LLC