おふ×3

Xcode6_Beta5&SwiftでUITableViewでUINibを使ったカスタムセル(UITableViewCell)を利用する方法

公開日： 2014/08/05 : 最終更新日：2014/10/21 Swift Xcode6

スポンサードリンク

前回は、「Xcode5&Objective-CでUITableViewでUINibを使ったカスタムセル(UITableViewCell)を利用する方法」でしたが、本エントリーはXcode6_Beta4&Swiftでカスタムセルを利用する方法となります。

結果的に出来上がるアプリは同じになります。

利用しているXcodeはXcode6_Beta5となります。

Xcodeの操作はXcode5とほぼ同じですので、画面操作のイメージは前回のものを参照ください。

１プロジェクトの作成

まずは、プロジェクトを作成します。

プロダクト名：SwiftUseUinibTableViewSample
テンプレート：SingleView View Template
デバイス：iPhone
言語：Swift
を指定してプロジェックとを作成してください

２ UITableViewの配置とカスタムセルクラスの作成

UITableViewの配置

Main.storyboardを選択しストーリーボードをエディタエリアに表示し「Table View」を配置します。
Xcodeにおける操作方法は前回と同じです。

配置後にOutlet接続をViewController.swiftに対して行います。
これについても操作方法は前回と同じです。
名前はtableViewとしてください。

テーブルビューをOutlet接続した後のViewController.swiftは以下のようになります。

import UIKit

class ViewController: UIViewController {
                            
	@IBOutlet weak var tableView: UITableView!
	override func viewDidLoad() {
		super.viewDidLoad()
		// Do any additional setup after loading the view, typically from a nib.
	}

	override func didReceiveMemoryWarning() {
		super.didReceiveMemoryWarning()
		// Dispose of any resources that can be recreated.
	}


}

import UIKit

