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

ピッカービューのデータソースを使う

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
ピッカービューという部品の使い方を説明するために、それを使用して、現在の気分を選択するアプリを作ってみます。部品の配置と制約の設定を行った後、データソースとDelegateのためのコードを追加していきます。
講師:
07:30

字幕

このレッスンではPicker Viewという部品を利用して、現在の気分を選択するようなアプリケーションを作成します。それではまず、アプリケーションのためのプロジェクトを作成しましょう。Welcome to Xcodeの画面からCreate a new Xcodeproject を選択します。あるいは、「ファイル」メニューからNew > Project と選択しても同じことができます。それではiOS Application の中から、Single ViewApplication を選択して下さいNext ボタンを押して、Product Name の所にMyFeeling という名前のアプリケーションの名前を付けます。Organization Nameの所には自分の名前を、OrganizationIdentifier にはmytest を入力し、Language に Swift、Devices の所にiPhone を選択しておきましょう。それでは Next ボタンを押します。デスクトップにプロジェクトを作成します。それではインターフェイスのデザインを行いましょう。まずは Main.storyboardを選択します。 そしてオブジェクトライブラリの中からpicker と入力して、Picker Viewというものを選択します。この Picker View をドラッグ&ドロップで貼り付けると、画面上にこのように左端と右端がくっつくように部品が配置されますので、上から少し離した状態で配置してください。このアプリケーションではこの Picker View のみを使いたいと思います。それでは制約を追加しましょう。Pin のボタンから左端と右端 そして上にくっつけますよということを選択して、そして高さを固定します。Height の制約を選択してAdd 4 Constraints のボタン、4 つの制約を追加するためのボタンを押しましょう。こうすることによって制約が追加されました。ただしアプリケーションをこのまま実行しても何も起きません。一度ちょっと実行してみますが、アプリケーションを実行してもこのように何が選択されているかということを表すこの線は表示されているのですが、それ以外に何もデータらしきものが表示されていません。実はこの Picker Viewというのは、どのようなデータを表示するのかということを、プログラムの中からこの Picker View に対して与えてやる必要があります。 それではここで Picker Viewの基本的な使い方を確認しておきましょう。カスタムなピッカーを作るとき、Picker View の他に2 つのオブジェクトが必要になります。1 つは Data Source、要素の数はいくつなのか、列の数はいくつなのか、ということを問い合わせるためのData Source が必要になります。また、それぞれの行にどのようなデータを表示するのかということと、その行が選択されたときに何をするのかということを指定するためには、Delegate というものが必要になります。この Data Source とDelegate は、同じオブジェクトであっても別のオブジェクトであっても構いませんが、この Data Source とDelegate がピッカーには必要になります。それではこの Data Source とDelegate を、自分のアプリケーションに用意しましょう。ViewContriller.swiftのファイルを開いてください。そしてこの ViewControllerのクラスの宣言の後ろの所に、現在は UIViewControllerと書いてあるだけですが、ここに UIPickerView-DataSource、そしてUIPickerViewDelegateと この 2 つを指定することにより、この ViewContrillerというクラスはData Source にもなるしDelegate にもなるということを宣言することができます。 それでは Main.storyboardの方に戻って、この Picker View からこの View Controllerに対してこの Data Source とDelegate の足を繋げておきます。やり方は簡単で、この Picker View の上にマウスをもってきて右クリックあるいは左クリックのままCtrl キーを押して左クリックを押したまま線をこの View Controllerのところに繋げます。そしてこのView Controller の所に、上に持って行っても構いませんし、左側のドキュメントアウトラインを表示してこの View Controller の所に持って行っても構いませんが、どちらかの方法でこの View Controller に足を繋げてdataSouce をまず結びつけます。そしてもう一度同じ作業を行って、Picker View とView Controller のDelegate を接続します。これで Picker View のData Source とDelegate が接続されましたので、View Controller の中に今度は必要なメソッドを書いて、Picker View に何を表示するのかということを指定していきます。 まずは Picker View にいくつの要素が必要なのかということを宣言する必要がありますので、numberOfComponents-InPickerViewというメソッドを追加してください。そして return 1 と書くことで、ここには 1 つの要素だけを表示します、というふうに書きます。そして次にpickerView というふうに書いて、これ、pickerView の後ろの所がこの attributedTitleであるとか、didSelectRow であるとか、色々なものがあるんですが、ここに numberOfRows-InComponentというのを選択することによって、これでいくつのデータがあるのかということを指定してやります。でここでは上の方にですね 1 つ、ちょっと let を使って定数を用意したいと思います。moods 、自分の気分を表すmoods というのを用意しまして、ここに配列で "リラックス"の状態、それから"安心"の状態、そして"楽しい"という状態と、"苦しい"という状態と、"悲しい"という状態、この 5 つの状態を表す配列を用意したいと思います。そしてこの numberOfRows-InComponent の中では、この moods の中にいくつの要素が含まれているかということを return するために、returnmoods.count と書いてください。 こうすることで配列の個数がそのまま return されます。そしてさらに pickerView のタイトルは何かということを return したいので、これでこのmoods の配列の row 番目ここの row という所で表示する要素の何番目の要素かということがやって来ますので、それを使ってこの moods のrow 番目を表示することで、このリラックスとか安心とかいった文字列が表示されます。それではシミュレーターで実行して、動作を確認しておきましょう。こうしてシミュレーターを実行することで、リラックス、安心、楽しい、苦しい、悲しいといった現在の気分が選択できるようになりました。このレッスンでは、自分のアプリでPicker View を使うための基本的な方法を説明しました。

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

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

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

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

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

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