碼上快樂

相關內容    簡體    繁體

IOS之高級控件-表視圖

本文轉載自   查看原文   2012-09-08 21:11   15213    IOS基礎/ 學習筆記

6.1 關於表視圖

6.2 簡單表視圖(無格式)

6.3 分段表視圖

6.4 分組分段表視圖

6.5 索引表視圖

6.1 關於表視圖

iOS中很多應用都使用了表視圖，表視圖可以分為：

  無格式表視圖

  分段（Sections）表視圖，而分段表視圖又分為：

     普通分段表視圖

     分組分段表視圖

     索引分段表視圖

無格式表視圖

wps_clip_image-22339

分組分段表視圖

wps_clip_image-25267

索引分段表視圖

wps_clip_image-16906

6.2 簡單表視圖(無格式)

wps_clip_image-14084

SimpleTableViewController.h

@interface SimpleTableViewController : UIViewController <UITableViewDelegate, UITableViewDataSource> {
    NSArray *listData;
    NSArray *listImage;
}

@property (nonatomic,retain) NSArray *listData;
@property (nonatomic,retain) NSArray *listImage;

@end

 

表視圖中的數據源協議

tableView: numberOfRowsInSection: 提供表視圖某個分段的行數。

tableView: cellForRowAtIndexPath: 提供表視圖單元格所需要的數據。

表視圖中的委托協議

tableView: didSelectRowAtIndexPath:

該委托方法是表視圖單元格選擇完成之后觸發的方法。

m文件中的初始化加載方法

- (void)viewDidLoad {
    
    NSArray *array = [[NSArray alloc] initWithObjects:@"A1-南非",@"A2-墨西哥",
                      @"B1-阿根廷",@"B2-尼日利亞",@"C1-英格蘭",@"C2-美國",
                      @"D1-德國",@"D2-澳大利亞",@"E1-荷蘭",@"E2-丹麥",
                      @"G1-巴西",@"G2-朝鮮",@"H1-西班牙",@"H2-瑞士",nil];
    
    NSArray *images = [[NSArray alloc] initWithObjects:@"SouthAfrica.png",@"Mexico.png",
                       @"Argentina.png",@"Nigeria.png",@"England.png",@"USA.png",
                       @"Germany.png",@"Australia.png",@"Holland.png",@"Denmark.png", 
                       @"Brazil.png",@"NorthKorea.png",@"Spain.png",@"Switzerland.png",nil];
    
    self.listData = array;
    self.listImage = images;
    [array release];
    [images release];
    
}

 

m釋放資源

- (void)viewDidUnload {
    [super viewDidUnload];
    self.listData = nil;
    self.listImage = nil;
}


- (void)dealloc {
    [listData release];
    [listImage release];
    [super dealloc];
}

 

實現TableView數據源方法

#pragma mark -- 實現TableView數據源方法
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
    return [listData count];
}

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
    
    static NSString *SimpleCellIdentifier = @"SimpleCellIdentifier";
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:SimpleCellIdentifier];
    
    if (cell == nil) {
        cell = [[[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault
                                       reuseIdentifier:SimpleCellIdentifier] autorelease];
    }
    NSUInteger row = [indexPath row];
    cell.textLabel.text = [listData objectAtIndex:row];
    UIImage *img = [UIImage imageNamed:[listImage objectAtIndex:row]];
    cell.imageView.image = img;
    return cell;

}

 

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section

該方法是為表視圖提供分段的個數，只有一個分段所以。

- (UITableViewCell *)tableView:(UITableView *)tableView  cellForRowAtIndexPath:(NSIndexPath *)indexPath

提供表視圖單元個所需要的數據。

static NSString *SimpleCellIdentifier = @"SimpleCellIdentifier";

該語句為表視圖單元格提供了一個標識，當上面的單元格滾出屏幕，下面的單元格滾入屏幕時候，可以通過判斷這個標識是否有可以重用的單元格，如果有則重用，如果沒有則創建一個新的。

表視圖單元格的單元元素：

   圖片 cell.imageView.image

   文本標簽 cell.textLabel.text 

詳細文本標簽 cell.detailTextLabel.text

wps_clip_image-4535

單元格樣式

