[チュートリアル] UITableViewControllerでショッピングカテゴリ画面を作る

■宣伝: Swift入門者がiOS開発の基礎を学べるクラッシュコースを作っています↓↓

☑️旅行アプリを「Travel」を作ろう

本記事で作成するもの

本記事では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です。

Main.storyboardをクリックして、

①Category Table View Controllerを選択する

②Identity Inspectorを選択する

③Classに、CategoryTableViewControllerと入力して、enterを押す

これで、

Main.storyboardにあるCategory Table View Controller画面と、CategoryTableViewController.swiftが紐ずけられました。

次に、カテゴリ名の配列を準備します。CategoryTableViewControllerに戻ります。

続いて、テーブルのセクションの数セルの数を決めましょう。

セルの数->カテゴリ名の数(14個)

セクション-> 1個

になります。

セルの数を、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)からセルを識別できるように、CategoryTableViewCellIDをつけておきます。※後で使います。


①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です。

テーブルにカテゴリを表示する

ここからはテーブルにカテゴリのテキストを表示する作業です。

ではやっていきましょう。

Manualをクリックして、AutomaticCategoryTableViewController.swiftをクリックします。

cellforrowat と入力すると、

青枠のメソッドが出てくるのでクリックします。

そして、以下のようにメソッド内を記述して下さい。

①でcellを作成(IDは”Category”でCateogryTableViewCellファイルを指定)

②CateogryTableViewCellにあるcategoryLabelのテキストに、categories配列(コンピュータや家電など)のデータを表示する

③最後に①で作成したcellをreturnで表示する

では確認しましょう!! シュミレータを起動します。

すると、

カテゴリ名が表示されています!

お疲れ様です!

ここまでできたので、残り少しです!

残りは、セクションヘッダーの作成です。

セクションヘッダーの作成

セクションヘッダーを作成していきましょう。

やることは3つです。

  • セクションヘッダーの高さを決める
  • セクションヘッダーの色とか調整する
  • セクションヘッダーのテキスト決める

セクションヘッダーの高さを決める

heightForHeaderInSection というメソッドを使います。

return 50高さの指定をしてます。

セクションヘッダーの色とか調整する

willDisplayHeaderView メソッドを使います。

1行目に定数header(ヘッダー)を作成して、

2行目でheaderのテキストの色をgray(グレイ)にしています。

セクションヘッダーのテキスト決める

titleForHeaderInSection メソッドを使います。

returnで セクションヘッダーに表示するテキストを、

“すべてのカテゴリ” にしています。

完成です!!

シュミレータを起動して確認して見ましょう。

完成です。お疲れ様でした!!

テーブルビューの他のチュートリアルも書いているので是非参考にしてみて下さい〜〜。

NoteにてiOSのチュートリアル開始しました

・ファッションアプリ「PoPoTown」を作ろう!

・旅行アプリを「Travel」を作ろう