【iOS開発】角丸のUITableView（テーブルビュー）を作成する方法を徹底解説

はじめに

Table View（テーブルビュー）は、iOSアプリケーションにおいて最も重要かつ基本的なUIコンポーネントの一つです。すべてのiOS開発者が確実に習得しておくべき要素だと言えるでしょう。

App Storeで配信されているほとんどのアプリが、何らかの形でテーブルビューを活用しています。

iOSのテーブルビューは、垂直方向にスクロール可能な単一カラムのコンテンツを行単位で表示する仕組みです。テーブルの各行には、アプリのコンテンツが1項目ずつ格納されます。たとえば「連絡先」アプリでは、各連絡先の名前が個別の行として表示され、「設定」アプリのトップ画面では、利用可能な設定グループが一覧形式で並んでいます。

テーブルビューの詳細については、Apple公式ドキュメントもあわせて参照してください。
https://developer.apple.com/documentation/uikit/uitableview

本記事では、このテーブルビューの「角を丸くする（角丸にする）」実装方法を、手順を追ってわかりやすく解説していきます。それでは始めましょう。

手順1：新規プロジェクトを作成する

Xcodeを起動し、「New Project」→「Single View Application」を選択します。プロジェクト名は「TableViewWithRoundedCorner」としましょう。

手順2：UITableViewを配置する

Main.storyboardを開き、以下の画像を参考にUITableViewを画面に配置します。

手順3：IBOutletを接続する

ViewController.swift上で、Main.storyboardに配置したtableViewとの@IBOutletを作成し、変数名を「tableView」に設定します。

手順4：delegateとdataSourceを設定する

引き続きViewController.swiftのviewDidLoadメソッド内で、tableViewに対してdelegateとdataSourceを以下のように設定します。

@IBOutlet var tableView: UITableView!
override func viewDidLoad() {
    super.viewDidLoad()
    tableView.delegate = self
    tableView.dataSource = self
}

手順5：背景色・プロトタイプセル・カスタムセルを用意する

再びMain.storyboardを開き、ViewControllerの背景色を変更します。続いてプロトタイプセルを追加し、その中にUILabelを配置してください。

次に、UITableViewCellを継承した新しいSwiftファイルを作成し、ストーリーボード上のセルに関連付けます。

その後、ViewController.swiftを開き、DataSource／Delegateプロトコルに準拠させて、必要なデリゲートメソッドを実装します。

extension ViewController: UITableViewDataSource, UITableViewDelegate {
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return 2
    }
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell: UITableViewCell = tableView.dequeueReusableCell(withIdentifier: "cell", for: indexPath) as! TableViewCell
        return cell
    }
    func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
        return 80
    }
}

手順6：角丸を適用する

ここで一度プロジェクトを実行してみましょう。ただし、この段階ではテーブルビューの角はまだ丸くなっていません。角丸を実現するために、viewDidLoadメソッドに以下のコードを追加します。

tableView.layer.cornerRadius = 10 // ここで角丸の半径を指定
tableView.layer.backgroundColor = UIColor.cyan.cgColor

ポイントはcornerRadiusの値です。数値を大きくするほど角の丸みが強くなりますので、デザインに合わせて調整してください。

完成版コード一式

最後に、ここまでの内容をまとめた完成版のコード全体を示します。

import UIKit
class ViewController: UIViewController {
    @IBOutlet var tableView: UITableView!
    override func viewDidLoad() {
        super.viewDidLoad()
        tableView.delegate = self
        tableView.dataSource = self
        tableView.layer.cornerRadius = 10 // ここで角丸の半径を指定
        tableView.layer.backgroundColor = UIColor.cyan.cgColor
    }
}
extension ViewController: UITableViewDataSource, UITableViewDelegate {
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return 2
    }
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell: UITableViewCell = tableView.dequeueReusableCell(withIdentifier: "cell", for: indexPath) as! TableViewCell
        return cell
    }
    func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
        return 80
    }
}