iphone - 创建一个漂亮的自定义 UITableViewCell

Question

我正在尝试创建一个表格 View ，其布局类似于 yobongo 的布局:

我现在拥有的真的很糟糕，其中 UIImage 有不同的大小等等......我该如何修复它才能拥有像那样好的东西？我尝试通过 IB 重新排列，但我的看起来像这样:

我想在具有固定大小的单元格中创建一个 UIImage(我的调整大小)。我该如何设置？我还希望 UIIMage 周围有一个圆边...我已经通过 IB 玩过 Spring 和支柱，我想我可能搞砸了一些我无法再次修复的东西..

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

我还想实现一个如下所示的聊天框，如果文本超过限制，它就会展开。我该怎么做？

Answer 1

固定图片大小

您必须为所有 ImageView 设置 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 类方法创建可拉伸(stretch)图像:– stretchableImageWithLeftCapWidth:topCapHeight:

每一行都将成为 UITableViewCell 的子类，您可以在其中处理所有这些事情。可拉伸(stretch)背景等。通过 UITextView 的委托(delegate) (textViewDidChange:) 等调整大小

Google 获取一些示例或搜索 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;
  ...
}