class ViewController: UIViewController {

@IBOutlet weak var tableView: UITableView!

override func viewDidLoad() {

super.viewDidLoad()

// Do any additional setup after loading the view, typically from a nib.

}

override func didReceiveMemoryWarning() {

super.didReceiveMemoryWarning()

// Dispose of any resources that can be recreated.

}

カスタムセルクラスの作成

これも前回とほぼ同じ操作です。

プロジェクトナビゲーターで右クリックメニューを表示し「New File …」をクリックします。

次比表示される画面では、「cocoa Touch class」を選択し「next」ボタンをクリックします。

次の画面ではclassにCustomTableViewCell、Subclass ofにUITableViewCellを指定し、
Auto create XIB fileをチェックし、言語はSwiftを選択し、「Next」をクリックします。

最後の画面は「create」ボタンを押すだけです。

CustomTableViewCell.swiftとCustomTableViewCell.xibが生成されました。

３ UITableViewのセルにカスタムセルクラスを設定する

Table View Cellを配置し作成したカスタムセルクラスを指定する

Table View Cellの配置

ストーリーボードで配置済みのテーブルビューに「Table View Cell」を配置します。
これも前回のエントリーと操作方法は同じですので、前回の該当箇所を参照ください。

このへんの操作方法はXcode5とXcode6(といってもBeta5ですが・・・)は変わってないですね。

カスタムセルクラスの設定

先ほど配置した「Table View Cell」をストーリーボード上で選択し「Identity inspector」の「Custom Class」にCustomTableViewCellを指定します。

同様に「Table View Cell」を選択した状態で「Attributes inspector」の「identifier」に”Cell”を指定します。

上記2属性の設定を行うインスペクタも同じ、インスペクタ内での属性の位置もXcode5とXcode6で変わってないので分かりやすいですね。

４ xibに固定のラベルを配置し、ViewControllerでカスタムセルを表示するように変更を実施する

xibに固定のラベルを配置

プロジェクトナビゲーターでCustomTableViewCell.xibをクリックし、エディタエリアに表示した後
Labelをxibに配置します。

配置したラベルをダブルクリックして、”Swiftのカスタムセルです。”を入力します。

ViewControllerの変更

いよいよ、作成したカスタムセルをテーブルビューに表示しする部分です。
Objective-Cでは、ヘッダーと実装ファイルが分かれているますが、Swiftにはそんな物はないので、修正対象はViewController.swiftのみとなります。

修正内容としては、以下の5点になります。

テーブルビューを制御するために必要なUITableViewDelegate、UITableViewDataSource両プロトコルの追加
viewDidLoadでtableViewのdelegateとdataSourceにselfをセット
viewDidLoadでtableViewにカスタムセル(CustomTableViewCell)を指定
-(NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)sectionメソッドを追加
-(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPathメソッドを追加

テーブルビューを制御するために必要なUITableViewDelegate、UITableViewDataSource両プロトコルの追加

Swiftにおけるプロトコル追加はsuper classの後にカンマ区切りで指定できます。当然カンマ区切りで複数のプロトコルを追加できます。

class CTViewController: UIViewController, UITableViewDataSource, UITableViewDelegate

1	class CTViewController: UIViewController, UITableViewDataSource, UITableViewDelegate

この文法では多重継承になっているような感覚をおぼえますよね・・・、実際の仕様はそうではないのですが、もうすこし良い表現があると思うのですが・・・

viewDidLoadでtableViewのdelegateとdataSourceにselfをセット

これも旧来と同じ考え方ですね、viewDidLoadでセットする処理を追加します。

	override func viewDidLoad() {
		super.viewDidLoad()
		// Do any additional setup after loading the view, typically from a nib.
		tableView.delegate = self
        tableView.dataSource = self
	}

override func viewDidLoad() {

super.viewDidLoad()

// Do any additional setup after loading the view, typically from a nib.

tableView.delegate = self

tableView.dataSource = self

}

viewDidLoadでtableViewにカスタムセル(CustomTableViewCell)を指定

これもObjective-Cの時と同じ処理を呼び出します。当然Swiftに変わっていますのでその部分は違います。

	override func viewDidLoad() {
		super.viewDidLoad()

		//デリゲートにselfをセット
		tableView.delegate = self
        tableView.dataSource = self

		//カスタムセルを指定
		var nib  = UINib(nibName: "CustomTableViewCell", bundle:nil)
    	tableView.registerNib(nib, forCellReuseIdentifier:"Cell")
	}

override func viewDidLoad() {

super.viewDidLoad()

//デリゲートにselfをセット

tableView.delegate = self

tableView.dataSource = self

//カスタムセルを指定

var nib = UINib(nibName: "CustomTableViewCell", bundle:nil)

tableView.registerNib(nib, forCellReuseIdentifier:"Cell")

}

セクションの行数とセルの内容を返却するデリゲートのメソッドを追加

セクションの行数を返却するメソッドではとりあえず行数はリテラルの数値の5をリターンするようにしてました。

    // 行数を返却するデリゲート先
    func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return 5;
	}

// 行数を返却するデリゲート先

func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {

return 5;

}

セルの内容を返却するメソッドではカスタムセルを返却するだけです。

	// 表示セルを返却するデリゲート先
    func tableView(tableView: UITableView!, cellForRowAtIndexPath indexPath:NSIndexPath!) -> UITableViewCell {
		var cell = tableView.dequeueReusableCellWithIdentifier("Cell") as? CustomTableViewCell
        return cell!
    }

// 表示セルを返却するデリゲート先

func tableView(tableView: UITableView!, cellForRowAtIndexPath indexPath:NSIndexPath!) -> UITableViewCell {

var cell = tableView.dequeueReusableCellWithIdentifier("Cell") as? CustomTableViewCell

return cell!

}

Swiftで? はnilを許容する宣言用に用いられます。
例えばStringは?を付与しないとnilの値を代入できません。

var hoge:String?

1	var hoge:String?

との変数hogeを宣言するとhogeはnilを許容する変数となります。

