1. 程式人生 > >iOS開發之高階檢視—— UITableView(一)簡單例子

iOS開發之高階檢視—— UITableView(一)簡單例子

    表檢視繼承自UIScrollView,這樣的繼承關係使得表檢視可以實現上、下滾動。

     UITableView需要實現的兩個協議如下:

       UITableViewDatasource:例項化表檢視時,必須採用該方法來實現資料來源的配置
       UITableViewDelegate:表檢視的委託方法,一般用於處理表檢視的基本樣式以及捕捉選中單元格選中事件


    表檢視的結構:

         表檢視由頭部、尾部檢視,中間有一連串的單元格檢視

         表檢視的頭部由tableHeaderView屬性設定,尾部檢視通過tableFooterView屬性設定

        分組表格由一系列的 分割槽 檢視組成,每一個分割槽又包含一個連續的單元格

       每個分割槽檢視也由頭部檢視和尾部檢視,通過委託方法代理

   cell的使用:

       首先定義一個標示符

      其次,檢查表檢視中是否存在閒置的單元格,如果有取出來,沒有則重新建立

     例子一——簡單表格

ViewController.m

//
//  ViewController.m
//  UITableViewDemo
//
//  Created by Apple on 16/5/24.
//  Copyright © 2016年 Apple. All rights reserved.
//

#import "ViewController.h"

@interface ViewController ()

@end

NSArray* cityList;

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    
    [self.view setBackgroundColor:[UIColor redColor]];
    
    //建立一個數組,儲存需要顯示的資料
    cityList = @[@"北京",@"上海",@"天津",@"廣州",@"深圳",@"杭州",@"長沙",@"郴州"];
    //建立UITableView物件
    UITableView* tableView = [[UITableView alloc] initWithFrame:[UIScreen mainScreen].bounds style:UITableViewStyleGrouped];
    
    UILabel* headerLabel = [[UILabel alloc]initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, 44.0)];
    [headerLabel setText:@"城市列表"];
    headerLabel.textColor = [UIColor blackColor];
    headerLabel.backgroundColor = [UIColor cyanColor];
    headerLabel.textAlignment = NSTextAlignmentCenter;
    //設定UITableView的頁首控制元件
    [tableView setTableHeaderView:headerLabel];
    
    UILabel* footerLabel = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, 320, 30)];
    [footerLabel setText:@"以上城市房價太高"];
    //設定UITableView頁尾控制元件
    [tableView setTableFooterView:footerLabel];
    
    //設定行cell高(預設44px)
    [tableView setRowHeight:50];
    //設定分割線顏色
    [tableView setSeparatorColor:[UIColor redColor]];
    //設定分割線風格
    
    /**
     *  UITableViewCellSeparatorStyleNone 不使用分割線
     UITableViewCellSeparatorStyleSingleLine 使用分割線
     UITableViewCellSeparatorStyleSingleLineEtched 在有組的情況使用分割線
     */
    [tableView setSeparatorStyle:UITableViewCellSeparatorStyleSingleLine];
    // 設定UITableView的背景顏色
    [tableView setBackgroundColor:[UIColor lightGrayColor]];
    
    // 設定資料來源代理,必須實現協議UITableViewDataSource中的相關方法
    tableView.delegate = self;
    tableView.dataSource = self;
    
    [self.view addSubview:tableView];
    
    
}

#pragma mark -UITableViewDataSource

// 返回表格分割槽數,預設返回1
- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView
{
    return 1;
}
// 返回每組頭標題名稱
- (NSString *)tableView:(UITableView *)tableView titleForHeaderInSection:(NSInteger)section
{
    return @"分割槽開始";
}

//  返回每組尾部說明
-(NSString *)tableView:(UITableView *)tableView titleForFooterInSection:(NSInteger)section{
    return @"分割槽結束";
}

// @required
// 提供tableView中的分割槽中的資料的數量
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section{
    
    return [cityList count];
}

// 為表格行定義一個靜態字串作為可重用識別符號,在UITableView的cell快取池當中所有的cell的標示符都是剛定義的cellID,因為重用時無所謂獲取哪一個cell,只要是cell就可以
static NSString* cellID = @"cellID";

