[iPhone] UITableView セルに画像とLabelを貼る (Objective-C)

iPhone アプリ開発で TableView はいろんな場面で使える便利なUI。
覚えておけば必ず役にたちます。
 
UITableViewのセルにLabelと画像を貼るだけの簡単設定についての説明です。
 
関連ページ

 

sponsored link

UITableView 画像とテキスト

 
環境:
Mac: 10.9.1
Xcode: 5.0.2
iPhone: iOS 7.0.4
 
最終的にはこんな感じです…
 
IMG_0049
 

Table View 作成の流れ

 

  1. プロジェクトの作成
    • 簡単なプロジェクト Single View Application を作成
    • こちらに作り方があります▶︎ Single View Application

     

  2. storyboardのView Controllerを削除
    • default の View Controller を消して Table View Controller に入れ替える

     

    tableView_a 

    • ViewController に TableView を貼り付けてもできます。

     

  3. ViewController.h, ViewController.m の削除
    • これで View Controller など何もなくなりました
    • Main.storyboard と AppDelegate は残します

     

  4. Table View Controller を配置
    • default の代わりに配置します

     

    tableView_b 

  5. New File で TableViewController.h, TableViewController.m を作成
    • New File… から Objective-C class で作成
    • Subclassは UITableViewController を選択

     

    スクリーンショット 2014-02-15 10.21.40 スクリーンショット 2014-02-15 10.22.01 

  6. TableViewController ファイルとストーリーボードの Table View Controller をつなぐ
    • storyboard の Table View Controller を選択し
    • Attributes Inspector の Custom Class で新しく作ったクラスを選択
    • この場合は同じ名前ですが、作ったクラス名がリストにのっています。

     

    スクリーンショット 2014-02-15 10.31.55 

  7. ステータスバーに先頭Cellがかぶらないようにする(Option)
  8. Cellの背景色の変更(Option)
  9. Property List の作成
    • New File… から Resource を選択
    • item0 から item7 まで Key, Value をそれぞれ設定する
    • NSArray で配列を使ってもできます

     

  10. TableViewControllerにコード記述
    • section の数を設定
    • 行数を設定
    • セルに表示するKey, Valueを設定する

 

Property List の作成

 
配列を使っても良いのですが、今回はプロパティリストを使ってみますが、
プロパティリストの詳しい使い方はこちらにあります
=> Property List の読み書き
 
プロジェクトに Property List を追加します。
New File… から iOS の Resource にある Property List を選択
名前を設定して [Create] プロジェクト内にファイルができます
各 item に key と value を設定する
 
imageList
 
あるいは、xml ファイルなので直接書くことも可能です。
item を2~3個作ってから、直接ファイルをエディタで開き
のコピペを繰り返し、Value だけ入れていく方法が簡単かもしれません。
Property list は要素の種類がたくさんある場合は配列よりも便利です。
 

 

TestTableView.h

 
UITableViewDataSource, UITableViewDelegateの追加
 

 

TestTableView.m

 
Property List の内容を配列に入れる

arrayList = [NSArray arrayWithContentsOfFile:dataFile];

section数を設定、今回はsectionは1つなので return 1 とする

(NSInteger)numberOfSectionsInTableView:(UITableView *)tableView{ }

行数の設定、今回は8

(NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section{ }

Cell の設定

(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{ }

cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:CellIdentifier];
 
Property List の key をセルに貼付ける
NSDictionary *listDict = [arrayList objectAtIndex:indexPath.row];
cell.imageView.image = [UIImage imageNamed:[listDict objectForKey:@”img”]];
cell.textLabel.text = [listDict objectForKey:@”number”];
cell.detailTextLabel.text = [listDict objectForKey:@”date”];
 

 
次回はセルの選択で画面遷移させる設定
TableView セルの選択
 
 
補足:
このコードではセルの画像サイズは画像に依存してしまうので
画像枠を作ってはめる方法があります。

UIKit framework の graphics と drawing に関するメソッドを使いました。
詳しくはまたいずれ
 

 

ページのトップへ戻る
 
sponsored link

シェアする

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

フォローする