コンパイラかく語りき

import { Fun } from 'programming'

Swift実践入門1 レッスン2

引き続き、Swiftの勉強をしていきます。

前回のワードカレッジの続きです。

chuckwebtips.hatenablog.com

 

f:id:chuck0523:20160507084158p:plain

新たなラベルや、レイアウト制約を追加します。

 

はじめに

まず、はじめに。インターフェースビルダー(XCodeでのビュー)と、iOSシミュレータとでは、アプリの見た目が異なります。これはなぜでしょう。

 

Adaptive User Interface

先の答えとしては、アダプティブユーザーインターフェースという概念が挙げられます。

これは、複数のデバイスに対応するために、要素の位置計算が柔軟に為されるということです。

 

なので、XCodeでは散らばって見えても、シミュレータでキツキツになるのは正常といえます。

 

ラベル

ラベルの追加

それでは、ラベルを追加してみます。

XCodeの右下に以下のようなウィンドウがあります。

f:id:chuck0523:20160507091057p:plain

ここからLabelを探して、ビューへとドラッグします。

 

ドラッグしてきたものがこちら。

f:id:chuck0523:20160507091143p:plain

Labelと書かれていますね。

これで追加は成功です。ちなみに、ラベルは具体的にはUILabelというみたいです。

 

ラベルの編集

次に、ラベルの内容を変更します。

f:id:chuck0523:20160507091330p:plain

編集しました。まあ、ふつうにダブルクリックしてテキスト入力するだけですね。

 

ラベルの修飾

見た目を変えます。

右側のこちらのメニューから選択。

f:id:chuck0523:20160507091553p:plain

 

見た目変わりました。

f:id:chuck0523:20160507091927p:plain

 

ラベル位置

ラベルの位置を調整します。

とは言え、ドラッグするだけです。ついでに、サイズも広げました。

f:id:chuck0523:20160507092050p:plain

 

 

コンストレイントの追加

最後に、ラベルにコンストレイント(制約)を加えます。

f:id:chuck0523:20160507092729p:plain

縦位置と横位置を、ビューに合わせます。

 

f:id:chuck0523:20160507092800p:plain

その結果、他のラベルと同様に、天面と側面との関わりが生まれました。

 

確認

シミュレータで確認します。

f:id:chuck0523:20160507092244p:plain

OK。きちんと反映されていますね。

 

 

今回はラベルの追加と編集を行いました。