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

TSUKUMO の初売りでNAS (Synology DiskStation DS218j)購入!!

イベント

2020.01.04

Mac用 エミュレーター 「OpenEmu」が、V2.2リリース!GameCube対応して更に神アプリ進化!

Game

2020.01.01

この時期になると、やたらレトロゲームをやりたくなるのはなんですかね?ハードオフに向かうの巻その2

Game

2019.12.31

この時期になると、やたらレトロゲームをやりたくなるのはなんですかね?ハードオフに向かうの巻

Game

2019.12.14

MacでWindowsアプリ(TeraPad)を動かす(Wine 4.0.3)

mac

2019.12.08

kindleストア7周年記念セール中!技術書なども40%OFF以上でお買い得!(11/7まで)

イベント

2019.10.28

あと10日で「jsdo.it」のサービスが終わってしまう!! ソースダウンロードまだの方は急げぇ〜!

JavaScript

2019.10.21

Arduino IDEとArduino接続して、サクッと設定。

電子工作

2019.08.15

ついに、M5Stack Gray 購入!! その他諸々、購入したボードの振り返りなど。

電子工作

2019.08.12

正規表現 先読み後読み 論理積

JavaScript

2019.07.28

PythonでGUIアプリ開発「PyQt」を使った感想

Python

2019.07.18

「二段階認証?」という方も 5分で覚える パスワードレス WebAuthnのまとめ

JavaScript

2019.07.07

RANKING

Follow

SPONSOR

現在、掲載募集中です。



Links

About Us

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

Entry Profile

Graphical FrontEnd Engineer
- Daisuke Takayama

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

FOLLOW US