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

日付ピッカーを使うアプリのデザイン

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
日付ピッカーという部品の使い方を説明するために、それを使用するアプリケーションのインタフェース・デザインを行います。部品の配置と制約の設定を行います。
講師:
04:05

字幕

このレッスンでは日付を選択するための日付ピッカーを作成しその日付ピッカーで選択された日付に対してそれが何曜日かということを表示するボタンを作りたいと思います。それでは実際にアプリケーションを作っていきましょう。まずは Create a newXcode projectこちらを選択して新しいプロジェクトを作成します。Single ViewApplication としてDatePickerDemo という名前でアプリケーションを作成します。Next ボタンを押してデスクトップにアプリケーションを作成します。それではまずインターフェイスのデザインを行っていきましょう。Main.Storyboardを選択して部品の配置を行っていきます。まず日付の選択を行うためのDate Picker はこちらの検索のフィールドにpicker と入力してそして、この Date Pickerというのがこれで見つかりますのでこちらをドラッグ&ドロップで追加することによって利用できます。少し上の所からは 下にずらして用意しておこうと思います。そしてその日付ピッカーによって日付が選択された後にそれが何曜日かということを表示するボタンを用意したいと思いますのでその下にボタンも配置しましょう。 そしてこの Date Pickerの下のボタン ちょっと大きめにしておいてこちらが 「何曜日?」 というこういう表示のボタンにしておきたいと思います。それではこの Date Picker の部品とそれからボタンの部品に対して制約を追加しましょう。Date Picker の方の制約はまず Pin を使って左側と右側を固定しそして上も固定した上で高さも固定というかたちでこの 4 つの制約を追加します。そして次にこの 「何曜日?」というボタンはですね。横方向には真ん中に配置したいと思いますのでまず横方向の制約を追加します。横方向に真ん中に表示するためにはこの、今までは Pin のこのポップアップを使っていましたけどこちらではここの左側のこのボタンを使ってHorizontal Centerin Container というこの横方向に真ん中に配置してくださいというこの制約を使います。ではまずこの制約を 1 個追加した上でさらに Pin を使ってDate Picker との間を8 ポイント空けるということを選択します。で、横幅は Width Height横幅と高さは固定してやるということでここでは3 つの制約だけを追加します。 そしてこのように全てが青くなりましたので問題なく配置できてることが分かると思います。それではこちらの日付ピッカーがしっかりとレイアウトされているかということを確かめておきましょう。Preview モードを使って確認しますこちらのアシスタントエディタを表示してAutomatic になっているところをPreview に変更します。デフォルトの状態では4 インチが表示されていますのでちょっと画面を小さくします。余白をダブルクリックすることで小さくなりますので左下の + ボタンを押して4.7 インチと それから 5.5 インチで見たときに問題がないことを確認しておきましょう。このように Date Pickerがすべての大きさに対応して横幅が変わっているということが分かりますし「何曜日?」というボタンもしっかりと真ん中に表示されてそして特に文字が切れたりせずに配置されていることが分かると思います。このレッスンでは日付ピッカーを使うためのインターフェイスデザインを行いました。

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

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

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

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

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

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