001-建立一個簡單的表格App

首先在元件庫(Object Library)尋找Table View物件,並拖曳到View Controller。

調整Table View佈滿整個View,且至屬性檢閱器中,變更Prototype Cells數字,從0改為1,此時會出現一個Prototype Cell表格視圖。

點選視圖上的Cell,到屬性檢測器中把Style處改成Basic,接著Identifier處輸入Cell,這是Prototype Cell唯一的識別碼。

Prototype Cell 內建的樣式1. Basic 2. Right detail 3. Left detail 4. Subtitle

對這個表格視圖定義約束條件,約束與四邊間距為0,然後取消勾選『Constrain to margins』。

  • UIkit框架是最常用的框架之一,提供類別來建立與管理App的使用者介面。
  • 元件庫所列出物件都是由UIkit框架提供,如:此專案的Table View物件和稍早Hello World專案的Button物件。
  • Table View -> UITableView類別、Button -> UIButton類別。

ViewController.swift編輯區中class ViewController後面加上UITableDateSource、UITableViewDelegate來採用協定。

宣告一個變數restaurantNames儲存表格資料至類別中,用陣列方式儲存表格資料。

加入兩個UITableViewDataSource協定中必需實作的方法:

一、第一個方法是用來通知表格視圖的一個區塊中的總列數,呼叫count方法來得到restaurantNames陣列中的項目數。

二、第二個方法在每次表格列要顯示時會被呼叫。

連結DataSouce與Delegate:按住Ctrl,並拖曳至文件大綱ViewController:

重複選取 1、dataSource 2、delegate

(因為Storyboard的UITableView不認識它們,並需告訴UITableView物件,ViewController是資料來源(data source)的委派物件。)

兩種顯示連結的方式:

兩種顯示連結方法

半成品:

在表格圖中加入縮圖:

將圖片拖曳至素材目錄(Assets.xcassets)

加入程式碼至ViewController.swift於return cell前

named為 Image Set的名字(自設)

半成品:

加入程式碼隱藏電信、時間、電池的狀態列

Show your support

Clapping shows how much you appreciated 佳弘’s story.