24052


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

現在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で行おうと思いましたが、コードでの制御も考えています。  
こういう場合はコードで制御した方が良い。というのもありましたら合わせて教えていただきたいです。

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


CC BY-SA 3.0
2016-04-15T02:20:14.693
24031
2016-04-15T12:20:00.180
14782
question
xcode autolayout sizeclass
SizeClassとAutoLayoutを使用して画面サイズに応じて画面内パーツの拡大・縮小の行い方


質問しておいてなんですが、以下のサイトを参考にした結果解決いたしました。  
<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は先述の通り)

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


CC BY-SA 3.0
2016-04-15T12:20:00.180
24052
2016-04-15T12:20:00.180
14782
24031
answer