SwiftによるiOSアプリ開発基本講座

サイズクラスの使い方

全333コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
新しいアプリを作成し、いくつかの部品を配置して、それらの部品の設定をサイズクラスを使って変化させる方法を説明します。
講師:
08:10

字幕

このレッスンでは、 新しいアプリを作成し、いくつかの部品を配置してそれらの設定をサイズクラスを使って行う方法を説明します。それではまず Welcometo Xcode の画面から、Create a new Xcode Projectこちらをクリックするか、ファイルメニューからNew Project と選択して、新しいプロジェクトを作成しましょう。今回はiOS アプリケーションの中にあるシングルビューアプリケーションを選択します。それでは Next ボタンを押してください。Product Name のところにSizeClassDemo と入力して、Organization Nameのところには自分の名前、Organization Identifierには mytest と入力します。Language には Swift を、Devices には今回はiPhone を選択しておきましょう。そして Use Core Data のチェックマークは外しておきます。では Next ボタンをクリックしてください。そしてデスクトップにこのプロジェクトの作成を 完了させます。それでは早速Main.storyboard を使ってこの iPhone の画面に新しい部品を配置していきたいと思います。 まず画面の真ん中にひとつ大きなラベルを 作成しましょう。ラベルを検索してドラッグアンドドロップで 追加します。そしてサイズクラスのテストです。丸はいらないかこのように入力しまして、ちょっと大きめにサイズを変更しておきます。真ん中に表示されるように中央寄せにしておいて、フォントの大きさを少し大きめにしておきましょう。そしてこのフォントをレギュラーレギュラーのままでいいですねこれで ラベルを真ん中にもう一度このように寄せます。制約も追加しておきましょう。制約はまず Align のこの制約のボタンを使ってHorizonatal Centerin Containerそして Vertical Centerin Container を使って上にも下にも中央に表示されるようにしておきます。そしてこの二つの制約を追加して、さらにこのピンのボタンを使ってピンのところからもWidth と Height 横幅と高さ両方とも固定しておきます。こちらも二つ制約を追加しました。ではさらにこのラベルの下にもボタンを配置してみましょう。この普通のボタンをですねラベルの下に配置します。そしてこのボタンはラベルのすぐ下に配置されるようにしておきたいと思いますので、ピンボタンを使って上にあるラベルのところにくっつくということで、上にくっつく制約とそれから横方向の横幅と縦幅とを両方とも固定しておくということでこの 3 つのコンストレインを追加します。 またピンの ボタンから HorizonatalCenter in Container を選択して、こちらも ラベルと同様に真ん中に表示されるように しておきましょう。これも追加します。ではこの状態で 一度アプリケーションを実行してみましょう。実行ボタンを押してシミュレータ上でアプリケーションを起動します。するとこのようにiPhone6 の画面の上にこのいま配置したばかりの部品が配置されました。で、これを Cmd+← か → かを使って横に 回転させてみると、サイズクラスが変わります。変わっても今の所なにもしてないので中央に表示されるだけですけども、中央にいま表示されているこのラベルですね。このラベルのフォントサイズをまず回転させた時に小さくしてみたいと思います。それからいまボタンが表示されていますがこれも画面が小さくなったらいらなくなったというふうに考えて消すようにしてみましょう。それではこちらの作業をやってみます。シミュレータの実行を終了して、まずですねこちらのフォントからいきましょう。このサイズクラスのテストですというのが小さくなったとき、縦方向に小さくなったときにちょっと小さいサイズにするということで、その設定をしてみたいと思います。 それをどのようにするかというと、この右側のインスペクタ領域。このインスペクタ領域のフォントのところを見ていただきますと、Xcode6 まではなかったプラスボタンがここに用意されています。このプラスボタンを一度クリックすると、ここに Any Width、 Compact Width、Regular Width、 といったようにこういったものがでてきます。ここに対してですね、今回はいまAny Width でどの横幅に対してもこのサイズで表示してくださいというのが出ているのですが、ここに Compact Heightというのがあるので、 ここでどの横幅に対しても高さがコンパクトになったらこのテキストのフォントサイズを小さくしてくださいと指定するために、Any Width の Compact Heightこちらを選択してみます。そうするとフォント設定がこのように二つになることがわかります。下の方がこの高さがコンパクトになったときの設定になりますので、高さがコンパクトになったときこのように文字を小さくするんだといったことで 14pt まで小さくしてみましょう。こうして小さくしたこの設定はですね、右側のところにAssistant Editor を使ってプレビューするとよくわかります。 実際にやってみましょう。この丸が二つ並んでいるAssistant Editor の表示ボタンを押して、Assistant Editorを表示します。そしてここに Automatic と最初恐らくなっていると思うのですが、これを Preview に変更してやります。そうするとこのようにiPhone4-inch の画面が表示されますので、さらにここでプラスボタンを押してこの 4-inch がもう一つ表示されたらどうなるか。これ、自動的にもう 4-inch を二つ追加すると横の方は自動的に横向きになります。ここでちょっと ダブルクリックするとこうなりますね。いまダブルクリックしてこれ確認しましたけどこっちをちょっと寄せましょうか。このようにいまサイズクラスを使ってフォントサイズを変更したことによって、横方向になっているときにはこのように フォントのサイズが小さくなったことがわかります。これと同じようにしてボタンの表示非表示も切り替えてみましょう。一旦 Assistant Editor は消しておいて、インスペクタをもう一度表示させます。今度はボタンを選択します。今度はボタンももちろんフォントがありますので、ここにプラスボタンがあって、ここでサイズクラスの設定を行うことができますが、さらにその下のところですね、ビューの設定があってものすごい一番下のところまで表示してやるとここにまたさらにプラスボタンがあります。 ここでこのビューを表示するかどうかということを変更することができます。ここでも Any Widthどのような横幅に対してもCompact Height を使って表示されたときにはこれが Installed と書いてあるのは表示されるということです。Installed がチェックされていなければ表示されませんので、このコンパクトのチェックマークを外してみます。それでは iPhone のシミュレータ上で実行してみましょう。実行ボタンをおしてシミュレータ上でアプリケーションを起動します。いま横方向から表示されましたけど縦方向からやってみるともう一度実行しなおしますねときどきシミュレータの実行がおかしくなります。このようにまずサイズクラスのテストですという大きなラベルと、それからボタンがならんで表示されています。これを横方向にこのように変更すると、ボタンが消えてこのラベルのフォントの大きさが小さくなったことがわかります。このレッスンでは、新しいアプリを作成して、いくつかの部品に対してその設定をサイズクラスで行う方法を説明しました。

SwiftによるiOSアプリ開発基本講座

このコースではiPhoneやiPadのアプリを作ってみたい方に向けて、簡単なiOSアプリを作りながらSwiftを使ったXcodeでの開発手順をひとつずつ丁寧に解説していきます。各レッスンではiOSのフレームワークの機能を確認しながら、アウトレットやアクション、MVCモデルやDelegateといったアプリ開発に必要な知識を説明します。

5時間10分 (53 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 2,990
発売日:2015年10月15日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。