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]MapViewでクラスタ機能を利用する。

1 はじめに2 クラスタリングとは3 PINのクラスタリング機能を利用する3.1 マップの作成3.2 PINの作成3.3 Pinのカスタマイズ3.4 カスタムしたPinの利用3.5 CustomPin ...

swift

iOSで画像の任意の場所をぼかし処理する方法

1 はじめに1.1 前提条件2 準備3 実装3.1 ぼかし処理のイメージ画像3.2 サンプルコード4 さいごに はじめに iOSで写真の任意の場所にぼかし処理をしたいケースがありましたので、 iOSで ...

swift

[Swift]通信状況を取得できるReachability.swiftを使ってみた

1 はじめに2 準備3 実装3.1 通信状況を確認する3.2 通信可能になった時に通知する4 さいごに はじめに こんにちは、nukkyです。 今回は端末の通信状況を取得できるReachability ...

[Swift]忘れられがちなSFSafariViewControllerについて

1 はじめに1.1 前提条件2 SFSafariViewControllerとは2.1 SFSafariViewControllerの特徴2.2 iOS11からのCookie同期について3 SFSaf ...

swift

[Swift]ObjectMapperで簡単にJSONを読み込む

1 はじめに2 準備3 実装3.1 基本的な使い方3.2 ネスト配列に対応してみよう4 さいごに はじめに こんにちは、onukiです。 私はSwiftでJSONを取り扱う際に、 ObjectMapp ...

フォロー

follow us in feedly

page_side_300rect

2017年8月
« 7月   9月 »
 12345
6789101112
13141516171819
20212223242526
2728293031  

アプリ情報

私たちは無料アプリもリリースしています、ぜひご覧ください。 下記のアイコンから無料でダウンロードできます。