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

テーブルビューのカスタマイズ

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
テーブルビューをカスタマイズして、複数のセクションを用意して表示する方法を説明します。
講師:
08:38

字幕

このレッスンでは、テーブルビューをカスタマイズして複数のセクションを表示する方法を説明します。まずこちらのアプリケーション実行画面をご覧ください。現在は iMac などのApple の製品群の名前と、その OS を並べて表示するようになっています。でここに新しいセクションを追加して、新しい一つのグループに今度は Mac の中で利用することができるフレームワークの名前を並べて表示するようにしてみたいと思います。それでは実装を行っていきましょう。Xcode に戻って、ViewController.swiftの中に 新しいデータの配列を追加します。var frameworks= [] と書いてこの中にフレームワークの種類を書いていきましょう。ここではタプルで、Foundation というフレームワークはOS X のフレームワーク、そしてApp Kit というフレームワークもOS X のフレームワーク、多分こっちですねOS X のフレームワーク。それからFoundation、こちらは OS X ではなくてiOS のためのFoundation と。それから UIKitこちらはもちろん iOS のものですね。 このように 4 つのフレームワークを今回は表示するようにしてみたいと思います。で、現在この products とframeworks の2 つのデータが出来ましたので、この numberOfSectionsInTableViewというメソッドで1 ではなく 2 をリターンして、2 つセクションがあるということを明示するようにします。そしてこの numberOfRowsInSectionという所では、この section が今回から0 番と 1 番の2 種類やってくるようになりますのでもしもこの section が0 の時は、products の count をリターンするようにする。そうではなくてsection が 1 番の時には、return products.あ products ではなくてframeworks.countとして、frameworks の要素の個数をリターンするというふうにしておきます。なお、そうでない場合には0 をリターンするようにしておきましょう。今エラーがちょっと出ていますが、これはビルドし直せば問題は解決しますね。このようにしてnumberOfRowsInSectionの実装を行いました。 これは細かいところですが、section = 0 としてproducts.count を返して例えば else だったらframeworks のcount をリターンするというふうに書くことも出来るんですが、こうするとですねさらに表示したいデータが3 つ目 4 つ目 増えてきたときにちょっとバグの原因になりかねない書き方になりますので、出来るだけ section が0 番の時 1 番の時というふうに、実際に存在する section の数インデックスですね、0 番の section と1 番の section というふうに実在する section の数でif 文の振り分けを書いた方が、安全な書き方になると思います。そして最後にセルをリターンする所をカスタマイズします。ここでは My Cell というのをですね、今取得して そこに Apple の製品群を表示するようにしていますが、ちょっと新しいセルを追加してみたいと思います。Table View Cell を新しく一つドラッグ&ドロップしまして、ちょっと見た目を変えてみたいと思いますので、今度は Basic でも構いませんがLeft Detailにしてみましょうか。 この形で今回は表示してみたいと思います。Identifier はMy Cell 2 としておきましょう。そしてこのように用意したこの My Cell 2 を、フレームワークを表示するときに利用するということでプログラムを書いていきます。この tableViewcellForRowAtIndexPathというこの Index Path には、section と row の2 つのデータが含まれていますので、もしもこの indexPath-.section が 0 だったらこの製品群の時の処理を書いてくださいということで、ここでこの My Cell を使ったセルをこのままこうやって渡してやります。で、そうでない時もしもindexPath の section が1 だった場合には、こういうことをしますよということでこれはもうコピー&ペースト今しましたけど、tableView のdequeueReusableCellWithIdentifieのメソッドを使って、My Cell 2 というのを呼び出してきます。これあのこの Cell の後にスペースが空いているかどうかという所でバグが出やすい所だったりするので、しっかりとこのIdentifier ですね確認して、そして出来ればもうこのIdentifier をViewController に対してコピー&ペーストで貼り付けるというくらいでいいと思います。 そしてこの cell のtextLabel の所に、今回は frameworksの row 番目そして framework のframeworks の 1 番の所をdetailTextLabel に表示するというふうに変えます。0 番か 1 番でない場合にはとりあえず新しい cell をこれが呼び出されることはありませんので、ありませんが、何もここに書かないのもちょっと問題がありますのでこのように書いておきます。それではこのアプリケーションを実行して動作を確認しておきましょう。シミュレーターを起動しました。そしてコンパイルが通ればこのように、上の所は 1つ目のセクションとしてiMac から Apple TV までの製品群、そして下の所にはFoundation とかApp Kit といったフレームワークが並んでいます。でただこれセクションの見た目に今なっていないと思うんですが、このようにセクションの見た目にするためにはですね、ストーリーボードの中のテーブルビューの設定を行う必要があります。そこでストーリーボードMain.storyboard に戻って、インスペクタを表示してですね、この table Viewに対する設定を見てみます。 そうするとここに Styleというのがあるんですが、この Style の所が今Plain になっていますので、この Style を今度はGrouped に変えてみてください。そうするとこの Grouped に変えたことによって、シミュレーター上での実行の見た目がこのようにグループ化されたものに変わります。そしてこのそれぞれのセクションの上の所と下の所には、ヘッダとフッタという特別なですね、グループの情報を表示するための文字を表示することができるようになっていますので、データソースの一部としてですね、ここに tableViewtitleForHeaderInSection というこういうメソッドがありますので、これでもしもこのsection が 0 だったらProducts という風な文字列を表示する、そうでなければFrameworks という文字を表示するように変えてみたいと思います。さらにそうでなければ空の文字列を返しておきましょう。それでは実行します。このように PRODUCTSFRAMEWORKS という文字がそれぞれこのグループの上に表示されるようになりました。このレッスンでは、テーブルビューをカスタマイズして複数のセクションを表示する方法を説明しました。

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

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

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

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

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

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