SnapKItをつかってコードでも簡単にAutoLayout実装

1 はじめに
2 準備
3 実装
4 さいごに

はじめに

こんにちは、nukkyです。
iOSの実装中にコードでもViewを追加したいことは
度々あるとは思いますがその際にAutoLayoutを
コード側で実装するのは正直めんどくさいです。
そこでコードでも簡単にAutoLayoutが実装できるSnapKitを使ってみたいと思います。

なんで今回コード上でAutoLayoutしたかったかは後ほど。

準備

おなじみCarthageを使用します。

Cartfileにこちらを記述します、

今回はSwift3で実装するので以下のバージョンを指定してください。

github "SnapKit/SnapKit" ~> 3.2.0

1	github "SnapKit/SnapKit" ~> 3.2.0

そうしたら、以下のコマンドでビルドしてください。

carthage update --platform iOS

1	carthage update --platform iOS

実装

準備

まずは「SnapKit」をインポートします。

import SnapKit

1	import SnapKit

コード上で追加したいViewを用意します。

var box = UIView()

1	var box = UIView()

用意したViewを表示します。

self.view.addSubview(box)

1	self.view.addSubview(box)

AutoLayoutを指定

AutoLayoutを指定するには以下のようにします

box.snp.makeConstraints { (make) -> Void in
   // ここにAutoLayoutの制約を書いていく
}

box.snp.makeConstraints { (make) -> Void in

// ここにAutoLayoutの制約を書いていく

}

よく使う制約を書いていくとこんな感じになります

box.snp.makeConstraints { (make) -> Void in
    make.top.equalTo(10)
    make.left.equalTo(10)
    make.width.equalTo(120)
    make.height.equalTo(80)
}

box.snp.makeConstraints { (make) -> Void in

make.top.equalTo(10)

make.left.equalTo(10)

make.width.equalTo(120)

make.height.equalTo(80)

}

中央寄せはこんな感じ

make.centerX.equalToSuperview()
make.centerY.equalToSuperview()
// こういう指定も可能
make.centerX.equalTo(self.view.snp.centerX)

make.centerX.equalToSuperview()

make.centerY.equalToSuperview()

// こういう指定も可能

make.centerX.equalTo(self.view.snp.centerX)

UIAlertControllerのカスタム

今回「SnapKit」を使いたかった一番の理由は
UIAlertControllerにカスタムViewを使用する際に
AutoLayoutを使いたいからでした。
UIAlertControllerの表示が確定するまで
AlertのViewサイズが不明で、AutoLayoutを使わないと
表示が綺麗に出せなかったのです。
もしかしたら誰かの役に立てるかもしれないし
せっかくなのでここに載せたいと思います。
やっていることはUIAlertControllerにUITextViewをのせています。

let message = "" + "\n\n\n\n\n\n\n"
let alert = UIAlertController(title: "テキスト入力", message: message, preferredStyle: .alert)

let textView = UITextView()
textView.text = ""
textView.layer.borderColor = UIColor.lightGray.cgColor
textView.layer.borderWidth = 0.5
textView.layer.cornerRadius = 6

alert.view.addSubview(textView)
textView.snp.makeConstraints { make in
    make.top.equalTo(45)// ここの制約はmessageとの兼ね合いで調整してください
    make.left.equalTo(10)
    make.right.equalTo(-10)
    make.bottom.equalTo(-60)
}

let okAction: UIAlertAction = UIAlertAction(
    title: "OK",
    style: UIAlertActionStyle.default,
    handler: { _ in
    print(textView.text)
}
)
alert.addAction(okAction)
self.present(alert, animated: true, completion: nil)

let message = "" + "\n\n\n\n\n\n\n"

let alert = UIAlertController(title: "テキスト入力", message: message, preferredStyle: .alert)

let textView = UITextView()

textView.text = ""

textView.layer.borderColor = UIColor.lightGray.cgColor

textView.layer.borderWidth = 0.5

textView.layer.cornerRadius = 6

alert.view.addSubview(textView)

textView.snp.makeConstraints { make in

make.top.equalTo(45)// ここの制約はmessageとの兼ね合いで調整してください

make.left.equalTo(10)

make.right.equalTo(-10)

make.bottom.equalTo(-60)

}

let okAction: UIAlertAction = UIAlertAction(

title: "OK",

style: UIAlertActionStyle.default,

handler: { _ in

print(textView.text)

}

)

alert.addAction(okAction)

self.present(alert, animated: true, completion: nil)

さいごに

最初にも書きましたがコードでAutoLayoutを実装するのは
とてもめんどくさいし可読性も悪いですが、「SnapKit」なら
簡単に実装できますし、読みやすいと思うのでコードでAutoLayoutを
実装している方はぜひ使ってみてください。

日	月	火	水	木	金	土
« 6月				8月 »
						1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28	29
30	31

SnapKItをつかってコードでも簡単にAutoLayout実装

はじめに

準備

実装

準備

AutoLayoutを指定

UIAlertControllerのカスタム

さいごに

フォロー

アプリ情報