【Xcode】Swiftでコードを書いてみた7| AutoLayout

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

そんな方向けの記事内容となります。

この記事を書いた人はこんな感じです。⇩

※この記事を書いている私について詳しくはこちらで紹介しています。

【エンジニアの職探しならこちら🔻】

フリーランスエンジニアに安心保証と豊富な案件紹介を【midworks】

【PR】週3日×高単価案件ならITプロパートナーズ

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】

【PR】週3日×高単価案件ならITプロパートナーズ

【IT・プログラミング関連記事】

【IT業界】SwiftでシンプルなBMI計算アプリ作ってみた

今回はswiftのxcodeを使用してiosの簡単なBMI計算アプリを作ってみました。初心者の方でも取り組みやすいと思いますので、是非試してみてください。

onmywayexplore.com

2021.11.14

【IT業界】JavaScriptでコードを書いてみた|簡単なクイズ アプリ作成

今回はJacaScriptを使用して、簡単なクイズアプリを作成してみました。サイトなどを参考にしてコードを書くとさまざまな発見があります。

onmywayexplore.com

2021.11.14

【IT業界】業界の将来性と未経験者の学習方法がこちらです。

IT業界の将来性とプログラミングの需要はこれから伸びていきます。それに対してIT人材の不足も懸念されています。学ぶなら今ですね。

onmywayexplore.com

2021.11.14

また、何かあったら紹介したいと思います。

質問などがあれば気軽にコメント下さい。

仕事の依頼などがあればメールまたはSNSにてお問い合わせ下さい。

以上が今回のブログとなります。

読んで頂きありがとうございます。

また次回お会いしましょう。

※0円で受けれるプログラミング説明会
今話題のテックキャンプ。
実績、知名度ともに業界最大級の未経験を対象としたテクノロジースクールです。 受講期間中はいつでもメンター(講師)に質問ができ、目的達成のためにトレーナーが徹底的にサポートします。

※【エンジニアを目指すならテックキャンプ！！】今だけ無料カウンセリング受付中！

【ミャンマー写真集】

【ミャンマー語学習教材３選】

【ビルマ語】ミャンマー語話者がおすすめのミャンマー語教材・３選

ミャンマー語(ビルマ語)を学びたいけど何から手を付けたらいいか分からない。そんなあなたに今回ミャンマー語のおすすめ教材３選をご紹介します。

onmywayexplore.com

2022.08.01

※ミャンマー語のテスト問題集作成しました。詳しくはこちらから

※ミャンマースポーツコミュニティ⏩【Myanmar Sports/ISPE】

※ミャンマー✖️日本コミュニティー⏩【MyanJapa Life】