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上に表示させる方法等ご存知の方がいらっしゃれば

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

 

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

age_footer_300rect




age_footer_300rect




-iOS
-

執筆者:


comment

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

関連記事

swift

Swift3でMapKitの吹き出し(Callout)タップを取得したい!

1 はじめに2 MapKitでの吹き出しタップ3 吹き出しのみタップしたい!4 さいごに はじめに こんにちは、nukkyです。 今回、iOSのMapKitでGoogleMapのように 吹き出しのタッ …

swift

Swift3 + Alamofire4 + Unbox2.4を使ってJSONをパースする

1 はじめに1.1 前提条件1.2 完成形2 モデルの作成3 APIクラスの作成4 ViewControllerの作成4.1 Delegateの指定4.2 TableViewの設定4.3 Search …

swift

SwiftでTTTAttributedLabelの文字列からリンク表示

1 はじめに2 TTTAttributedLabelとは3 CocoaPodsでインストール4 実装4.1 Labelの表示4.2 タップの検知5 さいごに はじめに こんにちは。 はじめましてnuk …

swift

[Swift3]で直感的にアニメーションが記述できるライブラリ「Cheetah」

1 はじめに2 準備3 実装3.1 準備3.2 移動3.3 回転と拡大3.4 速度調整3.5 繰り返し3.6 アニメーションの終了4 さいごに はじめに こんにちは、nukkyです。 今回は、仕事でV …

swift

[Swift3] スクロールする画面に固定でボタンを表示する方法

1 はじめに1.1 前提条件2 Storyboardの準備3 Controllerの実装3.1 スクロールする画面の実装(TableView)3.2 固定で表示するボタンを配置している画面の実装(Co …

page_side_300rect




bitFlyer

bitFlyer ビットコインを始めるなら安心・安全な取引所で

アプリ情報

私たちは、目標を達成したい方を応援する、TODOアプリもリリースしております。
下記のアイコンから無料でダウンロードできます。

リンク



follow us in feedly

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