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

テーブルビューの基本とデータソース

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
テーブルビューを利用するアプリを作成します。データソースを使って独自のデータを表示する仕組みを説明します。
講師:
07:18

字幕

このレッスンでは、テーブルビューを利用するアプリケーションを作成しデータソースを使って独自のデータを表示する仕組みを説明します。それではまず新しいプロジェクトを作成します。Welcome to Xcode の画面からCreate a new Xcodeproject を選択するか、あるいは File から Newそして Project と選択して、新しいプロジェクトを作成します。プロジェクトのテンプレート選択画面ではSingle View Application を選択しておきましょう。Next ボタンを押します。Product Name の所にはTableViewDemo と入力し、Organization Name には自分の名前を入力します。また OrganizationIdentifier の所にはmytest と入力しておいてください。Language にはSwift を選択します。Devices にはiPhone を選択しUse Core Data のチェックは外しておいてください。それでは Next ボタンを押してデスクトップにプロジェクトを作成します。Create ボタンを押してプロジェクトの作成を完了しましょう。 それではまずストーリーボードを編集して、テーブルビューのインターフェイス部品を配置します。Main.storyboard を選択してストーリーボードの編集画面に移動します。そしてオブジェクトライブラリの中からtable と入力し、真ん中の所にある Tabel Viewこちらを選択してください。Table View を画面にドラッグ&ドロップすると最大の大きさに変更されますので、真ん中にこのように合わせて指を離します。それではこうして配置したテーブルビューに対して今度は制約を追加しましょう。このエディタ画面の右下の真ん中にあるPin のボタンを押して、画面の Constrain tomargins というこちらのチェックは外しておいて、それで左側と上側 右側と下側の4 ヶ所に吸い付くようなテーブルビューを作成したいと思います。それでは一番下にあるAdd 4 Constraintsというボタンを押して、4 つの制約を追加しましょう。これでテーブルビューの用意が出来ました。次に、アプリケーション独自のデータを表示するためにView Controllerを編集します。ViewController.swiftを選択してこちらのクラスの宣言に、この View Controller がテーブルビューのデータソースであるということを宣言します。 UIViewControllerと書かれている後ろの所にコンマを書いて、UITableViewDataSourceと入力してください。こうすることで、この View Controller はデータソースであるということが宣言できます。テーブルビューのデータソースには、いくつかのメソッドを用意する必要があります。この View Controller の実装の中に、まずはnumberOfSectionsInTableViewというメソッドを実装して、このテーブルビューの中にセクションをいくつ表示するかということを宣言します。セクションは行のまとまりを表します。ここでは return 1 と書いて、1 つしかまとまりを表示しないということを示します。そしてさらにその先に tableView、そして下の方に numberOfRowsInSectionというメソッドがありますので、このメソッドを追加します。この tableViewnumberOfRowsInSectionというメソッドは、テーブルビューの中に何行のデータを表示するかということを表すことができるメソッドです。ここでは return 10 として、10 個の要素を表示できるようにしてみましょう。 そして最後に tableView のcellForRowAtIndexPathというメソッドを追加します。このメソッドの中には、テーブルの中身をどのように表示するのかということを指定するためのセルを作成する部分を書きます。今回ここでは var cell と書いて、この cell 変数をまずUITableViewCellというオブジェクトを作成して初期化します。そしてこの cell の中にtextLabelという項目がありますので、この textLabel にアクセスしてそのテキストを "item"と表示するようにしてみましょう。そしてこの cell をreturn します。以上でデータソースの実装は完了しました。次に Main.storyboard のこの Table View からView Controller に対してこの ViewController が現在のデータソースであるということを指定する必要がありますので、Table View を右クリックあるいは Ctrl キーを押しながら左クリックして、そのボタンを離さずにドラッグすることで、View Controller の所までこの青い線を伸ばします。 そしてマウスのボタンを離してください。そしてこの Outlets という所からdataSource を指定するということを選択します。以上でテーブルビューのデータソースを結びつけることができました。それではシミュレーターで実行してみましょう。実行ボタンを押します。するとシミュレーターが起動して、このように 10 個のテーブルのアイテムが表示されるようになったことが分かると思います。現在ちょっと一番上の所までこのテーブルビューを持ってきてしまっているので、ちょっとこのステータスコアの所に時間のね 表示するこのステータスコアの所にかかってしまっていますので、少しだけこのテーブルビューの上の所のこの位置を下に持ってきます。はいこうやってドラッグして下に持ってきます。そうするとちょっとここにエラーが表示されるようになりましたので、右下にあるこの ResolveAuto Layout のボタンを押して、これで Reset toSuggested Constraintsというこの項目を選択することで調整します。ついでに View Controllerのこの Item の所も同じ項目の名前ばかりが表示されてしまうとちょっと分かりにくいので、Item \() と書いてこの中にindexPath.rowと書いてですね、何行目の Item なのかということが表示されるようにしておきたいと思います。 それではもう一度実行してみましょう。はい シミュレーターの上で実行が開始されました。そうすると、上のこのステータスバーの所にかからず、そして Item が 0 番から 9 番まで10 個のものが用意されていることが分かります。また、タッチをするとこのようにグレーになって、その行が選択されていることも分かります。このレッスンでは、テーブルビューを利用するアプリケーションを作成し、実際にデータソースを使って独自のデータを表示する仕組みを説明しました。

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

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

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

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

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

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