Help us understand the problem. What is going on with this article?

Swift カスタムセルを再利用したtableViewの作り方 [初級向け]

More than 1 year has passed since last update.

スクリーンショット 2018-06-03 16.41.18.png

🍀まえがき

■書いてあること

xcodeにて、再利用するカスタムセルをxibファイルで別に作って、TableViewに呼び出す方法

■下記の症状に効能があります

  • カスタムセルを手軽に、簡単に使えるようになりたい
  • カスタムセルの作り方について、調べたけど、中級以上のレベル感の記事しかなくて理解できない
  • 何を言ってるのかチンプンカンプンだからもっとレベル下げて欲しい

■この記事の特徴

初心者でも内容が分かりやすいようになってます。
特に、英語で命名するのがセオリーですが、あえて全部日本語にしてます(それでも動きます)
xcode 9.4 swift 4.1

■過去の関連記事

SwiftでTableViewを使ってみよう
https://qiita.com/TD3P/items/cafa8e20029047993025

Swiftで簡単なTODOアプリを作ってみよう
https://qiita.com/TD3P/items/8f474358d1dd789557f3

■主な流れ

  1. 表示させたいセルのテンプレート的な物のレイアウトを作る(セルの中身だけ的なもの)
  2. セルのテンプレート用のクラスを作る
  3. ストーリーボードで簡単なメイン画面の設定
  4. メイン画面のコントローラーの編集
  5. 完成

■完成品を先にどうぞ

セル用のクラス.swift
//  カスタムセルクラス.swift
import UIKit
class カスタムセルクラス: UITableViewCell {
  @IBOutlet weak var 画像: UIImageView!
  @IBOutlet weak var ラベル: UILabel!

  func セルに表示するデータの制御(選択数はこれを使う: IndexPath){
    self.ラベル.text = String((選択数はこれを使う.row)+1)
    self.画像.image = UIImage(named: "1.jpg")
  }
}
ViewController.swift
//  ViewController.swift
import UIKit

class ViewController: UIViewController , UITableViewDelegate , UITableViewDataSource {

  @IBOutlet weak var マイテーブル: UITableView!

  override func viewDidLoad() {
    マイテーブル.register (UINib(nibName: "カスタムセルクラス", bundle: nil),forCellReuseIdentifier:"再利用セル")
  }

  func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
    return 10
  }

  func tableView(_ tableView: UITableView, cellForRowAt 何個セル出すの: IndexPath) -> UITableViewCell {
    let 表示するセルの内容 = tableView.dequeueReusableCell(withIdentifier: "再利用セル", for: 何個セル出すの) as! カスタムセルクラス
    表示するセルの内容.セルに表示するデータの制御 ( 選択数はこれを使う : 何個セル出すの )
    return 表示するセルの内容
  }
}

💡詳細手順

1️⃣下ごしらえ

  • シングルページでプロジェクトを立てる
  • 表示するサンプル画像を追加する
  • カスタムセル用に新規のファイルを作成する

□シングルページでプロジェクトを立てる

  • プロジェクト名は適当でok

スクリーンショット 2018-06-03 15.01.39.png

