1

お世話になっております。

現在SizeClassとAutoLayoutを使ってユニバーサルアプリのレイアウトを行っています。

以下の条件でiPadの画面サイズによってパーツの比率はそのままに変化させたいのですが、
iPadの縦画面に合わせると横画面にした際に下側が画面外に出てしまい思ったように表示できません。

  • iPadの縦横画面両方に対応
  • DeploymentTargetは9.0
  • 画面内に横4×縦4のパーツを配置
  • パーツのサイズは全て同じ
  • パーツサイズの比率は保つ(横2:縦1くらい)
  • 4×4の集合体で見た場合、常に中央に表示
  • 4×4の集合体で見た場合、LeadingとTrailingは40以下にならないようにする
  • 一番上側にあるパーツのTopは40固定。
  • 一番下側にあるパーツのBottomは55以下にならないようにする
  • パーツ毎の間隔は横が11縦が55で固定

イメージ的には画面のサイズに合わせて拡大・縮小を行うだけなのでぱぱっと実現できるかと思いましたが見事にはまっています・・・
以下が制約の内容なのですが、考え方が根本的に違うのでしょうか?

  • Viewを追加しその上にパーツを配置。(以下5つは追加したViewに対する制約)
      ・Align Center X to : SuperView
      ・Leading Space to : SuperView >= 40
      ・Trailing Space to : SuperView >= 40
      ・Top Space to : TopLayout Guide Equal 55
      ・Bottom Space to : Bottom Layout Guide >= 55
  • どれか1パーツに対してAspect Retio設定
  • 全パーツに対しequal widthとequal heightを設定
  • 縦横の間隔を設定
  • 外側にあるパーツをViewに張り付くように間隔0に設定

こう考えてレイアウトは行っていったほうがいいなどの考え方がありましたらそれも教えていただきたいです。

また画面のレイアウトは全てStoryBoardで行おうと思いましたが、コードでの制御も考えています。
こういう場合はコードで制御した方が良い。というのもありましたら合わせて教えていただきたいです。

質問が多くなってしまい申し訳ありませんが、
どなたかわかる方がいましたら宜しくお願い致します。

1 件の回答 1

0

質問しておいてなんですが、以下のサイトを参考にした結果解決いたしました。
http://qiita.com/tmokita/items/abf8ec17469185de2d97

自分の確認と誰かの参考になればと思い内容をまとめておきます。

 
Viewの構成は基本のViewの上に5のViewを配置。

 ・TopView
 ・LeftView
 ・RightView
 ・BottomView
 ・MainView

MainView以外はレイアウト調整用のViewです。

 
左辺、中央、右辺と四角形を縦3つに分けた場合以下のように設置します。
 左辺全てがLeftView
 中央上部がTopView
 中央真ん中がMainView
 中央下部がBottomView
 右辺全てがRightView

(アウファベットのHをイメージしてもらえると分かりますか・・・?
  Hの左の縦棒がLeftView
  Hの上のくぼみがTopView
  Hの真ん中の横棒がMainView
  Hの下のくぼみがBottomView
  Hの右の縦棒がRightView

 
まずはMainViewの中のパーツの制約から(数が多いためざっくりと・・・)

 パーツの外側は全てMainViewにくっつけるのでスペースは0。
 パーツ同士の左右の間隔はスペース11で固定、上下の間隔は56で固定。
 どれか1パーツにAspect Ratio設定。
 そのパーツと他のパーツのサイズが同じようにするため、
  全パーツにEqual WidthとEqual Heightを設定。

 
次に5つのViewの制約。

MainView
 Align Center X to : Superview設定。
 スペースは
  Trailing Space to : RightView
  Leading Space to : LeftView
  Top Space to : TopView
  Bottom Space to : BottomView

TopView
 高さを55に固定(Height = 55)
 スペースは
  Trailing Space to : RightView
  Leading Space to : LeftView
  Top Space to : Top Layout Guide
  Bottom Space to : MainView

BottomView
 高さを55以上に設定(Height >= 55)
 スペースは
  Trailing Space to : RightView
  Leading Space to : LeftView
  Top Space to : MainView
  Bottom Space to : Bottom Layout Guide

LeftView
 幅を40以上に設定(Width >= 40)
 RightViewと幅を同じに(Equal Width to : RightView)
 スペースは
  Leading Space to : Superview
  Top Space to : Top Layout Guide
  Bottom Space to : Bottom Layout Guide
  (Trailingは先述の通り)

RightView
 幅を40以上に設定(Width >= 40)
 LeftViewと幅を同じに(Equal Width to : LeftView)
 スペースは
  Trailing Space to : Superview
  Top Space to : Top Layout Guide
  Bottom Space to : Bottom Layout Guide
  (Leadingは先述の通り)

 
これで対応できました。
何か指摘やアドバイス等ありましたら教えていただきたいです。
また、考え方の方は是非ともご教授願いたいので、どなたかお願い致します。

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。