iOS App 介面設計教學：如何制作表格和集合視圖的組合介面

本篇為在校大學生黃潤華先生的客座投稿，他主要使用Swift 進行開發，有時使用C 或者C++ 挑戰一些算法題目。

app-介面-1. 在iPhone 和iPad 的很多app 裏面 ... iOSApp程式開發 iOSApp介面設計教學：如何制作表格和集合視圖的組合介面 AppCoda編輯團隊 Mar27,2019 17分鐘閱讀時間 In:iOSApp程式開發,UI 分享 本篇為在校大學生黃潤華先生的客座投稿，他主要使用Swift進行開發，有時使用C或者C++挑戰一些算法題目。

在iPhone和iPad的很多app裏面，我們都會看到許多用表格視圖和集合視圖制作起來的介面，大部分應該是表格視圖和集合視圖的組合介面。

比如我們在appstore裏面的遊戲欄或者App欄裏面會看到由表格視圖和集合視圖組合而成的漂亮介面。

又或者，你也會在快捷指令中心、Medium和AppleSupport裏面看到相類似的介面。

仔細分析不難發現這些介面的共同點，一般都是在表格視圖裏面添加集合視圖，但是呢，我們一般學習的表格視圖是用來展示一連串具有相同形式的介面的，就比如郵件裏面你收到的郵件的展示形式，或者微信裏面的聊天列表。

於是，我們再看一開始的那些照片，他們好像找不到甚麽相同的點，最多就是最上面的集合視圖可以找到共同點，但是集合視圖下一欄就立刻變成了表格視圖，甚至，表格視圖也有很多種形式，完全對應不起來呀，哪有甚麽共同特點？真是讓人匪夷所思。

為甚麽可以實現這種介面呢？別擔心，接下來就來學學如何制作表格視圖和集合視圖並存的介面吧。

示例模型 我這個介面是模仿AppleSupport寫的，它用三種方式來呈現數據，最開始是集合視圖，第二層是一個表格視圖，第三層也是一個表格視圖，不過這兩種表格視圖裏面的介面布局不太一樣。

看完我這一篇文章以後，你甚至可以自定義更多的表格視圖和集合視圖，這完全取決於你的想法。

你可以在GitHub上面找到完整的模型示例。

接下來我們就來學習一下吧。

制作集合視圖 我們首先來制作最開始的集合視圖，通過分析圖片，我們知道，我們需要自定義我們的集合視圖，每一個視圖裏面包含了一張照片、一個分類標簽、一個標題以及一個副標題（副標題可以沒有）。

1.添加TableViewController 我們先在storyboard裏面添加一個TableViewController，將它設為“isinitialViewController“。

然後選擇Editor->Embedin->NavigationController。

點擊NavigationController，將標題設為大標題，接著點擊tableViewController上的NavigationItem，修改其標題為探索。

接著點擊TableView的介面，打開Attributesinspector介面將content參數修改為StaticCells，同時將Section參數修改為3。

我們要使用靜態的cell來完成任務，第一步就是在第一個section裏面完成集合視圖的描繪。

打開第一個TableViewCell的Sizeinspector，將RowHeight修改為230。

不要忘記給你的TableView故事面板添加類別。

我這邊用的是TableViewController.swift來進行TableViewController的操作。

2.給Cell添加View 接著從Library裏面拖出一個View控件，放在第一個Cell上面。

接著給View控件添加新的約束。

3.給Cell添加CollectionView 接著，從Library裏面拖出CollectionView控件，將它放在View上面。

像剛剛View一樣設置相同的約束即可，同時我們要將集合視圖的滾動方向修改為水平方向。

在Attributesinspector裏面找到ScrollDirection，將它修改為Horizontal。

接著在Sizeinspector裏面將Cellsize修改為Width：290，height：185。

在Sectioninsets裏面修改Left為15，right為15。

最重要的一步：點擊Cell，打開Attributesinspector，找到CollectionReusableView，在Identifier後面寫上Cell。

4.添加照片控件 在Library裏面找到imageView，將它拖到CollectionCell上面，設置它的約束。

5.添加類別標簽與主副標題標簽 我們先來添加類別標簽。

從library裏面拖出來一個Label，將它拖到imageView上面，修改Label的字體和顏色等相關參數，參考示例圖片。

同樣的，給它添加一些約束。

此時要注意：我們為了保證label可以隨著我們寫的字數而有彈性變化，就需要修改它距離Cell最右側的距離，我們將它修改為小於等於。

接著是我們的主副標題。

拖動兩個label到imageView的左下角，將每一個label的顏色修改為白色，同時也根據你的想法修改字體。

當然，你也可以參考我的。

接著，我們來考慮一個小細節。

如果某一個collectioncell它沒有副標題，那麽在iPhone上面展示的時候，副標題那一欄是沒有字的，只有主標題有字。

