创建一个不错的自定义UITableViewCell

Question

我正在尝试创建一个表格视图，其布局类似于yobongo所具有的：

而我现在所拥有的非常糟糕，UIImage有不同大小等等...... 如何修复它以获得类似的东西？我尝试通过IB重新排列，但我的看起来像这样：

我想在具有固定大小的单元格中创建一个UIImage（我的调整大小在这里和那里）。我该怎么设置？我还希望在UIIMage周围有一个圆润的边缘......我通过IB玩过弹簧和支柱，我想我可能搞砸了一些我无法再修复的东西..

我还想要在行和边框之间存在间隙，如下图所示

我还想实现一个如下所示的聊天框，如果文本超出限制，它会扩展。我怎么能这样做？

Answer 1

修复图片尺寸

您必须为所有图像视图设置UIImageView框架。然后你必须使用UIImageView的contentMode属性 - 你可以在其中缩放图像以适应帧，填充帧，保持纵横比等。你还必须将clipsToBounds设置为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 :)等调整大小

谷歌的一些例子或搜索SO。

<强>隙

UITableViewDelegate有方法......

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

...您可以在其中指定行高。要创建差距，请将其添加到自定义单元格...

部首：

UIImageView *__backgroundImageView;

初​​始化器：

__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中显示相同的大小，则需要调整图像的大小。最简单的方法是使用UIImageView的ScaleToFill contentMode，然后为您完成工作。

• 您可以通过以下方式在任何视图上获得圆角/边框/彩色边角：

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