Swift

Swift:超初心者向け!UITableViewControllerの使い方(1)


今回はUITableViewControllerの使い方についてメモして行きます。

 

UITableViewControllerとは

twitterのツイートが並んでいる画面や

LINEの友達一覧、

Facebookの近況など

どんなアプリにもリストってありますよね。

こんな感じに線で区切られたものです。
f:id:jumprails3303:20161126184114p:plain

これをカスタマイズすると
有名アプリのようなおしゃれな感じなります。

作成タイム

まずは、新しいプロジェクト立ち上げ
storyboardを開いてください。

①おそらく、デフォルトのUIViewControllerが置いてあると思います、それを消しましょう!deleteです!

②そしてその真っさらなstoryboardにUITableViewControllerを配置してください

③attributes inspectorボタンをクリックしてください。

④UIViewControllerを消してしまったので、RUN直後に表示されるViewControllerがない状態なので、『is initial view controller』にチェックを入れましょう。

f:id:jumprails3303:20161126184822p:plain

次に 配置したUITableViewControllerに対応したファイルを作成します。
『New File…』をクリックしてください。
f:id:jumprails3303:20161126185201p:plain

そして、左上の『Cocoa Touch Class』を選択してNextをクリック!
f:id:jumprails3303:20161126185437p:plain

 

ここでsubClassにUITableViewControllerを選択して、

classは『TableViewController』にしましょう!!

 

するとこのようなファイルが作成されたかと思います。

import UIKit

class TableViewController: UITableViewController {

    override func viewDidLoad() {
        super.viewDidLoad()

        
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
       
    }

   

    override func numberOfSections(in tableView: UITableView) -> Int {
        return 0
    }

    override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return 0
    }

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

        // Configure the cell...

        return cell
    }
    */

    /*
    // Override to support conditional editing of the table view.
    override func tableView(_ tableView: UITableView, canEditRowAt indexPath: IndexPath) -> Bool {
        // Return false if you do not want the specified item to be editable.
        return true
    }
    */

    /*
    // Override to support editing the table view.
    override func tableView(_ tableView: UITableView, commit editingStyle: UITableViewCellEditingStyle, forRowAt indexPath: IndexPath) {
        if editingStyle == .delete {
            // Delete the row from the data source
            tableView.deleteRows(at: [indexPath], with: .fade)
        } else if editingStyle == .insert {
            // Create a new instance of the appropriate class, insert it into the array, and add a new row to the table view
        }    
    }
    */

    /*
    // Override to support rearranging the table view.
    override func tableView(_ tableView: UITableView, moveRowAt fromIndexPath: IndexPath, to: IndexPath) {

    }
    */

    /*
    // Override to support conditional rearranging of the table view.
    override func tableView(_ tableView: UITableView, canMoveRowAt indexPath: IndexPath) -> Bool {
        // Return false if you do not want the item to be re-orderable.
        return true
    }
    */

    /*
    // MARK: - Navigation

    // In a storyboard-based application, you will often want to do a little preparation before navigation
    override func prepare(for segue: UIStoryboardSegue, sender: Any?) {
        // Get the new view controller using segue.destinationViewController.
        // Pass the selected object to the new view controller.
    }
    */

}

コメントアウトが長いですねー。。。

でもここが大事なのですよ。

 

そしてこのように編集してください。
いらない部分は削って
必要な部分はコメントアウトを解除します。
少し数も変えて、

import UIKit

class TableViewController: UITableViewController {

    override func viewDidLoad() {
        super.viewDidLoad()

        
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
       
    }

   

    override func numberOfSections(in tableView: UITableView) -> Int {
        return 1
        
    }

    override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return 5
    }

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


        return cell
    }
    

   

}

このようにしましょう。

コードの解説!

コードを解説していきます!

numberOfSections

override func numberOfSections(in tableView: UITableView) -> Int {
        return 1
        
    }

ここはセクションの数を決めています。今回は1つに設定しました。
実はこのTableView、
セクションとセルという二つの枠で成り立っています。

セクションというのが、大きな枠で、
セクションの中にセルがあります。

f:id:jumprails3303:20161126191038p:plain
numberOfRowsInSection

override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return 5
    }

ここで設定しているのが、
セルの数です。
今回は5つに設定しています。

cellForRowAt (超重要)

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


        return cell
    }

ここでは実際に表示されるセルの内容を決める超重要で、一番難しいところです。
デフォルトではコメントアウトされている部分ですが、解除しました。
ここに
        let cell = tableView.dequeueReusableCell(withIdentifier: "reuseIdentifier", for: indexPath)

『reuseIdentifier』という名前のセルの内容を決めるよ!
ということが書いてあります。

でもreuseIdentifierなんて名前をセルにつけたおぼえはありませんよね。

今からつけます!!

CellのIdentifier!!!

storyboardをひらいて

①『Table View Cell』をクリック

②毎度のことながらattributes inspectorのボタンをクリック

③Table View CellのIdentifierを『reuseIdentifier』に設定!
f:id:jumprails3303:20161126193516p:plain

これでセルの設定は完了!

次はコードファイルとstoryboardを紐付け!

まずは

①Storyboard上のTableViewControllerの黄色いマークをクリック!

②謎の新聞紙のようなマークをクリック!

③Classを『TableViewController』に設定!
f:id:jumprails3303:20161126193526p:plain

これであらかた終わりです!!

 

RUNしてみましょう!

おそらく
真っさらさらです!

なぜなら
まだ、セルの内容を書いていないからです。

TableViewController.swiftを
このように編集してください、

import UIKit

class TableViewController: UITableViewController {

    
    
   
    let array = ["天丼","カレー","うな丼","おにぎり","味噌汁"]// 新しく付け足した
    
    
    override func viewDidLoad() {
        super.viewDidLoad()

        
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
       
    }

   

    override func numberOfSections(in tableView: UITableView) -> Int {
        return 1
        
    }

    override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return 5
    }

    
    override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "reuseIdentifier", for: indexPath)
        
        
        cell.textLabel?.text = array[indexPath.row]// 新しく付け足した


        return cell
    }

 

新しく二行足しました。

    let array = ["天丼","カレー","うな丼","おにぎり","味噌汁"]// 新しく付け足した

これはただの配列です。説明は省きます。

 

        cell.textLabel?.text = array[indexPath.row]// 新しく付け足した

cellのtextLabelのtextを上の配列からとってくる
という処理をしています。
配列は
array[番号]でとってくることができるので、

indexPath.rowという、セル番号をとってくるものをつかって、
セルによって違うものをとってくるように設定しています。

RUNしてみましょう!

f:id:jumprails3303:20161126195442p:plain
このような画面が出てるれば成功です!


ABOUT ME
ささお
3年目iOSエンジニア。 スタートアップで働いておりやす。 プログラミングスクールとエンジニアのキャリアを考えたい。 作ったアプリ - https://apps.apple.com/us/app/loverprofile/id1463563845?l=ja&ls=1