用Swift开发Mac App(4)

创建详情页面

在iOS中，典型的“主-细页面App”需要创建两个视图，但在 OS X,由于屏幕不再受到限制，我们可以将它们合并在同一个视图中。

打开MasterViewController.xib，选中view，将宽度和高度拖大。如图：

我们需要显示下列信息: 昆虫名, 惊悚指数和昆虫图片。

昆虫名用NSTextField 控件显示，惊悚指数用EDStarRating 控件显示，昆虫图片则用NSImageView显示。

此外，我们还需要两个Label，用于表示每个字段的意义（标题）。

 

拖一个 Text Field (昆虫名), 2个Labels (字段标题), 一个Image View 到view中。

EDStarRating 控件是一个定制控件，无法在Objects Library中找到它，因此你需要先拖入一个 “Custom View”控件。

将这些控件放到view的右边，从上到下依次摆放：

·      首先是一个Label，用于充当昆虫名的字段标题，在它下边是 textfield。

·      在text field下面是第二个 label(惊悚指数的字段标题)。

·      在这个label,下边是一个customview (后面将改成EDStarRating控件)。

·      最下面是image view below 控件。

所有控件左对齐，如下图所示：

然后选中custom view 控件，打开Identity面板（第三个标签按钮）将Class 修改为EDStarRating。

选择第一个label，打开Attributes 面板（第4个标签按钮），修改Title 为 “名称”.

依照上面的方法，将第二个label的title 改为“Rating”。

选择最顶级的 view (在document outline面板中显示为“Custom View”) ，打开Size 面板，查看它的大小：

打开 MainMenu.xib, 选择 ScaryBugsMac window, 设置window 的宽高为前面记住的宽高。然后勾选MinimumSize 。

运行后效果如下:

EDStarRating控件并没有在界面上显示，这是因为我们还没有配置它。

打开 MasterViewController.xib，打开Assistant Editor (工具栏中“Editor” 面板的第二个按钮), 并确保当前编辑的内容是MasterViewController.swift。

选中table View，按下右键，拖一条线到MasterViewController.swift文件中:

这将弹出一个窗口，允许你创建一个IBOutlet。在Name中输入bugsTableView, Storage 设置为 Weak, 然后点击Connect。

重复上述步骤，为text field和image view创建两个IBOutlet：

bugTitleView、bugImageView。

对于custom view, 则创建一个IBOutlet: bugRating.

最终， MasterViewController.swift文件中将新增如下内容：

@IBOutlet weak var bugsTableView: NSTableView! @IBOutlet weak var bugTitleView: NSTextField! @IBOutlet weak var bugImageView: NSImageView! @IBOutlet weak var bugRating: EDStarRating!