【2024年11月】弊社では副業案件希望の方を募集しております。<例>土日稼働可等。 詳細はこちら

【Swift】xibファイルを用いてテーブルリストのセル(UITableViewCell)をカスタムする方法:Xcode15

【Swift】xibファイルを用いてテーブルリストのセル(UITableViewCell)をカスタムする方法:Xcode15
ふくしま

こんにちは!株式会社メモリアインクのふくしまです。
本日は、TableViewのセルをカスタマイズする方法について学んでいきましょう!

この記事を読んで分かること…
・xibファイルとは?
・カスタムセルの実装方法

この記事は前回作ったアプリを元に解説します。
分からないところが有れば、以下の記事をご参考ください!

目次

環境

Xcode 15
Swift 5.9

Xib(ジブ)ファイルとは?

SwiftでのXIBファイルは、iOSアプリケーションにおけるユーザーインターフェースを構築するために使用されます。
意味としては、Storyboardと変わりありませんが、利用シーンが異なってきます。

Storyboardは1ファイルにつき、多数のViewControllerクラスを持つことが出来、複数の画面を実装できるのに対して、Xibファイルの特徴としてはファイル1つにつき、ViewController(UI)クラスが一つであるのが特徴です。
この特徴により、画面の遷移は実装することが出来ない(他のViewControllerクラスで実装が必要)一方で、ファイルが独立して存在することで、1つのコンポーネントとして再利用しやすくすることがXibファイルを使うことのメリットと言えるでしょう。

カスタムセルの実装方法

今回は、前回実装した「簡単な英単語帳」のセルをカスタムして、英単語の下に発音記号を入れてみたいと思います!
最終成果物の目標は以下です!

【iOS】Swiftでxibを用いたUITableViewCell(カスタムセル)の実装方法:Xcode15

前提

TableViewとセルタップ時の遷移先の2画面を実装したMainStoryboard(ファイル名は任意)と各画面のViewControllerが実装されていること。
こちらで実装と解説をしているのでご確認ください。

【iOS】Swiftでxibを用いたUITableViewCell(カスタムセル)の実装方法:Xcode15

▲TableViewオブジェクトの上に配置したCellは、今回xibファイルで作るので削除しておきましょう

Step1:Xibファイルとそれに対応するViewControllerクラスを実装する

FileNewFile

【iOS】Swiftでxibを用いたUITableViewCell(カスタムセル)の実装方法:Xcode15

CocoaTouchClass を選択して、Next ボタンタップ

【iOS】Swiftでxibを用いたUITableViewCell(カスタムセル)の実装方法:Xcode15

③ クラス名(EnglishVocablaryaTableViewCell)をつける→Subclass(UITableViewCell)を選択→「Also Create XIB file」にチェックをつける(ViewControllerに紐づくXIBファイルが生成されます)→4.Next ボタンタップ

【iOS】Swiftでxibを用いたUITableViewCell(カスタムセル)の実装方法:Xcode15

④ファイルを保存する場所を指定する。

【iOS】Swiftでxibを用いたUITableViewCell(カスタムセル)の実装方法:Xcode15

⑤以下のファイルが生成されていればOKです!

【iOS】Swiftでxibを用いたUITableViewCell(カスタムセル)の実装方法:Xcode15

Step2:XIBファイルの作成

①UIコンポーネントを以下のように配置(配置方法はこちらの記事を参考にしてください)

【iOS】Swiftでxibを用いたUITableViewCell(カスタムセル)の実装方法:Xcode15

②配置したUIコンポーネント(今回UILabelを2つ)をViewController(Cellを選択して、CommandOptionControllerEnter でXIBファイルに対応するファイルを開けます)に紐付ける

【iOS】Swiftでxibを用いたUITableViewCell(カスタムセル)の実装方法:Xcode15

④カスタムセルのIdentifierをつける(任意でOK!)

【iOS】Swiftでxibを用いたUITableViewCell(カスタムセル)の実装方法:Xcode15

⑤表示崩れしないようにオートレイアウトを設定する(オートレイアウトは各自自由に設定してください)
※オートレイアウトについては、別途記事で解説します

【iOS】Swiftでxibを用いたUITableViewCell(カスタムセル)の実装方法:Xcode15
ふくしま

以上で「カスタムセル」の外観の実装は完了です!
あとは、このカスタムセルを使って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エンジニアを目指すなら【ユニゾンキャリア】
をオススメします!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

コメント

コメント一覧 (1件)

コメントする

目次