iOS

UITableViewでTableViewCell(Xib)を使ってみた

投稿日:

はじめに

どうも、はじめです。

今回はXib(TableViewCell)を使用したカスタムセルの使い方を書いてみようと思います。

 

前提条件

Swift 3.1

 

事前準備

SingleViewApplicationで新規プロジェクトの作成

 

TableViewを準備

まずはStoryBoard上に「Table View」を追加し、[Prototype Cells]を0に指定します。

 

次にUITableViewDelegateとUITableViewDataSourceを設定します。

[設定方法]

storyboardに追加したTableViewを右クリック
・Outlets → datasource
・Outlets → delegate
の右端にある○マークから自身のViewControllerにドラッグアンドドロップ

 

最後にViewController.swiftでdelegateとdatasourceを定義し、

TableViewをViewController.swiftにOutlet接続します。

 

Xibを準備

Xib関連のファイルがわかりやすくなるように新規Groupを作成します。

→ Group名[UITableViewCell]とする

作成したGroup内に新規ファイル + Xibファイルの作成をします。

  1. [command + N] → [Cocoa Touch Class]を選択
  2. Next → Class:[TableViewCell],SubClass of:[UITableViewCell]
    Also create XIB fileにチェックを入れてNext
  3. 保存したいディレクトリを選択してCreate

次にTableViewCell.xibにLabelを追加します。

このLabelにはTableViewのIndexPathを表示することとします。

Labelにデータをセットする準備として以下作業を行います。

・TableViewCell.swiftに先ほど追加したLabelをOutlet接続

・Labelにデータをセットするメソッドを作成

 

完成後のstoryboardとソースは以下のようになります。

 

 

tableviewに表示するcellにxibを指定する

XibをCellとして使用するには以下の二つを記述する必要があります。

・ViewDidLoadにて使用するXibを定義

・表示するCellに定義したXibを指定

以上で完成となりますので、追記後のソースと実行後の画面を載せておきます。

 

さいごに

最近すごく思うのは見た目に関するものは出来る限りstoryboard上で行いたい

(コードではあまり書きたくない)ということです。

今回書かせて頂いた内容ではmain.storyboard上に指定したXibの内容は表示されません。

Xibの内容をmain.storyboard上に表示させる方法等ご存知の方がいらっしゃれば

是非コメントいただければと思います。

 

最後まで見て頂きありがとうございました。

blog-page_footer_336




blog-page_footer_336




-iOS
-

執筆者:


  1. Mig.TnTi より:

    勉強のためカスタムViewを調べていてたどり着きました。

    最初の[Prototype Cells]を0にする理由がわかりませんでしたが、それ以外は、「なぜ?」「なにを」「どうする」がわかりやすくて、とても勉強になりました。

    まだ、試していませんが、StoryBoardでCellのクラスに作成したカスタムCellのクラスを書くだけで表示できないでしょうか?

    適当な発言で申し訳ありません。

    • nukky より:

      コメントありがとうございます!

      StoryBoardでCellのクラスに作成したカスタムCellのクラスを書くことで表示することは可能です、
      ですが、Xibを用意することにより汎用的に複数のクラスで扱うこともできますしコード上で追加したTableViewでも扱うことができるので今回はそのような形にしました。
      せっかくコメントもいただいたので、Xibを用意せずにStoryBoardでカスタムCellを扱う方法は今度記事にしたいと思います!

comment

メールアドレスが公開されることはありません。

CAPTCHA


関連記事

swift

Swiftでシェア機能や外部アプリ起動の導線を簡単に実装できるライブラリ「SwiftShareBubbles」

1 はじめに2 準備3 実装3.1 表示3.2 用意されているパターン4 さいごに はじめに こんにちは、nukkyです。 今回はSNSでのシェア機能や外部アプリ起動の導線を追加したいときに 簡単に実 ...

CollectionViewの並び替えを実装する

1 はじめに2 実装方法3 手順4 ロングタップの実装5 並び替えを可とする6 並び替え時のデータ処理7 次回表示時8 他に9 さいごに10 おすすめ書籍 はじめに こんにちは。Yossyです。 前回 ...

swift

【Swift】Xcode10.3でSwift5で書かれたプロジェクトでデリゲートが呼ばれない

1 はじめに2 起きた環境3 起きる条件3.1 コード上の条件3.2 ビルド時の条件4 再現4.1 テスト用コード5 対応策6 さいごに7 おすすめ書籍 はじめに こんにちはsuzukiです。Xcod ...

swift

Swift3で動的にUIViewを切り替える Part2

1 はじめに1.1 前提条件2 完成イメージ3 StoryBoardの準備3.1 Viewの配置3.1.1 ① Segmentを配置するView3.1.2 ② ContainerViewを表示するVi ...

[iOS]ライセンスを簡単に生成してくれるLicensePlistを使って見た

1 はじめに1.1 作者様ページ1.2 前提条件2 インストール3 早速使ってみよう3.1 Settings.bundleの準備3.2 LicensePlistの作成3.3 自動更新の設定4 さいごに ...

フォロー

follow us in feedly

blog-page_side_responsive

2017年7月
« 6月 8月 »
 1
2345678
9101112131415
16171819202122
23242526272829
3031 

アプリ情報

私たちは無料アプリもリリースしています、ぜひご覧ください。 下記のアイコンから無料でダウンロードできます。