iOS

[Swift3] コードで動的にオートレイアウトを変更する

投稿日:

はじめに

どうも、はじめです。

今回はコードでoutlayoutを変更する方法を覚えたので
記事にしてみようと思います。

今回紹介する方法は以下の3つです。
1.NSLayoutConstraintのActiveを切り替える
2.NSLayoutConstraintのActiveを切り替える(複数同時)
3.NSLayoutConstraintの値を変更する

今回は例として
ボタンを押すと画面中央に配置してあるViewのサイズが変更するものを
作ってみようと思います。

ではさっそくー

前提条件

Xcode 8.3.3
Swift 3.1

 

事前準備

まずは画面中央に表示するViewを配置します。
(サイズが変わっていることが分かるように背景を変えています。)

追加したViewに対して以下の制約を追加します。
※Aspectは1:1に設定しておきます。

 

左側の余白を定めた制約をoutlet接続します。
(以後DefaultMarginと呼びます)

次にボタンを押された後に反映したい制約も追加し、
outlet接続します。
・LeftMargin = 10
・LeftMargin = 100

この時制約の重複が発生するためstoryboard上でうまく変わってくれません。
先ほど追加したDefaultMarginの制約を選択し、installendのチェックを外します。
これで制約のActiveをfalseにすることができます。

 

最後にボタンを配置し、actionメソッドを作成します。

事前準備は以上になります。

 

1.NSLayoutConstraintのActiveを切り替える

OutLet接続した制約に対し、
isActiveの値を変更することで有効無効を切り替えることができます。

制約の変更をアニメーションさせたい場合はanimateメソッドないで
self.view.layoutIfNeeded()
と記載すると変更した制約をアニメーションさせることができます。

上記の方法で50のボタンが押された時の処理を実装します。

 

2.NSLayoutConstraintのActiveを切り替える(複数同時)

方法としては1と同じですがこちらの方法は複数の制約を切り替えたい場合に
見やすくかけるようになると思います。

上記の方法で10のボタンが押された時の処理を実装します。

 

以上で今回の実装は終わりです。
最終的な全ソースを載せておきます。

 

3.NSLayoutConstraintの値を変更する

最後に今回の実装では使用していませんがoutlet接続した制約の値を変更する方法があります。

例としてボタンを押された時、100ある余白を150に変更する処理を書くと以下のようになります。

 

さいごに

最近スクロールビューを使用する機会があったのですが、
なんじゃこのオートレイアウトは。。。ってなりましたw
CollectionViewも先日初めて使いましたがまだまだ使い慣れないので、
早く使い慣れたいです。

今回も最後まで見ていただいてありがとうございました。

page_footer_300rect




page_footer_300rect




-iOS
-

執筆者:


comment

メールアドレスが公開されることはありません。

CAPTCHA


関連記事

swift

[Swift]ログフレームワーク「CocoaLumberjack」をSwiftで使ってみた

1 はじめに2 準備3 実装3.1 出力先の設定3.2 ログの出力レベルを設定する3.3 ログの出力4 さいごに はじめに こんにちは、nukkyです。 今回はログ管理に便利なライブラリ「CocoaL ...

swift

[Swift3] SwitchとEnumを使ってSectionやCellを指定する

1 はじめに1.1 環境2 Enumの用意3 Tableの用意4 Cellの返却にEnumを使用する5 さいごに はじめに どうも、はじめです。 今回はSectionやCellの指定にSwitchとE ...

swift

[Swift 3] テキストの装飾(フォント・文字サイズ・文字間隔・行間・文字色・下線)

1 はじめに2 フォント・文字サイズ変更3 文字間隔4 行間5 文字色6 下線7 さいごに はじめに どうもはじめです。 今回は文字の装飾をやってみようと思います。 完成図を載せておきます。 &nbs ...

swift

Swift3でMapKitの吹き出し(Callout)タップを取得したい!

1 はじめに2 MapKitでの吹き出しタップ3 吹き出しのみタップしたい!4 さいごに はじめに こんにちは、nukkyです。 今回、iOSのMapKitでGoogleMapのように 吹き出しのタッ ...

swift

[Swift]UIViewからUIImageを作成しローカルに保存

1 はじめに1.1 前提条件2 実装2.1 UIViewからUIImageへ2.2 UIImageをローカルに保存2.3 おまけ:画像のリサイズ3 さいごに はじめに こんにちは、nukkyです。 今 ...

page_side_300rect

Web版MyCoach

私たちはより広い方にコーチングを知ってもらいたいと考えています。
下記のサイトにて、コーチの方々を紹介しておりますので、よろしければご覧ください。

アプリ情報

私たちは、目標を達成したい方を応援する、TODOアプリもリリースしております。
下記のアイコンから無料でダウンロードできます。

リンク

follow us in feedly
2017年8月
« 7月 9月 »
 12345
6789101112
13141516171819
20212223242526
2728293031