Plain Experience – 面白い商品・サービスを紹介するブログです 
■宣伝: Swift入門者がiOS開発の基礎を学べるクラッシュコースを作っています↓↓
本記事で作成するもの
本記事ではUITableViewControllerを使って、以下のような画面を作成します。
なお環境は以下の通りです。
- Xcode: 10.2
- Swift: 5.0
- シュミレーター iPhone XR
想定読者
本チュートリアルの想定読者は以下のような感じです。
- ProgateやドットインストールでSwiftを勉強して、iPhoneアプリの基礎を勉強してみたい方
- UITableViewControllerの基礎的な使い方を知りたい方
Xcodeのインストールがまだの方は、Xcode をインストールする の記事を参考にインストールしてみて下さい。
でははじめていきましょう。
プロジェクトの作成
Xcodeを開いてプロジェクトを作成しましょう。
プロジェクトの作成と一緒に作成されるViewControllerは使わないので、deleteボタンで消します。
次にTableViewControllerを準備します。
矢印の先のボタンをタップして、TableViewControllerと打って、
ドラックアンドドロップで画面におきます。
次に、
①黄色のボタンをタップして
② Is Initial View Contrtollerにチェックを入れます。
これで、アプリ起動時に、この画面を最初に出すことができます。
カテゴリ名をテーブル(UITableViewController)に表示する
このパートでは、コンピュータ、家電などカテゴリ名をTableViewControllerに表示していきます。
まずテーブルのセルの高さを60に設定します。
①Table Viewをクリックします
②矢印の先のボタンをクリックします
③Row Height(セルの高さ)を60と入力してクリックします
テーブルのセルにカテゴリ名のラベル(Label)をつける
コンピュータや家電などのテキストを表示するためにラベルを用意します。
①矢印の先のボタンをクリック
②Labelとうつ
③Labelをドラッグ&ドロップでセルに置く
レイアウトの制約をつけます。(ここは飛ばしても大丈夫です)
iPhoneのサイズは機種によって違っていて、何もルールを付けないと、全ての機種で上手く表示することはできません。
そこでAutoLayoutを使います。
①矢印の先のボタンをクリック
②下線の引いてある、上下左右全てに8を入力する
③Add 4 Constraintsをクリック
これでルール付けは完成です。
Labelとセルまでの距離をどの機種でも8ピクセルになるように設定しています。下の画像を見て下さい。
ラベルの外側にセルがあって、ラベルの上下左右それぞれセルまで8ピクセルとるように設定しています。
UITableViewControllerファイルの作成
ここまでで画面の準備ができたので、次は、コードを書いていきます。
UITableViewControllerファイルを作成します。
File -> New -> File
Cocoa Touch Class -> Next
Class -> CategoryTableViewController
Subclass of -> UITableViewController
Nextを押します。
最後にCreateを押します。
できたファイルのコメント欄はいらないので全て消してOKです。
こんな感じになればOKです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
import UIKit class CategoryTableViewController: UITableViewController { override func viewDidLoad() { super.viewDidLoad() } override func numberOfSections(in tableView: UITableView) -> Int { return 0 } override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int { return 0 } } |
Main.storyboardをクリックして、
①Category Table View Controllerを選択する
②Identity Inspectorを選択する
③Classに、CategoryTableViewControllerと入力して、enterを押す
これで、
Main.storyboardにあるCategory Table View Controller画面と、CategoryTableViewController.swiftが紐ずけられました。
次に、カテゴリ名の配列を準備します。CategoryTableViewControllerに戻ります。
|
1 |
let categories = ["コンピュータ","家電","音楽","本、雑誌","映画","おもちゃ","ゲーム","スポーツ","レジャー","ファッション","自転車","バイク","車"] |
続いて、テーブルのセクションの数とセルの数を決めましょう。
セルの数->カテゴリ名の数(14個)
セクション-> 1個
になります。
|
1 2 3 4 5 6 7 |
override func numberOfSections(in tableView: UITableView) -> Int { return 1 } override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int { return categories.count } |
セルの数を、categories.countで、categories配列の要素の数に指定します。
セクションの数はreturn 1でひとつに設定します。
セルの設定ファイルを作成する
- File -> New -> File->
- Cocoa Touch Class->
- class: CategoryTableViewCell
- Subclass of: UITableViewCell
- Next->Create
これでセル設定用のファイル作成完了です。
次にカテゴリ表示用のラベルをこのファイルに繋ぎます。
Main.storyboardをクリックして、
TableViewCellを選択クリックして、
①矢印の先のIdentity Inspectorをクリック
②Classに、CategoryTableViewCell と入力して、enterを押す
これで、セルファイル(CategoryTableViewCell)とTableViewController画面がくっつきました。
ソースコード(CategoryTableViewController.swift)からセルを識別できるように、CategoryTableViewCellにIDをつけておきます。※後で使います。
①Category Table View Cellをクリック
②Identity Inspectorをクリック
③Identifierに、Categoryを入力してenter押す
セルファイル(CategoryTableViewCell.swift)にLabelをつなげる
セルファイルにカテゴリ表示用のラベルをつなぎます。
①黄色のボタンをクリック
②Assistant Editorをクリック
Automaticをクリック、
Manual -> TvcApp(プロジェクト名)->TvcApp(プロジェクト名)->CategoryTableViewCellをクリック
画面にある、Labelをドラッグ&ドロップで、CaetgoryTableViewCellに持ってきます。
Connection -> Outlet
Name -> categoryLabel
でConnectをクリックで繋げます。
こんな感じになればOKです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
import UIKit class CategoryTableViewCell: UITableViewCell { @IBOutlet weak var categoryLabel: UILabel! override func awakeFromNib() { super.awakeFromNib() // Initialization code } override func setSelected(_ selected: Bool, animated: Bool) { super.setSelected(selected, animated: animated) // Configure the view for the selected state } } |
テーブルにカテゴリを表示する
ここからはテーブルにカテゴリのテキストを表示する作業です。
ではやっていきましょう。
Manualをクリックして、Automatic→CategoryTableViewController.swiftをクリックします。
cellforrowat と入力すると、
青枠のメソッドが出てくるのでクリックします。
そして、以下のようにメソッド内を記述して下さい。
|
1 2 3 4 5 6 7 8 9 10 11 |
override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell { //① let cell = tableView.dequeueReusableCell(withIdentifier: "Category", for: indexPath) as! CategoryTableViewCell //② cell.categoryLabel.text = categories[indexPath.row] //③ return cell } |
①でcellを作成(IDは”Category”でCateogryTableViewCellファイルを指定)
②CateogryTableViewCellにあるcategoryLabelのテキストに、categories配列(コンピュータや家電など)のデータを表示する
③最後に①で作成したcellをreturnで表示する
では確認しましょう！！ シュミレータを起動します。
すると、
カテゴリ名が表示されています！
お疲れ様です！
ここまでできたので、残り少しです！
残りは、セクションヘッダーの作成です。
セクションヘッダーの作成
セクションヘッダーを作成していきましょう。
やることは3つです。
- セクションヘッダーの高さを決める
- セクションヘッダーの色とか調整する
- セクションヘッダーのテキスト決める
セクションヘッダーの高さを決める
heightForHeaderInSection というメソッドを使います。
return 50で高さの指定をしてます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
import UIKit class CategoryTableViewController: UITableViewController { let categories = ["コンピュータ","家電","音楽","本、雑誌","映画","おもちゃ","ゲーム","スポーツ","レジャー","ファッション","自転車","バイク","車"] override func viewDidLoad() { super.viewDidLoad() } override func numberOfSections(in tableView: UITableView) -> Int { return 1 } override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int { return categories.count } override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell { //① let cell = tableView.dequeueReusableCell(withIdentifier: "Category", for: indexPath) as! CategoryTableViewCell //② cell.categoryLabel.text = categories[indexPath.row] //③ return cell } override func tableView(_ tableView: UITableView, heightForHeaderInSection section: Int) -> CGFloat { return 50 //セクションヘッダーの高さを50に設定 } } |
セクションヘッダーの色とか調整する
willDisplayHeaderView メソッドを使います。
1行目に定数header(ヘッダー)を作成して、
2行目でheaderのテキストの色をgray(グレイ)にしています。
|
1 2 3 4 |
override func tableView(_ tableView: UITableView, willDisplayHeaderView view: UIView, forSection section: Int) { let header = view as! UITableViewHeaderFooterView header.textLabel?.textColor = UIColor.gray } |
セクションヘッダーのテキスト決める
titleForHeaderInSection メソッドを使います。
returnで セクションヘッダーに表示するテキストを、
“すべてのカテゴリ” にしています。
|
1 2 3 |
override func tableView(_ tableView: UITableView, titleForHeaderInSection section: Int) -> String? { return "すべてのカテゴリ" } |
完成です！！
シュミレータを起動して確認して見ましょう。
完成です。お疲れ様でした！！
テーブルビューの他のチュートリアルも書いているので是非参考にしてみて下さい〜〜。
NoteにてiOSのチュートリアル開始しました
