
こんにちは、ススムです。

Swiftについて興味があって、これから勉強したい!
現在、Swift学習中です!
そんな方向けの記事内容となります。
この記事を書いた人はこんな感じです。⇩
著者
- スポーツの専門学校卒業
- オーストラリアへ語学留学/スシレストランで就労
- JICA海外協力隊にてミャンマーで2年間生活
- Webデザイナー/動画クリエイター/Webエンジニア/Webライター
- オンラインスポーツコーチ
- オンライン日本語講師
- オンラインミャンマー語講師
- ミャンマー人向けオンラインコミュニティ運営
※この記事を書いている私について詳しくはこちらで紹介しています。
本記事の内容
・AutoLayoutとは
【エンジニアの職探しならこちら🔻】
フリーランスエンジニアに安心保証と豊富な案件紹介を【midworks】
SwiftのAutoLayoutとは
iOSには、様々な端末があり、それによって画面の大きななども異なります。
端末によって画面の変化も起きるため、端末の状態が変わると表示が崩れてしまいますが、AutoLayoutを使用すると画面の大きさや状態の違いに対応する機能があります。
では実際にAutoLayoutを使ってみます。

まずlabelを配置して名前を「テスト」と書き換えます。

size inspectorで表示を確認すると、「左上の角を原点とした絶対座標」で管理しており、端末を変えた状態でも同じ場所にViewが表示されます。

Previewにすると各端末でのレイアウトが確認できます。
続いて制約を設定してみます。

labelを選択して、Alignをクリックします。
そして、「Horizontal(横)」と「Vertical(縦)」をチェックして 「Add」します。

こちらの黄色の線は追加した制約と実際の位置がずれていることを表しています。その場合、「option+command+=」で自動で直すことができます。
続いてButtonを配置して、制約を設定します。

Pinを選択して、下端とのスペースを「80」に設定してAddします。
このように端末の画面サイズでレイアウトを決めるには、制約が必要なので、AutoLayoutを使います。
制約の種類

・Leading Edges..Viewの左端揃え
・Trailing Edges..Viewの右端揃え
・Top Edges..Viewの上端揃え
・Bottom Edges..Viewの下端揃え
・Horizontal Centers..Viewの横方向の中心揃え
・Vertical Centers..Viewの縦方向の中心揃え
・Baselines..Viewのベースライン揃え
・Horizontal Center in Container..Container内で左右中心に配置
・Vertical Center in Container..Container内で上下中心に配置

・Spacing to nearest neighbor..上下左右隣のViewとのスペースを設定
・Width..Viewの幅を設定
・Height..Viewの高さを設定
・Equal widths..複数のViewを同じ幅にする
・Equal heights..複数のViewを同じ高さにする
・Aspect ratio..Viewの縦横比を固定する
プログラミング学習ツール
https://prog-8.com/languages
https://dotinstall.com/
私は、エンジニアの学習にあたってこちらの資料を参考にしました。
http://www5e.biglobe.ne.jp/aji/3min
https://ping-t.com/
【エンジニアの職探しならこちら🔻】
フリーランスエンジニアに安心保証と豊富な案件紹介を【midworks】
【IT・プログラミング関連記事】
また、何かあったら紹介したいと思います。
質問などがあれば気軽にコメント下さい。
仕事の依頼などがあればメールまたはSNSにてお問い合わせ下さい。
以上が今回のブログとなります。
読んで頂きありがとうございます。
また次回お会いしましょう。
※0円で受けれるプログラミング説明会
今話題のテックキャンプ。
実績、知名度ともに業界最大級の未経験を対象としたテクノロジースクールです。 受講期間中はいつでもメンター(講師)に質問ができ、目的達成のためにトレーナーが徹底的にサポートします。


【ミャンマー写真集】
【ミャンマー語学習教材3選】
※ミャンマー語のテスト問題集作成しました。詳しくはこちらから
※ミャンマースポーツコミュニティ⏩【Myanmar Sports/ISPE】
※ミャンマー✖️日本コミュニティー⏩【MyanJapa Life】

企業の方、プレスの方、個人の方など、仕事の依頼に関するお問い合わせは以下の
フォームからお気軽にご連絡下さい
コメント