2014年11月16日

Swift - tableview チュートリアル

Swift のチュートリアルシリーズをスタートします。

せっかくなので、ちょっとハードルを上げて、TableViewの実装から始めます。


Step1> 新規プロジェクトの作成



[File]メニュー[New] > [Project...] 、[Single View Application]を選びます。Project Nameとして、ここでは「SwiftTable"、Language として「Swift」を選択してプロジェクトを作成します。(図1)
new_sw_project.png
図1 新規Swiftプロジェクト

一通り生成されたファイルの見てみましょう。基本的な構成はObjective-Cと同じですが、Swiftにはヘッダー(.h)ファイルがありませんね。

Step2> table view プロパティーの追加


ViewController.swift を開きます。この内容もなんとなく馴染みはありますね。
ステイトメントの区切りとなる「;」がないのが、目に付きます。

UITableView のインスタンス変数を、クラス宣言の下に追加します。
@IBOutlet var tableView: UITableView!


Swift の変数宣言です。@IBOutletは、おなじみの、IBと連携するためのアトリビュートですね。変数は
var <変数名>: <変数型>

になります。慣れた言語とは逆の順番です。(どちらかというとUML記述の順番っぽい)
最後の「!」は Swift 特有の「Optional Value」と呼ばれる変数宣言です。初期化されていないのでデフォルトではnilが入るはずです。
これ、
「単純な変数宣言(非Optional Value宣言)はnilの代入を許さない」
という、Swiftの言語仕様から来るもので、nilの許可をする場合「?」「!」のどちらかをつけなければ、コンパイル時もしくは実行時にエラーとなります。
個人的には、これがSwiftのキモのような感じがしますので、機会を改めて詳しく説明したいと思います。
ここでは、「初期状態でnilを許可したい(IBの設定データと接続するまでは)」という思いを込めて「!」をつけます。今のうちはこんなもんだと思ってください。

Step3> UITableView のDelegateとDataSourceプロトコルへの準拠


ViewController をUITableViewDelegate and UITableViewDataSource準拠として宣言し、必要なメソッドの仮実装をします。
class ViewController: UIViewController, UITableViewDelegate, UITableViewDataSource {

...

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

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

func tableView(tableView: UITableView, didSelectRowAtIndexPath indexPath: NSIndexPath) {

}
}

メッソッドの書式も、なんとなく、わかりますね。文法関連はある意味「慣れ」です。

Step4> Storyboardに table view を追加


右下のオブジェクト・ライブラリーから table view をViewController のViewにドラッグして、サイズを調整します。

Step5> IBアウトレットの接続


tableview に必要なdatasource, delete, そして、tableview自体の参照をViewControllerに接続します。StoryboardのTable Viewで[control+click]して各アウトレットをViewControllerにドラッグして接続します。(図2)

アウトレット接続
図2 アウトレット接続

Step6> セルクラスの登録


viewDidLoadメソッド内で、テーブルセルとして利用するクラスを登録します。
class ViewController: UIViewController, UITableViewDelegate, UITableViewDataSource {
...

override func viewDidLoad() {
super.viewDidLoad()

self.tableView.registerClass(UITableViewCell.self, forCellReuseIdentifier: "MyCell")
}

...



クラスオブジェクトを取得するには UITableViewCell.self のように、クラス名にの後に.selfを付けます。

Step7> サンプルデータの登録


items というプロパティでサンプル表示用のデータを定義します。クラス宣言の下に以下のように記述します。
class ViewController: UIViewController, UITableViewDelegate, UITableViewDataSource {
var items: [String] = ["バナナ", "みかん", "りんご", "ブドウ"]
...

}


Step8> セルの行数を設定


対象メソッドを、以下のように、変更します。
class ViewController: UIViewController, UITableViewDelegate, UITableViewDataSource {

...

func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
return self.items.count;
}

...

}


Step8> セル情報の作成


対象メソッドを、以下のように、変更します。
class ViewController: UIViewController, UITableViewDelegate, UITableViewDataSource {

...

func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
var cell:UITableViewCell = self.tableView.dequeueReusableCellWithIdentifier("cell") as UITableViewCell

cell.textLabel.text = self.items[indexPath.row]

return cell
}

...

}


Step9> セル選択のハンドラー実装


対象メソッドを、以下のように、変更します。
class ViewController: UIViewController, UITableViewDelegate, UITableViewDataSource {

...

func tableView(tableView: UITableView, didSelectRowAtIndexPath indexPath: NSIndexPath) {
println("タップ:#\(indexPath.row)行")
}

...

}

ここで、もう一つの特徴的な機能、「文字列挿入(String Interpolation)」を使っています。上記書式で文字列の中にプログラムコードが入れられます。

コンパイル、実行してみてください。シミュレーターでは図3のようになります。

sw_table_in_simu.png
図3 実行画面



タグ:ios8 Swift xcode5 IB
posted by ayagu at 13:02| Comment(0) | iOS | このブログの読者になる | 更新情報をチェックする
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

×

この広告は1年以上新しい記事の投稿がないブログに表示されております。