このサイトは、只今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

アーキテクチャConference 2024に参加してきました。

イベント

2024.11.28

Mac minicomでシリアル通信を行う

電子工作

2024.11.21

Mac 容量足りない問題は、外付けSSDで快適に解決!おすすめ外付けSSD

mac

2024.10.16

Z80エミュレータ- EMUZ80の組み立て

電子工作

2024.10.13

Mac VSCodeで、SFML C++開発環境を作る。

C++

2024.09.09

Rust-SDL2 examplesをすべて試す

Rust

2024.09.01

JavaScriptで、DOMを放り投げる処理

JavaScript

2024.07.27

Rustで創る MOS 6502 CPU その2

Rust

2024.07.23

Rustで創る MOS 6502 CPU その1

Rust

2024.07.19

汎用 3D mesh/model viewerを求め。と、簡単に、FBXファイルをglTF(glb)に変換ツールを求め。

C++

2024.06.06

M1 Macで、OpenGL GLUTを使ってコンパイルする

C

2024.04.27

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

Rust

2024.03.24

RANKING

Follow

SPONSOR

現在、掲載募集中です。



Links

About Us

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

Entry Profile

Graphical FrontEnd Engineer
- Daisuke Takayama

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

FOLLOW US