swiftでTableView上に表示するセルを自分好みにカスタマイズする
お疲れ様です。Gakuです。
最近スマフォを買い戻した(2年間ピッチで戦ってました)ので、これを機にiphoneアプリ開発を始めました。
とりあえず、もっとも良く使うであろうTableViewの勉強を2日間かけてやったので、その時の備忘録を掲載します。
具体的にはTableView上に載せるセルを自分好みにカスタマイズするということをやってみました。
完成形は以下のような感じです。
ラベル2つ貼っただけの簡単な構成。
ラベル以外でもいろいろできるので、とりあえず勉強がてらここからスタートすることにしました。
プロジェクトはSingle View Applicationで作成します。
プロジェクト情報はこんな感じ
デスクトップあたりにプロジェクトを保存します。
Main.storyboard
Viewを編集していきます。
構成としては
TableViewの上にTableViewCellを載せるだけです。
こんな感じ
CustomCell
次にセルをカスタマイズするためのファイル、CustomCellを作成し編集していきます。
TestCustomCellフォルダの上で右クリックしNewFile
iOS/SourceにあるCocoaTouchSourceを選択します。
こんな感じで作成
Also create XIB fileにチェックを入れることをお忘れなく。
CustomCell.swiftとCustomCell.xibファイルが作成されたと思います。
CustomCell.xibを開いてCellの編集をします。
今回は簡単に2つのラベルを載せるだけの構成で編集。
次にCustomCell.swiftを編集していきます。
作成した2つのLabelを関連付けます。(この作業重要)
ラベルを右クリックしてドラッグドロップで指定の場所へ関連付ければOK
こんな感じ
この作業がわからなくて半日はまった。。テキストベースの解説が多いので本当にわからないです。はい
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」で保存します
ソースは以下のように編集
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開発記】 - 凸ろぐ