前回のつづき。

今回はAuto LayoutでViewを水平方向中心、垂直方向中心に固定する方法を説明します。

サンプルコード: https://github.com/stack3/iOSAutoLayoutSamples

サンプルコードを起動し、Centeringを選択。以下の画面が表示されます。

01

横画面にするとこうなります。

02

動作としてはこのようになっています。

  • Label1は上端固定、水平方向(X方向)中心固定
  • Label2は左端固定、垂直方向(Y方向)中心固定
  • Label3は水平、垂直方向中心固定
  • Label4は右端固定、垂直方向中心固定
  • Label5は下端固定、水平方向中心固定

STCenteringViewController.storyboardを開いて、Constraintがどのようになっているか見てみましょう。

Label1を選択し、Size Inspectorを開きます。

01

各Contraintは以下を意味しています。

Align Center X to: Superview View上に水平方向中心に配置
Top Space to: Top Layout Guide Top Layout Guideの下端に固定

※ SuperviewとはLabel1から見て親のViewの意味

※この場合のTop Layout GuideはNavigationBar

Label1を選択したときに、青い線が伸びていますが、これがALign Center XのConstraintです。

02

 

Label2を選択し、Size Inspectorを開いて、Constraintを見ると以下のようになっています。

05

各Contraintは以下を意味しています。

Leading Space to: Superview Viewの左端に固定
Align Center Y to: Superview View上に垂直方向中心に配置

Label2を選択した時に、青い線が伸びていますが、これがAlign Center YのContraintです。

06

 

Label3を選択し、Size Inspectorを開いて、Constraintを見ると以下のようになっています。

07

各Contraintは以下を意味しています。

Align Center Y to: Superview View上に垂直方向中心に配置
Align Center X to: Superview View上に水平方向中心に配置

これによりLabel3は常にViewの中心に表示されます。

Label3を選択した時に、青い線が2本伸びていますが、これがAlign Center X/YのConstraintです。

03

どっちがどっちか混乱しそうになりますが、そのときはSize InspectorからAlign Center Xのように文字で確認した方がわかりやすいかもしれません。

ここまで理解できたらLabel4、Label5は説明しなくても理解できるはずです。自分でConstraintを確認してみてください。

自分でConstraintを設定してみる

Label1を選択して、Align Center XのConstraintを選択します。

04

Deleteを押してAlign Center XのConstraintを削除してください。

起動すると、縦画面の時は問題ないですが、横画面にするとLabel1が中心から左にずれているのを確認できます。

10

Align Center XのContraintを復元してみましょう。

Label1を選択して、Alignボタンを押します。Horizontal Center in Containerにチェックを入れて、Add 1 Constraintボタンを押します。

11

 

Align Center XのConstraintが追加されました。

001

起動すると、今度は横画面のときも、水平方向中心に表示されています。

14

次はLabel3のConstraintを自分で設定してみましょう。

Label3を選択して、Resolve Auto Layout Issuesボタンを押して、Clear Constraintsを選択。Label3のConstraintを削除します。

09

起動して横画面にしてみると、場所がずれてしまいます。

05

 

Label3を選択して、Alignをボタンを押します。Horizontal Center in ContainerとVertical Center in Containerにチェックを入れて、Add 2 Constraintsボタンを押します。

15

Constraintが追加されました。

06

今度は正しく表示されます。

01

02

他のLabelもConstraintを削除して、自分で追加して正しく表示できるかためしてみると良いでしょう。

その4へつづく