Help us understand the problem. What is going on with this article?

Xcode6 Storyboardサイズクラスにより使用するContstraintsを切り替えるには【メモ】

More than 5 years have passed since last update.

Storyboardサイズクラスにより使用するContstraintsを切り替えるには

Xcode6.0から利用できるようになった、StoryBoardのサイズクラス(Size Class)を利用して、iPhoneの縦向き、横向きでConstraintsの値を切り替える方法を確認してみました。

やりたいこと

以下のように、iPhone縦向き(ポートレート)と横向き(ランドスケープ)の状態により、一つの部品の位置設定(Constraints)を切り替えたい。

※異なるConstraintsを切り替えるのではなく、Constraintsの値だけを切り替える方法もあります。

image

デフォルト画面の構成

Storyboardでサイズクラスを使ってデザインをする場合には、まずは基本のサイズクラスであるwAny,hAnyでレイアウトを構成します。

1.ImageViewの作成
 
image
 

2.ImageViewに、Constraintsの設定

|image|image|

3.プレビュー結果
 
image

横向き(ランドスケープ)の時、特定のConstraintsを無効に設定

1.サイズクラスをiPhoneランドスケープに切り替える

image

2.無効にしたいConstraintsを選択し、サイズクラスを追加する

image

3.現在切り替えているサイズクラス(iPhoneランドスケープ)の設定を追加

image

4.選択中のConstraintsに、サイズクラスごとの2つの設定が追加される

image

5.追加したランドスケープ用のConstraintsを無効にする

image

横向き(ランドスケープ)の時だけ使用するConstraintsを追加

1.現在のConstraintsの状態

|image|image|

2.サイズクラスをiPhoneランドスケープに切り替えてから、ImageViewを移動し、Constraintsを設定

image

画像を設定して、動作を確認

1.画面のプレビュー

image

2.縦画面のConstraintsの状態

image

3.横画面のConstraintsの状態

image

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away