iOS開發----TableView基礎

本文講的是TableView基礎，如何填充數據。

專業完整版請參考(www.appcoda.com/learnswift/)

上面網址的教程文檔爲試用版，須要購買。（支持正版從我作起💪）

各位看官注意啦，本文章不是教程，只是個人一個分享而已，有錯誤還請指出。

先上效果圖

接下來咱們開始！
注意本文是基於iOS 12和Xcode 10

---

刪除原有框架，使用列表框架

如何建立的項目步驟就略過了，使用是單視圖。
咱們要作的在Main.storyboard刪除原有的視圖控制器，替換爲咱們想要的列表控制器(在Library)
下圖爲更改前和更改後

細心的人可能看到了 在右邊個人故事版（姑且叫故事版 具體名字我也忘了）裏原來的ViewConntroller文件變成了RestaurantViewConntroller文件。

緣由是由於原來的文件是繼承與被咱們刪除的視圖控制器，因此它也要被咱們刪除，從新創建一個新的文件繼承於咱們如今的列表控制器。

創建步驟以下圖

首先在文件夾這裏，點擊New File，以後點擊默認的Cococa Touch Class，在以後的界面中名字隨意取，可是Subclass of 要改爲UITableViewController。
最後修改咱們列表視圖中的Class,爲咱們新建的文件，也就是讓他們二者關聯。

添加數據在列表中

第一步 咱們要作的是修改列表的佈局，這裏就隨我的愛好修改，沒有強制規定😂。

以上是個人界面，順手把cell標識符也修改了，以後咱們會用到。

在右邊的Attributs 中的有個Identlfler修改

第二步 咱們要把相冊和數據都填充到咱們圖片框和標籤框裏
在咱們以前新建的文件裏找到如下函數

• override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell

這個函數的做用就是修改咱們列表行中的內容。
複製代碼

接下來咱們要作的是創建四個數組，分別用來存放圖片，名字，地點，餐館類型。

這裏咱們要注意的是，若是你要添加圖片不管一張仍是幾張，圖片數組中要填充你圖片的名稱。而且把圖片放到右邊故事版的Assets.xcassets中。

接着咱們就能夠敲代碼啦，目光轉移tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath)這個函數上。

首先咱們要讓代碼知道咱們是那個列表，因此咱們以前設置的標識符就派上用場了。

我以前設置了標識符爲datacell，因此我要定義一個常量A存放個人標識符，以後咱們在定義一個常量B來管理咱們的列表，最後在用常量B來使各個標籤欄中顯示咱們數組中的內容。

好！ 思路完成。 接下來就是代碼啦，下面將貼出代碼，若是以爲本身能力，能夠本身先完成。

override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cellIdentifier = "datacell"
        let cell = tableView.dequeueReusableCell(withIdentifier: cellIdentifier, for: indexPath)
        // Configure the cell...

        cell.textLabel?.text = restaurantNames[indexPath.row]
        cell.imageView?.image = UIImage(named: restaurantImages[indexPath.row])
        return cell
    }
複製代碼

除此以外，咱們還要修改兩個函數並修改至下圖

override func numberOfSections(in tableView: UITableView) -> Int {
        // #warning Incomplete implementation, return the number of sections
        return 1
    }

    override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        // #warning Incomplete implementation, return the number of rows
        return restaurantNames.count
複製代碼

第一個函數的做用是告訴這個列表視圖（table view）咱們只有一個列表(此函數這裏也能夠註釋，由於此函數默認返回的是 1)

第二個函數的做用是爲了返回數組中的個數

這時候你就可使用模擬器看下樣子了，結果可能你會很失望，打開App會是一片漆黑。

爲何會是這樣呢？緣由在於咱們故事版中的主要存儲版中（Main.storedboard）,咱們以前刪除了默認的，新建了一個列表控制器。

但並無把它設置爲初始的視圖控制器，如圖設置。

這是咱們再打開模擬器看看會發生什麼事。

若是你只是想填充數據的話，到這裏就已經結束了，咱們已經成功添加了圖片和名字。

可是這樣子並不完美，咱們還要繼續對它進行加工，讓名字顯示到標籤欄上還要顯示地點和類型。

加工App

先新建一個文件，步驟就不用多說了吧，惟一的區別是Subclass of 改成UITableViewCell。

再而後是使列表區域（datacell）與其關聯。

打開新建的文件，輸入如下內容，也就是相應的與其餘四個對應。

@IBOutlet var nameLable: UILabel!
    @IBOutlet var LocationLable: UILabel!
    @IBOutlet var TypeLable: UILabel!
    @IBOutlet var ImageView: UIImageView!
複製代碼

在主要故事版中，右擊cell（咱們這裏已經命名爲datacell），拖拽定義的變量到相應的地方。

咱們返回RestaurantUITableViewController的文件來更新咱們的代碼。

因爲在以前文件已經定義四個新的常量來對應四個地方，咱們想要用到這個四個常量就須要是咱們cell 跟這個文件相關聯。

修改代碼至以下

let cell = tableView.dequeueReusableCell(withIdentifier: cellIdentifier, for: indexPath) as! RestaurantTableViewCell
複製代碼

接下來就能夠愉快把數組中的內容放到對應的地方了！

cell.nameLabel.text = restaurantNames[indexPath.row]
        cell.thumbnailImageView.image = UIImage(named: restaurantImages[indexPath.row])
        cell.locationLabel.text = restaurantLocations[indexPath.row]
        cell.typeLabel.text = restaurantTypes[indexPath.row]
複製代碼

再次打開模擬器，出現下圖效果達成。

至此咱們目的達成！ 本文完結！

若是出現界面排版混亂，能夠給圖片大小固定成某一個值，而且把內容模版改爲Scale to Fill

還有不少內容值得你們探討，好比修改圖片的形狀等。

之後會持續緩慢的更新，畢竟本人也是還在學習的小白。