UIKit框架（21）UITableView實現復雜單元格（一）-創新互聯

上篇文章介紹了UITableView的數據源驅動、重用機制、刷新數據等基本用法

創新互聯公司作為成都網站建設公司，專注重慶網站建設公司、網站設計，有關企業網站制作方案、改版、費用等問題，行業涉及石涼亭等多個領域，已為上千家企業服務，得到了客戶的尊重與認可。

本篇文章介紹如何實現一些復雜的單元格

UITableViewCell單元格對象有四種基本樣式，開發中這個基本樣式往往不能滿足我們的需求，也就是說需要自定義UITableViewCell的樣式，介紹主要的兩種做法：

1）使用純代碼自定義

2）使用storyboard中的prototype cell

先來介紹一下UITableViewCell

UITableViewCell表格單元格

UITableView中的單元格使用UITableViewCell視圖對象

創建方法：

- (instancetype)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier

style參數：cell的預設樣式

typedef enum : NSInteger {
     UITableViewCellStyleDefault,
     UITableViewCellStyleValue1,
     UITableViewCellStyleValue2,
     UITableViewCellStyleSubtitle
} UITableViewCellStyle;

reuseIdentifier參數：cell的重用ID

單元格的內部視圖：

@property(nonatomic, readonly, retain) UIView *contentView

內部視圖中又包含以下三個子視圖，這三個子視圖在不同樣式中顯示的個數及樣式不同

@property(nonatomic, readonly, retain) UILabel *textLabel
@property(nonatomic, readonly, retain) UILabel *detailTextLabel
@property(nonatomic, readonly, retain) UIImageView *p_w_picpathView

單元格的其他組件：

@property(nonatomic) UITableViewCellAccessoryType accessoryType //右側指示視圖樣式
@property(nonatomic, retain) UIView *accessoryView //自定義右側指示視圖

單元格的選擇狀態：

@property(nonatomic, getter=isSelected) BOOL selected
@property(nonatomic) UITableViewCellSelectionStyle selectionStyle

復雜單元格實現（一）：純代碼自定義

實現如下效果：

UIKit框架（21）UITableView實現復雜單元格（一）實現一個游戲人物信息的展示

分析：

UITableView使用典型的MVC設計模式進行開發

a. 模型：游戲英雄信息數據

b. 視圖：單元格視圖UITableViewCell的子類

c. 控制器：管理模型數組，以及實現tableView的數據源、代理等

1）模型定義

@interface AMHeroModel : NSObject

@property (nonatomic, copy) NSString * name;    //英雄名

@property (nonatomic, copy) NSString * title;    //英雄稱號

@property (nonatomic, copy) NSString * icon;    //英雄圖標

@property (nonatomic, copy) NSString * desc;    //英雄描述

@property (nonatomic, copy) NSString * tags;    //英雄標簽

+ (AMHeroModel*) modelWithDict:(NSDictionary*)dict;//構造方法：字典轉模型

@end

2）控制器管理模型數組并使用懶加載

@interface ViewController ()
@property (nonatomic, strong) NSMutableArray * heroArray;//模型數組
@property (weak, nonatomic) IBOutlet UITableView *tableView;//tableView
@end

#pragma mark - heroArray懶加載
- (NSMutableArray *)heroArray
{
    if ( _heroArray == nil ) {
        NSString * plistPath = [[NSBundle mainBundle] pathForResource:@"hero.plist" ofType:nil];
        NSArray * plistArray = [NSArray arrayWithContentsOfFile:plistPath];
        _heroArray = [NSMutableArray array];
        for ( NSDictionary * dict in plistArray ) {
            AMHeroModel * model = [AMHeroModel modelWithDict:dict];
            [_heroArray addObject:model];
        }
    }
    return _heroArray;
}

3）自定義UITableViewCell子類

需要展示的模型數據包括：4個字符串、一張圖片，故UITableViewCell內部應自定義4個UILabel以及一個UIImageView子視圖。

實現需要三步：

@interface AMHeroCell : UITableViewCell
//1.添加一個類方法，獲取cell
+ (AMHeroCell *) cellWithTableView:(UITableView * ) tableView;
//2.添加模型屬性并重寫setter方法
@property (nonatomic, strong) AMHeroModel * heroModel;
//3.提供一個類方法，返回cell的高度
+ (CGFloat) cellHeight;
@end

4）UITableViewCell子類：添加一個類方法獲取cell

這一步是自定義UITableViewCell最關鍵且最復雜的步驟，需要完成：

將cell創建/獲取的代碼封裝、創建所有的子視圖、設置所有的子視圖的frame

