このサイトは、只今WEB業界で活躍中のデザイナー、プログラマーの方々の情報を集めたweb統合情報サイトです。

Archives Details

1から始めるSwift言語。SwiftでiPhoneApp製作 その5 AutoLayout Constraints

Swift

2016.02.14

この記事は最終更新日から1年以上が経過しています。

 

前回の

1から始めるSwift言語。SwiftでiPhoneApp製作 その4 「Button」

の続きとなります。

AutoLayout

これまでに、LabelやButtonなどを、Storyboard上に配置し、ドラッグ&ドロップなどで位置を調整してレイアウトを作って来たのですが、この様に中央に出る青い補助線に合わせたつもりでしたが、

スクリーンショット 2016-02-13 20.43.11

 

iPhone6など他の端末で確認すると「中央にセンタリングされてない」状態だったりしますのね。

これは、ラベルなどをクリックした状態で「Size inspector」タブを開くと座標が確認できるのですが、

表示されている XとY座標は「左上の角を原点とした、絶対座標」となっております。

スクリーンショット 2016-02-14 0.00.00

なので、このままの状態で、サイズの異なるiPhoneで確認すると、

「中央にセンタリングされてない」状態が発生することになります。

そこで登場するのが、「AutoLayout」となります。

「制約(Constraint)」という「位置」や「サイズ」に関するルールを設定することでサイズの異なるiPhoneでも

意図した様にレイアウトを行うことが可能となっております。

 

使い方は簡単です。

「制約(Constraint)」を与えたいviewオブジェクトを選択し、Storyboard下にあるメニューの右から2番目をクリックし

「Add New Constraints」を表示させます。

スクリーンショット 2016-02-13 20.44.10

色々と表示していますが、慣れればなんてことないかと思います。

今回は、上の viewオブジェクトと「60」の距離、width、Heightに「制約(Constraint)」を与えます。

上の viewオブジェクトと「60」の距離は赤の点線になっている箇所をクリックすれば赤の実線となります。

Width、Heightそれぞれチェックを入れます。

この状態で、「Add 3 Constrains」を押下。

スクリーンショット 2016-02-13 20.44.29

こうすることによって、距離、Width、Heightを保持することができます。

続いて、Storyboard下にあるメニューの右から3番目をクリック。

スクリーンショット 2016-02-13 20.44.52

「Horizontally in Container」にチェックを入れ、

「Add 1 Constrains」を押下し、水平方向センタリング(左右中央)を行います。

では、確認。

Label、TextField、Buttonそれぞれ、センタリングされている様ですが、

スクリーンショット 2016-02-13 20.45.44

横向きにしてみると、先ほど「制約(Constraint)」を与えたLabel以外はセンタリングがされていないのが確認できます。

スクリーンショット 2016-02-13 20.45.51

TextFieldも水平方向センタリング(左右中央)させるため、Label同様に「制約(Constraint)」を与えていきます。

スクリーンショット 2016-02-13 20.46.14

スクリーンショット 2016-02-13 20.46.24

それでは確認。

縦向き。

スクリーンショット 2016-02-13 20.47.11

横向きにした際。

いいですね。

TextFieldも水平方向センタリング(左右中央)されているのが確認できます。

スクリーンショット 2016-02-13 20.47.16

それぞれ、与えた「制約(Constraint)」に関しては、Storyboardの左のカラムで確認することができます。

こちらを選択して deleteボタンで削除も行えます。

 

スクリーンショット 2016-02-13 20.47.37

また、Storyboard上のviewオブジェクトにも赤い線が付与され、こちらを選択して削除することができます。

スクリーンショット 2016-02-13 20.47.43

画面いっぱいに表示

今度は、TextFieldを画面サイズが変わっても、横いっぱい(今回は両端に少し余白設けてます)表示してみます。

 

スクリーンショット 2016-02-13 20.48.08

上記の様に、Storyboard上でviewオブジェクトをドラッグして横幅を伸ばします。

スクリーンショット 2016-02-13 20.48.24

今回の「制約(Constraint)」は上、左、右の3つにしました。

それでは確認。

スクリーンショット 2016-02-13 20.48.39

端末を横向きにしてみるっと、

