iOSアプリを作成していると、カスタムTableViewを実装する必要に迫られる場面に出くわすと思います。
カスタムTableViewの実装方法には何種類かありますが、最も気軽に実装できるのはStoryboardを使った方法でしょう。
忘備録がてらまとめてみます。
完成図： ↓これを作っていきます。
1. TableViewを配置し、Cellを配置する
①StoryboardにtableViewを配置し、画面いっぱいに広げます。
②tableView上にtableViewCellを配置します。
③tableViewCellにIdentifierを設定します。
右ペインの右から３番目”Show the Attributes inspector”を開きIdentifierを設定します。ここでは"customCell"という名前にしました（名付け方は自由ですが、後から使うのでわかりやすい名前がいいです）。
④CellにUI部品を設置します。
ここではImageViewとLabel二つを設置しました。ImageViewとLabelに適当に制約をつけてください。
2. CustomCellクラスを作成し、CellのUI部品を紐付ける
customCellのUI部品をtableViewと紐付けるために、CustomCellクラスを作成します。
ここがStoryboardを利用した時に特有の部分です。詳しく説明していきますよ。
①ルートフォルダをダブルクリックしてNewFileをクリックします。
②CocoaTouchクラスを選択して、UITableViewCellをサブクラスとしたクラスを作成します。
ここでは"CustomCell"という名前にしました。
③customCellのクラスとしてCustomCellを設定します。
Mainに戻りcustomCellをクリックします。右ペインで”Show the Attributes inspector”を開きCustom Classを設定します。②でUITableViewCellをサブクラスとしたCustomCellクラスを作れていれば、自動的に出てくるはずです。
④UI部品をCustomCellに紐付けます。
Assistantを開きます。③でCustomCellを設定できていれば、ココにCustomCell.swiftが出てくるはずです。
そしてこのCustomCellに対して、imageViewとLabelをcontrolドラッグして紐づけます。
ここでは、icon、labelTitle、labelContentという名前にしました。
3. TableViewでdataSourceとdelegateを継承し、customCellクラスにデータを渡す
最後にViewControllerでCustomCellにデータを渡していきます。
①TableViewのdataSourceとdelegateを紐づけます。
tableViewからViewController（Main画面にある黄色の円と白色の四角で囲まれたもの）に向けてcontrolキーを押しながらドラッグ＆ドロップします。
②UITableViewDataSourceとUITableViewDelegateを継承します。
③fixが出てくるのでクリックします。
④継承したtableView(numberOfRowsInSection)関数、tableView(cellForRowAt)関数をcodingします。
なお、アイコン画像については、ドラッグ＆ドロップでassetsに入れました。
class ViewController: UIViewController, UITableViewDelegate, UITableViewDataSource {
let icons = ["iwashi", "sake", "fugu", "tai", "hotate"]
let titles = ["イワシ", "サケ", "フグ", "タイ", "ホタテ"]
let contents = ["Sardine", "Salmon", "Pufferfish", "Red Seabream", "Scallop"]
//cellの数を設定
func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
return icons.count
}
//cellの内容を設定
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
//CustomCellクラス型のcustomCellというIdentifierを持ったcellを利用する
let cell = tableView.dequeueReusableCell(withIdentifier: "customCell") as? CustomCell
cell!.icon.image = UIImage(named: icons[indexPath.row])
cell!.labelTitle.text = titles[indexPath.row]
cell!.labelContent.text = contents[indexPath.row]
return cell!
}
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view.
}
}
お疲れ様でした〜〜。
不明点・改善点などがありましたらコメントください〜〜。
※アイコンはイラストACを利用させていただきました。