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;
  ...
}

Answer 2

• If you want all images (of potentially different source sizes) to appear the same size in your UITableViewCell then you need to adjust the sizes of the images. The easiest way to do that is to use the ScaleToFill contentMode of your UIImageView, which will then do the work for you.

• You can get rounded/bordered/colored corners on any view by doing this:

#import <QuartzCore/QuartzCore.h>      // for layer.cornerRadius
...
self.comboTextView.layer.cornerRadius = 10.0;
self.comboTextView.layer.borderColor = [[UIColor grayColor] CGColor];
self.comboTextView.layer.borderWidth = 2;

• Expanding TextView: I'd probably do this: implement the UITextViewDelegate function

- (void)textViewDidChange:(UITextView *)textView

then in that method get the textView.contentSize property, and set the textView.frame property to that size.

Answer 3

Create custom class that inherits from the UIView. Add ivar UIImageView* _img_v Override setFrame :

-(void) setFrame:(CGRect) r {
    [super setFrame: r];

    if( _img_v.image && r.size.width*r.size.height ) {
        CGSize isz = _img_v.image.size;

        float sx = r.size.width/isz.width;
        float sy = r.size.height/isz.height;
        if( sx > sy ) {
            sx = sy;
        } else {
            sy = sx;
        }

        CGRect img_frame = CGRectMake(0, 0, isz.width*sx, isz.height*sy);
        img_frame.origin = CGPointMake((r.size.width - img_frame.size.width)/2.0, (r.size.height - img_frame.size.height)/2.0);
        [_img_v setFrame: img_frame];
    }
}

This won't crop the images, but you can also use scaleToFill for that.