あひる裁縫店

好きなこと、技術のこと、くだらないこと

【iOS】Xcode 9.0 StoryboardでAutoLayout3

 

今回は、状況に応じて制約が変わる場合(Storyboardでレイアウト、コードで制約を変更)です。

 

ボタンを押したら高さを変更したい、キーボードの登場で文字が見えなくなるのを解消させたい。あとあと変更したいことは頻繁にあると思います。

 
 

やることを簡単に言うと、制約付をアウトレット(Outlet)接続すればいいだけです。

Storyboardで制約付た後、その制約付を無視してViewのサイズを変更すると、

戻ろうとして挙動がおかしなことになります。(iOS11以前はそれでも動いているように見えていましたが、iOS11ではそうはいきません。11以前でも本来ダメだと思います)

 

ではやっていきましょう!

 

ボタンを押したら、Viewが半分になる

 

ViewはorangeViewとします。

ボタンは背景を見やすい色にしておきます。

 
f:id:pg_0212:20171009140357p:plain
 


orangeViewは中央に、幅は100pt、高さは画面に対して1/3です。(画面では少しサイズが違います、すいません...)

ボタンは Bottom20pt、Left20pt、Right20ptです。高さは文字サイズにより自動で設定されます。

 

ここまでは、今までやったことと同じです。

 

 
あとはボタンと変更させる制約を、コードに接続しましょう。

 

まずはボタンを、アクション(Action)接続します。


 f:id:pg_0212:20171009145233p:plain

 

ボタンを選択して、Ctrlを押しながら、任意の場所までドラック

ConnectionはAction、NameはchangeConstraintとしました(ネーミングセンスは無視してください...)

 

ちなみに命名はこのサイトが便利です。どういう風につけたらいいのか分からないときは、参考にするといいと思います。
codic - プログラマーのためのネーミング辞書codic.jp

 

次はorangeViewの制約を接続します。

 
f:id:pg_0212:20171009162525p:plain

 

つけた制約付は、Constraintsの中にあります。



そこから、さきほどのように幅をクリックして、Ctrl長押し、任意の場所までドラック、

ConnectionはOutlet、NameはwidthConstraintとしました。(これもネーミングセンスの悪さはご了承ください...)(画像はスペルミスです)

 

これで、完全にStoryboardでの作業は終了です! 

 

あとは、コードでボタンを押したときにサイズが変更されるように書き足すのみです。

 

 

@IBOutlet weak var widthConstraint: NSLayoutConstraint!

@IBAction func changeConstraint(_ sender: Any) {
widthConstraint.constant = view.frame.width / 2.0
}

 

 

ここでは、withtConstraintの制約を、画面(View)の幅の半分にします。

 

さてシュミレーターで確認です。

 

元の画面

 
f:id:pg_0212:20171009163023p:plain


 

ボタンを押すと...

f:id:pg_0212:20171009163040p:plain

 

幅を変えることができました!

これで、コードでも変更することができるようになりました!

 

 

本当は、equalWidthなどの変更も書きたいところですが、

すっきりいく書き方が思いついていないので、わかり次第メモします。

 

 

関連する記事
【iOS】Xcode 9.0 StoryboardでAutoLayout - あひる裁縫店ahiru-sewingstore.hatenablog.com
【iOS】Xcode 9.0 StoryboardでAutoLayout2 - あひる裁縫店ahiru-sewingstore.hatenablog.com