iOSアプリ開発

Swift:初心者向け!UITableViewの使い方:delegate・datasourceについて


UITableView

 

今回は
UITableViewについてです。

 

UITableViewを使うには、
アプリ開発の最初の関門である『delegate『datasource』を使用します。

 

この辺は本当にわけがわからないので、整理しておこうと思いました。

 

ではでは、始めていきます。

プロジェクトを立ち上げる

Storyboardを開いてください。

デフォルトで置いてあるViewControllerに

UITableViewをこんな感じに配置してください。
f:id:jumprails3303:20161129125752p:plain

しかしこれでは機能しません。
UITableViewCellを置いてあげましょう。

UITableViewCell

f:id:jumprails3303:20161126191038p:plain

CellはTableViewの中のSectionの中にあります。

cell in section in tableview ですね

つまりです。

ざっくりいうと、tableViewに表示されるデータはCell(row)で表示されるということです。

 

それでは、UITableViewCellを置いてあげましょう。
このようになれば大丈夫です。
f:id:jumprails3303:20161129141703p:plain

 

するとこんな感じの注意が出てくるかと思います。
f:id:jumprails3303:20161129141901p:plain

[Prototype table cells must have reuse identifiers] これは『CellにはIdentifierが必要だよ!』という意味です。

 

Identifierとは

Identifierとは『識別子』の意味です。
swift限定のものではなく、プログラミングをしているとよく見る単語です。

 

識別子とは

識別子とは、オブジェクトに固有の番号や文字列をつけて、
他のものと区別するためのものです。

要は名前です。

 

 

では、CellにIdentifierを入れていきます。

TableViewCellを選択すると、

attributes inspectorで

Identifierの入力ができます。

『beginnerCell』にします。

すると今まで出ていた注意が消えるはずです。
f:id:jumprails3303:20161129144346p:plain

 

次にTableViewをコードと紐付けましょう。

場所はviewDidLoadの上あたり、

名前は『tableView』。ひねりがないですね。。。

f:id:jumprails3303:20161129144948p:plain

 

そろそろdatasource delegateのところです。

TableViewのDelegate・Datasourceについて

このようにViewControlllerを編集してください。

import UIKit

class ViewController: UIViewController, UITableViewDelegate, UITableViewDataSource{
     // UITableViewDelegate を追加
     // UITableViewDatasource を追加
    
    @IBOutlet weak var tableView: UITableView!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        tableView.dataSource = self    //追加
        tableView.delegate = self // 追加
        
    }
    
    
    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        
    }
       
}

ようやくここまできました。

なぜこれらが必要なのか、

それは、デフォルトのViewControllerには、tableViewCellの高さや、内容を決めることができないからです。

そこで

 UITableViewDelegate, UITableViewDataSource


tableView.dataSource = self    //追加
tableView.delegate = self // 追加

を追加することで
ViewControllerをカスタムし、
TableViewCellの高さや内容を決めることができるようにしたのです。

こういった記述はTableViewControllerには必要ありません。

 

今回、ViewControllerを使用したためにdelegateやdatasourceを追加する必要があったのです。

それでは、その高さや内容を決めていきましょう。

ViewControllerをこのように編集してください。

import UIKit

class ViewController: UIViewController, UITableViewDelegate, UITableViewDataSource{
    
    
    @IBOutlet weak var tableView: UITableView!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        tableView.dataSource = self
        tableView.delegate = self
        
    }
    
    
    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        
    }
    
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        // 一つのsectionの中に入れるCellの数を決める。
        
        return 10
    }
    
    
    func numberOfSections(in tableView: UITableView) -> Int { // sectionの数を決める
        return 1
    }
    
    func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
        // Cellの高さを決める
        
        return 50
    }
    
    
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        // Cellの内容を決める(超重要)
        
        let cell = tableView.dequeueReusableCell(withIdentifier: "beginnerCell", for: indexPath)
        //ここで先ほど指定した『beginnerCell』を呼んでる。
        cell.textLabel?.text = "swift"
        
        return cell
        
    } 
    
}

 

numberOfRowsInSection

このメソッドでセクションの中にあるセル(行)の数を指定します。
とりあえず、10としていますが、後でまた変えます。

 

numberOfSections

このメソッドでセクションの数を決めます。
これは後で変えたりしません。

 

heightForRowAt

このメソッドでセルの高さを指定してます。
見ての通りですね。
50にした理由はなんとなくです。

 

cellForRowAt

このメソッドでセルの内容を決めます。
ちょっと難しいです。
特にこの

let cell = tableView.dequeueReusableCell(withIdentifier: "beginnerCell", for: indexPath)

が難しいです。
ここでは先ほど指定した『beginnerCell』を引っ張ってきています。

そして、
そのbeginnerCellに”swift”という文字を表示させるようにしています。

        cell.textLabel?.text = "swift"

runしてみましょう。
このようになれば成功です!
f:id:jumprails3303:20161129153717p:plain

 

もう少し、
深く掘り下げます。
このままでは、どのセルにも同じ文字しか表示できません。
ViewControllerをこのように編集しましょう。

import UIKit

class ViewController: UIViewController, UITableViewDelegate, UITableViewDataSource{
    
    
    @IBOutlet weak var tableView: UITableView!
    let array:[String] = ["swift","Ruby","Rails","PHP","HTML.CSS","JS","Java"]


    override func viewDidLoad() {
        super.viewDidLoad()
        
        tableView.dataSource = self
        tableView.delegate = self
        
    }
    
    
    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        
    }
    
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        // 一つのsectionの中に入れるCellの数を決める。
        
        return array.count // 上に定義した配列arrayの要素数
    }
    
    
    func numberOfSections(in tableView: UITableView) -> Int { // sectionの数を決める
        return 1
    }
    
    func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
        // Cellの高さを決める
        
        return 50
    }
    
    
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        // Cellの内容を決める(超重要)
        
        let cell = tableView.dequeueReusableCell(withIdentifier: "beginnerCell", for: indexPath)
        //ここで先ほど指定した『beginnerCell』を呼んでる。

        cell.textLabel?.text = array[indexPath.row] // indexPath.rowはセルの番号
        
        return cell
        
    }
    
    
   
}

これで完成です!

加えたコードの解説をします!

これはただの配列です。

let array:[String] = ["swift","Ruby","Rails","PHP","HTML.CSS","JS","Java"]

セルの数を配列の数と同じにしました。
func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        // 一つのsectionの中に入れるCellの数を決める。
        
        return array.count // 上に定義した配列arrayの要素数
}

 

配列arrayの内容をセルに表示させます。

indexPath.rowによってセル番号を取得し、

セル番号とarrayの番号と同じものを表示できるようにしました。

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        // Cellの内容を決める(超重要)
        
        let cell = tableView.dequeueReusableCell(withIdentifier: "beginnerCell", for: indexPath)
        //ここで先ほど指定した『beginnerCell』を呼んでる。

        cell.textLabel?.text = array[indexPath.row] // indexPath.rowはセルの番号
        
        return cell
        
 }

これにて終了!!!



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