あひる裁縫店

好きなこと、技術のこと、くだらないこと

Xcode 9.0 StoryboardでAutoLayout

 

【初投稿!】

アプリ開発初心者です。少しずつやってきたことをまとめたいと思います!

 

もうすぐXcode9が出るのに、Xcode8でのことを書いてるのは気にしない(出てまとめられたら、修正します...)

 

Xcode9確認済み 

 

レイアウトは基本、StoryBoardで行なっています。

 

部品を配置する時、必要な位置情報を教えてあげないと、

適切な場所に配置されません。

 

また、位置情報がわかっても、自らの大きさがわからなければ、

めちゃくちゃなサイズになってしまいます。

 

・X方向

・Y方向

・(View自身の)高さ

・(View)横幅

 

がわかれば、きちんと配置されることになります。(曖昧な表現...)

 

 

《中央に2つのViewを均等に配置する》->高さと幅は決まっている状態

 

目指す状態はこちら

f:id:pg_0212:20170916194046p:plain

 

2つのViewが同じサイズになっており、スペースも同じサイズです。

 

 

(手順)

 

今回はViewのサイズを、200 × 200で設定します。

わかりやすく、オレンジ色のView(orangeView)と緑色のView(greenView)にしました。

 

この時点で、自らの高さと横幅は決まりました。

f:id:pg_0212:20170916190756p:plain

 

 

 

次に、X方向を決めます。今回は中央に来てほしい、「Horizontally in Container」にチェックをいれます。同様にgreenViewもチェックを入れます。

 

f:id:pg_0212:20170916190805p:plain

 

これで、2つのViewのX方向が決まりました(うまくまとめられない。。)

 

次は、Y方向を決めていきます。

 

今回は、スペースも均等になるように配置されてほしいので、

スペースを作るためのViewを作りたいと思います。

 

まずは、3つのViewを下の画像のように配置します。

(わかりやすくspaceViewとしました)

 

f:id:pg_0212:20170916190809p:plain

 

同じ高さのスペースにする = 3つのViewを同じ高さにする

 

ということになので、3つのViewを選択し、

equal hightにチェックを入れます。

 

f:id:pg_0212:20170916190814p:plain

 

これで、spaceViewの高さは全て同じにできました。

※まだ、「同じにする」になっただけで、View高さがが決まっていません。

 

 

次は、

orangeViewのTopを、一番上のspaceViewのBottomから0ポイント、

orangeViewのBottomを、二番目のspaceViewのtTopから0ポイント、

greenViewのTopを、二番目のspaceViewのBottomから0ポイント、

greenViewのBottomを、三番目のspaceViewのTopから0ポイント、で制約づけます。

 

f:id:pg_0212:20170916190823p:plain

これで、2つのViewの位置は決まりました。

 

が、このままではエラーが出ています。なぜでしょうか?

 

 

f:id:pg_0212:20170916194046p:plain

 

はい、spaceViewの幅が決まっていませんでした。

今回は、spaceViewの幅は特に重要ではないので、10ポイントくらいにしておきました。

 

これで、目標の形になりました。

 

 

次、にいきたいのですが長くなりそうなので次回へ...

 

 

関連する記事

Xcode9.0 StoryboardでAutoLayout2 - あひる裁縫店