スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

【1-4】SwiftによるiOSプログラミング基礎(スタンフォード大学)

はじめに

スタンフォード大学の「Swiftで作るiOS開発入門」の講義がiTunesで配信されていることが話題になりました。
私も観てみたのですが基礎から教えてくれてとてもわかりやすい。
でも動画だとどうしても時間が掛かってしまうのでこのシリーズでは講義のエッセンスをまとめていきます。
https://itunes.apple.com/us/course/developing-ios-8-apps-swift/id961180099

シリーズ全体の目的

アップルの新しいプログラム言語「Swift」でiOSのイケてるアプリを作ること

シリーズ1の目的

「Swift」でCalculator(電卓)をつくる

この記事(シリーズ1-4)の目的

Xcodeでオブジェクトを整列させる


26.jpg
前回Labelがシミュレータからはみ出していることがわかった。
それならなぜわざわざiPhone6と違う形の画面サイズで編集するのか?
仮にiPhone6と同じ解像度のシーンでオブジェクトを配置すると、今度はiPadやiPhone5でレイアウトが崩れてしまうことになる。これを防ぐために画面のサイズにあわせて自動的にオブジェクトの配置を行う。


27.jpg
Labelの内側をコントロールキーを押しながらドラッグすると青い線の軌跡があらわれる。この状態でシーンの右端まで持っていくとシーン全体が青色になる。ここでドロップ。


28.jpg
すると黒いボックスメニューが出てくる。ここではいくつかの選択肢があるが、
Trailing Space to Container Margin
を選択して、Labelの右端をシーンの右端に固定する。


29.jpg
すると黄色とオレンジの線が出てくる。これは前の定義を行うためには他の場所の定義も行わなければいけないという合図。


30.jpg
今度はLabelの左端の指定を行うためにコントロールキーを押しながらシーンの左端にドラッグ&ドロップ。


31.jpg
今度は
Leading Space to Container Margin
を選択する。


32.jpg
上部も同様に行う。


33.jpg
ここでは
Top Space to Top Layout Guide
を選択する。


34.jpg
すると両サイドが青色の線に変わり、両サイドが正しく定義できたことになる。
Labelの下側は固定したくないが上下の定義ができていないことになっている。そこで、左下のボタンを押す。


35.jpg
するとオブジェクトのリストが表示された画面が出てくる。
このリストが目に見える形になったのが右側の画面。
ViewのなかにあるLとはLabelのことで値は「0」となっている。


36.jpg
ここで右上の黄色いボタンを押す。このボタンはアラートがある時に表示される。


37.jpg
するとなにが間違っているのか、どう解決するのかのオプションが表示される。
今回問題とされていたのはLabelの縦幅がシステムが想定しているサイズよりも大きかった事。
そこで今回は
Update Frame
を選択してLabelの縦幅を正しいサイズに更新する。


38.jpg
するとアラートがすべて消える。


40.jpg
シミュレータで実行してみると今度は0が正しく表示されている。


41.jpg
シミュレータを回転させても表示は崩れない。
iOS Simulator > Hardware > Rotate Left



▶次回はコードを書く

コメント

コメントの投稿

非公開コメント

PR

PR

プロフィール

何でも書くman

Author:何でも書くman
思ったことや備忘録など、とりあえずなんでも書きます。IT系のことや趣味、生活に関わることなども。

ページの先頭へ戻る
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。