//1.1 實現類方法，獲取cell
+ (AMHeroCell *)cellWithTableView:(UITableView *)tableView
{
    AMHeroCell * cell = [tableView dequeueReusableCellWithIdentifier:@"cell"];
    if ( cell == nil ) {
        cell = [[AMHeroCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:@"cell"];
    }
    return cell;
}

創建所有的子視圖操作應當放在initWithStyle方法中，故重寫

//1.2 重寫initWithStyle:方法，添加自定義子視圖的代碼
- (instancetype)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier
{
    if ( self = [super initWithStyle:style reuseIdentifier:reuseIdentifier] ) {
        //1.2.1 將沒有用的子視圖刪除
        [self.p_w_picpathView removeFromSuperview];
        [self.textLabel removeFromSuperview];
        [self.detailTextLabel removeFromSuperview];
        //1.2.2 創建自定義的子視圖并進行一次性的屬性設置
        UIImageView * iconImageView = [[UIImageView alloc] init];
        self.iconImageView  =iconImageView;
        [self.contentView addSubview:self.iconImageView];
        UILabel * nameLabel = [[UILabel alloc] init];
        self.nameLabel = nameLabel;
        [self.contentView addSubview:self.nameLabel];
        self.nameLabel.textColor = [UIColor purpleColor];
        self.nameLabel.font = [UIFont systemFontOfSize:16];
        UILabel * titleLabel = [[UILabel alloc] init];
        self.titleLabel = titleLabel;
        [self.contentView addSubview:self.titleLabel];
        self.titleLabel.textColor = [UIColor grayColor];
        self.titleLabel.font = [UIFont systemFontOfSize:14];
        UILabel * tagsLabel = [[UILabel alloc] init];
        self.tagsLabel = tagsLabel;
        [self.contentView addSubview:tagsLabel];
        self.tagsLabel.textColor = [UIColor redColor];
        self.tagsLabel.font = [UIFont systemFontOfSize:12];
        UILabel * descLabel = [[UILabel alloc] init];
        self.descLabel = descLabel;
        [self.contentView  addSubview:descLabel];
        self.descLabel.textColor = [UIColor blueColor];
        self.descLabel.font = [UIFont systemFontOfSize:12];
        self.descLabel.numberOfLines = 0;
    }
    return self;
}

考慮到屏幕適配，使用設定frame的方式且當前為view子類，所以重寫layoutSubviews方法

//1.3 設置所有子視圖的frame或者使用autolayout
//如果使用autolayout，代碼放在重寫的initWithStyle方法中
//如果使用frame，放在layoutSubviews方法中
- (void)layoutSubviews
{
    [super layoutSubviews];
    CGFloat Xspace = self.contentView.frame.size.width*0.05;
    CGFloat Yspace = self.contentView.frame.size.height*0.05;
    
    CGFloat iX, iY, iW, iH;
    iX = Xspace;
    iY = Yspace;
    iH = self.contentView.frame.size.height*0.9;
    iW = iH;
    self.iconImageView.frame = CGRectMake(iX, iY, iW, iH);
    
    CGFloat nX, nY, nW, nH;
    nX = 2*Xspace+iW;
    nY = iY;
    nW = (self.contentView.frame.size.width-3*Xspace-iW-Xspace)/2;
    nH = self.contentView.frame.size.height*0.2;
    self.nameLabel.frame = CGRectMake(nX, nY, nW, nH);
    
    CGFloat tX, tY, tW, tH;
    tX = CGRectGetMaxX(self.nameLabel.frame)+Xspace;
    tY = nY;
    tW = nW;
    tH = nH;
    self.titleLabel.frame = CGRectMake(tX, tY, tW, tH);
    
    CGFloat taX, taY, taW, taH;
    taX = nX;
    taY = self.contentView.frame.size.height*0.3;
    taW = self.contentView.frame.size.width- 3*Xspace -iW;
    taH = nH;
    self.tagsLabel.frame = CGRectMake(taX, taY, taW, taH);
    
    CGFloat dX, dY, dW, dH;
    dX = nX;
    dY = self.contentView.frame.size.height*0.55;
    dW = taW;
    dH = self.contentView.frame.size.height*0.4;
    self.descLabel.frame = CGRectMake(dX, dY, dW, dH);
    
}

5）UITableViewCell子類：添加模型屬性并重寫setter方法

在3）中的代碼示例中已經看到添加了模型屬性

重寫setter方法的目的是：對外隱藏子視圖，數據顯示到子視圖的操作封裝在setter方法內部

- (void)setHeroModel:(AMHeroModel *)heroModel
{
    _heroModel = heroModel;
    //圖片對象的創建：兩種方式：
    //1）p_w_picpathNamed 有緩存的圖片對象創建方式  以空間換時間
    //self.iconImageView.p_w_picpath = [UIImage p_w_picpathNamed:_heroModel.icon];
    //2）withContentOfFile方式創建的 不使用緩存  以時間換空間
    NSString * path = [[NSBundle mainBundle] pathForResource:_heroModel.icon ofType:nil];
    self.iconImageView.p_w_picpath = [[UIImage alloc] initWithContentsOfFile:path];
    self.nameLabel.text = _heroModel.name;
    self.titleLabel.text = _heroModel.title;
    self.tagsLabel.text = _heroModel.tags;
    self.descLabel.text = _heroModel.desc;
}

6）UITableViewCell子類：類方法返回cell的高度

UITableView中單元格的高度，默認是44，添加一個類方法返回指定的高度，這樣做的好處是：當需求有變時，只需要修改UITableViewCell的子類，即高內聚低耦合的編程思想。

+ (CGFloat)cellHeight
{
    return 140.f;
}

7）控制器實現tableView的數據源、代理方法

#pragma mark - tableView的數據源和代理
- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView
{
    return 1;
}
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
    return self.heroArray.count;
}
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    return [AMHeroCell cellWithTableView:tableView];
}
- (void)tableView:(UITableView *)tableView willDisplayCell:(UITableViewCell *)cell forRowAtIndexPath:(NSIndexPath *)indexPath
{
    AMHeroCell * heroCell = cell;
    
    heroCell.heroModel = self.heroArray[indexPath.row];
}
- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
{
    return [AMHeroCell cellHeight];
}