UITableViewCellStyle舉類成員

  UITableViewCellStyleDefault,

   UITableViewCellStyleValue1,

   UITableViewCellStyleValue2,

   UITableViewCellStyleSubtitle

wps_clip_image-20751

實現TableView委托方法

#pragma mark -- 實現TableView委托方法
- (void)tableView:(UITableView *)tableView 
        didSelectRowAtIndexPath:(NSIndexPath *)indexPath {
    NSUInteger row = [indexPath row];
    NSString *rowValue = [listData objectAtIndex:row];    
    NSString *message = [[NSString alloc] initWithFormat:@"你選擇了%@隊。", rowValue];
    
    UIAlertView *alert = [[UIAlertView alloc]initWithTitle:@"行選擇" 
                                        message:message 
                                        delegate:self 
                                        cancelButtonTitle:@"Ok" 
                                        otherButtonTitles:nil];
    [message release];
    [alert show];
    [alert release];
    [tableView deselectRowAtIndexPath:indexPath animated:YES];
}

 

該委托方法是選中的單元格時候觸發的方法，

[indexPath row]語句可以獲得選中的行號。

tableView deselectRowAtIndexPath:indexPath animated:YES];

是可以在表視圖選擇完成單元格后背景消失，再彈出alert對話框。

設計NIB文件

wps_clip_image-21676

鏈接輸出口 

Table View的委托和數據源輸出口，需要File‘s Owner與委托和數據源鏈接。

6.3 分段表視圖

wps_clip_image-11119

新建SectionTable SingleView項目：

SectionTableViewController.h

@interface SectionTableViewController : UIViewController<UITableViewDelegate, UITableViewDataSource> {
    NSDictionary *teams;
    NSArray *teamsname;
}

@property (nonatomic,retain) NSDictionary *teams;
@property (nonatomic,retain) NSArray *teamsname;

@end

 

UITableViewDataSource，表視圖中的數據源：

  tableView: numberOfRowsInSection: 提供表視圖分段的個數。

  tableView: cellForRowAtIndexPath: 提供表視圖單元個所需要的數據。

UITableViewDelegate，表視圖中的委托：

tableView: didSelectRowAtIndexPath: 該委托方法是表視圖單元個選擇之后發生觸發

m文件初始化加載方法

- (void)viewDidLoad {
    
    NSBundle *bundle = [NSBundle mainBundle];
    NSString *filePath = [bundle pathForResource:@"足球隊dictionary" ofType:@"plist"];
    
    NSDictionary *dict = [[NSDictionary alloc] initWithContentsOfFile:filePath];
    self.teams = dict;
    [dict release];
    
    self.teamsname = [[teams allKeys] sortedArrayUsingSelector:@selector(compare:)];

}

 

從屬性文件中加載數據到NSDictionary對象中，它的key作為表視圖的分段的名字，而value部分集合作為表視圖單元格。

編輯數據屬性文件

wps_clip_image-28838

m釋放資源

- (void)viewDidUnload {
    [super viewDidUnload];
    self.teams = nil;
    self.teamsname = nil;
    
}

- (void)dealloc {
    [teams release];
    [teamsname release];
    [super dealloc];
}

 

實現TableView數據源方法

#pragma mark -- 實現TableView數據源方法
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {    
    NSString *name = [teamsname objectAtIndex:section];
    NSArray *team = [teams objectForKey:name];
    return [team count];
}

- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView {
    return [teamsname count];    
}

- (NSString *)tableView:(UITableView *)tableView 
            titleForHeaderInSection:(NSInteger)section {
    NSString *name = [teamsname objectAtIndex:section];
    return name;
}

 

- (NSInteger)tableView:(UITableView *)tableView  numberOfRowsInSection:(NSInteger)section

該方法是為表視圖提供某個分段中單元格個數。

- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView 

提供表視圖中分段的個數。

- (NSString *)tableView:(UITableView *)tableView  titleForHeaderInSection:(NSInteger)section

提供表視圖中分段的Header信息。