// @required
// 返回每行的單元格,提供 tableView 中顯示的資料
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{
    // 根據cellID從可重用表格行的佇列中取出可重用的一個表格行UITableViewCell物件
    UITableViewCell* tableViewCell = [tableView dequeueReusableCellWithIdentifier:cellID];
    // 如果取出的表格行為nil
    if (tableViewCell == nil) {
        //建立一個UITableViewCell物件,並繫結到cellID
        tableViewCell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleValue1 reuseIdentifier:cellID];
    }
    // 將單元格的邊框設定為圓角
    tableViewCell.layer.cornerRadius = 12;
    tableViewCell.layer.masksToBounds = YES;
    //UITableView聲明瞭一個NSIndexPath的類別,主要用 來標識當前cell的在tableView中的位置,該類別有section和row兩個屬性,section標識當前cell處於第幾個section中,row代表在該section中的第幾行。
    // 從IndexPath引數獲取當前行的行號
    NSUInteger rowNo = indexPath.row;
    // 取出cityList中索引為rowNo的元素作為UITableViewCell的文字標題
    tableViewCell.textLabel.text = [cityList objectAtIndex:rowNo];
    // 設定UITableViewCell的詳細內容
    tableViewCell.detailTextLabel.text = [NSString stringWithFormat:@"市區"];
    // 設定UITableViewCell的左邊的圖示
    tableViewCell.imageView.image = [UIImage imageNamed:@"1.jpg"];
    // 設定UITableViewCell附加按鈕的樣式
    tableViewCell.accessoryType = UITableViewCellAccessoryDisclosureIndicator;
    //返回設定好資料的cell給UITableView物件
    return tableViewCell;
}


@end

  效果圖如下:

  

例子二————分組展現

     ViewController.m

//
//  ViewController.m
//  UITableViewSectionsApp
//
//  Created by Apple on 16/5/24.
//  Copyright © 2016年 Apple. All rights reserved.
//

#import "ViewController.h"

@interface ViewController ()

@end

NSArray* Heroes;
NSArray* Liqings;
NSArray* Kazikes;
NSArray* Rivens;

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.
    
    // 分割槽資料
    Heroes = @[@"李青",@"卡茲克",@"瑞文"];
    
    Liqings = @[@"李青1",@"李青2"];
    
    Kazikes = @[@"卡茲克"];
    
    Rivens = @[@"瑞文1",@"瑞文2",@"瑞文3"];
    
    // 建立UITableView
    UITableView* tableView =  [[UITableView alloc]initWithFrame:[UIScreen mainScreen].applicationFrame style:UITableViewStyleGrouped];
    
    UILabel* headerLabel = [[UILabel alloc]initWithFrame:CGRectMake(0, 0, 320, 30)];
    [headerLabel setText:@"三大英雄"];
    //設定UITable頭資訊
    [tableView setTableHeaderView:headerLabel];
    
    UILabel* footerLabel = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, 320, 30)];
    [footerLabel setText:@"等你來戰"];
    //設定UITable尾部資訊
    [tableView setTableFooterView:footerLabel];
    
    [tableView setBackgroundColor:[UIColor cyanColor]];
    
    // 新增UITableView
    [self.view addSubview:tableView];
    
    // 設定資料來源代理,必須實現協議UITableViewDataSource中的相關方法
    tableView.dataSource = self;
    
    
}

//返回 tableView上的分割槽數量,本例為3
- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView{
    return [Heroes count];
}

// 返回分割槽的title(分割槽是從 0 開始的)
- (NSString *)tableView:(UITableView *)tableView titleForHeaderInSection:(NSInteger)section{
    // 根據分割槽的獲取對應的名稱
    return Heroes[section];
}

// 返回tableView中的分割槽中的資料的數量
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section{
    // 根據分割槽,獲取分割槽中對應要顯示的資料長度
    if(section == 0){
        return [Liqings count];
    }else if(section == 1){
        return [Kazikes count];
    }else{
        return [Rivens count];
    }
}

// 可重用識別符號
static NSString* cellID = @"cellID";

// 將提供 tableView 中顯示的資料
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{
    
    // 根據cellID獲取可重用的UITableViewCell物件
    UITableViewCell* cell = [tableView dequeueReusableCellWithIdentifier:cellID];
    if(!cell){
        //建立一個UITableViewCell物件,並繫結到cellID
        cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:cellID];
    }
    // 根據分割槽設定UITableViewCell顯示的資料
    if(indexPath.section == 0){
        cell.textLabel.text = Liqings[indexPath.row];
        // 設定UITableViewCell的左邊的圖示
        cell.imageView.image = [UIImage imageNamed:@"l1.jpg"];
        
    }else if(indexPath.section == 1){
        cell.textLabel.text = Kazikes[indexPath.row];
        cell.imageView.image = [UIImage imageNamed:@"k1.jpg"];
        
    }else{
        cell.textLabel.text = Rivens[indexPath.row];
        cell.imageView.image = [UIImage imageNamed:@"r1.jpg"];
    }
    // 設定列的按鈕型別
    cell.accessoryType = UITableViewCellAccessoryDisclosureIndicator;
    // 返回設定好資料的cell給UITableView物件
    return cell;
}



@end

    效果圖如下: