創建詳情頁面
在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圖