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

Webassembly用いて、SDL 2.0をブラウザでレンダリング

C++

2020.08.10

macOS pyenv環境でtkinterが動かないので、再度インストール

Python

2020.08.09

Mac Home brewでSDL2.0を簡単に環境設定

C

2020.06.24

Django django-rest-auth + Nuxt.js auth-module で作る SPA JWT OAuth ログインシステム その3

Python

2020.06.14

Django django-rest-auth + Nuxt.js auth-module で作る SPA JWT OAuth ログインシステム その2

Python

2020.06.08

Django django-rest-auth + Nuxt.js auth-module で作る SPA JWT OAuth ログインシステム その1

Python

2020.06.07

このコロナ禍で、飛沫感染防止など求められる中「電子メモパッド」が重宝。 1300円で購入可能な電子メモパッドが超絶便利な件。

tool

2020.06.02

OAuthのフローを可視化できるツールを作ってみました。

JavaScript

2020.05.17

Django django-allauthで、サクッとソーシャルログイン機能を実装

Python

2020.04.12

部下を育てる技術

イベント

2020.04.08

令和の時代に、JavaScriptで Shift-JISファイル作成 全銀データフォーマットに対応する。

JavaScript

2020.03.03

インターネットにて世論調査を行う「世論Web」サービスを始めてみました。

JavaScript

2020.01.31

RANKING

Follow

SPONSOR

現在、掲載募集中です。



Links

About Us

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

Entry Profile

Graphical FrontEnd Engineer
- Daisuke Takayama

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

FOLLOW US