综合技术

像乐高一样构建应用程序 – 教程9

微信扫一扫,分享到朋友圈

像乐高一样构建应用程序 – 教程9
0

像Lego一样构建应用程序—教程9

Tom Brodhurst-Hill 封锁UnblockFollow继1月29日

故事板中的Xib布局

1.简介

在本教程9中,我们将在故事板中使用自定义 NewsTableViewCell xib布局(我们在 教程7 中创建)。这是一个简单的过程,使用BFWControls.framework(我们在 教程8中 添加)。在此过程中,我们还将学习类和子类,如何更改超类和连接插座。

2.克隆项目

如果您继续学习上一个 教程8 ,那么您拥有所需的一切。 跳到第3步。

如果您想从本教程开始,可以按照以下步骤下载项目:

:point_right:启动终端应用程序(从"应用程序"文件夹)。

:point_right:在终端中,键入: cd ~/Documents ,然后单击 Return

:point_right:将以下内容粘贴到终端并点击 Return

git clone --recurse-submodules --branch Start-Tutorial-9 https://bitbucket.org/barefeetware/lego-tutorial-social.git`

:point_right:观察终端中的下载进度并等待它完成。

:point_right:在Documents文件夹中,打开 lego-tutorial-social 文件夹。

:point_right:打开 Social.xcode.proj 文件。

本教程假定您知道如何执行本系列中已涵盖的任务。如果您不确定,请回顾 前面教程中 更详细的步骤。

3.类和子类

:point_right:在Xcode中,选择 Main.storyboard 并滚动以显示包含新闻项列表的新闻场景。通过单击一次选择第一个单元格。在右侧的"检查器"面板中,单击第三个图标(看起来像ID卡)。它显示了 Identity Inspector

Identity Inspector 表明, Class 所选择的单元的是 UITableViewCell

到目前为止,我们添加到应用程序中的每个视觉对象都是某种类型的"视图"。图像视图持有图像。标签包含文本。堆栈视图包含其他视图。这些都有特别的名字。因为它们是由内置的"UIKit"框架提供的,所以它们被称为 UIViewUIImageViewUILabelUIStackViewUITableViewUITableViewCell 等。还有更多类型的视图,例如 UISwitchUISliderUISegmentedControlUIActivityIndicatorView ,我们还没有使用它们。

我们可以将 UIView 视为所有更具体视图的分类或"类"。在编程术语中, UIView 是"超类"。所有其他的( UILabelUIImageView 等)都是 UIView "子类"。

在Swift(我们用于iOS开发的编程语言)中命名子类时,我们通常会复制超类的后缀。这就是为什么 UIImageViewUIStackView 有来自 UIView 的后缀 View 的原因。有一些例外,例如 UILabel (即使它也是 UIView 的子类,也未命名为 UILabelView )。

Tutorial 7中, 我们构建了自己的 UITableViewCell 子类,我们称之为 NewsTableViewCell

:point_right:在 Class 字段的 Identity Inspector ,开始键入 News (包括大写 N )。 Xcode应该以 UITableViewCell 的唯一子类自动完成,该子类以 News 开头,即 NewsTableViewCell

:point_right:命中 Return (在键盘上)。

我们刚刚将通用 UITableViewCell 的单元类更改为我们自己的自定义子类。

4.使用其Xib的类

这一切都很好,但似乎没有任何改变。在 教程7中 ,当我们创建 NewsTableViewCell 类时,我们还创建了一个包含我们想要的布局的xib文件。在我们将其类更改为 NewsTableViewCell 之后,我们可能期望布局现在出现在新闻场景中的此单元格中。但是,这没有发生。为什么不?

事实证明,尽管Xcode还提供了 Also create XIB file (当我们在 教程7中 创建了 NewsTableViewCell 子类时),它实际上并没有使用该xib文件的布局。我们需要一些代码才能做到这一点。幸运的是,这是BFWControls.framework(我们在 教程8中 添加的)之一,对我们有用。

BFWControls包含一个名为 NibTableViewCellUITableViewCell 子类,它负责使用xib布局。要使我们的自定义单元类使用也具有该功能,我们只需要将其更改为 NibTableViewCell 的子类。我们在该类的代码中执行此操作。别担心 – 这很简单。

