伝説のXibを使おうと思っていたのですが、セミナー課題では実現チェックボックスがありました!一度使ったことがあります.

💡xibの原因を知る

iOSを構成するUIには3つの代表的な方法があるそうです.

Storyboard

xib

code

3つの長所と短所は大体このようなものです!
StoryBoard Xibcodeの利点は簡単で、プロトタイプを迅速に作成できます.ナビゲーションの流れを把握しやすい.Static Cellを使用できます.storyboardに比べて、より具体的なUIを実現できます.merge競合はstoryboardより少ない.複数のクラスで1つのUIを共有することが望ましい.コードで1行1行で、どんな機能なのか直感的にわかります.読みやすくメンテナンスしやすい.大量の制御と理解によって、多種多様な実現を実現することができる.merge競合は解決しやすい.欠点:複数人で作業するとmerge競合が発生する可能性があります.再使用が必要な場合は、ビューコントローラ自体をコピーする必要があるため、再使用性が低い.性能が遅い.他の人が開発したコードであれば、再構築は複雑です.
いずれにしても,ストーリーボードやコードの利点を適切に使いやすく再利用するにはxibの使い方を知るべきである.

💡xib,nib,Storyboardの違い

でもまず難しい名前は….何が違うのか分からないし、何なのか分からないので、調べているうちによく理解できる整理された文章を見つけました!( ソース )
XIB、NIB、Storyboardはどこで使いますか?

XIB、NIB、Storyboardは、画面の構成に使用されるファイル形式です.
ビューコードとコントローラをMVC設計モードから分離するためのファイル.

NIBファイルは何ですか?

NextStepインタフェースジェネレータの略で、画面を構成するクラスをバイナリ圧縮ファイル

として保存する
バイナリNIBファイル内部の表示🔽

XIBファイルは何ですか?

Xcodeインタフェースジェネレータの略で、XML構文を使用して画面を構成するクラスを格納します.

なぜXIBファイルがあるのですか?
バイナリ形式ではなくXML形式で格納されるため、変更された部分はファイル管理ではなくソースコードで管理できます.XML形式のXIBファイルを変更して比較します.🔽

を手動で変更する場合は面倒かもしれませんが、XcodeにはXML形式ではなくグラフィック形式に変更するインタフェースジェネレータが用意されています.

XIBファイルをXcodeのインタフェースジェネレータと見なします.🔽

プログラムはビュー情報を取得します.

ビュー情報を含むXIBファイルを構築すると、アクセスしやすいバイナリNIBファイルにコンパイルされ、アプリケーションバインディング(アプリケーション実行ファイルを格納するフォルダ)が実行可能ファイルにコピーされます.

コンパイルXIBはNIBを作成します🔽


XIBファイルは、NIBファイルとして構築中に作成されたアプリケーションパッケージに格納されます.🔼
ではStoryboardとは何でしょうか.

シーケンスイメージボードは、ビュー情報とビューとビューの関係に関する情報を含むファイルです.したがって、ビュー情報XIBの内容とビュー関係情報が含まれ、XML形式である.構築時にコンパイルしたstoryboardファイルを使用します.storyboardcという名前のファイルが作成されます.

.storyboardファイルは、nibファイルとnibファイルを管理するplistファイルを含むパッケージファイルです.

.storyboardcパッケージの内部ビュー🔼

Storyboardファイルの内部構造🔼
このようにxibはビューを表すxmlファイルであり、nibはxibをコンパイルする際に生成されるバイナリファイルである!次にxibファイルを使用してカスタムビューを作成します.

💡xibを使用したCheckBoxの作成

1.xib、swiftファイルの作成

CheckBox Viewは、次のようなチェックボックスを実現しています.xibとCheckBoxビュー.swiftを作ろう

CheckBoxView.xibの作成

xibファイルを作成するときは、写真のようにユーザーインタフェースのビューを選択できます!

CheckBoxView.swiftの作成

次に、UIViewを継承してビューを管理するクラスを作成します.

2.xibファイルのFile'sOwnerのクラス設定

.xib, .swiftファイルが作成された以上、2つのファイルに接続します.
2つのファイルを接続すると、UILabelやUIButtonなどのUIViewを継承するCustomViewとして使用できます.

.xibファイルを開き、Placeholdersの下にあるFile'sOwnerをクリックし、プロパティインスペクタタブでFile'sOwnerのカテゴリを指定します.ここにCustomView、画面、ソースリンクを入力します.
次の用語集を参照してください.
Placeholders:UIVEのように見える主な要素ではなく、接続に使用されます.
ファイル所有者:nibファイルをアプリケーションコードに関連付けるオブジェクト(nibファイルの内容を担当するコントローラ)

nibファイル(customViewの作成時の.xibファイル)のロード時にファイル所有者オブジェクトを表示し、指定した代替オブジェクトを作成して、nibファイルでこれらのオブジェクトの概念を参照します.

File'sOwnerオブジェクトでは、nibファイルに格納されている最上位オブジェクトの参照@Iboutletを維持します.

