创建详情页面
在iOS中,典型的“主-细页面App”需要创建两个视图,但在 OS X,由于屏幕不再遭到限制,我们可以将它们合并在同1个视图中。
打开MasterViewController.xib,选中view,将宽度和高度拖大。如图:
我们需要显示以下信息: 昆虫名, 惊悚指数和昆虫图片。
昆虫名用NSTextField 控件显示,惊悚指数用EDStarRating 控件显示,昆虫图片则用NSImageView显示。
另外,我们还需要两个Label,用于表示每一个字段的意义(标题)。
拖1个 Text Field (昆虫名), 2个Labels (字段标题), 1个Image View 到view中。
EDStarRating 控件是1个定制控件,没法在Objects Library中找到它,因此你需要先拖入1个 “Custom View”控件。
将这些控件放到view的右侧,从上到下顺次摆放:
・ 首先是1个Label,用于充当昆虫名的字段标题,在它下边是 textfield。
・ 在text field下面是第2个 label(惊悚指数的字段标题)。
・ 在这个label,下边是1个customview (后面将改成EDStarRating控件)。
・ 最下面是image view below 控件。
所有控件左对齐,以下图所示:
然后选中custom view 控件,打开Identity面板(第3个标签按钮)将Class 修改成EDStarRating。
选择第1个label,打开Attributes 面板(第4个标签按钮),修改Title 为 “名称”.
依照上面的方法,将第2个label的title 改成“Rating”。
选择最顶级的 view (在document outline面板中显示为“Custom View”) ,打开Size 面板,查看它的大小:
打开 MainMenu.xib, 选择 ScaryBugsMac window, 设置window 的宽高为前面记住的宽高。然后勾选MinimumSize 。
运行后效果以下:
EDStarRating控件并没有在界面上显示,这是由于我们还没有配置它。
打开 MasterViewController.xib,打开Assistant Editor (工具栏中“Editor” 面板的第2个按钮), 并确保当前编辑的内容是MasterViewController.swift。
选中table View,按下右键,拖1条线到MasterViewController.swift文件中:
这将弹出1个窗口,允许你创建1个IBOutlet。在Name中输入bugsTableView, Storage 设置为 Weak, 然后点击Connect。
重复上述步骤,为text field和image view创建两个IBOutlet:
bugTitleView、bugImageView。
对custom view, 则创建1个IBOutlet: bugRating.
终究, MasterViewController.swift文件中将新增以下内容:
@IBOutlet weak var bugsTableView: NSTableView! @IBOutlet weak var bugTitleView: NSTextField! @IBOutlet weak var bugImageView: NSImageView! @IBOutlet weak var bugRating: EDStarRating! |
上一篇 [置顶] 物联网学习系列教程
下一篇 用EA画ER图