CodeZine(コードジン)

特集ページ一覧

iPhoneプログラミング: Table Viewを使ってデータを表示する

Table Viewの行にテキスト、イメージ、ディスクロージャボタンを表示

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2010/01/04 14:00

 iPhoneアプリケーションで最もよく使用されるビューの1つは、項目のリストを表示するためのTable Viewです。本稿では、柔軟性に富んだiPhoneのTable Viewを使って、グラフィックありとグラフィックなしの両方でデータをテーブルまたはリストに表示する方法を紹介します。

目次

はじめに

 iPhoneアプリケーションで最もよく使用されるビューの1つは、項目のリストを表示するためのTable Viewです。ユーザーは、表示されている項目を選択したり、タップして詳細情報を表示したりできます。図1に、[Settings(設定)]アプリケーションで使用されているTable Viewの例を示します。

図1 iPhoneの[Settings(設定)]アプリケーション:[Settings]アプリケーションの項目はTable Viewに表示される
図1 iPhoneの[Settings(設定)]アプリケーション:[Settings]アプリケーションの項目はTable Viewに表示される

 この記事では、iPhone SDKでTable Viewを使ってデータ行を表示する方法について説明します。特に、Table Viewに項目を追加してユーザーの項目選択を可能にするために処理しなければならないイベントと、Table Viewの行にテキストイメージを表示する方法、さらにTable Viewの行に「ディスクロージャボタン」(詳細情報があることをユーザーに知らせるアイコンボタン)を追加する方法を見ていきます。

簡単なTable View

 Table Viewを使ったサンプルアプリケーションを作成するには、Xcodeを開き、[Navigation-based Application(ナビゲーションベースアプリケーション)]プロジェクト(図2参照)を選択します。このプロジェクトにはTable Viewが含まれています。[Choose]ボタンをクリックし、新規プロジェクトに「TableViewExample」という名前を付けます。

図2 新規ナビゲーションベースプロジェクト:ナビゲーションベースアプリケーションの新規プロジェクトを作成するため、Xcodeでプロジェクトアイコンを選択
図2 新規ナビゲーションベースプロジェクト:ナビゲーションベースアプリケーションの新規プロジェクトを作成するため、Xcodeでプロジェクトアイコンを選択

 この新規プロジェクトには、ResourcesフォルダにあるRootViewController.xibというファイルが含まれます。RootViewController.xibファイルをダブルクリックしてInterface Builderで開きます。図3は、RootViewController.xibウィンドウと[Table View]アイテムの内容を示しています。

図3 RootViewController.xibファイル:Interface Builderに表示されたRootViewController.xibファイルの内容
図3 RootViewController.xibファイル:Interface Builderに表示されたRootViewController.xibファイルの内容

 ナビゲーションベースアプリケーションのプロジェクトでは、ビューベースアプリケーションのプロジェクトと異なり、デフォルトで[View]アイテムではなく[Table View]アイテムが使用されます。Table Viewはナビゲーションコントローラと一緒に使用されることが多いからです。

 RootViewController.xibのウィンドウで[Table View]アイテムを右クリックすると、Table Viewの接続が表示されます(図4参照)。「dataSource」と「delegate」というラベルの付いた2つのアウトレットがどちらも[File's Owner]アイテムに接続されており、この[File's Owner]アイテムは、RootViewController.hおよびRootViewController.mファイルで実装されるRootViewControllerクラスを指していることに注意してください。

図4 Table Viewの接続:Interface Builderで[Table View]を右クリックすると、Table Viewのすべての接続が表示される
図4 Table Viewの接続:Interface Builderで[Table View]を右クリックすると、Table Viewのすべての接続が表示される

 この2つのアウトレットは、次の役割を果たします。

  • dataSourceアウトレットは、Table Viewに行を追加する各種メソッドの実装がどこから提供されるかを表します。この場合は、RootViewControllerクラス(File's Owner)が提供元になります。
  • delegateアウトレットは、ユーザーによるTable Viewの行の選択を可能にする各種メソッドの実装がどこから提供されるかを表します。この場合は、やはりRootViewControllerクラス(File's Owner)が提供元になります。

  • LINEで送る
  • このエントリーをはてなブックマークに追加

あなたにオススメ

著者プロフィール

  • japan.internet.com(ジャパンインターネットコム)

    japan.internet.com は、1999年9月にオープンした、日本初のネットビジネス専門ニュースサイト。月間2億以上のページビューを誇る米国 Jupitermedia Corporation (Nasdaq: JUPM) のニュースサイト internet.com や EarthWeb.c...

  • Wei-Meng Lee(Wei-Meng Lee)

    Microsoft MVP受賞者。Microsoft社の最新テクノロジー実地研修を専門とするDeveloper Learning Solutions社を創設。.NETとワイヤレステクノロジーの開発者、指導者として知られる。国際的なカンファレンスでたびたび講演し、.NET、XML、ワイヤレステクノロジ...

バックナンバー

連載:japan.internet.com翻訳記事

もっと読む

All contents copyright © 2005-2021 Shoeisha Co., Ltd. All rights reserved. ver.1.5