5.编辑代码

:point_right:在Project Navigator中,选择 NewsTableViewCell.swift 。正如您可能猜到的,这是包含此类的"Swift"代码的文件。

首先,我们将摆脱我们不需要的占位符代码,目前实际上并没有做任何事情。

:point_right:选择开头 { 和结束 } 之间的所有文本行(即"代码")。

:point_right:点击 Delete (在键盘上)。

6.导入框架

我们需要告诉这个代码文件使用BFWControls框架中的代码,告诉它"导入"它。

:point_right:在现有的 import UIKit ,添加一行 import BFWControls

7.改变超类

正如你所看到的, class NewsTableViewCell 后跟一个冒号( : )和超类 UITableViewCell 。我们需要 NibTableViewCell 类更改为 NibTableViewCell ,因此我们获得了它的功能。

:point_right:将超类更改为 NibTableViewCell 。您只需将 UI 更改为 Nib

如果我们还没有添加 import BFWControls ,那么Xcode会抱怨 Use of undeclared type 'NibTableViewCell' ,这意味着它不知道 NibTableViewCell 是什么。

8. IBDesignable

最后,我们需要告诉Xcode我们希望 NewsTableViewCell 不仅可以在运行时(即我们运行应用程序时)绘制,还可以在"设计时"绘制,当我们在Interface Builder中查看自定义单元格时,例如故事板。

:point_right:在 class 前添加 @IBDesignable

全部完成。我们已经修改了 NewsTableViewCell 是BFWControls’的一个子类 NibTableViewCell ,问的Xcode在设计时表现出来,在Interface Builder。

9.显示自定义单元实例

by通过在Project Navigator中选择 Main.storyboard 文件切换回 Main.storyboard 文件。选择"属性"检查器。

属性检查器现在有一个额外的 Nib Table View Cell 部分,其中包含 Tertiary Text 和其他属性。

:beetle:如果属性检查器显示空白内容,请单击画布的空白部分(例如场景之间),然后再次单击顶部的新闻项目单元格以选择它。

Xcode将花费几秒钟来构建项目的部分,以便使用自定义布局更新单元格。

现在选定的单元格确实看起来不同,但它被压扁了。

:point_right:向下拖动所选单元格的选择手柄,使高度约为180磅。

将单元格拖动得更大时,可以看到自定义布局。

:tada:就是这样!故事板现在在新闻单元格中使用我们的自定义xib布局。

10. Connections Inspector

现在我们有了我们想要的单元格布局,但它只是显示占位符图像和 Label 文本。我们希望它使用xib中的布局,但使用此实例中的图像和文本填充它。我们需要返回到xib并将标签和图像视图连接到正确的插座,因此代码知道放置文本,详细文本,图像等的位置。

:point_right:在Project Navigator中选择 NewsTableViewCell.xib 文件。在"文档大纲"中,单击" News Table View Cell 上的一次。 (或者,您可以单击画布中的空白区域,然后在单元格的边缘单击一次。)

:point_right:在右侧的"检查器"面板中,单击最右侧的图标(圆圈中的箭头)以显示" Connections Inspector

标题为 Outlets 的第一部分显示了可在 NewsTableViewCell 类中连接的所有插座。由于我们尚未向 NewsTableViewCell 代码文件添加任何插座,因此这些插座列表都是从其 NibTableViewCell 超类继承的。

11.连接插座

为了让我们的 NewsTableViewCell 知道在每个实例中放置文本,详细文本和图像的位置,我们需要将每个插座连接到所需的图像视图或布局中的标签。

:point_right:在 textLabel ,在最右边,从空白圆圈向左拖动到顶部 Label

:point_right:同样,将 detailTextLabel 连接到底部 Label

:point_right:的连接 imageView 出口顶端小图像视图。

12.刷新视图

:point_right:切换回 Main.storyboard 文件。如果未更新,请从" Editor 菜单中选择" Refresh All Views "。

Xcode在我们为 NewsTableViewCell 设计的布局中显示此顶部单元格的文本和图像。

:point_right:试试第二个细胞。单击一次选择它。向下拖动其选择手柄,使其高度也约为180磅。

