woshidan's loose leaf

ぼんやり勉強しています

Auto Layout ドリルを解きました

Auto Layout ドリル · mixi-inc/iOSTraining Wiki · GitHub

のドリルを解きました。

10日ぶりなんて久しぶりすぎてSpotlight使って探すくらいXcodeのアイコンを忘れていたとかそういうことはありません。

昨日、雑に右下の方にアイコンが3つあると書きましたが4つでした(おい)。

f:id:woshidan:20150407234105p:plain

一番左から

  • Alignment制約の追加
  • View全体のConstrainsの追加
  • Constainsなどを更新したあとにViewのsubviewの位置等を更新
  • 3つめのボタンで、更新した条件を適用し直すviewの範囲(親viewかsubviewか)

上のメニューのEditorからPinなどもいじれるのも確認しました。

中央に配置の問題

下の図のように、200px四方のViewを画面中央に配置してください。 その際、違うサイズのシミュレータや回転しても正しく中央に配置されるようにしてください。 (シミュレータの回転は コマンド+矢印キー です)

とりあえず、実は、Viewの下にViewを追加するのがはじめてだから少し戸惑いました Viewを選択しているときに、左側からViewを放り込めば良いだけなんですが。

Viewがレイヤーみたいなものに思っていて、その上にUIViewのサブクラスのインスタンスであるUIButtonとか そういうのを置くと思っていました。

しかし、Core Animation LayerとViewは違うみたいで、Viewはその下に他のViewも置ける部品みたいですね。 というわけで、Viewの下にViewも置いていいんですよね。

ViewをsubViewの中に置いたあと、分かりやすいように最初に背景色を変えて、
AlignmentのHorizontal Center in ContainerVertical Center in Containerにチェックをし、 下の方にAdd 2 Constrainsを表示されるので、クリックします。

そうするとsubViewの親のViewの下(つまり、subViewと同じ)階層に Constraintsというのが出来て、Center X Alignment, Center Y Alignmentというのが表示されます。

次に、subViewをクリックしてから、|-□-|(View全体のConstrains)のアイコンをクリックします。 WidthHeightにチェックを入れ、それぞれ200と入力してから、下方のAdd 2 ConstrainsをクリックしたらOKでした。

画面サイズに合わせるの問題

下の図のように、親Viewとのマージンが4方向全てで70pxになるようにViewを配置してください。

とりあえず、subviewをsuperviewの中央に配置するのはさきほどの問題のままでよさそうです。

Width, Heightの200px, 200px以下の制限を外します。 Constraintsを削除する時は削除したいConstraintsをクリックしてからdeleteを押せばよいです。

Alignのところを改めてクリックすると上の方にConstraints to marginsとあるので、 そこの4つのマスに全部70pxと入れてみます!

そうすると、subViewと同じ階層のConstraintsに

  • Vertical Space (70) - View - Top Layout Guide
  • Horizontal Space (70) - View - View
  • Horizontal Space (70) - View - View

みたいな設定が増えています。これでいけたらいいのですけど。 ... OKでした。

回答では Leading Space, Trailing Space, Top Space, Bottom Spaceを使っていたので、 上記の3つのSpaceの設定を排除してこちらでもやってみます。

Alignにもそういった項目名はあった気がするのですが、なんでか

f:id:woshidan:20150408000737p:plain

こんな感じでチェックできないので、上のメニューからPinの項目を見てみます。

subviewの方をクリックしたあと、Editor > Pin > Leading Space to Superviewを選択すると Constantの初期値に200が入った状態でSuperview配下のConstraintsにLeading Spaceの項が追加されます。

同じ調子でTrailing Space, Top Space, Bottom Spaceも追加します。

追加したあと、それぞれのConstantを70に変更します。

いつの間にか、

  • Vertical Space (70) - View - View
  • Vertical Space (70) - View - View
  • Horizontal Space (70) - View - View
  • Horizontal Space (70) - View - View

に化けていましたがXcodeが自動的に変換するのでしょう。起動してみた結果OKでした(当たり前です!)。

四隅に配置の問題

下の図のように画面の四隅に40ピクセル四方のViewを配置してください。 その際、画面の上から40px, それ以外の縁からは20px離すようにしてください

とりあえず、今まで使ってきたsubviewを削除して気分を新たに4つviewを置きます。

何も制約を指定しないとViewはSuperviewと同じ大きさで重なっていたので、さらに孫ひ孫が出来たりするのを左側の ファイルツリーで直しつつ4つ置いて、分かりやすく背景色を変え、WidthとHeightにチェックをつけて40pxの制限を加えるのですが、 このままだと40pxに縮小したときにSuperViewとどこで間隔を空けるのかが決まらないためか、40pxの設定が反映されません。

というわけで、上から順に

  • Leading Space 20px, Top Space 40px
  • Trailing Space 20px, Top Space 40px
  • Leading Space 20px, Bottom Space 20px
  • Trailing Space 20px, Bottom Space 20px

のPinの設定を追加していきます。

追加してもそのままだと、見た目に反映されてくれないので|-△-|からAll Views > Update Framesを選択すると、それっぽくなります。

(間違えてUpdate Constraitsを選ぶと現在の表示に合わせてConstraintsの定数を設定し直す...つまりやり直しに鳴ります)

回転して遊んでみて問題なかったので、次へ進みます。

階層構造の問題

以下の図のように、画面下部にグレーの帯のViewを配置し、その上に60px四方の青いViewとラベルを配置してください。 その際、以下条件を満たすようにしてください。

  • グレーの帯は親Viewいっぱいに広がるようにする
  • 青いViewはグレーのViewから上と左について8pxのマージンを取る
  • ラベルは青いViewから8pxのマージンと上から8pxのマージンを取る

少しXMLっぽさを感じました。

ひとまず、グレーのViewと青いView、Labelを置くだけ置いて分かりやすいようにViewの背景色だけ置いておきます。 階層構造はこんな感じにしました。

f:id:woshidan:20150408004308p:plain

青いViewのWidthとHeightを60pxに指定します。 次にPinを使って、青いViewから灰色のViewに対して、

  • Leading Space 8px
  • Top Space 8px

を指定します。

次に灰色のViewのHeightを100pxに指定し、灰色のViewからSuperviewに対して

  • Bottom Space 0px
  • Leading Space 0px
  • Trailing Space 0px

を指定します。

最後に、ラベルに対して、青いViewから横方向のmargin 8pxと、ラベルから灰色のViewに対して8pxのTop Spaceを指定します。

回転方向に依っては回転してくれないことがありましたが、とりあえず以下のスクリーンショットが取れたので今日はおしまい。

f:id:woshidan:20150408005236p:plain f:id:woshidan:20150408005244p:plain