接上實現TableView數據源方法

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
    
    NSUInteger section = [indexPath section];
    NSUInteger row = [indexPath row];
    NSString *name = [teamsname objectAtIndex:section];
    NSArray *team = [teams objectForKey:name];
    
    static NSString *SimpleCellIdentifier = @"SimpleCellIdentifier";
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:SimpleCellIdentifier];
    if (cell == nil) {
        cell = [[[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault
                                       reuseIdentifier:SimpleCellIdentifier] autorelease];
    }
    
    cell.textLabel.text = [team objectAtIndex:row];

    return cell;
    
}

 

實現TableView委托方法

#pragma mark --實現TableView委托方法
-(void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath {
    
    NSUInteger section = [indexPath section];
    NSUInteger row = [indexPath row];
    NSString *name = [teamsname objectAtIndex:section];
    NSArray *team = [teams objectForKey:name];    
    NSString *selectedteam = [team objectAtIndex:row];
    
    NSString *message = [[NSString alloc] initWithFormat:@"你選擇了%@隊。", 
                         selectedteam];
    UIAlertView *alert = [[UIAlertView alloc]initWithTitle:@"行選擇" 
                                            message:message 
                                            delegate:self 
                                            cancelButtonTitle:@"Ok" 
                                            otherButtonTitles:nil];
    
    [message release];
    [alert show];
    [alert release];
    [tableView deselectRowAtIndexPath:indexPath animated:YES];

}

 

該委托方法是選中的單元格時候觸發的方法，  [indexPath row]語句可以獲得選中的行號。

[tableView deselectRowAtIndexPath:indexPath animated:YES];

是可以在表試圖選擇完成單元格后背景消失，再彈出alert對話框。

設計NIB文件

wps_clip_image-18935

鏈接輸出口 

Table View的委托和數據源輸出口，需要File‘s Owner與委托和數據源鏈接。

6.4 分組分段表視圖

由普通分段表變成分組分段表很簡單，修改屬性就可以了

wps_clip_image-32549 wps_clip_image-7496

修改分組分段

在IB中打開表視圖屬性設置框，在Style項目選擇Grouped。

wps_clip_image-26828

6.5 索引表視圖

索引表就是在右邊增加一個索引列，如果按照歸類它應該屬於分段表范圍。

wps_clip_image-14243代碼參考SectionIndexingTable

索引表實現

索引表實現很簡單只是需要在分段表的代碼基礎上增加一個數據源（UITableViewDataSource）實現方法就可以了：

/*
 增加索引
 */
-(NSArray *) sectionIndexTitlesForTableView: (UITableView *) tableView {
    return teamsname;
}

 

這個方法是為表視圖提供索引所需要的數據集合。

實現搜索欄

wps_clip_image-505代碼參考SectionSearchTable

SectionTableViewController.h

@interface SectionTableViewController : UIViewController<UITableViewDelegate, UITableViewDataSource,UISearchBarDelegate> {
    NSMutableDictionary *allteams;
    NSMutableDictionary *teams;
    NSArray *teamsname;
    //UISearchBar *search;
    
}

@property (nonatomic,retain) NSMutableDictionary *teams;
@property (nonatomic,retain) NSMutableDictionary *allteams;
@property (nonatomic,retain) NSArray *teamsname;

//@property (nonatomic,retain)  UISearchBar *search;

-(void)resetSearch;

@end

 

m文件中的初始化方法

- (void)viewDidLoad {
    
    NSBundle *bundle = [NSBundle mainBundle];
    NSString *filePath = [bundle pathForResource:@"足球隊dictionary" ofType:@"plist"];
    
    NSMutableDictionary *dict = [[NSDictionary alloc] initWithContentsOfFile:filePath];
    self.allteams = dict;
    [dict release];
    [self resetSearch];

}

 

m文件中的resetSearch方法

-(void)resetSearch {

    self.teams = self.allteams ;
    
    NSMutableArray *keysArray = [[NSMutableArray alloc] init];
    [keysArray addObjectsFromArray:[[teams allKeys] sortedArrayUsingSelector:@selector(compare:)]];
    self.teamsname = keysArray;
    [keysArray release];
    
}

 

m釋放資源

- (void)viewDidUnload {
    [super viewDidUnload];
    self.teams = nil;
    self.teamsname = nil;
    
}

- (void)dealloc {
    [teams release];
    [teamsname release];
    [super dealloc];
}

 

實現TableView數據源方法

#pragma mark -- 實現TableView數據源方法
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {    
    NSString *name = [teamsname objectAtIndex:section];
    NSArray *team = [teams objectForKey:name];
    return [team count];
}

- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView {
    return [teamsname count];    
}

- (NSString *)tableView:(UITableView *)tableView 
            titleForHeaderInSection:(NSInteger)section {
    NSString *name = [teamsname objectAtIndex:section];
    return name;
}

 

接上實現TableView數據源方法

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
    
    NSUInteger section = [indexPath section];
    NSUInteger row = [indexPath row];
    NSString *name = [teamsname objectAtIndex:section];
    NSArray *team = [teams objectForKey:name];
    
    static NSString *SimpleCellIdentifier = @"SimpleCellIdentifier";
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:SimpleCellIdentifier];
    if (cell == nil) {
        cell = [[[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault
                                       reuseIdentifier:SimpleCellIdentifier] autorelease];
    }
    
    cell.textLabel.text = [team objectAtIndex:row];

    return cell;
    
}

 

