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

[iOS]意外と簡単ウィジェット機能を実装してみる

1 はじめに2 OSごとのできること3 ウィジェットの実装3.1 Today Extensionの追加3.2 Chartを表示3.3 表示を増やす3.4 ウィジェットをタップした際にアプリを起動する4 ...

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

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

Xcode11のデバッグ機能

1 はじめに2 Device Conditions2.1 Thermal state condition2.2 Network link condition3 Environment Override ...

iOS Chartsライブラリを使い移動平均線を描画してみる。

1 はじめに2 Chartsライブラリについて2.1 ライブラリの導入2.2 描画の準備3 折れ線グラフを描画する3.1 LineChartViewの設定3.2 LineChart用のデータ作成3.3 ...

swift

SwiftでLTMorphingLabelを使ってみた

1 はじめに2 LTMorphingLabelとは3 準備4 実装 はじめに 今回はLTMorphingLabelというライブラリが面白そうなので使ってみました。 LTMorphingLabelとは ...

フォロー

blog-page_side_responsive

2017年8月
 12345
6789101112
13141516171819
20212223242526
2728293031  

アプリ情報

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