第二个单元格仍然是默认的 UITableViewCell 类。请注意,当它具有更高的高度时,允许图像视图增长以适合图像。

:point_right:如果第一个单元格的布局有点混淆,如上所示,请再次从" Editor 菜单中选择" Refresh All Views "。在Interface Builder中"在设计时"预览时,这种错位只是暂时的。它不会影响运行时。

:point_right:仍然选择第二个单元格,在 Identity Inspector ,将其类更改为 NewsTableViewCell ,就像之前一样。

两个单元格现在都是 NewsTableViewCell ,并使用 NewsTableViewCell.xib 的布局。每个单元格显示自己的文本和图像。

13.文本占位符

我们的定制电池运行良好。每一个实例展示在我们的自定义布局和个别内容 textLabeldetailTextLabelimageView 网点。但是,正如您所看到的,我们有第二个图像视图和第三个文本标签,它们当前只显示占位符图像和 Label 文本。我们需要为那些连接插座,以便我们可以为它们分配内容。

NibTableViewCell 超类已经包含一个名为 tertiaryTextLabel 的第三个文本标签出口。我们所要做的就是将它连接到我们的xib中,就像之前为 textLabeldetailTextLabel

:point_right:在Project Navigator中选择 NewsTableViewCell.xib 文件。

这三个标签都有 Label 占位符文本,这使得一目了然地识别它们有点混乱。首先,让我们更改每个文本的占位符文本。

:point_right:依次双击三个标签中的每一个,选择其内容。将顶部的一个更改为 [Text] ,将底部的一个更改为 [Detail Text] ,将中间的一个更改为 [Tertiary Text] 。务必在每个中包含开口 [ 和关闭 ]

:point_right:在画布中,选择外部单元格容器。在右侧Inspector面板中选择 Connections Inspector 。使用占位符 [Tertiary Text]tertiaryTextLabel 插座连接到中间文本标签。

Main.storyboard 再次选择 Main.storyboard

请注意,第三个标签的 Label 占位符已在 [Tertiary Text] 替换为每个单元格实例。

:point_right:运行应用程序。

请注意,占位符文本在运行时被删除。 NibTableViewCell 超类自动删除占位符文本,如果它以方括号(即 [] )开头和结尾。

14.第三文本

UITableViewCell 类包括 textLabeldetailTextLabelNibTableViewCell "覆盖"。这就是我们的 NewsTableViewCell 自动使用故事板中原始单元格的标题文本和字幕细节文本的原因。但是,在 UITableViewCell 超类中不存在名为 tertiaryTextLabel 第三个文本标签。我们需要一些其他方式来为它提供文本。 NibTableViewCell 通过提供 Tertiary Text 属性来实现此目的。

:point_right:切换回Xcode。选择新闻中的第一个单元格。选择"属性"检查器。

:point_right:在"属性"检查器的" Tertiary Text 字段中,键入采样日期: October 9, 12:32pm

点击 Return ,您可以看到日期文本出现在三级文本标签中。

:point_right:同样,选择第二个单元格并输入 Tertiary TextOctober 10, 2:13pm

15.提交变更

正如你之前所做的那样:

  1. :point_right:从" Source Control 菜单中选择" Commit Changes "。
  2. :point_right:输入如下描述: NewsTableViewCell: changed to a subclass of NibTableViewCell. Added placeholder text. Connected outlets.
  3. :point_right:单击" Commit 按钮。

16.回顾

我们的 NewsTableViewCell 将xib文件的布局与故事板中每个实例的文本和图像相结合。

:interrobang:如果您有任何问题或意见,请在下面添加回复。

第二个图像仍显示占位符图像。接下来,在 教程10中 ,我们将创建自己的插座和属性,以便我们可以自定义此详细图像。

查看英文原文

查看更多文章

公众号:银河系1号

联系邮箱:public@space-explore.com

(未经同意,请勿转载)

阅读原文...


微信扫一扫,分享到朋友圈

像乐高一样构建应用程序 – 教程9
0

银河系技术博客

得益于增值税下调 奔驰全系车型官方降价:最高6.4万元

上一篇

gcc与make与CMake

下一篇

评论已经被关闭。

插入图片

热门分类

往期推荐

像乐高一样构建应用程序 – 教程9

长按储存图像,分享给朋友