在美觀方面，沒有副標題的那一個Cell，它的主標題離cell的最下方比較遠，這樣並不適合。

我們希望在沒有副標題的時候，主標題可以適當地下移幾公分，這樣會顯得比較好看。

如圖可以看出不同之處。

為了實現第二張圖片的功能，我們可以使用StackView來完成。

按住command按鈕，選擇主標題label和副標題label，選擇embedin->StackView。

選中我們的StackView，打開Attributesinspector->View->ContentMode->ScaleToFill。

同時將Spacing修改為1。

接著我們給它添加約束，只需要添加兩個約束就可以了，位置你可以自己選擇。

到此，我們CollectionView的介面制作就完成了。

此時你的storyboard裏面第一個section的介面應該和我的一樣。

展示集合視圖的數據 下面我們來使用代碼實現集合視圖。

要想實現展示數據的功能，我們需要數據源，其中所使用的圖片，你可以從Unsplash裏面找到。

1.創建集合視圖數據源 新建一個Swift文件（command+N即可），選擇SwiftFile，點擊Next，給它命名為imageCollection。

打開你剛剛創建的imageCollection.swift文件，往裏面添加一個結構體。

importUIKit structimageViewCollection{ varimage:UIImage? vartitle:String="" vargeneral:String="" varsubTitle:String="" } 接著，在你的TableViewController.swift文件裏面寫上你的數據源： /** *第一部分 *在tableViewCell裏面添加了一個collectionView，實現了4個collectionCell *每一個cell裏面有一個標題，副標題，背景圖片以及分類標簽 */ privatevarimages=[imageViewCollection(image:UIImage(named:"1"),title:"狗來了",general:"精選集",subTitle:""),imageViewCollection(image:UIImage(named:"2"),title:"芒果街上的小屋",general:"晨讀",subTitle:"優美純凈的小書"),imageViewCollection(image:UIImage(named:"4"),title:"吹小號的天鵝",general:"睡前故事",subTitle:""),imageViewCollection(image:UIImage(named:"3"),title:"時代廣場的蟋蟀",general:"下午茶",subTitle:"生命之間愛和關懷的故事")] 為了實現展示的功能，你還需要給你的TableViewController添加上collection的父類：UICollectionViewDelegate和UICollectionViewDataSource。

classTableViewController:UITableViewController,UICollectionViewDelegate,UICollectionViewDataSource{ ········ } 2.添加imageViewController.swift文件 新建一個swift文件，File->New->File（或者command+N），選擇CocoaTouchClass， 點擊Next，選擇以UITableViewCell為父類，新建類的名字為imageViewControllerTableViewCell。

打開剛剛創建的imageViewControllerTableViewCell.swift文件，在裏面寫上幾個變量： @IBOutletweakvarimageView:UIImageView!//背景照片 @IBOutletweakvargeneralLabel:UILabel!//類別標簽 @IBOutletweakvartitleLabel:UILabel!//主標題 @IBOutletweakvarsubTitleLabel:UILabel!//副標題 同時打開我們的Main.storyboard和imageViewControllerTableViewCell.swift文件，按住control，將上述聲明的變量和故事面板裏的控件一一連線。

3.展示我們的數據 我們還需要告訴iPhone我們要展示多少個集合，對此，我們在TableViewController裏面添加上： funccollectionView(_collectionView:UICollectionView,numberOfItemsInSectionsection:Int)->Int{ returnimages.count } funcnumberOfSections(incollectionView:UICollectionView)->Int{ return1 } 接著，在TableViewController.swift文件裏面聲明一個collectionView變量： @IBOutletweakvarcollectionView:UICollectionView!{ didSet{ collectionView.backgroundColor=.clear } } 和剛剛的操作一樣，將這個變量和故事面板裏的CollectionView連線。