□表示するサンプル画像を追加する

  • プロジェクトを作成したら、プロジェクトフォルダ直下に、使用したい画像をD&Dしましょう
  • 今回は可愛い子猫ちゃんで癒されましょう(о´∀`о)
  • 名前は取り込みをしてから変更してもokですが、先に変えてから入れちゃいましょう
  • copy items if neededにチェックを入れておくとプロジェクト内にコピーデータを作成してくれます

スクリーンショット 2018-06-03 15.04.45.png

スクリーンショット 2018-06-03 15.04.57.png

スクリーンショット 2018-06-03 15.05.05.png

□カスタムセル用に新規のファイルを作成する

  • cocoatouchで新規ファイルを作成します
  • ポイントは Also create XIB file にチェックを入れることです
  • 新規のswiftファイルとxibファイルができたらokです

スクリーンショット 2018-06-03 15.10.44.png

スクリーンショット 2018-06-03 15.11.03.png

💡つまづきポイント:xibファイルってそもそもなんやねん
いわゆるストーリーボード用のファイルのことです
xibファイルを作成すると、自動的にnibファイルができます
xibファイルは単体のファイル
nibファイルはxibを含めた複数のファイルからなるパッケージと覚えておきましょう
http://mtntmyk.hatenablog.com/entry/2017/10/31/210049


2️⃣カスタムセルを作っていく

□カスタムセルクラス.xibを設定していく

  • カスタムセルクラス.xibを開く
  • 外枠のサイズをW375*H100にする(iphone8を想定)
  • 画像のオプションで下記の2つを忘れずに設定
    • ContentsMode→AspectFill
    • Drawing→ClipToBounds

スクリーンショット 2018-06-03 15.20.40.png

スクリーンショット 2018-06-03 16.37.27.png

  • ラベルと画像をこんな感じに配置する
  • (テキストは分かりやすく、赤文字&サイズ大きめにしてありますが、しなくてもokです)
  • (オートレイアウトは今回は省略します)

スクリーンショット 2018-06-03 15.23.21.png

□カスタムセルクラス.swiftを設定していく

  • プロジェクト名を日本語にしたせいか、初期クラス名が変な感じになってるので、直しましょう
  • デフォルトで入っているファンクションも今回はいらないので、削除しちゃいます

スクリーンショット 2018-06-03 15.27.39.png

スクリーンショット 2018-06-03 15.28.42.png

  • 先ほど設置した、ラベルと画像をみょいんと紐付けます

スクリーンショット 2018-06-03 15.33.17.png

  • さらにこんな感じで追記します
  • 今回は、「何番目に表示されたセルか」という番号をラベルに表示させて行きます
カスタムセルクラス.swift
func セルに表示するデータの制御(選択数はこれを使う: IndexPath){
  self.ラベル.text = String((選択数はこれを使う.row)+1)
  self.画像.image = UIImage(named: "1.jpg")
}

□カスタムセルクラス.xibのクラス指定をカスタムセルクラスにする

  • 忘れがちなのでご注意ください スクリーンショット 2018-06-03 15.44.16.png

3️⃣メイン画面の設定

□main.storyboardを設定していく

  • tableviewを画面一杯に設置して、datasouceとdelegateを紐付け

□ViewContoroller.swiftを設定していく

  • 先ほどのtableviewを紐付ける

スクリーンショット 2018-06-03 16.12.15.png

  • datasouceとdelegateをクラスに継承
  • (入れた瞬間、怒られます。fixを押して、コードを自動追加してもらいましょう)

スクリーンショット 2018-06-03 15.51.01.png

  • 先ほど作成したカスタムセルを呼び出す記述を追加する
  • ざっくり言うと、"カスタムセルクラス"と言うファイルを読み込んで、"再利用セル"と言う名前で使えるようにしてねと言う内容
ViewController.swift
  override func viewDidLoad() {
    マイテーブル.register (UINib(nibName: "カスタムセルクラス", bundle: nil),forCellReuseIdentifier:"再利用セル")
  }

💡つまづきポイント:xib作ったのに、なんでいきなりnibやねん
xibファイルを作成すると、自動的にnibファイルができます
xibファイルから最終的にnibファイルが作られます
nibはxibと同じファイル名になります

  • 表示するセルの数を指定する(return 10を追記するだけ)
ViewController.swift
  func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
    return 10
  }
  • 表示するセルの内容を指定する
ViewController.swift
  func tableView(_ tableView: UITableView, cellForRowAt 何個セル出すの: IndexPath) -> UITableViewCell {
    let 表示するセルの内容 = tableView.dequeueReusableCell(withIdentifier: "再利用セル", for: 何個セル出すの) as! カスタムセルクラス
    表示するセルの内容.セルに表示するデータの制御 ( 選択数はこれを使う : 何個セル出すの )
    return 表示するセルの内容
  }

4️⃣完成!

お疲れ様でした!
完成したら、コメントに「ワッフルワッフル」と叫んでください😆✨

スクリーンショット 2018-06-03 16.41.18.png

追記

オートレイアウト設定をしないと、画像のように高さがきれいに出ませんのでご注意ください。
オートレイアウトに関しては、それだけでボリュームが出てしまうので、また別の記事にて言及していきたいと思いますm(_ _)m

NextStage!

🎉TODOアプリを作ってみようシリーズ

📱SwiftでTableViewを使ってみよう
https://qiita.com/TD3P/items/cafa8e20029047993025

📱Swiftで簡単なTODOアプリを作ってみよう
https://qiita.com/TD3P/items/8f474358d1dd789557f3

📱Swiftでカスタムセルを再利用したTODOアプリを作ってみよう
https://qiita.com/TD3P/items/116a2199b1f872ac6471

📱SwiftでCoreDataを使ったTODOアプリを作ってみよう
https://qiita.com/TD3P/items/adbbeee827995cffd509

📱SwiftでRealmを使ったTODOアプリを作ってみよう
https://qiita.com/TD3P/items/616e0dbd364179ca284b

pe-ta
全然わからない。俺は雰囲気でコードを書いている。 座右の銘:もっと真剣にふざけたい。
codmon
保育園・幼稚園向け業務支援システム「コドモン」の開発・運営を手がける会社です。
https://www.wantedly.com/companies/codmon
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away