实战three20的TTTableViewController自定义单元格

three20中的TTTableCaptionItem实际使用效果是,左侧是较小字体的标题,右侧是大号字体的文本,如下图所示

但是在实际使用中,我希望左侧的字体能变大,右侧字体变小,所以我参照wiki的介绍 在TTTableViewController定制单元格 来进行调整,按文中介绍,我需要实现:

  1. 自定义的tableItem
  2. 自定义的tableItemCell
  3. 自定义的datasource,以便支持新增的tableItem

但是考虑到three20的代码库中已经有个半成品的TTTableRightCaptionItem,所以我只需要在这个基础上加工一下。

实现TTTableTextCaptionItem

我将这个自定义的类命名为TTTableTextCaptionItem以示区别

TTTableTextCaptionItem

TTTableTextCaptionItem.h


#import 

@interface TTTableTextCaptionItem : TTTableRightCaptionItem {
}

@end

TTTableTextCaptionItem.m


#import "TTTableTextCaptionItem.h"

@implementation TTTableTextCaptionItem
@end

TTTableTextCaptionItemCell

TTTableTextCaptionItemCell.h


#import 

@interface TTTableTextCaptionItemCell : TTTableRightCaptionItemCell {
}
@end

TTTableTextCaptionItemCell.m


#import "TTTableTextCaptionItem.h"
#import "TTTableTextCaptionItemCell.h"

static const CGFloat kKeySpacing = 12;
static const CGFloat kKeyWidth = 75;

@implementation TTTableTextCaptionItemCell

///////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////
#pragma mark -
#pragma mark UIView


///////////////////////////////////////////////////////////////////////////////////////////////////
- (void)layoutSubviews {
    [super layoutSubviews];
    
    self.detailTextLabel.frame = CGRectMake(kTableCellHPadding, kTableCellVPadding,
                                      kKeyWidth, self.textLabel.font.ttLineHeight);
    
    CGFloat valueWidth = self.contentView.width - (kTableCellHPadding*2 + kKeyWidth + kKeySpacing);
    CGFloat innerHeight = self.contentView.height - kTableCellVPadding*2;
    self.textLabel.frame = CGRectMake(kTableCellHPadding + kKeyWidth + kKeySpacing,
                                            kTableCellVPadding,
                                            valueWidth, innerHeight);
}

///////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////
#pragma mark -
#pragma mark TTTableViewCell


///////////////////////////////////////////////////////////////////////////////////////////////////
- (void)setObject:(id)object {
    if (_item != object) {
        [super setObject:object];
        
        TTTableTextCaptionItem* item = object;
        self.textLabel.text = item.text;
        self.detailTextLabel.text = item.caption;
    }
}

@end

如何使用TTTableTextCaptionItem

首先实现一个自定义的DataSource,然后在后续代码中使用这个DataSource

#import "TTTableTextCaptionItemCell.h"
#import "TTTableTextCaptionItem.h"

@interface MyCustomDataSource : TTSectionedDataSource
@end

@implementation MyCustomDataSource

- (Class)tableView:(UITableView*)tableView cellClassForObject:(id)object {
    if ([object isKindOfClass:[TTTableTextCaptionItem class]]) {
        return [TTTableTextCaptionItemCell class];
    } else {
        return [super tableView:tableView cellClassForObject:object];
    }
}

@end

代码下载

我把代码放到github上,方便大家参考 TTTableTextCaptionItem.git

3 Replies to “实战three20的TTTableViewController自定义单元格”

  1. 你好,我是来表感谢的。最近做一个项目需要用到three20,无论是中文还是英文,网上相关资料都实在是太少了。很感谢你整理了这么多有用的资料。

Leave a Reply

Your email address will not be published.