【Swift2.0】 画面幅いっぱいに（均等に）ボタンを配置する方法 その１【カスタムView】

iosで、画面幅いっぱいにボタンを配置する方法を説明します

パズドラのUIでお馴染みのこんなやつ
HTMLで作ると一瞬で作れてしまいますが、iOSではとても手こずります

さらに今回は色んな画面で使いまわせるように
別ファイルで作成して、いろんなViewから呼び出して使用できるようにします。

画面はAutoLayoutを使用して作成していきます

ちょっと長くなりますので、３つの記事にわけます
先に流れをざっくりと。

このシリーズの目次

：カスタムViewを使う
１．カスタムViewのxibとクラスを用意する
２．xibとクラスを紐付ける
３．storyBoardとカスタムView紐付けて、動作確認

：画面幅いっぱいにボタンを配置する
４．xibで、実際のレイアウトを作成
５．コードを書く（画面に応じて大きさを変更させる）

：ボタンを押した時の処理を呼び出し元クラスで上書きする
６．プロトコルでデリゲートを定義

：カスタムViewを使う

色々なViewControllerから使いたいUIViewは、カスタムViewという別ファイルで作成する形式にすると便利です
まずはカスタムViewの作成方法と、その動作確認を行っていきます

１．カスタムViewのxibとクラスを用意する

xibファイルとそのクラスを作成します

xibの作成は、new fileから...

クラスも同様に作成します

今回は以下の名前で作成しました
ToolBarView.xib
ToolBarView.swift

xibではAutoLayoutを使用して画面を設計できます
まずは動作確認のため、色のついてViewを置いただけのものを作成しましょう

初期設定では画面幅が固定になっているので、これを自由に変更できるようにします

これで大きさを動かせるようになりました
色のついたViewを置いて、このステップは完了です

２．xibとクラスを紐付ける

まず、紐付け先のクラスを書いていきましょう
先ほど作成した、 ToolBarView.swift に以下のように記述してください

import UIKit

class ToolBarView: UIView {
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        comminInit()
    }
    
    required init(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)!
        comminInit()
    }
    
    private func comminInit() {
        let bundle = NSBundle(forClass: self.dynamicType)
        let nib = UINib(nibName: "ToolBarView", bundle: bundle)
        let view = nib.instantiateWithOwner(self, options: nil).first as! UIView
        addSubview(view)
        
        let bindings = ["view": view]
        addConstraints(NSLayoutConstraint.constraintsWithVisualFormat("H:|[view]|", options:NSLayoutFormatOptions(rawValue: 0), metrics:nil, views: bindings))
        addConstraints(NSLayoutConstraint.constraintsWithVisualFormat("V:|[view]|", options:NSLayoutFormatOptions(rawValue: 0), metrics:nil, views: bindings))
    }

}

初期化時にcomminInit()を実行していますが、
これは自身に ToolBarView.xib のレイアウトを設定しているものだと思ってください

さて紐付け先もできたので、xibと紐付けていきましょう

Placeholders > File's Owner を選択し、クラスを設定します
ここでクラスを設定するのはViewではありません。
Placeholders > File's Owner にクラスを設定するのはカスタムView特有の作業です、注意してください。

３．storyBoardとカスタムView紐付けて、動作確認

storyBoardとカスタムViewの紐付けを行い、実際に動作確認を行います

といっても簡単です
以下のようにViewをおいて、そのクラスに紐付けたいカスタムViewのクラスを指定するだけでOKです

これで完了。

それでは動作確認してみましょう

ちゃんとカスタムViewでおいたピンク色が表示されていますね

それでは次回は、実際にボタンを配置していきます

ryokwkm2.hatenadiary.jp