為了實現展示數據的功能，我們可以像tableView那樣來做，在類方法collectionView(:cellForItemAt:)裏面進行操作： funccollectionView(_collectionView:UICollectionView,cellForItemAtindexPath:IndexPath)->UICollectionViewCell{ letcell=collectionView.dequeueReusableCell(withReuseIdentifier:"Cell",for:indexPath)as!imageViewCollectionViewCell cell.imageView.image=images[indexPath.row].image cell.generalLabel.text=images[indexPath.row].general cell.titleLabel.text=images[indexPath.row].title cell.subTitleLabel.text=images[indexPath.row].subTitle ifimages[indexPath.row].subTitle==""{ cell.subTitleLabel.isHidden=true //cell.subTitleLabel.text=""//這樣就可以看到美觀感 } cell.layer.cornerRadius=10.0 cell.layer.masksToBounds=true returncell } 如果你現在去運行的話，你不會看到數據，我們還需要指定數據源在哪裏。

在viewDidLoad()裏面加上兩句話： overridefuncviewDidLoad(){ super.viewDidLoad() collectionView.delegate=self collectionView.dataSource=self } 此時，你再去運行，你會發現collectionView可以工作了。

添加表格視圖 第二部分和第三部分其實思路是一樣的，都是為了達到staticcell與dynamiccell混合使用的目的。

1.storyboard準備工作 打開我們的故事面板，點擊一開始創建三個Section裏的第二個section，將它的高度修改為120，然後，給第二組的空白Cell設置identifier值，如圖，我將它設為TableViewCell： 同樣的，給第三個section寫一個Header，將它命名為瀏覽精選集，將它的高度修改為60，給第三組的空白Cell設置identifier值，我將它設置為FeaturedCell： 2.創建第二部分的Xib文件 由於第二組和第三組的section需要自定義cell，使用這裏使用XIB來完成。

我們先來自定義第二組的Cell，使用command+N快捷鍵，創建一個TableViewCell文件，我將它命名為TableViewCell.swift，注意要勾選AlsoCreateXIBfile： 打開storyboard，點擊第二個section的Cell，在右側打開identityinspector，將它的繼承類修改為剛剛創建的TableViewCell。

現在，我們來分析看看需要給Cell自定義哪一些控件。

如圖所示： 打開我們的Xib文件，它的操作其實和Storyboard一樣，你只需要在Library裏面將需要的控件拉到xib文件裏面就可以了。

佈局的相關知識我就不再囉嗦了，只要佈局和我的差不多就可以： 3.添加控件代碼 接著，打開xib文件對應的TableViewCell文件，我們的是TableViewCell.swift文件。

和上述一些步驟一樣，先在裏面聲明一些變量： @IBOutletweakvarclassLabel:UILabel!//類別標簽 @IBOutletweakvartitleLabel:UILabel!//主標題 @IBOutletweakvarsubTitle:UILabel!//副標題 @IBOutletweakvarbackgroundImage:UIImageView!{ didSet{ backgroundImage.layer.cornerRadius=15.0//設置圓角大小 backgroundImage.layer.masksToBounds=true } }//配對圖片 再將它們和xib裏面的控件一一連線即可。

接著我們需要在storyboard裏面使用這個控件，打開storyboard對應的TableViewController.swift文件，在裏面註冊一下NIB，如下： //第二組需要自定義cell，這裏使用XIB來完成 letnib=UINib(nibName:"TableViewCell",bundle:nil) 在你的ViewDidLoad()裏面添加上代碼： //需要用代碼註冊Nib self.tableView.register(nib,forCellReuseIdentifier:"TableViewCell") 這樣子，第二部分的佈局就差不多結束了。

4.創建第三部分的xib文件 第三部分和第二部分差不多，創建方式一模一樣，只是控件的佈局不一樣。

新建一個TableViewCell文件，我將它命名為FeaturedTableViewCell，勾選創建Xib文件的選項。

像第二個Section一樣，我們對它進行佈局等一系列操作： 編寫好控件的代碼： 在TableViewController.swift裏面註冊一下nib： //第二組需要自定義cell，這裏使用XIB來完成 letnib=UINib(nibName:"BookTableViewCell",bundle:nil) //第3組也需要自定義cell，這裏使用XIB來完成 letfeaturedNib=UINib(nibName:"FeaturedTableViewCell",bundle:nil) overridefuncviewDidLoad(){ super.viewDidLoad() //必須帶上這兩句話才有數據 collectionView.delegate=self collectionView.dataSource=self //需要用代碼註冊Nib self.tableView.register(nib,forCellReuseIdentifier:"TableViewCell") self.tableView.register(featuredNib,forCellReuseIdentifier:"FeaturedCell") } 非常好，我們快要接近成功了，你已經完成了3/4的工作了，我們還需要實現TableView的代理，這個可以實現staticcell與dynamiccell混合使用。

展示表格視圖 這一部分是整篇文章的最後一部分，我們用代碼形式來完成數據展示的任務。

1.創建數據源 我們先來創建第二個section的數據源，在TableViewController.swift文件裏面添上： /** *這裏是第二部分 *我想要在CollectionView下方展示一系列書籍，使用TableViewCell來顯示 *想要在靜態的cell裏面實現動態的cell需要使用xib文件 */ //這是我將要在tableViewCell裏面展示給大家的內容 privatevarbooks=[Book(classText:"友誼",title:"塔克的郊外",subTitle:"一只蟋蟀、一只老鼠和一只貓咪的\n童話連續劇。

",image:UIImage(named:"5")),Book(classText:"青春",title:"會飛的教室",subTitle:"一部由孩子們自編自演的聖誕情景劇，\n一部濃縮的校園風景錄。

",image:UIImage(named:"6")),Book(classText:"浪漫",title:"銀河鐵道之夜",subTitle:"一部未完成的作品\n銀河深處，便是那幸福的天堂嗎？",image:UIImage(named:"7")),Book(classText:"生命",title:"夏洛的網",subTitle:"世界上有兩種人，一種人讀過\n《夏洛的網》，另一種人正準備讀。

",image:UIImage(named:"8")),Book(classText:"冒險",title:"柳林風聲",subTitle:"一個適合坐在火爐邊，大家一起聽的\n故事。

",image:UIImage(named:"9"))] 接著是第三個section的數據源： /** *這是第三部分 *在這一部分要實現簡單的tableViewCell功能 *每一個cell由一張圖片，一個標題構成 */ privatevarfeaturedBooks=[Featured(image:UIImage(named:"10"),title:"小王子"),Featured(image:UIImage(named:"11"),title:"愛德華的奇妙之旅"),Featured(image:UIImage(named:"12"),title:"窗邊的小豆豆"),Featured(image:UIImage(named:"13"),title:"夢書之城"),Featured(image:UIImage(named:"14"),title:"天藍色的彼岸"),Featured(image:UIImage(named:"15"),title:"看得見風的男孩")] 2.完善表格視圖 有了數據源以後，我們就要開始將它們寫入tableViewCell裏面了。

說實話，操作和普通的tableViewCell操作一模一樣，我們只是多了一個註冊nib的環節。

//以下代理方法必須實現 overridefunctableView(_tableView:UITableView,cellForRowAtindexPath:IndexPath)->UITableViewCell{ if(indexPath.section==1){ letcell=tableView.dequeueReusableCell(withIdentifier:"TableViewCell")as?TableViewCell cell?.classLabel.text=books[indexPath.row].classText cell?.titleLabel.text=books[indexPath.row].title cell?.subTitle.text=books[indexPath.row].subTitle cell?.backgroundImage.image=books[indexPath.row].image returncell! } ifindexPath.section==2{ letcell=tableView.dequeueReusableCell(withIdentifier:"FeaturedCell")as?FeaturedTableViewCell cell?.bookImage.image=featuredBooks[indexPath.row].image cell?.bookTitle.text=featuredBooks[indexPath.row].title returncell! } returnsuper.tableView(tableView,cellForRowAt:indexPath) } overridefunctableView(_tableView:UITableView,numberOfRowsInSectionsection:Int)->Int{ ifsection==1{ returnbooks.count//這裏返回第二組的行數 } ifsection==2{ returnfeaturedBooks.count } returnsuper.tableView(tableView,numberOfRowsInSection:section) } overridefunctableView(_tableView:UITableView,indentationLevelForRowAtindexPath:IndexPath)->Int{ ifindexPath.section==1{ returnsuper.tableView(tableView,indentationLevelForRowAt:IndexPath(row:0,section:1)) } ifindexPath.section==2{ returnsuper.tableView(tableView,indentationLevelForRowAt:IndexPath(row:0,section:2)) } returnsuper.tableView(tableView,indentationLevelForRowAt:indexPath) } overridefunctableView(_tableView:UITableView,heightForRowAtindexPath:IndexPath)->CGFloat{ ifindexPath.section==1{ return120 } ifindexPath.section==2{ return80 } returnsuper.tableView(tableView,heightForRowAt:indexPath) } 我不解釋類方法的含義，這個你可以從AppCoda上的SwiftBook找到你要的知識點。

讓我解釋一下那幾個判斷語句：由於我們一共有三個section，每一個section對應的控件不同，就需要有一定的判斷功能，注意section是從0開始數的。

後記 這是比較簡單的模型，你可以發揮自己的想像力創造更多好看的介面。

謝謝閱讀我的文章。

本篇為在校大學生黃潤華先生的客座投稿，他主要使用Swift進行開發，有時使用C或者C++挑戰一些算法題目。

作者 AppCoda編輯團隊 此文章為客座或轉載文章，由作者授權刊登，AppCoda編輯團隊編輯。

有關文章詳情，請參考文首或文末的簡介。

查看全部文章 評論 載入評論 精選文章 在SwiftUI使用Markdown輕鬆格式化文本 30Mar2022 透過SwiftPlaygrounds4直接在iPad構建一個文字轉語音App 12Jan2022 在SwiftUI中設置漸變動畫(animatedgradient)的3個方法 29Sep2021 最新文章 在SwiftUI利用LiveTextAPI　從圖片中擷取文本 29Jun2022 善用Swift的嵌套物件功能　編寫出更清晰的程式碼 22Jun2022 WWDC22的重點更新：SwiftUI4.0新功能一覽 14Jun2022 很好！你已成功註冊。

歡迎回來！你已成功登入。

你已成功訂閱AppCoda中文版電子報。

你的連結已失效。

成功！請檢查你的電子郵件以獲取用於登入的連結。

好！你的付費資料已更新。

你的付費方式並未更新。