Go to Qiita Advent Calendar 2024 Top
LoginSignup
115
93

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

@pe-ta(ペーた)

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

Last updated at Posted at 2018-06-03
スクリーンショット 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を想定）
  • 画像のオプションで下記の２つを忘れずに設定
    • 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で簡単なTODOアプリを作ってみよう
https://qiita.com/TD3P/items/8f474358d1dd789557f3

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

📱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

📱Flutterで基本のTODOアプリを作ってみよう
https://qiita.com/pe-ta/items/b3b7458059c1fd7efcf0

📱Flutterでページ遷移するTODOアプリを作ってみよう
https://qiita.com/pe-ta/items/e547c4cf460319f5093c

📱Flutter x Firestore で気軽に永続化してオラオラする方法
https://qiita.com/pe-ta/items/ccd49fc396b063a821af

115
93
13

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
115
93

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?