繼續(xù)介紹第二種實現(xiàn)復(fù)雜單元格的方式 ---- 使用storyboard中的prototype cell

創(chuàng)新互聯(lián)專注于天寧網(wǎng)站建設(shè)服務(wù)及定制，我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗。 熱誠為您提供天寧營銷型網(wǎng)站建設(shè)，天寧網(wǎng)站制作、天寧網(wǎng)頁設(shè)計、天寧網(wǎng)站官網(wǎng)定制、小程序開發(fā)服務(wù)，打造天寧網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供天寧網(wǎng)站排名全網(wǎng)營銷落地服務(wù)。

• prototype Cell介紹

在storyboard或xib中使用tableView時，可以添加prototype cells，其好處是：

1）可以直接進行自定義cell的設(shè)置

2）通過設(shè)置cell的重用ID，在調(diào)用出隊列方法時如果沒有可重用的則創(chuàng)建一個新的

注：一個tableView中可以設(shè)計多個prototype cell，重用ID不同即可

使用prototype cell 設(shè)計tableView是最常用的一種方式！

使用prototype cell相比較于純代碼，可以簡化兩處編程

• 簡化cell獲取的代碼

使用了prototype cell之后，從tableView的重用隊列獲取指定ID的cell，如果獲取不出來，會自動創(chuàng)建一個相同ID的prototype cell的副本，不再需要alloc+init進行創(chuàng)建

//1.1 實現(xiàn)類方法，獲取cell
+ (AMHeroCell *)cellWithTableView:(UITableView *)tableView
{
    AMHeroCell * cell = [tableView dequeueReusableCellWithIdentifier:@"cell"];
    return cell;
}

• 簡化cell的子視圖設(shè)定

使用storyboard設(shè)計cell內(nèi)部的子視圖，也就是說不需要在代碼中創(chuàng)建子視圖并進行自動布局，這些工作全部可以在storyboard中快速完成。

也就是說，上篇文章中，介紹的1.2 1.3這兩步不再需要

• 案例：模擬實現(xiàn)大眾點評的首頁

prototype cell是我們實現(xiàn)復(fù)雜tableView的一種快速開發(fā)手段

如實現(xiàn)如下截圖的效果：

可以看到：

    三個section，每個section中的cell樣式不同及個數(shù)不同

    第一個section：一個cell，scrollView，內(nèi)部有很多按鈕

    第二個section：兩個cell，活動信息cell

    第三個section：很多個cell，產(chǎn)品信息cell

1）在storyboard設(shè)計出這三種cell

    每種cell設(shè)定不同的ID

3）創(chuàng)建每個cell需要顯示的數(shù)據(jù)模型類

4）每種cell分別關(guān)聯(lián)UITableViewCell的子類

    子類內(nèi)部分別實現(xiàn)三步操作（見UIKit框架（21）UITableView實現(xiàn)復(fù)雜單元格（一））

5）控制器管理所有的數(shù)據(jù)模型并實現(xiàn)數(shù)據(jù)源、代理方法

#pragma mark - tableView 
- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView
{
    return 3;
}
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
    if (section == 0 ) {
        return 1;
    }
    else if ( section == 1 ) {
        return self.activityArray.count;
    }
    else if ( section == 2 ) {
        return self.goodsArray.count;
    }
    else {
        return 0;
    }
}

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    if ( indexPath.section == 0 ) {
        return [AMFunctionSelectionCell cellWithTableView:tableView];
    }
    else if ( indexPath.section == 1 ) {
        return [AMActivityCell cellWithTableView:tableView];
    }
    else if ( indexPath.section == 2 ) {
        return [AMGoodsInfoCell cellWithTableView:tableView];
    }
    else {
        return nil;
    }
}

- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
{
    if ( indexPath.section == 0 ) {
        return [AMFunctionSelectionCell cellHeight];
    }
    else if ( indexPath.section == 1 ) {
        return [AMActivityCell cellHeight];
    }
    else if ( indexPath.section == 2 ) {
        return [AMGoodsInfoCell cellHeight];
    }
    else {
        return 0;
    }
}
- (void)tableView:(UITableView *)tableView willDisplayCell:(UITableViewCell *)cell forRowAtIndexPath:(NSIndexPath *)indexPath
{
    if ( indexPath.section == 0 ) {
        
    }
    else if ( indexPath.section == 1) {
        ((AMActivityCell*)cell).activityModel = self.activityArray[indexPath.row];
    }
    else if ( indexPath.section == 2 ) {
        ((AMGoodsInfoCell*)cell).goodsInfoModel = self.goodsArray[indexPath.row];
    }
}

• 案例擴展：加載更多

在最后一個section下面增加一個加載更多按鈕

點擊后，可以模擬一個簡單的增加cell的操作

1）使用xib設(shè)計一個這個底部視圖

2）關(guān)聯(lián)一個UIView的子類并提供類方法快速創(chuàng)建

+ (AMGoodsInfoFooterView *)view
{
    return [[[NSBundle mainBundle] loadNibNamed:@"AMGoodinfoFooterView" owner:nil options:nil]lastObject];
}

3）控制器實現(xiàn)tableView的數(shù)據(jù)源方法

- (UIView *)tableView:(UITableView *)tableView viewForFooterInSection:(NSInteger)section
{
    if ( section == 2 ) {
        AMGoodsInfoFooterView * v =  [AMGoodsInfoFooterView view];
        v.delegate = self;
        return v;
    }
    else {
        return nil;
    }
}
- (CGFloat)tableView:(UITableView *)tableView heightForFooterInSection:(NSInteger)section
{
    if ( section == 2 ) {
        return 40;
    }
    else {
        return 5;
    }
}
- (CGFloat)tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section
{
    return 5;
}

    說明：兩處返回5的目的是讓三個section之間的空隙不要太大

4）加載更多按鈕被點擊時，將點擊產(chǎn)生這個時間通過代理傳遞給控制器

//UIView子類提出代理協(xié)議并添加代理屬性
@protocol AMGoodsInfoFooterViewDelegate 
@optional
- (void) footerViewLoadMoreGoods;
@end
@interface AMGoodsInfoFooterView : UIView
+ (AMGoodsInfoFooterView *) view;
@property (nonatomic, weak) id delegate;
@end

5）控制器成為代理并實現(xiàn)代理方法

成為代理的操作在3）中已有

代理方法的實現(xiàn)：（簡單模擬）

- (void)footerViewLoadMoreGoods
{
    AMGoodsInfoModel * model = [[AMGoodsInfoModel alloc] init];
    model.icon = self.goodsArray[0].icon;
    model.goodTitle = @"東軟食堂";
    model.goodFooter = @"已售999999999";
    model.goodDesc = @"吃了你就知道了";
    model.priceValue = @"8";
    [self.goodsArray addObject:model];
    
    NSIndexSet * s = [NSIndexSet indexSetWithIndex:2];
    [self.tableView reloadSections:s withRowAnimation:UITableViewRowAnimationLeft];
}