First Responderオブジェクト:Responderオブジェクトがイベントを受信すると、他のResponderオブジェクトに処理または転送する義務があり、UIKEは適切なResponderを指定してイベントを処理し、最初の受信イベントのResponderをFirst Responderと呼ぶ
(Responder Chainを学ぶ必要がある…)

3.描画ビュー

ビューのサイズとAutoLayoutの設定

作成したビューのsizeをFreeFormに設定することで、画面のサイズを任意に変更できます.
Safe Areaが無効になっていない場合、自動レイアウトにエラーが発生する可能性があるため、チャットをキャンセルできます.

正方形ビューを作成するので、widthとheightを1:1のスケールに設定できます.

UIViewとUILabelの追加

ボタンボーダー用のUIDIewを追加し、テキストが✓のUIlabelを追加し、Constraintsを指定します.

4.CustomViewの初期化

5.checkBoxクラスの初期化

checkBox Viewは私たちが作成したビューなので、直接初期化する必要があります.
まず先ほど作成したビューをすべて@IBOUTLET
checkBoxビューはxibルートビューです.
残りの2つは私たちが追加したUIオブジェクトです.

ここでは、commonInit()という関数を作成して初期化します.
Init(frame:)とrequired initを上書きしますか?(エンコーダ:)
前者はコード初期化に必要な関数であり,後者はシーケンスイメージボード初期化に必要な関数である.(2人の違いは、まだまだ勉強が必要らしい)

override init(frame: CGRect) {
        super.init(frame: frame)
        commonInit()
    }
    
    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        commonInit()
    }
    
    private func commonInit(){
        
        let bundle = Bundle(for: CheckBoxView.self)
        //nib 파일을 이름으로 찾아서 메모리에 로드하여, nib파일 내의 top-level 객체들을 [Any]? 타입으로 반환
        bundle.loadNibNamed("CheckBoxView", owner: self, options: nil)
        addSubview(checkBoxView)
        
        //초기 UI상태 설정 (비어있는 회색테두리의 체크박스)
        checkBoxUIView.layer.borderColor = UIColor.gray.cgColor
        checkBoxUIView.layer.borderWidth = 1.0
        checkBoxUIView.layer.cornerRadius = 5
        checkLabel.isHidden = true
         
        
        //self(checkBoxview)와 눌렀을 때 실행할 함수checkBoxClicked()를 인자로 넣어 생성한 
        //UITapGestureRecognizer을 추가해준다.
        self.checkBoxView.addGestureRecognizer(UITapGestureRecognizer(target: self,action: #selector(self.checkBoxClicked(_:)))) 
        //만들어준 뷰가 제스처를 인식 할 수 있도록 설정
        self.checkBoxView.isUserInteractionEnabled = true
        
    }

7. CheckBoxView.swiftコード

checkBoxをクリックしたときに実行されるcheckBox HighLight()関数は、ViewControllerで実装するために委任として作成されます.
したがって、CheckBoxDelegateプロトコルを作成し、CheckBoxHighLight()を宣言します.CheckBoxViewDelegate.swiftファイルは単独で作成して入れることもできますが面倒なのでCheckBox Viewに入れましょうswiftの一番上に置く

protocol CheckBoxDelegate: class {
    func checkBoxHighlight(cb: CheckBoxView)
}

CheckBoxクラスに委任変数を追加

var delegate: CheckBoxDelegate?

checkBox()関数

ジェスチャーが発生したときに呼び出す関数にdelegate関数を追加します.

@objc func checkBoxClicked(_ sender: Any) {
            // CheckBoxDelegate 함수 호출
            delegate?.checkBoxHighlight(cb: self)
        }

8. Main.ストーリーボードにビューを追加

UIViewを追加し、CheckBox Viewと名前を付けます.

9.View Controlコード

checkBox Highlight()を依頼して実装することを指定します.

import UIKit

class ViewController: UIViewController {

    @IBOutlet weak var checkBoxView: CheckBoxView!
    override func viewDidLoad() {
        super.viewDidLoad()
        
        //delegate지정
        self.checkBoxView.delegate = self
    }


}

//delegate 함수 구현
extension ViewController: CheckBoxDelegate{
    
    func checkBoxHighlight(cb: CheckBoxView) {
        //비밀번호 표시 체크 해제 할때
        if cb.checkLabel.isHidden == false {
            cb.checkLabel.isHidden = true
            cb.checkBoxUIView.layer.borderColor = UIColor.gray.cgColor
            cb.checkBoxUIView.layer.borderWidth = 1
            cb.checkBoxUIView.backgroundColor = UIColor.white
            
            
        } else{// 비밀번호 표시 체크 할 때
            cb.checkLabel.isHidden = false
            cb.checkLabel.textColor = UIColor.white
            cb.checkBoxUIView.layer.borderWidth = 0
            cb.checkBoxUIView.layer.cornerRadius = 5
            cb.checkBoxUIView.backgroundColor = UIColor(red: 66/255, green: 133/255, blue: 244/255, alpha: 1)
        
        }
    }
}