Custom Cell with multiple images

Maaz

unread,

Jul 19, 2009, 1:01:59 PM7/19/09

to Three20

Hello Every1,

I want to implement a custom cell having multiple image and all the
images are need to be downloaded from internet. can anybody point me
the code how I can do that? I have already made custom cells with
single image by extending TTIcon Cell.

Thanks

Adam Jack

unread,

Jul 19, 2009, 3:10:54 PM7/19/09

to thr...@googlegroups.com

Maaz,

Not sure it is the best way, but I create a DataSource (usually sub-classing TTListDataSource) that creates/re-uses/populates a customer cell. Mine has TTImage and I set the URL. My example has Encounter (model) and hence Encounter (DataSource) and EncounterCell (Cell).

I hope this helps.

regards,

Adam

--------------------------------

DataSource:

- (void)tableView:(UITableView*)tableView cell:(UITableViewCell*)cell willAppearAtIndexPath:(NSIndexPath*)indexPath {

if ([cell isKindOfClass:[EncounterCell class]]) {

EncounterCell *encounterCell = (EncounterCell*)cell;

Encounter *encounter = [self tableView:tableView objectForRowAtIndexPath:indexPath];

[...]

// Push the value into

} else {

[super tableView:tableView cell:cell willAppearAtIndexPath:indexPath];

}

- (Class)tableView:(UITableView*)tableView cellClassForObject:(id)object {

if ([object isKindOfClass:[Encounter class]])

return [EncounterCell class];

else

return [super tableView:tableView cellClassForObject:object];

}

Cell:

- (id)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString*)identifier {

ConnectContext *context = [ConnectContext sharedContext];

if (self = [super initWithStyle:style reuseIdentifier:identifier]) {

self.opaque = YES;

// Build the UI...

...

}

return self;

}

- (void)prepareForReuse {

self.userImage.URL = nil;

...

}

Matt Vague

unread,

Jul 20, 2009, 2:09:52 AM7/20/09

to Three20

I may be wrong but I think you could do something like this:

In the header file:

@interface TTTableDoubleImageItemCell : TTTableTextItemCell {
TTImageView* _iconView1;
TTImageView* _iconView2;
}
@end

In the main file:

@implementation TTTableDoubleImageItemCell

+ (CGFloat)tableView:(UITableView*)tableView rowHeightForItem:(id)item
{
TTTableDoubleImageItem* imageItem = item;

UIImage* image1 = imageItem.image1 ? [[TTURLCache sharedCache]
imageForURL:imageItem.image1] : nil;
UIImage* image2 = imageItem.image2 ? [[TTURLCache sharedCache]
imageForURL:imageItem.image2] : nil;

CGFloat iconWidth1 = image1
? image1.size.width + kKeySpacing
: (imageItem.image1 ? kDefaultIconSize + kKeySpacing : 0);
CGFloat iconHeight1 = image1
? image1.size.height
: (imageItem.image1 ? kDefaultIconSize : 0);

CGFloat iconWidth2 = image2
? image2.size.width + kKeySpacing
: (imageItem.image2 ? kDefaultIconSize + kKeySpacing : 0);
CGFloat iconHeight2 = image2
? image2.size.height
: (imageItem.image2 ? kDefaultIconSize : 0);

CGFloat maxWidth1 = tableView.width - (iconWidth1 + kHPadding*2 +
kMargin*2);
CGFloat maxWidth2 = tableView.width - (iconWidth2 + kHPadding*2 +
kMargin*2);

}

- (id)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:
(NSString*)identifier {

if (self = [super initWithStyle:style reuseIdentifier:identifier]) {

_iconView1 = [[TTImageView alloc] initWithFrame:CGRectZero];
_iconView2 = [[TTImageView alloc] initWithFrame:CGRectZero];
[self.contentView addSubview:_iconView1];
[self.contentView addSubview:_iconView2];
}
return self;
}

- (void)dealloc {
TT_RELEASE_MEMBER(_iconView1);
TT_RELEASE_MEMBER(_iconView2);
[super dealloc];
}

I basically just copied TTTableImageItemCell and added another image

On Jul 19, 12:10 pm, Adam Jack <adam.j...@gmail.com> wrote:
> Maaz,
>
> Not sure it is the best way, but I create a DataSource (usually sub-

> classing TTListDataSource) that creates/re-uses/populates a customer

Matt Vague

unread,

Jul 20, 2009, 2:11:03 AM7/20/09

to Three20

