iOS

Swift3 [XIBファイル] コードでの呼び出し方まとめ

投稿日:

はじめに

どうもはじめです。
今回はTableViewCell,CollectionViewCell,UIViewのXibファイルを
コードで呼び出す方法をまとめてみます。

 

ではさっそくー

前提条件

Xcode 8.3.3
Swift 3.1

 

TableViewCell

まずはTableViewCellからやってみます。
ちなみにこれは前回も書きました。

XIBの準備

Command + N

Cocoa Touch Class

[Subclass of:]にUITableViewCellを選択

[Also create XIB file]にチェックを入れる

Nextを押して、ディレクトリを指定してCreate

上記手順でTableViewCellを呼び出す際に必要なイニシャライザや、
クラスとXIBファイルの紐付けが自動で行われます。

今回はCellの中心にLabelを追加するだけにしておきます。

ViewControllerでの呼び出し

まずはViewControllerにTableViewを設置して、
ViewControllerにOutLet接続します。

TableViewのDelegateとDataSourceをViewControllerに紐付けすることをお忘れ無く。

viewDidLoadにてXIBファイルを定義しておきます。

TableViewで表示するCellを返す際に先ほど定義したXIBを使用します。

 

これで完成!!

注意点としては以下になります。
・XIBの[File’s Owner]には何も記載しないこと
・XIBファイルにあるTableViewCellに対してCustom Classを指定すること
・IdentityやTableViewCell.Identifierには何も書く必要がないこと

コードの全文はこちらです。

 

CollectionView

次はCollectionViewをやってみます。
ほぼほぼTableViewと同じです。

XIBの準備

TableViewCellのXIBを作った時と違う点は一箇所だけです。
・[Subclass of:]にはUICollectionViewCellを選択

以上でCollectionViewCellのXIBを呼び出す際に必要なイニシャライザは用意できました。

 

CollectionViewCellには枠線がないので、
わかりやすいように背景色とLabelを設定しておきます。

ViewControllerの準備

こちらもTableViewの時とほぼ同じです。

CollectionView設置後以下を行います。
・Delegate、DataSourceの紐付け
・CollectionViewをOutLet接続

・viewDidLoadにてXIBファイルの定義

・XIBの呼び出し

以上で完成です!
注意点はTableViewCellの時と同じです。

コードの全文は以下になります。

 

UIView

次はUIViewです。
こやつは少し違ってきます。

カスタムクラスの作成

Command + N

Swift File

Create

作成したファイルに以下を記述

 

XIBの準備

Command + N

View

Create

一番親となるUIViewのSizeをFreeformに設定し、
width,heightを200にします。
その上にViewとLabelを配置し、わかりやすいようにViewの背景色を設定します。

 

XIBとカスタムクラスの紐付け

・XIBの[File’s Owner]のCostomClassに作成したカスタムクラスのクラス名を指定
※そのほかにクラス名を指定する必要はありません。

一番親となるUIViewをOutLet接続します。

最後にカスタムクラスに以下を追記します。

 

ViewControllerで呼び出し

以下のコードを記述するだけで呼び出しが可能です。

なぜviewWillAppearに記載したかというと、viewDidLoadで呼び出しをしてしまうと
レイアウトが生成される前のフレームサイズで初期化を行ってしまうため、レイアウトが崩れてしまうからです。

以上で完成です。
コードの全文はこちらになります。

 

さいごに

まだまだXIBには苦戦することがおおいです。
使いこなせるようになるとかなり便利なものなので、理解していこうと思います。

-iOS
-

執筆者:


comment

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

関連記事

swift

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

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

swift

Swift3 StoryBoard上でUIButtonやUILabel、UIViewのcornerを変更する

1 はじめに1.1 前提条件2 StoryBoardの準備3 カスタムクラスの作成3.1 class ~について3.2 @IBDesignableを記述すると3.2.1 Live Renderingと ...

swift

月と日を選択するpickerを作る

1 はじめに1.1 前提条件2 サンプル2.1 ピッカーのイメージ2.2 ピッカーのxibファイル2.3 実装したカスタムクラス2.4 呼び出し元のコード3 簡単な解説3.1 MonthAndDayP ...

swift

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

1 はじめに1.1 前提条件1.2 事前準備2 TableViewを準備3 Xibを準備4 tableviewに表示するcellにxibを指定する5 さいごに はじめに どうも、はじめです。 今回はX ...

swift

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

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

メルマガ

メールマガジン

メルマガ始めました!
詳細は以下のリンクから
http://re-engines.com/mailmagazine/

amazon

Web版MyCoach

私たちはより広い方にコーチングを知ってもらいたいと考えています。
下記のサイトにて、コーチの方々を紹介しておりますので、よろしければご覧ください。

アプリ情報

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

リンク

follow us in feedly
2017年8月
« 7月 9月 »
 12345
6789101112
13141516171819
20212223242526
2728293031