• Save
I os 08
Upcoming SlideShare
Loading in...5
×
 

I os 08

on

  • 555 views

 

Statistics

Views

Total Views
555
Views on SlideShare
555
Embed Views
0

Actions

Likes
0
Downloads
0
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    I os 08 I os 08 Presentation Transcript

    • Class 08iOS 應⽤用軟體設計
    • 內容⼤大綱• 預先熟悉 Master-Detail Applicatoin• UITableView • QV047:簡單呈現資料 • QV048:選取後某列後顯⽰示單項 • QV049:⼀一些畫⾯面樣式的設定 • Samples:TableViewSuite, The Elements, Simple Drill Down• UITableViewCell • QV050:⾃自訂顯⽰示格⼦子 (程式碼) • QV051:⾃自訂顯⽰示格⼦子 (xib 檔,IB 設計) • Samples:Advanced Table View Cells
    • Master-Detail Application (開啟專案範本)
    • 試驗• 熟悉程式執⾏行內容 (主畫⾯面、內容畫⾯面、 資料項⺫⽬目新增、刪除......)• 更改畫⾯面標題• 改變顯⽰示的內容 (資料項⺫⽬目或增加區段)• 刪除功能 (Editing) 取消• ............
    • 不只是表格• ⼩小量資料的整理顯⽰示• ⼤大量資料的檢索• 多樣資料的分群• 設定畫⾯面• 捲動的畫⾯面
    • 表格種類• 系統內定四種基本格式• 開發者⾃自訂格⼦子檢視
    • 主要類別• UITableView• UITableViewCell
    • 表格的程式操作• 注意...... • UITableView 操作過程要清楚知道是在 『哪個 section,哪個 row』 (這兩個值合併為 indexPath) • 然後取出這個位置的格⼦子 (cell),再對 cell 內部進⾏行處理
    • UITableView• Section • Header • row (cells) • row (cells) • row (cells) • ............ • Footer• ............
    • 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, UITableViewDelegate>{ NSArray *listData; 使⽤用協定}@property (nonatomic, retain) NSArray *listData;@end 保存資料在陣列上
    • ViewController.xib (2) 連接到 Files Owner(1) 拉進⼀一個TableView
    • 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;} 指定陣列的內容
    • 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 的內容 若無,則建⼀一個新的
    • Project QV048UITableView 應⽤用儲存格內包含影像,⽂文字和簡短說明⽂文字不同的樣式選取後的動作,顯⽰示內容
    • 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
    • ViewController.xib
    • 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; 格⼦子內容}
    • 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];}
    • 解說處理列選取的兩個 delegate method... willSelectRowAtIndexPath: 在該列尚未被選取前就先被呼叫,可⽤用 來防⽌止該列被選取,甚⾄至變更選取的列 didSelectRowAtIndexPath: 在某⼀一列被選取後才被呼叫,通常是實 際處理選取的地⽅方
    • Project QV049與 UITableView 顯⽰示畫⾯面有關的⼀一些設定
    • 格⼦子的樣式(UITableViewCellStyle__)Default Subtitle Value1 Value2
    • 改變字體⼤大⼩小// 顯⽰示標題⽂文字cell.textLabel.text = [listData objectAtIndex:row];cell.textLabel.font = [UIFont boldSystemFontOfSize:30]; // 改變字體⼤大⼩小 指定每⼀一列的⾼高度- (CGFloat) tableView:(UITableView *)tableViewheightForRowAtIndexPath:(NSIndexPath *)indexPath{ return 70; // 指定每⼀一列的⾼高度}
    • // 顯⽰示附加按鈕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{}
    • 指定各列的縮排- (NSInteger) tableView:(UITableView *)tableView indentationLevelForRowAtIndexPath:(NSIndexPath *)indexPath{ // 增加縮排 NSUInteger row = [indexPath row]; return (row%2==0) ? 0 : 1;}
    • (sample) TableViewSuite• 五種循序漸近的範例 • SimpleTableView • SimpleSectionedTableView • SimpleIndexedTableView • TableViewCellSubviews • CutomerTableViewCell
    • (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 : UIViewController <UITableViewDelegate, UITableViewDataSource>{ NSArray *listData;}@end
    • 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;} 將資料載⼊入到陣列內
    • - (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;}
    • 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
    • Project QV051⾃自訂表格儲存格檢視以 xib ⽅方式實作UITableViewCell
    • ViewController.h#import <UIKit/UIKit.h>const int kNameValueTag;const int kColorValueTag;@interface ViewController : UIViewController<UITableViewDelegate, UITableViewDataSource>{ NSArray *listData; IBOutlet UITableViewCell *tvCell;}@end
    • New-->File 新增⼀一個 xib 檔案
    • (2) 指定 Identifier(會和後續的程式配合) (1) 拖移⼀一個TableViewCell 元件
    • (2) 注意要顯⽰示資料的 元件的 tag 值要設定(1) 設計擺放需要 的視覺元件
    • 此步驟可有可省......(搭配後續程式寫法) (1) 選擇 Files Owner,將其 Class 設為 ViewController (2) 按住ctrl 鍵,從 Files Owner 拖拉⾄至畫⾯面上的物件,選擇 tvCell 亦即和 IBOutlet 做好連接
    • 續前步驟...... 進⾏行檢查,Files Owner 的連接必須是 tvCell。 原預設 view 的連接必須移除 此處格⼦子裡設定背景⾊色 是沒⽤用的 (那應該怎麼做呢?)
    • 確認⼀一下:xib 做了什麼......建⼀一個新檔案,內部為 UITableViewCell設定此元件的 Identifier 值(CustomCellIdentifier)擺放視覺元件,需要連接的元件的 tag 要設定設定好 IBOutlet UITableViewCell 屬性的連接 (此步驟若省略,則由程式另外來處理)
    • 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;} 將資料載⼊入到陣列內
    • 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 裡的第⼀一 個物件
    • 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
    • 範例觀摩Advanced Table View Cells
    • ............