Also, if you're having problems making your own custom cells you may
want to check out my tutorial: http://mattvague.com/three20-custom-cells-iphone-tutorial

Cheers!

- Matt

meets...@hotmail.com

unread,

Feb 29, 2012, 7:47:58 AM2/29/12

to thr...@googlegroups.com

Thanks Matt so much! Actually this is what I want to achieve for days.Before this I found your blog tutorials which was also based on 2009.

And now in the latest Three20 version, there is 3 more places in the TTTableImageItemCell.m needed to be changed by your method, would you please help on those? thanks! They are : -(void)layoutSubviews(); -(void)didMoveToSuperview(); - (void)setObject:(id)object();

#pragma mark -

#pragma mark UIView

///////////////////////////////////////////////////////////////////////////////////////////////////

- (void)layoutSubviews {

[super layoutSubviews];

TTTableImageItem* item = self.object;

UIImage* image = item.imageURL ? [[TTURLCache sharedCache] imageForURL:item.imageURL] : nil;

if (!image) {

image = item.defaultImage;

}

if ([_item isKindOfClass:[TTTableRightImageItem class]]) {

CGFloat imageWidth = image

? image.size.width

: (item.imageURL ? kDefaultImageSize : 0);

CGFloat imageHeight = image

? image.size.height

: (item.imageURL ? kDefaultImageSize : 0);

if (_imageView2.urlPath || image) {

CGFloat innerWidth = self.contentView.width - (kTableCellHPadding*2

+ imageWidth + kKeySpacing);

CGFloat innerHeight = self.contentView.height - kTableCellVPadding*2;

self.textLabel.frame = CGRectMake(kTableCellHPadding, kTableCellVPadding,

innerWidth, innerHeight);

_imageView2.frame = CGRectMake(self.textLabel.right + kKeySpacing,

floor(self.height/2 - imageHeight/2),

imageWidth, imageHeight);

} else {

self.textLabel.frame = CGRectInset(self.contentView.bounds,

kTableCellHPadding, kTableCellVPadding);

_imageView2.frame = CGRectZero;

}

} else {

if (_imageView2.urlPath || image) {

CGFloat iconWidth = image

? image.size.width

: (item.imageURL ? kDefaultImageSize : 0);

CGFloat iconHeight = image

? image.size.height

: (item.imageURL ? kDefaultImageSize : 0);

TTImageStyle* style = [item.imageStyle firstStyleOfClass:[TTImageStyle class]];

if (style) {

_imageView2.contentMode = style.contentMode;

_imageView2.clipsToBounds = YES;

_imageView2.backgroundColor = [UIColor clearColor];

if (style.size.width) {

iconWidth = style.size.width;

}

if (style.size.height) {

iconHeight = style.size.height;

}

_imageView2.frame = CGRectMake(kTableCellHPadding, floor(self.height/2 - iconHeight/2),

iconWidth, iconHeight);

CGFloat innerWidth = self.contentView.width - (kTableCellHPadding*2

+ iconWidth + kKeySpacing);

CGFloat innerHeight = self.contentView.height - kTableCellVPadding*2;

self.textLabel.frame = CGRectMake(kTableCellHPadding + iconWidth + kKeySpacing,

kTableCellVPadding,

innerWidth, innerHeight);

} else {

self.textLabel.frame = CGRectInset(self.contentView.bounds,

kTableCellHPadding, kTableCellVPadding);

_imageView2.frame = CGRectZero;

}

///////////////////////////////////////////////////////////////////////////////////////////////////

- (void)didMoveToSuperview {

[super didMoveToSuperview];

if (self.superview) {

_imageView2.backgroundColor = self.backgroundColor;

}

///////////////////////////////////////////////////////////////////////////////////////////////////

#pragma mark -

#pragma mark TTTableViewCell

///////////////////////////////////////////////////////////////////////////////////////////////////

- (void)setObject:(id)object {

if (_item != object) {

[super setObject:object];

TTTableImageItem* item = object;

_imageView2.style = item.imageStyle;

_imageView2.defaultImage = item.defaultImage;

_imageView2.urlPath = item.imageURL;

self.textLabel.font = [[self class] fontForImageItem:item];

if ([_item isKindOfClass:[TTTableRightImageItem class]]) {

self.textLabel.textAlignment = UITextAlignmentCenter;

self.accessoryType = UITableViewCellAccessoryNone;

} else {

self.textLabel.textAlignment = UITextAlignmentLeft;

}

在 2009年7月20日星期一UTC+8下午2时09分52秒，Matt Vague写道：

Reply all

Reply to author

Forward