スクリーンショット 2016-02-13 20.48.44

いいですね。

横幅いっぱい(余白を確保しつつ)TextFieldが伸びているのが確認できます。

今回、使用した「制約(Constraint)」のその他の詳細は以下の通りとなっております。

Add New Constraints

スクリーンショット 2016-02-13 20.46.14

Spacing to nearest neighbor:上下左右隣のViewとのスペースを設定
Width:Viewの幅を設定
Height:Viewの高さを設定

Equal Widths:複数のViewを同じ幅にする
Equal Heights:複数のViewを同じ高さにする
Aspect Ratio:Viewの縦横比を固定する

Add New Alignment Constraints

スクリーンショット 2016-02-13 20.46.24

Leading Edges:Viewの左端を揃え
Trailing Edges:Viewの右端を揃え
Top Edges:Viewの上端を揃え
Bottom Edges:Viewの下端を揃え

Holizontal Centers:Viewの横方向の中心揃え
Vertical Centers:Viewの縦方向の中心揃え
Baselines:Viewのベースライン揃え

Horizontal Center in Container:Container内で左右中心に配置
Vertical Center in Container:Container内で上下中心に配置

 

ではではー。

Comment

Related Article

1から始めるSwift言語。SwiftでiPhoneApp製作 その7 基本的なデータ型、Optional型、値型と参照型(ClassとStruct)

2016.02.19

1から始めるSwift言語。SwiftでiPhoneApp製作 その6 PlaygroundでSwift記述

2016.02.15

1から始めるSwift言語。SwiftでiPhoneApp製作 その5 AutoLayout Constraints

2016.02.14

1から始めるSwift言語。SwiftでiPhoneApp製作 その4 「Button」

2016.02.12

1から始めるSwift言語。SwiftでiPhoneApp製作 その3 「Image View」

2016.02.12

1から始めるSwift言語。SwiftでiPhoneApp製作 その2 「Label」「TextField」

2016.02.11

1から始めるSwift言語。SwiftでiPhoneApp製作 その1

2016.02.11

CATEGORY LIST

LATEST NEWS

【Unity x WebAssembly】UnityコンテンツをBlazorとFlutterでWebアプリとして扱う

Unity

2023.01.30

【nasne】M1 Mac Miniで、「torne® mobile」使用して、テレビ視聴。

mac

2022.12.31

2022 VIVA JS World Cup 開幕!! 〜 Vue3で作るサッカーゲーム 〜

JavaScript

2022.12.24

M1 Mac ruby rbenv install error

Ruby

2022.10.10

【Flutter】CheckboxListTileのチェックボックスをカスタマイズ

Flutter

2022.10.01

FLEXISPOT E3で作るスタンディング PCデスク

イベント

2022.09.18

NordVPNを使ってみた感想は?評判や口コミを徹底的に解説

tool

2022.07.26

Ubuntu 20.04 LTS サーバ構築 - DKIM、DMARCを設定する

ubuntu

2022.05.01

Ubuntu 20.04 LTS サーバ構築 - Postfix Let’s EncryptでTLS化

ubuntu

2022.05.01

Ubuntu 20.04 LTS サーバ構築 - Postfix SASL認証

ubuntu

2022.05.01

Ubuntu 20.04 LTS サーバ構築 - Dovecotインストール

ubuntu

2022.05.01

Ubuntu 20.04 LTS サーバ構築 - Postfixインストール

ubuntu

2022.05.01

RANKING

Follow

SPONSOR

現在、掲載募集中です。



Links

About Us

WEBデザイナーの、WEBデザイナーによる、WEBデザイナーの為のサイト。「みんなで書こう!」と仲間を募ってみたが、結局書くのは自分だけとなってしまいました。日々のメモを綴っていきます。

Entry Profile

Graphical FrontEnd Engineer
- Daisuke Takayama

MAD CITY 北九州市で生まれ育つ。20代はバンド活動に明け暮れ、ふと「webデザイナーになりたい。」と思い、デジタルハリウッド福岡校入学。卒業後、数々の賞を受賞、web業界をざわつかせる。
現在、主に、ゲーム制作中心に港区六本木界隈で活動中。

FOLLOW US