TableViewを追加します。

Main.storyboardを開いて+ボタンをクリック、TableViewをドラッグアンドドロップでViewに設置します。

View内にTableViewが追加されました。


設置したら枠の部分をドラッグして画面いっぱいにTableViewを広げます。

枠いっぱいの部分で点線が表示されるのでその位置で合わせます。

枠いっぱいに広げた後、Viewに設置して上下左右に制約を設定しています。

AutoLayoutの制約の説明については今回は省きます。


以上でTableViewの設置は完了です。続いてカスタムセル作成用のファイルを作成します。

次にカスタムセルを作成します。

プロジェクトフォルダで右クリック→New File...をクリック


Class名は[CustomCell]としました。

Also create XIB fileにチェックを入れてファイルを作成します。

こちらにチェックを入れることでセルのswiftファイルとレイアウト用のxibファイルが一緒に作成されます。

Nextをクリックしてファイルを作成します。

先ほど作成したカスタムセルのレイアウトファイル[CustomCell.xib]でセルのデザインをカスタマイズします。

UIパーツの設置

ImageView、Labelの2つをカスタムセルに配置します。

TableViewを作成したときと同様に+ボタンから検索します。

今回は以下のようにレイアウトしました。

レイアウトを作り終わったらコードの方に紐付け(Outlet)をします。

Outletを設定

CustomCell.swiftにImageViewとLabelのOutletを設定します。

レイアウトからコードに向かって右クリックドラッグアンドドロップします。

ImageViewとLabelにそれぞれsampleImageView,sampleLabelと名前をつけました。

これでセル内のuiパーツにアクセスできるようになりました。


TableViewに画像とラベルを設定して表示する

ViewController.swiftに戻り、UITableViewDelegate, UITableViewDataSourceを継承させます。

継承後に赤いボタンが表示されますのでクリックしてください。

クリックするコードが自動生成されて以下のようになります。

delegateとdataSourceの設定を忘れないでください。ViewControllerのコード全体は以下のようになりました。

class ViewController: UIViewController, UITableViewDelegate, UITableViewDataSource {
    
    @IBOutlet weak var sampleTableView: UITableView!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        self.sampleTableView.delegate = self
        self.sampleTableView.dataSource = self
        self.sampleTableView.register(UINib(nibName: "CustomCell", bundle: nil), forCellReuseIdentifier: "customCell")
    }
    
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return 10
    }
    
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "customCell", for: indexPath as IndexPath) as! CustomCell
        cell.sampleLabel.text = "テスト\(indexPath.row)"
        cell.sampleImageView.image = UIImage(named: "icon")
        
        return cell
    }
}

角丸を設定

cell.contentView.layer.cornerRadius = 10

セルの背景色の設定

cell.contentView.layer.backgroundColor = UIColor.white.cgColor

区切り線(下線)を消したい場合

セル同士の隙間を作るアイディア

func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
	let cell = self.sampleTableView.cellForRow(at: indexPath) as! CustomCell
	print(cell.sampleLabel.text)
 }