Auto Layout ドリルを解きました
Auto Layout ドリル · mixi-inc/iOSTraining Wiki · GitHub
のドリルを解きました。
10日ぶりなんて久しぶりすぎてSpotlight使って探すくらいXcodeのアイコンを忘れていたとかそういうことはありません。
昨日、雑に右下の方にアイコンが3つあると書きましたが4つでした(おい)。
一番左から
- 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 Container
とVertical Center in Container
にチェックをし、
下の方にAdd 2 Constrains
を表示されるので、クリックします。
そうするとsubViewの親のViewの下(つまり、subViewと同じ)階層に
Constraintsというのが出来て、Center X Alignment
, Center Y Alignment
というのが表示されます。
次に、subViewをクリックしてから、|-□-|(View全体のConstrains)のアイコンをクリックします。
Width
とHeight
にチェックを入れ、それぞれ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にもそういった項目名はあった気がするのですが、なんでか
こんな感じでチェックできないので、上のメニューから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の背景色だけ置いておきます。 階層構造はこんな感じにしました。
青い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を指定します。
回転方向に依っては回転してくれないことがありましたが、とりあえず以下のスクリーンショットが取れたので今日はおしまい。