		//こちらはnilを代入できる
		var hoge:String? = nil
		//こちらはnilを代入できない
		var foo:String = nil

//こちらはnilを代入できる

var hoge:String? = nil

//こちらはnilを代入できない

var foo:String = nil

コンパイルエラー　Type ‘String’ does not conform to protocol ‘NilLiteralConvertible’
がfooの方は発生します。この特性によりSwiftではnil判定を行わなくてもよい箇所が多くなります。

と話がそれましたが、tableView.dequeueReusableCellWithIdentifier(“Cell”)の返却クラスを
as? CustomTableViewCellで変数cellに代入しているので、tableView.dequeueReusableCellWithIdentifier(“Cell”)が返却するクラスがCustomTableViewCellクラスもしくはその継承クラスでない場合は変数cellはnilになります。

C#には言語仕様にasとisがあるので紛らわしいですが、Swiftの言語仕様では
as?を利用した場合でダウンキャストに失敗した場合はnilになります。
asを利用した場合でダウンキャストに失敗した場合ランタイムエラーが発生します。

cellがnilになった時のリカバリー処理が本来は必要といえます・・・

1回目の実行

とりあえず、頭の中では処理が繋がったので実行してみます。

なんと・・・、これはいったい何が起きているのでしょうか？
どう考えてもObjective-Cでは実装の必要が無かったデリゲート先がSwiftでは必要なようです。

セクションの行の高さをセットするデリゲート先のメソッドを追加してみました。

    // 行の高さ
    func tableView(tableView: UITableView!, heightForRowAtIndexPath indexPath: NSIndexPath!) -> CGFloat {
        return 50
    }

// 行の高さ

func tableView(tableView: UITableView!, heightForRowAtIndexPath indexPath: NSIndexPath!) -> CGFloat {

return 50

}

やったー、テーブルに固定文字列を設定したラベルが表示されました。

「Xcode5&Objective-CでUITableViewでUINibを使ったカスタムセル(UITableViewCell)を利用する方法」では、xibにラベルを4つ配置して
その内の2つは動的な値を表示するようにしましたが、その部分は実際に手を動かして実装してみてください。

「Xcode6_Beta4&SwiftでUITableViewでUINibを使ったカスタムセル(UITableViewCell)を利用する方法」は以上です。

関連オススメ書籍

スポンサードリンク

Message コメントをキャンセル

PREV: ビッグデータ時代に不可欠な「Webスクレイピング」関連本「Rubyによるクローラー開発技法巡回・解析機能の実装と21の運用例」
NEXT: Xcode6からはProjectName-Prefix.pchは自動的に生成されませんが、それでもpchファイルを利用したい時の利用方法

Xcode6_Beta5&SwiftでUITableViewでUINibを使ったカスタムセル(UITableViewCell)を利用する方法

１プロジェクトの作成

２ UITableViewの配置とカスタムセルクラスの作成

UITableViewの配置

カスタムセルクラスの作成

３ UITableViewのセルにカスタムセルクラスを設定する

Table View Cellを配置し作成したカスタムセルクラスを指定する

Table View Cellの配置

カスタムセルクラスの設定

４ xibに固定のラベルを配置し、ViewControllerでカスタムセルを表示するように変更を実施する

xibに固定のラベルを配置

ViewControllerの変更

テーブルビューを制御するために必要なUITableViewDelegate、UITableViewDataSource両プロトコルの追加

viewDidLoadでtableViewのdelegateとdataSourceにselfをセット

viewDidLoadでtableViewにカスタムセル(CustomTableViewCell)を指定

セクションの行数とセルの内容を返却するデリゲートのメソッドを追加

1回目の実行

Googleアドセンス

Googleアドセンス

関連記事

Swift入門[公式リファレンスのチュートリアルのSteps2の後半]

Xcode6(xcode_6_beta_7、Xcode 6 GM seed)のインストール方法

Xcode6-Beta2でSwiftのユニットテスト(Unit Test)をXCTestフレームワークで試してみる。

iOS(Xcode6とSwift)におけるマルチスレッド処理の実装方法その1[NSThreadクラスの簡単な利用例]

Xcode6(Swift)のデリゲートとプロトコルの使い方

動画で英語を学習できるiOSの無料アプリCapTubeをリリースいたしました。

Xcode6とSwiftで画面コンポーネント(UIコンポーネント)を配置して利用するための基本

Xcode6の正式版がリリースされApp Storeからダウンロードしインストール可能になりました。

Xcode6-Beta3でSwiftでBDDを行うためにQuickを導入しようと思ったが、all-product-headers.yaml:4:13: error: Could not find closing ]!が発生する

Swift入門(Xcode6のXCTestフレームワークで学ぶ)　第一回「Swiftの概要」

Message コメントをキャンセル

NEW ENTRY

アーカイブ

カテゴリー

タグ