可以看到數據源、代理方法的實現極其簡單，且無論模型數據怎么變，cell怎么變，這部分的代碼是幾乎不變的

案例的額外功能擴展

1）添加功能

從截圖可以看到，導航欄有一個加號按鈕，實現響應方法：隨機添加一個英雄

#pragma mark - 添加cell
- (void) addBarBtnClicked
{
    NSInteger index = random()%self.heroArray.count;
    AMHeroModel * model = self.heroArray[index];
    [self.heroArray insertObject:model atIndex:0];
    [self.tableView reloadData];
}

2）刪除功能

從截圖可以看到，導航欄有一個刪除按鈕，點擊后UITableView進入編輯狀態

#pragma mark - 刪除cell
- (void) delBarBtnClicked
{
    [self.tableView setEditing:!self.tableView.isEditing animated:YES];
}

UIKit框架（21）UITableView實現復雜單元格（一）

點擊編輯狀態的刪除按鈕的響應方法

- (void)tableView:(UITableView *)tableView commitEditingStyle:(UITableViewCellEditingStyle)editingStyle forRowAtIndexPath:(NSIndexPath *)indexPath
{//當進入編輯狀態后，點擊delete按鈕時按鈕
    [self.heroArray removeObjectAtIndex:indexPath.row];
    [self.tableView reloadData];
}

3）點擊一個cell，彈出一個UIAlertController，可以進行簡單的數據修改

- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath
{
    UIAlertController * ac = [UIAlertController alertControllerWithTitle:@"修改英雄信息" message:@"輸入修改該的數據" preferredStyle:UIAlertControllerStyleAlert];
    UIAlertAction * a1 = [UIAlertAction actionWithTitle:@"取消" style:UIAlertActionStyleCancel handler:^(UIAlertAction * _Nonnull action) {
        
    }];
    UIAlertAction * a2 = [UIAlertAction actionWithTitle:@"確定" style:UIAlertActionStyleDefault handler:^(UIAlertAction * _Nonnull action) {
        model.name = ac.textFields[0].text;
        model.title = ac.textFields[1].text;
        [self.tableView reloadData];//重新加載數據
    }];
    [ac addAction:a1];
    [ac addAction:a2];
    [ac addTextFieldWithConfigurationHandler:^(UITextField * _Nonnull textField) {
        textField.text = model.name;
    }];
    [ac addTextFieldWithConfigurationHandler:^(UITextField * _Nonnull textField) {
        textField.text = model.title;
    }];
    
    [self presentViewController:ac animated:YES completion:nil];
}

效果：

UIKit框架（21）UITableView實現復雜單元格（一）

另外有需要云服務器可以了解下創新互聯scvps.cn，海內外云服務器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務器、裸金屬服務器、高防服務器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業上云的綜合解決方案，具有“安全穩定、簡單易用、服務可用性高、性價比高”等特點與優勢，專為企業上云打造定制，能夠滿足用戶豐富、多元化的應用場景需求。

網頁題目：UIKit框架（21）UITableView實現復雜單元格（一）-創新互聯
標題路徑：http://m.newbst.com/article6/egiig.html

成都網站建設公司_創新互聯，為您提供移動網站建設、網站改版、關鍵詞優化、品牌網站設計、軟件開發、域名注冊

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源：創新互聯

猜你還喜歡下面的內容

免费观看又色又爽又黄的小说免费_美女福利视频国产片_亚洲欧美精品_美国一级大黄大色毛片

UIKit框架（21）UITableView實現復雜單元格（一）-創新互聯