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

Archives Details

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

Swift

2016.02.11

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

前回の、

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

の続きとなります。

さて、Xcodeインストールして真っ白アプリ起動できましたね。

さすがにこれじゃ何にもできず、Appleさんに申請なんてとてもとても(笑)

ここで、一旦Appの設定をさらっと確認しましょう。

左のタブ(Navigator Area)のプロジェクトファイルをクリックすると、以下の様な 画面が表示します。

スクリーンショット 2016-02-11 20.17.24

中央のタブ「General」で表示している内容で、AppのVersion、Buildナンバー

また、デプロイのターゲットとするOSを「Deployment Target」や、iPhoneの向きを設定する「DeviceOrientation」

など、Appに関する設定の変更をここで行う事ができます。

また、作成したプロジェクトのフォルダ内にある「Main.storyboard」を選択することによって、

UIのレイアウト作成を行う事ができます。

スクリーンショット 2016-02-11 20.17.48

「Main.storyboard」を選択で、Xcodeの中央に、以下の様に View Controllerの表示します。

こちらにUIkitのオブジェクトを配置する事によって、UIのレイアウトを行えます。

スクリーンショット 2016-02-11 20.34.18

一番右カラム(Utility Area)では、UIレイアウトを行う際に画面サイズの変更などが行えますので、

特に指定しない最初の方は iPhone4.7 inch がレイアウト行いやすいかと思いますので、そちらを選択しておきましょう。

スクリーンショット 2016-02-11 20.19.00

スクリーンショット 2016-02-11 20.19.10

 

Label

それでは、テキスト系のUIkitオブジェクトである「Label」の振る舞いから。

通常、一番右カラム(Utility Area)の右下にUIkitのオブジェクトがリストで表示されます。

スクリーンショット 2016-02-11 20.35.07

一番下に検索窓がありますので、オブジェクトを探す際にはこちらで検索する様にしましょう。

スクリーンショット 2016-02-11 20.35.35

「Label」で検索すると、「Labelオブジェクト」がhitしますので、

これを「View Controller」の方にドラッグアンドドロップで配置する事ができます。

スクリーンショット 2016-02-11 20.35.41

スクリーンショット 2016-02-11 20.55.54

オブジェクトを動かす事によって、中央の補助線だったり端の補助線が表示しますので、

そちらに沿ってレイアウトすると良いでしょう。

スクリーンショット 2016-02-11 20.56.02

「View Controller」に配置したLabelを選択すると、

一番右カラム(Utility Area)の表示が変更し、

こちらで「フォント」「色」「サイズ」などの変更を行う事ができます。

スクリーンショット 2016-02-11 20.56.46

スクリーンショット 2016-02-11 21.01.09

その他にもドロップシャドウ等の設定もこちらで行う事ができます。

一通り変更して、ビルドを実行するとシミュレータにも反映されているのが確認できるかと思います。

スクリーンショット 2016-02-11 21.01.51

Text Field

「Text Field」はユーザーの入力を受け付けるオブジェクトとなっております。

Webで言う所の「input要素」ですね。

こちらも、ドラッグアンドドロップで配置。

 

スクリーンショット 2016-02-11 21.02.56

こちらも選択すると一番右カラム(Utility Area)の表示が変更し、

スクリーンショット 2016-02-11 21.03.02

こちらも「フォント」「色」「サイズ」などの変更の他に

未入力時にテキストを表示する「Placeholder」の設定もこちらで行えます。

スクリーンショット 2016-02-11 21.03.28

ビルド実行し、「Text Field」を選択すると、iPhoneのキーボードが表示します。

スクリーンショット 2016-02-11 21.06.34

その他にも、一番右カラム(Utility Area)のKeyboard Typeで表示するキーボードの設定なども行えます。

スクリーンショット 2016-02-11 21.06.54

また、数字のみの入力が必要な場合は、Keyboard TypeをNumber Padに変更する事によって、

表示するキーボードを数字に変更する事ができます。

スクリーンショット 2016-02-11 21.07.13

その他に色々と設定が行えますので、扱っていただければと思います。

と、今回もSwiftナッシングですが、何も書かなくても簡単にUIレイアウトが行えるのはいいですよね。

ではでは、また次回に。

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

Rust - Actix Web mongo ユーザー登録 JWT認証

Rust

2024.03.24

Rust - Actix Web JWT 認証認可 APIの作成

Rust

2024.02.25

Rust - Actix Web × JSON 静的ファイルをAPIで返却

Rust

2024.01.19

Rust - Actix Web × MongoDB環境をサクッと起動

Rust

2024.01.18

5分で学ぶ RustでWave Function Collapse (波動関数崩壊アルゴリズム)

Rust

2024.01.15

LLaMAモデル GGMLフォーマット(llama.cpp)をRustフレームワーク Leptosを用いて M1MacMiniでサクッと動かす。

Rust

2024.01.11

2024年 狙っているモバイルノートPC

tool

2024.01.07

MacOS XcodeにSDL2を追加

tool

2023.12.26

php 7.4にアップデート

PHP

2023.12.24

5分で覚える Flutter Flameで作る Wave Function Collapse - 波動関数崩壊アルゴリズム

AI・Bot・algorithm

2023.12.20

Flutter - Flameでゲーム作成 (キャラクターの移動)

Flutter

2023.07.23

Flutterで作る ChatGPT Prompt Manager

Flutter

2023.07.12

RANKING

Follow

SPONSOR

現在、掲載募集中です。



Links

About Us

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

Entry Profile

Graphical FrontEnd Engineer
- Daisuke Takayama

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

FOLLOW US