接上實現TableView數據源方法

/*
 增加索引
 */
-(NSArray *) sectionIndexTitlesForTableView: (UITableView *) tableView {
    return teamsname;
}

實現TableView委托方法

#pragma mark --實現TableView委托方法
-(void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath {
    
    NSUInteger section = [indexPath section];
    NSUInteger row = [indexPath row];
    NSString *name = [teamsname objectAtIndex:section];
    NSArray *team = [teams objectForKey:name];    
    NSString *selectedteam = [team objectAtIndex:row];
    
    NSString *message = [[NSString alloc] initWithFormat:@"你選擇了%@隊。", 
                         selectedteam];
    UIAlertView *alert = [[UIAlertView alloc]initWithTitle:@"行選擇" 
                                            message:message 
                                            delegate:self 
                                            cancelButtonTitle:@"Ok" 
                                            otherButtonTitles:nil];
    
    [message release];
    [alert show];
    [alert release];
    [tableView deselectRowAtIndexPath:indexPath animated:YES];

}

 

Search Bar 委托方法

#pragma mark --實現UISearchBar委托方法
- (void)searchBar:(UISearchBar *)searchBar textDidChange:(NSString *)searchText {
    
    if ([searchText length] == 0) {
        [self resetSearch];
        return;
    }
    
    NSMutableDictionary *dict = [[NSMutableDictionary alloc] init];
    
    
    for (NSString *key in self.allteams) {
        NSMutableArray *arry = [allteams valueForKey:key];
        NSMutableArray *newTeams = [[NSMutableArray alloc] init];
        
        for (NSString *teamName in arry) {
            if ([teamName rangeOfString: searchText
                                options:NSCaseInsensitiveSearch].location != NSNotFound) {
                [newTeams addObject:teamName];
            }
        }
        
        if ([newTeams count] > 0) {
            [dict setObject:newTeams forKey:key];
        }
        [newTeams release];
    }

    self.teamsname = [[dict allKeys] sortedArrayUsingSelector:@selector(compare:)];
    self.teams = dict;
    [dict release];
    
}

- (void)searchBarCancelButtonClicked:(UISearchBar *)searchBar {
    [self resetSearch];
}

- (void)searchBar:(UISearchBar *)searchBar textDidChange:(NSString *)searchText

搜索欄中的文本發生變化的時候，觸發這個方法。

- (void)searchBarCancelButtonClicked:(UISearchBar *)searchBar

點擊搜索欄的取消按鈕時候調用。

視圖設計

wps_clip_image-25316

 

注：
1 本教程是基於關東升老師的教程
2 基於黑蘋果10.6.8和xcode4.2
3 本人初學，有什么不對的望指教
4 教程會隨着本人學習，持續更新
5 教程是本人從word筆記中拷貝出來了，所以格式請見諒


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 IOS之高級控件-拾取器 【Pyqt5】之高級控件QTableWidget的使用 PyQt5——高級控件 部分高級控件整理 PyQt5-高級控件使用（QTableView） PyQt5-高級控件使用（QListView） OLE--SWT高級控件 PyQt5-高級控件使用（QTableWidget） Android高級控件--AdapterView與Adapter PyQt5-高級控件使用（QListWidget）
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM