Creating a nice custom UITableViewCell

Question

I am trying to create a table view with a layout like yobongo:

and what I have now is really crappy, where UIImage has different sizes, etc. etc .... How to fix this in order to have something pleasant? I tried rebuilding through IB, but then mine looks like this:

I wanted to create a UIImage in a cell with a fixed size (my sizes change here and there). How to install it? I also want a rounded edge around UIIMage ... I played with spring and struts via IB, and I think that maybe I messed up something that I cannot fix again.

I also want a line break between the line and the border, as in the image below

, , , , . ?

Answer 1

UIImageView . UIImageView contentMode - , , , .. clipToBounds YES "" .

CALayer , UIImageView. ...

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

:

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

. UIImage: – stretchableImageWithLeftCapWidth:topCapHeight:

UITableViewCell, . .. UITextView (textViewDidChange:) ..

Google SO.

UITableViewDelegate ...

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

... . , ...

:

UIImageView *__backgroundImageView;

Initializer:

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

:

- (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;

  ...
}

:

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

Answer 2

• , ( ) UITableViewCell , . - ContentMode ScaleToFill UIImageView, .

• // , :

#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;

• TextView: , , : UITextViewDelegate

- (void)textViewDidChange:(UITextView *)textView

textView.contentSize textView.frame.

Answer 3

, UIView. ivar UIImageView* _img_v 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];
    }
}

, scaleToFill.