こんにちは!株式会社メモリアインクのふくしまです。
本日は、TableViewのセルをカスタマイズする方法について学んでいきましょう!
この記事を読んで分かること…
・xibファイルとは?
・カスタムセルの実装方法
この記事は前回作ったアプリを元に解説します。
分からないところが有れば、以下の記事をご参考ください!
環境
Xcode 15
Swift 5.9
Xib(ジブ)ファイルとは?
SwiftでのXIBファイルは、iOSアプリケーションにおけるユーザーインターフェースを構築するために使用されます。
意味としては、Storyboardと変わりありませんが、利用シーンが異なってきます。
Storyboardは1ファイルにつき、多数のViewControllerクラスを持つことが出来、複数の画面を実装できるのに対して、Xibファイルの特徴としてはファイル1つにつき、ViewController(UI)クラスが一つであるのが特徴です。
この特徴により、画面の遷移は実装することが出来ない(他のViewControllerクラスで実装が必要)一方で、ファイルが独立して存在することで、1つのコンポーネントとして再利用しやすくすることがXibファイルを使うことのメリットと言えるでしょう。
カスタムセルの実装方法
今回は、前回実装した「簡単な英単語帳」のセルをカスタムして、英単語の下に発音記号を入れてみたいと思います!
最終成果物の目標は以下です!
前提
TableViewとセルタップ時の遷移先の2画面を実装したMainStoryboard(ファイル名は任意)と各画面のViewControllerが実装されていること。
こちらで実装と解説をしているのでご確認ください。
▲TableViewオブジェクトの上に配置したCellは、今回xibファイルで作るので削除しておきましょう
Step1:Xibファイルとそれに対応するViewControllerクラスを実装する
①File
→New
→File
②CocoaTouchClass
を選択して、Next
ボタンタップ
③ クラス名(EnglishVocablaryaTableViewCell)をつける→Subclass(UITableViewCell)を選択→「Also Create XIB file」にチェックをつける(ViewControllerに紐づくXIBファイルが生成されます)→4.Next
ボタンタップ
④ファイルを保存する場所を指定する。
⑤以下のファイルが生成されていればOKです!
Step2:XIBファイルの作成
①UIコンポーネントを以下のように配置(配置方法はこちらの記事を参考にしてください)
②配置したUIコンポーネント(今回UILabelを2つ)をViewController(Cellを選択して、Command
+Option
+Controller
+Enter
でXIBファイルに対応するファイルを開けます)に紐付ける
④カスタムセルのIdentifierをつける(任意でOK!)
⑤表示崩れしないようにオートレイアウトを設定する(オートレイアウトは各自自由に設定してください)
※オートレイアウトについては、別途記事で解説します
以上で「カスタムセル」の外観の実装は完了です!
あとは、このカスタムセルを使ってTableViewのセルとして使えるようにしましょう!
Step3:カスタムセルを利用する
①データを扱う為のモデルを作成(直接カスタムURLには関係しないので説明を割愛します)
import Foundation
class English: NSObject {
var englishVocablary: String
var englishPronunciation: String
init(vocabraly: String, pronunciation: String) {
self.englishVocablary = vocabraly as String
self.englishPronunciation = pronunciation as String
}
}
▲English Model
②registerメソッドで今回作ったカスタムセルをTableViewで使うセルとして登録する。
import UIKit
class ViewController: UIViewController, UITableViewDelegate, UITableViewDataSource {
@IBOutlet weak var tableView: UITableView!
var englishArray: [English] = [English]()
override func viewDidLoad() {
super.viewDidLoad()
setupTableView()
setupEnglish()
}
func setupTableView() {
tableView.delegate = self
tableView.dataSource = self
// registerメソッドでxibをidentifierとして設定する
tableView.register(UINib(nibName: "EnglishVocablaryaTableViewCell", bundle: nil), forCellReuseIdentifier: "englishVocablaryaCell")
}
func setupEnglish() {
englishArray = [English(vocabraly: "anarchy", pronunciation: "anərkē"), English(vocabraly: "catharsis", pronunciation: "kəˈTHärsəs"), English(vocabraly: "eden", pronunciation: "iːdən")]
}
func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
return englishArray.count
}
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCell(withIdentifier: "englishVocablaryaCell", for: indexPath) as! EnglishVocablaryaTableViewCell
print(englishArray[indexPath.row])
cell.setCell(english: englishArray[indexPath.row])
return cell
}
func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
let cell = tableView.dequeueReusableCell(withIdentifier: "englishVocablaryaCell", for: indexPath) as! EnglishVocablaryaTableViewCell
cell.setCell(english: englishArray[indexPath.row])
let nextView = self.storyboard?.instantiateViewController(withIdentifier: "japaneseTranslation") as! JapaneseTranslationViewController
nextView.japaneseText = cell.vocablary!.text
self.navigationController?.pushViewController(nextView, animated: true)
}
}
▲ViewController
該当コードは19行目の以下のコードです
tableView.register(UINib(nibName: "EnglishVocablaryaTableViewCell", bundle: nil), forCellReuseIdentifier: "englishVocablaryaCell")
nibNameにXIBファイルの名前、forCellReuseIdentifierに設定したcellのIdentifireを設定します。
③以下はカスタムセルに対応するViewControllerの全体像です
import UIKit
class EnglishVocablaryaTableViewCell: UITableViewCell {
@IBOutlet weak var vocablary: UILabel!
@IBOutlet weak var pronunciation: UILabel!
override func awakeFromNib() {
super.awakeFromNib()
// Initialization code
}
func setCell(english: English) {
print(english)
self.vocablary.text = english.englishVocablary as String
self.pronunciation.text = english.englishPronunciation as String
}
override func setSelected(_ selected: Bool, animated: Bool) {
super.setSelected(selected, animated: animated)
// Configure the view for the selected state
}
}
▲EnglishVocablaryaTableViewCell
14行目のsetCell(english: English)
メソッドは、ViewController
クラスのデリゲートメソッド内で呼び出して、tableViewがレンダリングされる際にセルに対応したデータをプロパティにセットするためのメソッドを作成しています。
以上で全て実装は完了です!
お疲れ様でした!
実行して、完成形を確認してみましょう〜
まとめ
いかがだったでしょうか?
XIBファイルを使うことで、今回例として作ったカスタムセルに限らず、いろんなコンポーネントとしてパーツを作ることができるようになり、開発の応用の幅が広がりますので、この機会に練習してみましょう!!
この記事があなたのスキルアップに役立ったなら、次のキャリアステップを踏み出す絶好の機会かもしれません。エンジニアとしてのさらなる成長と挑戦を求めるなら、
未経験からIT・Webエンジニアを目指すなら【ユニゾンキャリア】
コメント
コメント一覧 (1件)
[…] 逆に、セルを自由にカスタムする方法(カスタムセル)についてはこの記事では触れていないので、こちらの記事をご参照ください!では早速、超簡易的な英単語帳アプリを作成しつつ、UITableViewについて学んでいきましょう! […]