[APP開發-使用Swift] 21–3. Tab Bar以及UICollectionView

Chiwen Lai
4 min readNov 14, 2017

--

上一篇文章我們完成了將餐廳新增到雲端Firebase的功能,接下來我們希望可以將這些餐廳顯示出來。在這之前,我們先製作一個Tab Bar的功能,並加上一個Collection View來顯示這些餐廳。

Tab Bar

  1. 選擇我們的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的資料庫中將餐廳的資料擷取並顯示出來。

>>>21–4. Firebase — 查詢

--

--