Class 08iOS 應⽤用軟體設計
內容⼤大綱•   預先熟悉 Master-Detail Applicatoin•   UITableView    •   QV047:簡單呈現資料    •   QV048:選取後某列後顯⽰示單項    •   QV049:⼀一些畫⾯面樣式的...
Master-Detail Application      (開啟專案範本)
試驗• 熟悉程式執⾏行內容 (主畫⾯面、內容畫⾯面、 資料項⺫⽬目新增、刪除......)• 更改畫⾯面標題• 改變顯⽰示的內容 (資料項⺫⽬目或增加區段)• 刪除功能 (Editing) 取消• ............
不只是表格• ⼩小量資料的整理顯⽰示• ⼤大量資料的檢索• 多樣資料的分群• 設定畫⾯面• 捲動的畫⾯面
表格種類• 系統內定四種基本格式• 開發者⾃自訂格⼦子檢視
主要類別• UITableView• UITableViewCell
表格的程式操作• 注意...... • UITableView 操作過程要清楚知道是在  『哪個 section,哪個 row』  (這兩個值合併為 indexPath) • 然後取出這個位置的格⼦子 (cell),再對  cell 內部進⾏行處理
UITableView•   Section    •   Header    •   row (cells)    •   row (cells)    •   row (cells)    •   ............    •   F...
Cell 基本樣式• 檢視狀態• 編輯模式 (Editing mode)
UITableView 協定• UITableViewDataSource• UITableViewDelegate
UITableViewDataSource
UITableViewDataSource  (編輯模式 Editing mode)
UITableViewDelegate
表格運作概念 -1• 表格的各個列都是⼀一個 UITableViewCell 物件 (UIView的⼦子類別)......• 所以資料量⼤大時,會有⼤大量的物件產⽣生?• 或是每次要顯⽰示某些列時,才重新將此內 容重建出來,但這樣速度會不會被拖...
表格運作概念 -2• 當表格檢視儲存格被捲離螢幕後,它們 會被放到可再使⽤用的儲存格佇列中。如 果系統的記憶體不⾜足,該表格檢視就會 清除佇列中的儲存格。但是只要系統有 ⾜足夠它們使⽤用的記憶體空間,系統就會 保存它們以便隨時可以顯⽰示出來。
表格運作概念 -3• 當某個格⼦子被捲離畫⾯面後,很可能在另 ⼀一邊會捲⼊入另⼀一列,若這⼀一列是之前儲 存在佇列的,便可直接取出,⽏毋需重 建。• 為了使⽤用這樣的機制,我們會要求該 UITableView 提供⼀一個 dequede 的儲存...
範例:表格⽤用法學習• QV047:簡單呈現資料• QV048:選取後某列後顯⽰示單項• QV049:⼀一些畫⾯面樣式的設定
Project QV047最簡單的 UITableView顯⽰示名字清單利⽤用 xib 連接 UITableView由程式撰寫功能(UITableViewDelegate,UITableViewDataSource)
ViewController.h#import <UIKit/UIKit.h>@interface ViewController : UIViewController<UITableViewDataSource, UITableViewDele...
ViewController.xib                 (2) 連接到 Files Owner(1) 拉進⼀一個TableView
ViewController.m (1/2)- (void)viewDidLoad{    [super viewDidLoad];    NSArray *array = [[NSArray alloc] initWithObjects:  ...
ViewController.m (2/2)    ⼀一共有幾列- (NSInteger) tableView:(UITableView *)tableView              numberOfRowsInSection:(NSInt...
Project QV048UITableView 應⽤用儲存格內包含影像,⽂文字和簡短說明⽂文字不同的樣式選取後的動作,顯⽰示內容
ViewController.h#import <UIKit/UIKit.h>@interface ViewController : UIViewController<UITableViewDelegate, UITableViewDataSo...
ViewController.xib
ViewController.m (1/2)- (UITableViewCell *) tableView:(UITableView *)tableView          cellForRowAtIndexPath:(NSIndexPath...
ViewController.m (2/2)- (NSIndexPath *) tableView:(UITableView *)tableView   willSelectRowAtIndexPath:(NSIndexPath *)index...
解說處理列選取的兩個 delegate method...  willSelectRowAtIndexPath:  在該列尚未被選取前就先被呼叫,可⽤用  來防⽌止該列被選取,甚⾄至變更選取的列  didSelectRowAtIndexPath...
Project QV049與 UITableView 顯⽰示畫⾯面有關的⼀一些設定
格⼦子的樣式(UITableViewCellStyle__)Default   Subtitle   Value1   Value2
改變字體⼤大⼩小// 顯⽰示標題⽂文字cell.textLabel.text = [listData objectAtIndex:row];cell.textLabel.font = [UIFont boldSystemFontOfSize:3...
// 顯⽰示附加按鈕cell.accessoryType   =   UITableViewCellAccessoryCheckmark;cell.accessoryType   =   UITableViewCellAccessoryDeta...
指定各列的縮排- (NSInteger) tableView:(UITableView *)tableView              indentationLevelForRowAtIndexPath:(NSIndexPath *)inde...
(sample) TableViewSuite• 五種循序漸近的範例 • SimpleTableView • SimpleSectionedTableView • SimpleIndexedTableView • TableViewCellSu...
(sample) TheElements
(sample) SimpleDrillDown
UITableViewCell
主要類別• UITableView• UITableViewCell
範例:表格之格⼦子• QV050:⾃自訂顯⽰示格⼦子 (程式碼)• QV051:⾃自訂顯⽰示格⼦子 (xib 檔,IB 設計)
Project QV050⾃自訂表格儲存格檢視程式碼實作 UITableViewCell
ViewController.h#import <UIKit/UIKit.h>const int kNameValueTag;const int kColorValueTag;@interface ViewController : UIView...
ViewController.m (1/3)const int kNameValueTag = 1;const int kColorValueTag = 2;                                  UILabel 的...
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{    static NSString...
ViewController.m (3/3)- (UITableViewCell *)tableView:(UITableView *)tableView         cellForRowAtIndexPath:(NSIndexPath *...
Project QV051⾃自訂表格儲存格檢視以 xib ⽅方式實作UITableViewCell
ViewController.h#import <UIKit/UIKit.h>const int kNameValueTag;const int kColorValueTag;@interface ViewController : UIView...
New-->File 新增⼀一個 xib 檔案
(2) 指定 Identifier(會和後續的程式配合)  (1) 拖移⼀一個TableViewCell 元件
(2) 注意要顯⽰示資料的             元件的 tag 值要設定(1) 設計擺放需要 的視覺元件
此步驟可有可省......(搭配後續程式寫法)                     (1) 選擇 Files Owner,將其                     Class 設為 ViewController          (2)...
續前步驟......                        進⾏行檢查,Files Owner                        的連接必須是 tvCell。                       原預設 view 的...
確認⼀一下:xib 做了什麼......建⼀一個新檔案,內部為 UITableViewCell設定此元件的 Identifier 值(CustomCellIdentifier)擺放視覺元件,需要連接的元件的 tag 要設定設定好 IBOutlet ...
ViewController.m (1/3)const int kNameValueTag = 1;const int kColorValueTag = 2;                                  UILabel 的...
ViewController.m (2/3)- (UITableViewCell *)tableView:(UITableView *)tableView     注意 Identifier   的值         cellForRowAtIn...
ViewController.m (3/3)- (UITableViewCell *)tableView:(UITableView *)tableView         cellForRowAtIndexPath:(NSIndexPath *...
範例觀摩Advanced Table View Cells
............
I os 08
I os 08
Upcoming SlideShare
Loading in …5
×

I os 08

756 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
756
On SlideShare
0
From Embeds
0
Number of Embeds
20
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

I os 08

  1. 1. Class 08iOS 應⽤用軟體設計
  2. 2. 內容⼤大綱• 預先熟悉 Master-Detail Applicatoin• UITableView • QV047:簡單呈現資料 • QV048:選取後某列後顯⽰示單項 • QV049:⼀一些畫⾯面樣式的設定 • Samples:TableViewSuite, The Elements, Simple Drill Down• UITableViewCell • QV050:⾃自訂顯⽰示格⼦子 (程式碼) • QV051:⾃自訂顯⽰示格⼦子 (xib 檔,IB 設計) • Samples:Advanced Table View Cells
  3. 3. Master-Detail Application (開啟專案範本)
  4. 4. 試驗• 熟悉程式執⾏行內容 (主畫⾯面、內容畫⾯面、 資料項⺫⽬目新增、刪除......)• 更改畫⾯面標題• 改變顯⽰示的內容 (資料項⺫⽬目或增加區段)• 刪除功能 (Editing) 取消• ............
  5. 5. 不只是表格• ⼩小量資料的整理顯⽰示• ⼤大量資料的檢索• 多樣資料的分群• 設定畫⾯面• 捲動的畫⾯面
  6. 6. 表格種類• 系統內定四種基本格式• 開發者⾃自訂格⼦子檢視
  7. 7. 主要類別• UITableView• UITableViewCell
  8. 8. 表格的程式操作• 注意...... • UITableView 操作過程要清楚知道是在 『哪個 section,哪個 row』 (這兩個值合併為 indexPath) • 然後取出這個位置的格⼦子 (cell),再對 cell 內部進⾏行處理
  9. 9. UITableView• Section • Header • row (cells) • row (cells) • row (cells) • ............ • Footer• ............
  10. 10. Cell 基本樣式• 檢視狀態• 編輯模式 (Editing mode)
  11. 11. UITableView 協定• UITableViewDataSource• UITableViewDelegate
  12. 12. UITableViewDataSource
  13. 13. UITableViewDataSource (編輯模式 Editing mode)
  14. 14. UITableViewDelegate
  15. 15. 表格運作概念 -1• 表格的各個列都是⼀一個 UITableViewCell 物件 (UIView的⼦子類別)......• 所以資料量⼤大時,會有⼤大量的物件產⽣生?• 或是每次要顯⽰示某些列時,才重新將此內 容重建出來,但這樣速度會不會被拖累?• 事實上...... 表格不是這樣運作的......
  16. 16. 表格運作概念 -2• 當表格檢視儲存格被捲離螢幕後,它們 會被放到可再使⽤用的儲存格佇列中。如 果系統的記憶體不⾜足,該表格檢視就會 清除佇列中的儲存格。但是只要系統有 ⾜足夠它們使⽤用的記憶體空間,系統就會 保存它們以便隨時可以顯⽰示出來。
  17. 17. 表格運作概念 -3• 當某個格⼦子被捲離畫⾯面後,很可能在另 ⼀一邊會捲⼊入另⼀一列,若這⼀一列是之前儲 存在佇列的,便可直接取出,⽏毋需重 建。• 為了使⽤用這樣的機制,我們會要求該 UITableView 提供⼀一個 dequede 的儲存 格,並利⽤用⼀一個 (字串) 識別碼做為依 據。
  18. 18. 範例:表格⽤用法學習• QV047:簡單呈現資料• QV048:選取後某列後顯⽰示單項• QV049:⼀一些畫⾯面樣式的設定
  19. 19. Project QV047最簡單的 UITableView顯⽰示名字清單利⽤用 xib 連接 UITableView由程式撰寫功能(UITableViewDelegate,UITableViewDataSource)
  20. 20. ViewController.h#import <UIKit/UIKit.h>@interface ViewController : UIViewController<UITableViewDataSource, UITableViewDelegate>{ NSArray *listData; 使⽤用協定}@property (nonatomic, retain) NSArray *listData;@end 保存資料在陣列上
  21. 21. ViewController.xib (2) 連接到 Files Owner(1) 拉進⼀一個TableView
  22. 22. ViewController.m (1/2)- (void)viewDidLoad{ [super viewDidLoad]; NSArray *array = [[NSArray alloc] initWithObjects: @"Allen", @"Bruce", @"Candy", @"David", @"Eric", @"Ford", @"Green", @"Helen", @"Ivy", @"John", @"Kris", @"Linda", @"Mark", @"Nick", @"Olieve" @"Peter", @"Queen", @"Rick", @"Steve", @"Tom", @"Uriah", @"Vincent", @"Wake", @"Xman", @"York" @"Zippelin" ,nil]; self.listData = array;} 指定陣列的內容
  23. 23. ViewController.m (2/2) ⼀一共有幾列- (NSInteger) tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section 將 "區段" 和 "列"{ return [self.listData count]; 包成單⼀一物件}- (UITableViewCell *) tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{ static NSString *SimpleTableIdentifier = @"SimpleTableIdentifier"; UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:SimpleTableIdentifier]; if(cell==nil) { cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:SimpleTableIdentifier]; } NSUInteger row = [indexPath row]; cell.textLabel.text = [listData objectAtIndex:row]; 請系統提供⼀一個之前 return cell; 保留的 cell 來⽤用。} cell 的內容 若無,則建⼀一個新的
  24. 24. Project QV048UITableView 應⽤用儲存格內包含影像,⽂文字和簡短說明⽂文字不同的樣式選取後的動作,顯⽰示內容
  25. 25. ViewController.h#import <UIKit/UIKit.h>@interface ViewController : UIViewController<UITableViewDelegate, UITableViewDataSource>{ NSArray *listData; NSArray *detailData; NSArray *poemData;}@property (nonatomic,retain) NSArray *listData;@property (nonatomic,retain) NSArray *detailData;@property (nonatomic,retain) NSArray *poemData;@end
  26. 26. ViewController.xib
  27. 27. ViewController.m (1/2)- (UITableViewCell *) tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{ static NSString *SimpleTableIdentifier = @"SimpleTableIdentifier"; UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:SimpleTableIdentifier]; if(cell==nil) { // 設定樣式 cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:SimpleTableIdentifier]; } NSUInteger row = [indexPath row]; 指定樣式 // 顯⽰示標題⽂文字 cell.textLabel.text = [listData objectAtIndex:row]; // 顯⽰示圖像 UIImage *image = [UIImage imageNamed:@"24x24_star1.png"]; cell.imageView.image = image; // 顯⽰示詳細⼩小⽂文字 cell.detailTextLabel.text = [detailData objectAtIndex:row]; 更多樣的 return cell; 格⼦子內容}
  28. 28. ViewController.m (2/2)- (NSIndexPath *) tableView:(UITableView *)tableView willSelectRowAtIndexPath:(NSIndexPath *)indexPath{ NSUInteger row = [indexPath row]; 此為特殊範例 (解說⽤用) if(row==1) return nil; 設定第⼀一列不能被選取 return indexPath;} 某列被選取後的動作- (void) tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath{ NSUInteger row = [indexPath row]; NSString *rowValue = [listData objectAtIndex:row]; NSString *poemValue = [poemData objectAtIndex:row]; NSString *message = [[NSString alloc] initWithFormat:@"你選了『%@』的詩nn%@n", rowValue, poemValue]; UIAlertView *alert = [[UIAlertView alloc] initWithTitle:rowValue message:message delegate:nil cancelButtonTitle:@"OK" otherButtonTitles:nil]; [alert show];}
  29. 29. 解說處理列選取的兩個 delegate method... willSelectRowAtIndexPath: 在該列尚未被選取前就先被呼叫,可⽤用 來防⽌止該列被選取,甚⾄至變更選取的列 didSelectRowAtIndexPath: 在某⼀一列被選取後才被呼叫,通常是實 際處理選取的地⽅方
  30. 30. Project QV049與 UITableView 顯⽰示畫⾯面有關的⼀一些設定
  31. 31. 格⼦子的樣式(UITableViewCellStyle__)Default Subtitle Value1 Value2
  32. 32. 改變字體⼤大⼩小// 顯⽰示標題⽂文字cell.textLabel.text = [listData objectAtIndex:row];cell.textLabel.font = [UIFont boldSystemFontOfSize:30]; // 改變字體⼤大⼩小 指定每⼀一列的⾼高度- (CGFloat) tableView:(UITableView *)tableViewheightForRowAtIndexPath:(NSIndexPath *)indexPath{ return 70; // 指定每⼀一列的⾼高度}
  33. 33. // 顯⽰示附加按鈕cell.accessoryType = UITableViewCellAccessoryCheckmark;cell.accessoryType = UITableViewCellAccessoryDetailDisclosureButton;cell.accessoryType = UITableViewCellAccessoryDisclosureIndicator;cell.accessoryType = UITableViewCellAccessoryNone; 顯⽰示附加按鈕-(void)tableView:(UITableView *)tableView accessoryButtonTappedForRowWithIndexPath: (NSIndexPath *)indexPath{}-(UITableViewCellAccessoryType) tableView:(UITableView *)tableView accessoryTypeForRowWithIndexPath: (NSIndexPath *)indexPath{}
  34. 34. 指定各列的縮排- (NSInteger) tableView:(UITableView *)tableView indentationLevelForRowAtIndexPath:(NSIndexPath *)indexPath{ // 增加縮排 NSUInteger row = [indexPath row]; return (row%2==0) ? 0 : 1;}
  35. 35. (sample) TableViewSuite• 五種循序漸近的範例 • SimpleTableView • SimpleSectionedTableView • SimpleIndexedTableView • TableViewCellSubviews • CutomerTableViewCell
  36. 36. (sample) TheElements
  37. 37. (sample) SimpleDrillDown
  38. 38. UITableViewCell
  39. 39. 主要類別• UITableView• UITableViewCell
  40. 40. 範例:表格之格⼦子• QV050:⾃自訂顯⽰示格⼦子 (程式碼)• QV051:⾃自訂顯⽰示格⼦子 (xib 檔,IB 設計)
  41. 41. Project QV050⾃自訂表格儲存格檢視程式碼實作 UITableViewCell
  42. 42. ViewController.h#import <UIKit/UIKit.h>const int kNameValueTag;const int kColorValueTag;@interface ViewController : UIViewController <UITableViewDelegate, UITableViewDataSource>{ NSArray *listData;}@end
  43. 43. ViewController.m (1/3)const int kNameValueTag = 1;const int kColorValueTag = 2; UILabel 的 tag 值,⽤用來和資料對映⽤用- (void)viewDidLoad{ [super viewDidLoad]; NSDictionary *row1 = [[NSDictionary alloc] initWithObjectsAndKeys:@"書桌", @"Name", @"⿈黃", @"Color", nil]; NSDictionary *row2 = [[NSDictionary alloc] initWithObjectsAndKeys:@"沙發", @"Name", @"銀", @"Color", nil]; NSDictionary *row3 = [[NSDictionary alloc] initWithObjectsAndKeys:@"電視", @"Name", @"⿊黑", @"Color", nil]; NSDictionary *row4 = [[NSDictionary alloc] initWithObjectsAndKeys:@"冰箱", @"Name", @"⽩白", @"Color", nil]; NSDictionary *row5 = [[NSDictionary alloc] initWithObjectsAndKeys:@"冷氣", @"Name", @"⾦金", @"Color", nil]; NSArray *array = [[NSArray alloc] initWithObjects:row1, row2, row3, row4, row5, nil]; listData = array;} 將資料載⼊入到陣列內
  44. 44. - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{ static NSString *CellTableIdentifier = @"CellTableIdentifier"; UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellTableIdentifier]; if(cell==nil) { // 設定格⼦子 cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellTableIdentifier]; // 置放⽂文字標籤 CGRect nameLabelRect = CGRectMake(0, 5, 70, 15); UILabel *nameLabel = [[UILabel alloc] initWithFrame:nameLabelRect]; nameLabel.textAlignment = UITextAlignmentRight; ViewController.m (2/3) nameLabel.text = @"名稱:"; nameLabel.font = [UIFont boldSystemFontOfSize:12]; [cell.contentView addSubview:nameLabel]; // 置放⽂文字標籤 CGRect colorLabelRect = CGRectMake(0, 26, 70, 15); UILabel *colorLabel = [[UILabel alloc] initWithFrame:colorLabelRect]; colorLabel.textAlignment = UITextAlignmentRight; colorLabel.text = @"顏⾊色:"; colorLabel.font = [UIFont boldSystemFontOfSize:12]; [cell.contentView addSubview:colorLabel]; 格⼦子內的 view 設置 // 置放⽂文字內容 CGRect nameValueRect = CGRectMake(80, 5, 200, 15); UILabel *nameValue = [[UILabel alloc] initWithFrame:nameValueRect]; nameValue.tag = kNameValueTag; [cell.contentView addSubview:nameValue]; // 置放⽂文字內 CGRect colorValueRect = CGRectMake(80, 25, 200, 15); 內容資料 UILabel *colorValue = [[UILabel alloc] initWithFrame:colorValueRect]; colorValue.tag = kColorValueTag; [cell.contentView addSubview:colorValue]; } ****** 省略部份程式 (設定格⼦子內要顯⽰示的資料) ****** return cell;}
  45. 45. ViewController.m (3/3)- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{ ****** 省略部份程式 (取得供顯⽰示的⼀一個格⼦子) ****** 找到陣列內 要顯⽰示的元素 NSUInteger row = [indexPath row]; NSDictionary *rowData = [listData objectAtIndex:row]; UILabel *name = (UILabel *) [cell.contentView viewWithTag:kNameValueTag]; name.text = [rowData objectForKey:@"Name"]; UILabel *color = (UILabel *) [cell.contentView viewWithTag:kColorValueTag]; color.text = [rowData objectForKey:@"Color"]; return cell;} 利⽤用 tag 找到 對應的 UILabel
  46. 46. Project QV051⾃自訂表格儲存格檢視以 xib ⽅方式實作UITableViewCell
  47. 47. ViewController.h#import <UIKit/UIKit.h>const int kNameValueTag;const int kColorValueTag;@interface ViewController : UIViewController<UITableViewDelegate, UITableViewDataSource>{ NSArray *listData; IBOutlet UITableViewCell *tvCell;}@end
  48. 48. New-->File 新增⼀一個 xib 檔案
  49. 49. (2) 指定 Identifier(會和後續的程式配合) (1) 拖移⼀一個TableViewCell 元件
  50. 50. (2) 注意要顯⽰示資料的 元件的 tag 值要設定(1) 設計擺放需要 的視覺元件
  51. 51. 此步驟可有可省......(搭配後續程式寫法) (1) 選擇 Files Owner,將其 Class 設為 ViewController (2) 按住ctrl 鍵,從 Files Owner 拖拉⾄至畫⾯面上的物件,選擇 tvCell 亦即和 IBOutlet 做好連接
  52. 52. 續前步驟...... 進⾏行檢查,Files Owner 的連接必須是 tvCell。 原預設 view 的連接必須移除 此處格⼦子裡設定背景⾊色 是沒⽤用的 (那應該怎麼做呢?)
  53. 53. 確認⼀一下:xib 做了什麼......建⼀一個新檔案,內部為 UITableViewCell設定此元件的 Identifier 值(CustomCellIdentifier)擺放視覺元件,需要連接的元件的 tag 要設定設定好 IBOutlet UITableViewCell 屬性的連接 (此步驟若省略,則由程式另外來處理)
  54. 54. ViewController.m (1/3)const int kNameValueTag = 1;const int kColorValueTag = 2; UILabel 的 tag 值,⽤用來和資料對映⽤用- (void)viewDidLoad{ [super viewDidLoad]; NSDictionary *row1 = [[NSDictionary alloc] initWithObjectsAndKeys:@"書桌", @"Name", @"⿈黃", @"Color", nil]; NSDictionary *row2 = [[NSDictionary alloc] initWithObjectsAndKeys:@"沙發", @"Name", @"銀", @"Color", nil]; NSDictionary *row3 = [[NSDictionary alloc] initWithObjectsAndKeys:@"電視", @"Name", @"⿊黑", @"Color", nil]; NSDictionary *row4 = [[NSDictionary alloc] initWithObjectsAndKeys:@"冰箱", @"Name", @"⽩白", @"Color", nil]; NSDictionary *row5 = [[NSDictionary alloc] initWithObjectsAndKeys:@"冷氣", @"Name", @"⾦金", @"Color", nil]; NSArray *array = [[NSArray alloc] initWithObjects:row1, row2, row3, row4, row5, nil]; listData = array;} 將資料載⼊入到陣列內
  55. 55. ViewController.m (2/3)- (UITableViewCell *)tableView:(UITableView *)tableView 注意 Identifier 的值 cellForRowAtIndexPath:(NSIndexPath *)indexPath{ static NSString *CustomCellIdentifier = @"CustomCellIdentifier"; UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CustomCellIdentifier]; if(cell==nil) { // ⽅方法⼀一 (有部分連接動作必須在 xib 中處理) [[NSBundle mainBundle] loadNibNamed:@"CustomCell" owner:self options:nil]; cell = tvCell; ⽅方法⼀一:找到 // ⽅方法⼆二 xib裡名稱為 NSArray *topLevelObjects = [[NSBundle mainBundle] loadNibNamed:@"CustomCell" owner:self options:nil]; tvCell 的物件 cell = [topLevelObjects objectAtIndex:0]; } ****** 省略部份程式 (設定格⼦子內要顯⽰示的資料) ****** ⽅方法⼆二:找到 return cell;} xib 裡的第⼀一 個物件
  56. 56. ViewController.m (3/3)- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath 格⼦子背景⾊色{ ****** 省略部份程式 (取得供顯⽰示的⼀一個格⼦子) ****** 在此指定 cell.contentView.backgroundColor = [UIColor yellowColor]; NSUInteger row = [indexPath row]; NSDictionary *rowData = [listData objectAtIndex:row]; UILabel *name = (UILabel *) [cell viewWithTag:kNameValueTag]; name.text = [rowData objectForKey:@"Name"]; UILabel *color = (UILabel *) [cell viewWithTag:kColorValueTag]; color.text = [rowData objectForKey:@"Color"]; return cell;} 利⽤用 tag 找到 對應的 UILabel
  57. 57. 範例觀摩Advanced Table View Cells
  58. 58. ............

×