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

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

この記事は最終更新日から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レイアウトが行えるのはいいですよね。

ではでは、また次回に。

Related Article

LATEST NEWS

RANKING

ARCHIVE

SPONSOR

現在、掲載募集中です。



Links

現在、掲載募集中です。



About Us

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

Entry Profile

Graphical FrontEnd Engineer
- Daisuke Takayama

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