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

转到Tom Brodhurst-Hill的个人资料 Tom Brodhurst-Hill封锁UnblockFollow继1月29日

故事板中的Xib布局

1.简介

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

2.克隆项目

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

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

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

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

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

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

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

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

👉打开Social.xcode.proj文件。

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

3.类和子类

👉在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

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

👉命中Return (在键盘上)。

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

4.使用其Xib的类

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

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

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

5.编辑代码

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

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

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

👉点击Delete (在键盘上)。

6.导入框架

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

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

7.改变超类

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

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

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

8. IBDesignable

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

👉在class前添加@IBDesignable

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

9.显示自定义单元实例

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

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

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

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

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

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

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

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

10. Connections Inspector

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

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

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

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

11.连接插座

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

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

👉同样,将detailTextLabel连接到底部Label

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

12.刷新视图

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

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

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

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

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

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

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

13.文本占位符

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

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

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

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

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

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

Main.storyboard再次选择Main.storyboard

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

👉运行应用程序。

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

14.第三文本

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

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

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

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

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

15.提交变更

正如你之前所做的那样:

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

16.回顾

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

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

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

查看英文原文

查看更多文章

公众号:银河系1号

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

(未经同意,请勿转载)