読者です 読者をやめる 読者になる 読者になる

ベティーのブログ / 作曲、ボカロ、主に結月ゆかり

ベティーです。歌を作っています。Vocaloid、主に結月ゆかり。

swiftでアプリ開発入門その2 - ラベルでHelloWorld

iPhoneアプリ開発

ラベルという、文字を表示するパーツを使ってHelloWorldアプリを作ってみましょう。

 

ラベルを貼り付けて文字を書く

Xcodeを起動し「swiftでアプリ開発入門そのその1」で作成したTestProjectを開いてください。

f:id:bettychang:20151229100822p:plain

 

Main.Storyboardを選択します。ストーリーボードというのはこれから作るiOSアプリの画面レイアウトを設計できるGUIのツールです。

f:id:bettychang:20151229101659p:plain

 

画面の右下に、黄色いアイコン群が表示されているでしょうか。これらがiOSアプリの画面を作るために必要なパーツです。これを画面中央のスマホ画面のような枠にペタペタと貼り付けて画面を作っていきます。

 

「Label」というアイコンを選択して、画面中央のiPhone画面にドラッグして貼り付けてください。

f:id:bettychang:20151229102138p:plain

*もし黄色いアイコン群が表示されていない場合は、画面右上のタブと、その下の下向き矢印のようなタブアイコンが選択されているか確認してください。Xcodeの画面構成はこのようにいくつものタブで構成されていますのでいろいろ触ってみて画面に慣れましょう。

 

iPhone画面にLabelが張り付きました。

f:id:bettychang:20151229102815p:plain

 

文字がデフォルトの 「Label」となっているのを「Hello World」に変更してみましょう。貼り付けたラベルを選択してください。Xcode右側のタブにLabelのパラメータのようなものがたくさん表示されているのがわかるでしょうか。

下記の枠に「Label」と書いてあるものを「Hello World」と書き換えてエンターをおしてください。

f:id:bettychang:20151229103110p:plain

 

これで中央の画面のラベルの文字が「Hel...」に変わります。

f:id:bettychang:20151229103458p:plain

 

オートレイアウトを設定する

 

ここまでは特に違和感のない画面操作だと思いますが、まだ大事な作業が残っています。それはオートレイアウトの設定です。

オートレイアウトとは、先ほど画面に貼り付けたラベルを具体的にどこに配置(レイアウト)するかの定義です。なぜオートというかは置いておいて、いまのところは「配置場所の定義が別途必要」くらいに認識しておけば良いと思います。

 

文字で説明してもわからないので、早速ラベルの配置場所の定義をしてみましょう。下記のアイコンをクリックしてみてください。Add New Alignment Constraintsという吹き出しのようなものが表示されます。

f:id:bettychang:20151229104544p:plain

 

下記のチェックボックス2つにチェクをいれて、Add 2 Constraintsをクリックしてください。

f:id:bettychang:20151229104910p:plain

 

Labelを貼り付けた画面がなにやら黄色い線がでます。

f:id:bettychang:20151229104957p:plain

 

 

今度は一番左の三角形のアイコンをクリックして、Update Framesをクリックしてみてください。

f:id:bettychang:20151229105317p:plain

 

ラベルが「Hel...」から「Hello World」とちゃんと全部表示されます。

f:id:bettychang:20151229105425p:plain

 

これで作業は完了です。

では、実際にiPhoneでこのアプリを実行してみましょう。

実機で実行するには、iPhoneを充電ケーブルをMacに接続して、Xcodeの画面左上の再生アイコンをクリックします。

 

f:id:bettychang:20151229105740p:plain

 *iPhoneが正常に接続されると、Xcode画面左上がこのようになります

 

 

iPhone5sでの実行画面のキャプチャーです。

f:id:bettychang:20151229105936p:plain

画面中央にHello Worldという文字が表示されたアプリが起動しました。

先ほどのオートレイアウトは、画面中央にものを配置する時によく使います。なお、オートレイアウトのひとつひとつを制約(constraint)といいます。

 

今回は、ラベルの配置位置について下記の2つの制約を設定しました。

  • Horizontally in containers
  • Vertically in containers

ひとつめは、「コンテナに対して水平に」。もうひとつは「コンテナに対して垂直に」という意味です。コンテナとはなんでしょうか。

今回の場合は、Xcode上に見える下記の画面でいう、Viewがコンテナです。

f:id:bettychang:20151229111101p:plain

 

Labelを貼り付けた画面でいうと、下記の枠がViewであり、Labelに対するコンテナです。

f:id:bettychang:20151229111350p:plain

 

つまりLabelの格納先とか入れ物、階層上の親のことをコンテナといいます。配置位置は親に対して水平垂直に(真ん中に)する、という意味ですね。

いかがでしょうか。

このようにオートレイアウトを使用した画面の設計は下記2つの作業が必要です。

  1. Viewにパーツを配置する
  2. オートレイアウトで配置位置を設定する

Viewや画像を配置する場合はもう少し複雑になるので、初めてのかたは、まずはLabelでやってみるとよいと思います。

以上です。ご覧いただきありがとうございました!

 

swift-bettychang.hatenadiary.jp