Custom Cell with multiple images

114 views
Skip to first unread message

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
0 new messages