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も先日初めて使いましたがまだまだ使い慣れないので、
早く使い慣れたいです。

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

blog-page_footer_336




blog-page_footer_336




-iOS
-

執筆者:


comment

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

CAPTCHA


関連記事

swift

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

1 はじめに2 準備3 実装3.1 準備3.2 AutoLayoutを指定3.3 UIAlertControllerのカスタム4 さいごに はじめに こんにちは、nukkyです。 iOSの実装中にコー ...

[Swift]iOSの脱獄チェックを行う。

1 はじめに2 脱獄とは3 脱獄のチェックについて3.1 Cydiaのチェック3.2 パスのチェック3.3 書き込み権限のチェック3.4 iOSシミュレーターのチェックを行わない。4 コードまとめ5 ...

swift

[Swift]UIPageViewControllerを使ってみよう!

1 はじめに1.1 前提条件2 UIPageViewControllerとは3 実装3.1 ViewControllerを準備3.2 UIPageViewControllerを準備3.3 最初の画面を ...

swift

端末のモデル名やサイズを簡単に取得できるライブラリ「Device」

1 はじめに2 準備3 試してみる3.1 端末モデル名3.2 画面サイズ3.3 端末の種類4 さいごに はじめに こんにちは、nukkyです。 今回は端末のサイズやモデル名などを 簡単に取得できるライ ...

CollectionViewの並び替えを実装する

1 はじめに2 実装方法3 手順4 ロングタップの実装5 並び替えを可とする6 並び替え時のデータ処理7 次回表示時8 他に9 さいごに10 おすすめ書籍 はじめに こんにちは。Yossyです。 前回 ...

フォロー

follow us in feedly

blog-page_side_responsive

2017年8月
 12345
6789101112
13141516171819
20212223242526
2728293031 

アプリ情報

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