Swift

Swift:UITableViewCellをXIBファイルでカスタムセルにする


UITableViewCellをxibファイルでカスタムする方法をメモしていきます。

 

UITableViewCellをxibでカスタムするメリット

UITableViewCellをStoryboardで色々カスタムすることはできますが、

xibで個別に管理することで同じセルを使い回すことができるので便利です!

 

 

それではカスタムするまでの一連の流れをやっていきます!

 

プロジェクトを立ち上げます。

『TableViewCellApp』という名前にしました。

 

StoryBoardを開いて、

デフォルトで置いてあるUIViewControllerを消します。

そして、『UITableViewController』を置きます。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-12-07-16-09-42

 

 

そして、UITableViewControllerのセルに『customCell』と入力しましょう。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-12-07-16-40-41

 

 

 

StoryBoardを弄るのはこれであらかた完了です!

 

次に配置したUITableViewControllerに対応したファイルを作成しましょう。

『File』

『New』

『File』

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-12-07-16-10-07

 

 

そしたらこのような画面が出てくるかと思います。

『Cocoa Touch Class』を選択してください。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-12-07-16-10-23

 

 

その次は

ファイル名(クラス名)を決めます。

Classを『TableViewController』

SubClassを『UITableViewController』

に設定して、作成してください。

『TableViewController.swift』というファイルが増えて入れば成功です。

 

 

作成が完了したら、もう一度Storyboardに戻り、

今作成したTableViewController.swiftを対応させましょう。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-12-07-17-01-19

 

 

 

次は、今回の主役、UITableViewCellの登場です。

『File』

『New』

『File』

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-12-07-16-10-07

そしたらこのような画面が出てくるかと思います。

『Cocoa Touch Class』を選択してください。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-12-07-16-10-23

その次は

Class名『CustomTableViewCell』

SubClassは『UITableViewCell』にしましょう。

ここで注意しなければいけないところが『Also create XIB file』にチャックを入れることです。

ここにチェックを入れることでxibファイルを作成することができる。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-12-07-16-11-07

 

 

すると、

『CustomTableViewCell.swift』

『CustomTableViewCell.xib』の二つが作成されているはずです。

 

 

CustomTableViewCell.xibを開いてください。

すると、

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-12-07-16-11-43

このようなただのセルがあるはずです。

 

このセルに、

Identifierを設定します。『customCell』にしてください。

UIImgeViewをwidthが40、heightが40に設定していい感じのところに配置してください。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-12-07-16-16-04

そして、UIImageViewに画像設定してください。

どんな画像でも問題ありませんよ!

私は、この画像を設定しました。

BeautifulImage

 

 

ついでにセルにBackgroundを指定します。

色をつけた方がかっこいいですね!

こんな感じになって入れば成功です。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-12-07-23-27-54

 

 

そして、

次はコードを編集していきます。

『TableViewController.swift』を開いてください。

 

コードの解説

register(UINib(nibName: “CustomTableViewCell”, bundle: nil), forCellReuseIdentifier: “customCell”)

xibファイルでカスタムし、

それを使用できる状態(登録)するときに必須のメソッドです。

nibNameにはファイル名(クラス名)を設定します。

forCellReuseIdentifierにはCustomTableViewCell.xibで指定したIdentifierを設定します。

 

let cell = tableView.dequeueReusableCell(withIdentifier: “customCell”, for: indexPath) as! CustomTableViewCell

withIdentifierのにはCustomTableViewCell.xibで指定したIdentifierを設定します。

上記のregisterメソッドで指定したものを設定することが多いです。

 

as! CustomTableViewCellは実は今回必要ありませんが、よく使います。

CustomTableViewCell.swiftを色々編集している場合は使います。

 

 

 

UITableViewControllerの詳しい説明はこちら!

swift3:超初心者向け!UITableViewControllerの使い方(1)

 


コメント

コメントを残す

*