gaku様の備忘録

プログラミングとか、夢と現実と理想とか。。。

swiftでTableView上に表示するセルを自分好みにカスタマイズする

お疲れ様です。Gakuです。
最近スマフォを買い戻した(2年間ピッチで戦ってました)ので、これを機にiphoneアプリ開発を始めました。
とりあえず、もっとも良く使うであろうTableViewの勉強を2日間かけてやったので、その時の備忘録を掲載します。

具体的にはTableView上に載せるセルを自分好みにカスタマイズするということをやってみました。
完成形は以下のような感じです。

f:id:gaku3601:20150510211420p:plain

ラベル2つ貼っただけの簡単な構成。
ラベル以外でもいろいろできるので、とりあえず勉強がてらここからスタートすることにしました。

プロジェクトはSingle View Applicationで作成します。
f:id:gaku3601:20150510211636p:plain

プロジェクト情報はこんな感じ
f:id:gaku3601:20150510211739p:plain

デスクトップあたりにプロジェクトを保存します。

Main.storyboard

Viewを編集していきます。
構成としては
TableViewの上にTableViewCellを載せるだけです。
こんな感じ
f:id:gaku3601:20150510212331p:plain

CustomCell

次にセルをカスタマイズするためのファイル、CustomCellを作成し編集していきます。
TestCustomCellフォルダの上で右クリックしNewFile
iOS/SourceにあるCocoaTouchSourceを選択します。
f:id:gaku3601:20150510212645p:plain
こんな感じで作成
Also create XIB fileにチェックを入れることをお忘れなく。
f:id:gaku3601:20150510212803p:plain

CustomCell.swiftとCustomCell.xibファイルが作成されたと思います。
CustomCell.xibを開いてCellの編集をします。
今回は簡単に2つのラベルを載せるだけの構成で編集。
f:id:gaku3601:20150510213121p:plain

次にCustomCell.swiftを編集していきます。
作成した2つのLabelを関連付けます。(この作業重要)
ラベルを右クリックしてドラッグドロップで指定の場所へ関連付ければOK
こんな感じ
f:id:gaku3601:20150510213338p:plain
この作業がわからなくて半日はまった。。テキストベースの解説が多いので本当にわからないです。はい
Nameにはlabel1、label2を指定します。
この作業が終わったら以下のようにファイルを編集します。

import UIKit

class CustomCell: UITableViewCell {

    @IBOutlet weak var label1: UILabel!
    @IBOutlet weak var label2: UILabel!
    override func awakeFromNib() {
        super.awakeFromNib()
        // Initialization code
    }

    override func setSelected(selected: Bool, animated: Bool) {
        super.setSelected(selected, animated: animated)

        // Configure the view for the selected state
    }
    
    func setCell(test :Test) {
        self.label1.text = test.label1
        self.label2.text = test.label2
    }
}

Test.swingの作成

メンバクラスのTest.swingを作成します。
Swift Fileを選択して、「Test」で保存します
f:id:gaku3601:20150510214310p:plain

ソースは以下のように編集

import Foundation

class Test : NSObject{
    var label1:String
    var label2:String
    
    init(label1:String,label2:String){
        self.label1 = label1
        self.label2 = label2
    }
}

ViewControl.swift

CustamCellの編集でLabelの関連付けを行った手順で、
TableViewの関連を追加します。
NameはTableViewとします。

そしたら以下のように編集します。

import UIKit

class ViewController: UIViewController,UITableViewDataSource,UITableViewDelegate {
    
    @IBOutlet weak var tableView: UITableView!
    var Tests:[Test] = [Test]()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
        
        self.setupFriends()
        
        tableView.delegate = self
        tableView.dataSource = self
        
        var nib = UINib(nibName: "CustomCell", bundle: nil)
        tableView.registerNib(nib, forCellReuseIdentifier: "Cell")
    }
    
    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }
    
    func setupFriends() {
        var f1 = Test(label1: "Ken", label2:"kwen2ksfasdjfioasdfjioafd")
        var f2 = Test(label1: "Ken", label2:"kwen2askdfjaksdfa")
        var f3 = Test(label1: "Ken", label2:"kwen2asdfkasdfuew")
        var f4 = Test(label1: "Ken", label2:"kwen2ksfasdjfioasdfjioafd")
        var f5 = Test(label1: "Ken", label2:"kwen2askdfjaksdfa")
        var f6 = Test(label1: "Ken", label2:"kwen2asdfkasdfuew")
        
        Tests.append(f1)
        Tests.append(f2)
        Tests.append(f3)
        Tests.append(f4)
        Tests.append(f5)
        Tests.append(f6)
    }
    
    func tableView(tableView: UITableView, numberOfRowsInSection section:Int) -> Int {
        return Tests.count
    }
    
    func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
        var cell = tableView.dequeueReusableCellWithIdentifier("Cell") as? CustomCell
        
        //cell中身セット(引数 セル、indexPath)
        cell?.setCell(Tests[indexPath.row])
        
        return cell!
    }
    
}

UITableViewDataSource,UITableViewDelegateを継承している点を忘れずに。

実行してみたらセルがカスタマイズされて表示されていることがわかると思います。
終わり。

■ひとりごと
swiftむずかしいけど、とりあえずTableViewの編集の仕方が理解出来たし、
なんとかやっていけそうな気がします。
何より、実機で動くアプリが作れる楽しさを久しぶりに感じている今日このごろ。
さて、何作ろうかな〜(´・ω・`)

■参考文献
http://smileapps.sakura.ne.jp/blg/?p=745
【swift】オシャなCustomCellを設定する【CoffeeNote開発記】 - 凸ろぐ