XIB使ってカスタムViewを表示

xibファイルでViewの作成とよくあることなのですが、自分のお気に入りの方法がよく見つからないので、すぐに見つけられるようにとここに書いとくことにしました。

今回作成のものはとにかくsimpleなものなのであまりそのまま使うことはないかと思いますが、カスタマイズはしやすいものになっているのではないかと思っています。

たくさん写真も使ったので使ったことない方もわかってくれると願って！

では:shamrock:
・最初にプロジェクトは作ると思うので、それはさておき。
・プロジェクト内にUIViewを継承したクラスを作ります。
<img width="743" alt="スクリーンショット 2017-09-18 13.29.53.png" src="https://qiita-image-store.s3.amazonaws.com/0/133940/c8dcf75d-dfe9-1586-2c02-179879cac346.png">
・次にまたNewFileで下図のViewをクリック。
<img width="727" alt="スクリーンショット 2017-09-18 13.30.06.png" src="https://qiita-image-store.s3.amazonaws.com/0/133940/e867e25a-5b09-9b9e-4b72-8ebdb0fdd053.png">
・名前は先ほど作ったクラスと同じ名前にします。
<img width="728" alt="スクリーンショット 2017-09-18 13.30.20.png" src="https://qiita-image-store.s3.amazonaws.com/0/133940/f07f75d1-690e-39d3-8580-66e995a72878.png">
・次に作ったXIBファイルのViewのクラスを下のように選択します。
<img width="1277" alt="スクリーンショット 2017-09-18 13.31.04.png" src="https://qiita-image-store.s3.amazonaws.com/0/133940/81e79dd9-b541-7afe-b6fe-02afe5ba45b4.png">
・ここです。(拡大してみました。)
<img width="264" alt="スクリーンショット 2017-09-18 13.31.12.png" src="https://qiita-image-store.s3.amazonaws.com/0/133940/c96cb71a-9c02-f55f-60d0-35702c222c43.png">
・次に先ほどUIViewを継承したクラスのコメントアウトしてあるところがあるので、
<img width="1017" alt="スクリーンショット 2017-09-18 13.31.29.png" src="https://qiita-image-store.s3.amazonaws.com/0/133940/2a0d474b-0514-fb5f-5de5-9d0d53ef581e.png">
・とります。
<img width="1280" alt="スクリーンショット 2017-09-18 13.31.41.png" src="https://qiita-image-store.s3.amazonaws.com/0/133940/e1f077f2-ccd7-cbdf-3d04-4852948f1103.png">
・次にXibファイルの先ほどのViewのところにViewを持ってきて大きさの制約をつけます。今回は200です。この数字はあとで使うので忘れないでください。Viewは必ず左と上にぴったり揃えるよう配置してください。このあと大きさの制約だけだと赤いの出てくるのでそこらへんは適当にぽちぽちやって調節してください。と言ったもののこの図だとchekをつけてないのですが、0と書いてある上の部分と左の部分にもチェックを入れれば赤いのは出てこないはずです。
<img width="617" alt="スクリーンショット 2017-09-18 13.33.29.png" src="https://qiita-image-store.s3.amazonaws.com/0/133940/3537b89d-292e-21a1-ac14-19c4422ace28.png">
・今回ちゃんと中に入れたい部品がわかるたまにLabelを貼りました。
<img width="258" alt="スクリーンショット 2017-09-18 13.34.10.png" src="https://qiita-image-store.s3.amazonaws.com/0/133940/77e6e535-4fe0-4ccb-9657-c5bb0ccf73c5.png">
・次にコメントアウト先ほど外した中に以下のようにサイズと位置を指定します。サイズは先ほどXIBのとことで設定した数に、位置は今回真ん中になるように設定しました。
<img width="374" alt="スクリーンショット 2017-09-18 13.36.21.png" src="https://qiita-image-store.s3.amazonaws.com/0/133940/7e918bf2-98db-c16c-8331-1848f5bfad1b.png">

・次に先ほどのlabelを他のクラスでカスタマイズしたいことあると思うので接続しておきます。
<img width="481" alt="スクリーンショット 2017-09-18 13.37.18.png" src="https://qiita-image-store.s3.amazonaws.com/0/133940/5bb4c99f-95f7-5a5e-5896-1466b88fff23.png">
・白だとあとで表示した時にわかりにくいので背景色を変えておきます。
<img width="302" alt="スクリーンショット 2017-09-18 13.38.02.png" src="https://qiita-image-store.s3.amazonaws.com/0/133940/f34a5431-3c5f-493f-7f2b-0ca36acb79f9.png">
・いよいよ使いところでの貼り付け作業です。下図のように書いてもらえれば下図のように表示されます。
<img width="850" alt="スクリーンショット 2017-09-18 13.40.58.png" src="https://qiita-image-store.s3.amazonaws.com/0/133940/2ae3bf71-247e-f4ab-e545-7330c02adfaa.png">
・ラベルにアクセスしたいのならこんな感じで。
<img width="1237" alt="スクリーンショット 2017-09-18 13.42.07.png" src="https://qiita-image-store.s3.amazonaws.com/0/133940/1b5e27cd-33a5-11e3-bb54-d401fc2b18ba.png">


で、写真だとみにくかったリモするので、code貼っておきます。

```ViewController.swift
import UIKit

class ViewController: UIViewController {
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        var viewsample1:sampleView
        viewsample1 = Bundle.main.loadNibNamed("sampleView", owner: self, options: nil)!.first! as! sampleView
        viewsample1.bottomlabel.text = "下"
        
        self.view.addSubview(viewsample1)
        
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        
    }


}


```

```sampleView.swift
import UIKit

class sampleView: UIView {
    @IBOutlet weak var topLabel: UILabel!
    @IBOutlet weak var bottomlabel: UILabel!

    
    // Only override draw() if you perform custom drawing.
    // An empty implementation adversely affects performance during animation.
    override func draw(_ rect: CGRect) {
        let selfheight:CGFloat = 200
        let selfwidth:CGFloat = 200
        
        self.frame.size.height = selfheight
        self.frame.size.width = selfwidth
        
        
        let superScreen:CGRect = (self.window?.screen.bounds)!
        
        self.frame.origin.x = (superScreen.width/2) - (selfwidth/2)
        self.frame.origin.y = (superScreen.height/2) - (selfheight/2)

    }
    

}

```

補足:
やらなくても表示はされるのですがxibのViewを表示しているものぴったしにしたい場合は、一度xib下の画像のようにアートインスペクタのSizeをFreeformに変換し
<img width="259" alt="スクリーンショット 2017-10-15 5.43.47.png" src="https://qiita-image-store.s3.amazonaws.com/0/133940/3a721e7b-3997-abdf-49be-b16ffd495e05.png">

そうするとサイズを表示するところの編集が可能になるので、xibのサイズをWidthとHeightに入れてあげれば出来上がりとなります！
<img width="261" alt="スクリーンショット 2017-10-15 5.43.54.png" src="https://qiita-image-store.s3.amazonaws.com/0/133940/2a2571e6-9e31-6bde-955a-ab2f4f107a82.png">


最後に動かしたいのためにgithubのURL貼っておきます。
https://github.com/sachiko-kame/swift.sample24

基礎からコツコツ:sunny: