【swift】 カスタムビューの作り方

  • 2022年8月10日
  • 2022年8月10日
  • Swift

UI開発が面倒で同じUIを何度も使うような場合は、カスタムビューを作ることでUIを使い回すことができます。

カスタムビューを作るのに必要なファイルは以下の通り

・カスタムビューの形となるnibファイル

・使い回すためのコードが書かれたswiftファイル

まずは、swiftファイルを追加します。追加方法は、xcode画面左上のFile->New->Fileの順に開き

Cocoa touch classを選択。名前をCutomViewとします。

とりあえず追加しただけなので、

今度はnibファイルを作成。同じようにFile->New->Fileと開いていきUser Interface

の中のviewを選択。ここでも名前はCutomViewとします。

これで、UI開発に必要なファイルが揃いました。まず最初に、CustomView.nibファイルを開き

PlaceHolder内のFile,s ownerを開き右上のshow theidentifiar inspectorを開き

Custom Classのclass名をCustomViewと紐つけします。

正しく紐つけできたら、

次はカスタムビューのレイアウトを作成。まず、nibファイルのレイアウトをUIっぽく修正。

右側のAttributes inspectorからSizeを選択し、”Freeform”を指定してください。widthとheightは300×100

くらいで適当に作りました。

適当にlabelとtextInputの複合UIを作っておきます。

次は、nibファイルで追加したUIをCustomView.swiftファイルに紐付けをします。

やり方は、nibファイルのラベルをクリックした後右上にある五本線「Adjust Editor Options」を開き

Assistantを開きます。

すると、先ほど追加したswiftファイルが右側に表示されます。

この右側のページにlabelをcontrol + ドラッグで持ってきて紐付けをします。(textImputも同じ)

これでnibファイルのUIを認識させることができます。

※assistantを開いても何も表示されない場合は、Add Editor On Rightを開いてみてください。

(多分右下に表示される)

これでカスタムビューを使う準備が完了しました。次に実際にstoryBoardにカスタムビューを

反映させたいと思います。追加方法は、storyboardにカスタムビューを乗せるためのViewを追加。

真っ白ですが、backgroundをdefaultに変更してカスタムビューが見えるようにしておきます。

追加したViewのshow the identifiar inspectorを開きCustom ClassのclassをCustom Viewとします。

最後にCustomViewファイルに以下の初期化処理が含んだコードを追加。

@IBOutlet weak var userLabel: UILabel!
    @IBOutlet weak var UserInput: UITextField!
    override init(frame: CGRect) {
            super.init(frame: frame)
            nibInit()
        }

        required init?(coder aDecoder: NSCoder) {
            super.init(coder: aDecoder)
            nibInit()
        }

        private func nibInit() {
            let nib = UINib(nibName: "CustomView", bundle: nil)
            guard let view = nib.instantiate(withOwner: self, options: nil).first as? UIView else { return }
            self.addSubview(view)
        }

以上でカスタムビューの作り方・使用方法のレクチャーは完了になります。

慣れるまでは手間ですが、自由に使えるようになると修正コストの削減ができるのでおすすめです。

  •  この記事いいね! (0)
>株式会社シーポイントラボ

株式会社シーポイントラボ

TEL:053-543-9889
営業時間:9:00~18:00(月〜金)
住所:〒432-8003
   静岡県浜松市中央区和地山3-1-7 浜松イノベーションキューブ 315
※ご来社の際はインターホンで「316」をお呼びください。

CTR IMG