[APP開發-使用Swift] 21–3. Tab Bar以及UICollectionView
上一篇文章我們完成了將餐廳新增到雲端Firebase的功能,接下來我們希望可以將這些餐廳顯示出來。在這之前,我們先製作一個Tab Bar的功能,並加上一個Collection View來顯示這些餐廳。
Tab Bar
- 選擇我們的Navigation Controller,上方選單選擇Editor → Embed in → Tab Bar Controller。
2. 選擇Navigation Controller裡的Tab bar item,將Title改為「我的餐廳」。
3. 如果不希望進到餐廳的Detail View出現Tab Bar,我們可以將Detail View的「Hide Bottom Bar on Push」作勾選。
4. 拖拉一個Collection View Controller到Storyboard。
5. 點選Collection View Controller,從上方選單挑選Editor → Embed In → Navigation Controller。
6. 從Tab bar Ctrl+Drag到Navigation Controller,選擇「Relationship Segue — view controllers」。
7. 選擇Tab Bar Item將標題及圖片改為「發掘餐廳」。
8. 執行看看,新的Tab跑出來囉,點下去後連到我們空白的Collection View。
接下來我們先設定好Collection View的畫面,以及Storyboard及Controller的對應關係。
9. 新增:DiscoverCollectionViewController。
10. 串連Storyboard以及DiscoveryCollectionViewController。拖拉一個Image View及Label到Cell裡面。
11. 新增檔案:DiscoverCollectionViewCell
12. 串連Storyboard以及DiscoverCollectionViewCell。
13. 分別從Storyboard拖拉discoverImageView、discoverLabel兩個outlet到DiscoverCollectionViewCell.swift裡面。
如此,我們的畫面設計告一段落,接下來我們將從Firebase的資料庫中將餐廳的資料擷取並顯示出來。