creating a nice custom UITableViewCell

Question

I am trying to create a table view which has a layout like what yobongo has:

and what I have now is really crappy, where the UIImage has different size, etc, etc... How do I fix it to have something nice like that? I tried rearranging via IB but then mine looks like this:

I wanted to create a UIImage in the cell that has a fixed size (mine resizes here and there). How do I set that? I also want a rounded edge around the UIIMage... I have played around with the spring and struts via IB and I think I might have messed up something that I can't fix again..

I also want so that there exists a gap between rows and a border like in the picture below

I also wanted to implement a chat box like below where it expands if the text is more than it's limit. How can I do this?

Answer 1

Fixed image size

You have to set UIImageView frame for all image views. And then you have to play with UIImageView's contentMode property - where you can scale image to fit frame, fill frame, keep aspect ratio, etc. And you also have to set clipsToBounds to YES to clip "overlapping" image parts.

Round Corners

You can use CALayer for this, which is also available in UIImageView. It's matter of four lines ...

imageView.layer.cornerRadius = 3.0;
imageView.layer.masksToBounds = YES;
imageView.layer.borderColor = [UIColor blackColor].CGColor;
imageView.layer.borderWidth = 1.0;

Example:

- (id)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier {
  self = [super initWithStyle:style reuseIdentifier];
  if ( self ) {
    ...
    self.imageView.layer.cornerRadius = 3.0;
    self.imageView.layer.masksToBounds = YES;
    self.imageView.layer.borderColor = [UIColor blackColor].CGColor;
    self.imageView.layer.borderWidth = 1.0;
    ...
  }
  return self;
}

Expandable Text Input

You have to prepare good background image for this. And then you can create stretchable image via UIImage class method: – stretchableImageWithLeftCapWidth:topCapHeight:

Each row will be subclassed UITableViewCell where you can handle all these things. Stretchable background, etc. Resizing via UITextView's delegate (textViewDidChange:), etc.

Google for some examples or search SO.

Gaps

UITableViewDelegate has method ...

- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath

... where you can specify row height. To create gap, add this to your custom cell ...

Header:

UIImageView *__backgroundImageView;

Initializer:

__backgroundImageView = [[UIImageView alloc] initWithImage:...stretchableImage...];
[self.contentView addSubview:__backgroundImageView];
[self.contentView sendSubviewToBack:__backgroundImageView];

Layouting:

- (void)layoutSubviews {
  [super layoutSubviews];

  // This draws background image over the whole cell and adds 5px gap top/bottom
  CGRect rect = self.contentView.bounds;
  rect.origin.y += 5; // Draw background image 5 pixels below cell top
  rect.size.height -= 2 * 5; // Remove top/bottom gap from background image height
  __backgroundImageView.frame = rect;

  ...
}

Memory Management:

- (void)dealloc {
  [super dealloc];
  [__backgroundImageView release]; __backgroundImage = nil;
  ...
}