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

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

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
テーブルビューのセルをカスタマイズして、独自の画像をセルの先頭に表示する方法について説明します。
講師:
07:38

字幕

このレッスンでは、テーブルビューのセルをカスタマイズして独自の画像をセルの先頭に表示する方法を説明します。まずこちらのアプリケーションをご覧ください。現在、 PRODUCTS とFRAMEWORKS という2 つのセクションが用意されています。これらのセクションの中に 2 種類のデータが表示されていますので、今回はこの 2 種類のデータの先頭に星形のアイコン画像を表示するようにカスタマイズしたいと思います。それではまずアイコン画像を用意しましょう。アイコン画像はまずこのようにFinder の中に用意しておきます。使用するアイコンの図案は 1 種類ですが、その 1 つの図案に対して3 つのファイルが必要になります。まず標準的な大きさの画像、そして 2 倍の大きさの画像、そして 3 倍の大きさの画像が必要になります。現在 iPhone はiPhone4S、iPhone5、iPhone6、iPhone6 plus など様々な大きさの物がありますが、それぞれの iPhone デバイスの解像度が異なりますので、それぞれの解像度に合わせた形で画像を用意してやる必要があります。ですので、このように解像度の異なる 3 種類のファイルが1 つの図案に対して必要になります。 なお、名前は star.png という一番小さい画像を元にして、2 倍のサイズのものはそのファイル名の後ろに @2x、3 倍の解像度のものはファイル名の後ろに@3x という名前を付けておきます。それでは Xcode のプロジェクトに移ってください。Xcode のプロジェクトのImages.xcassets というファイルを選択して、この中に新しい画像のセットを用意します。画像のセットは左下にある+ ボタンを押して追加します。この中から 1 番上にあるNew Image Set というのを選択して下さい。そしてこの画像の名前を、最初は Image となっていますが、今回は星の形ですのでStar というふうに変更しておきます。そして Finder に戻って、Finder の中にある3 個すべての画像を選択し、これをこの Star のイメージセットの上にドラッグ&ドロップで追加します。このように 1x 2x 3x と書いてあるこの領域に追加をしてください。ファイル名が正しく設定されていれば、これらの 1x 2x 3x の画像が自動的にセットされます。なおこの画像の解像度はそれぞれプレビューで見ますと、このようにもとの star.pngが 30 ピクセル、そして star@2xが 60 ピクセル、そして star@3x が90x90 ピクセル となっています。 それでは次にこの画像を、アイコン画像として表示するようにViewController.swiftを編集します。ViewController.swiftの中のtableView cellForRowAtIndexPathという所を選択してください。このメソッドの中でまずは、My Cell という最も一般的な形のセルをカスタマイズしていきたいと思います。このセルに対して画像を表示するためのイメージビューは最初から用意されていますので、cell.imageView これはオプショナル変数ですので ! が必要です。そして .imageというふうに入力して、ここに画像を読み込んでいきます。画像の読み込み方は、この UIImage namedというイニシャライザーを使ってですね、UIImage クラスの namedというイニシャライザーを使って、画像の名前は star だということを指定してやります。最後の ) 要らないですね。これで star という名前の画像が読み込まれて、それがこのセルの中に表示されるようになります。それでは実行してみましょう。シミュレーターを実行して、アプリケーションが起動しました。 そうすると、このようにそれぞれの項目の先頭の所に星形のアイコン画像が付くようになったことが分かります。それでは次に、FRAMEWORKS の方にもアイコン画像を挿入してみましょう。FRAMEWORKS の方のそれぞれのセルはこの indexPath のsection == 1 の1 番のセクションの中で作られていますので、このセルをカスタマイズしていきます。全く上と この画像を読み込む手順は同じですので、このプログラムをこのままコピー&ペーストでこの一行貼り付けます。cell.imageView!.image =UIImage(named: "Star") とこのように、もう一度同じようにセルの画像ビューの中に画像を読み込むこういうプログラムを書きます。で、実行してみて頂きたいんですが、ここで実行するとですね実行開始する直前の所でこのように、今挿入したこの画像をセットするプログラムの所でエラーが起きます。で これはなぜなのかといいますと、上のこのセルの中では画像ビューが用意されているタイプのセルが用意されているんですが、こっちのセルの方は画像ビューが用意されないタイプのセルになります。ということでですね、このMain.storyboard で現在 2 種類のセルがありまして、この Right Detail というStyle のものと下の方に Left Detail というStyle のもの2 種類用意しているんですが、この Right Detail のStyle の方は画像ビューが用意されるんですけど、この Left Detail の方は実は画像ビューが用意されません。 ですので先程のように、画像ビューがないといってエラーが起きてしまいます。ということでアイコンの画像を表示したいと思った時には、これが画像を含んでいる形のStyle を選択してやる必要がありますので、例えば Basic であるとか例えば Subtitle であるとかこういったものを選ぶようにしましょう。今回はこの Subtitle のStyle を選択したいと思います。それではここで実行してみましょう。するとこのように、PRODUCTS の中でもFRAMEWORKS の中でも星形のアイコンが表示されるようになりました。tableView の cell はこのように、cellForRowAtIndexPathというメソッドが呼ばれた後に例えば text を表示したり、その他の detailText を表示したり、あるいは画像を表示したりといったように、ここのタイミングで様々なカスタマイズを行うことができます。またテーブルビューのセルのカスタマイズはストーリーボードの中でも行える場所があって、例えばこの Accessory という所でDisclosure Indicatorというのを選択すると、この右側にこういうですね矢印が付いて次の画面に行けますよということを表示できたりします。 その他にも DitailDisclosure といって、この i のアイコンが表示されるものであるとか、Check Mark であるとか、Detail であるとか、様々なものをですね、ここに表示することができます。皆さんも自分のアプリの見た目をこのように様々な方法でカスタマイズしてみてください。このレッスンでは、テーブルビューのセルをカスタマイズする方法を説明しました。

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

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

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

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

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

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