iPhone + UITableView + 放置图像作为分隔符答案

【问题标题】：iPhone + UITableView + place an image for separatoriPhone + UITableView + 放置图像作为分隔符
【发布时间】：2010-02-09 07:21:05
【问题描述】：

我的应用程序中有 UITableView。

属性：TableStyle = Plain，SeperatorStyle = single 和 SeperatorColor = black

我想做的是，我想放一张图片（一个小条），作为表格的分隔符。

请帮帮我。

问候，普拉提克

【问题讨论】：

标签： iphone uitableview separator

【解决方案1】：

对我有用的解决方案。

self.tableView.separatorColor = [UIColor colorWithPatternImage:[UIImage imageNamed:@"yourImage"]];

【讨论】：

请注意，从内存使用的角度来看，colorWithPatternImage 确实很糟糕，您应该在使用之前仔细考虑。请参阅cocoaintheshell.com/2011/01/colorwithpatternimage-memory-usage 了解更多信息。在自定义表格单元格中带有分隔符图像的薄 UIImageView 工作得很好。

【解决方案2】：

因此，通常对于 iPhone 桌子，您应该只使用其中一种内置样式：http://developer.apple.com/iphone/library/documentation/UIKit/Reference/UITableView_Class/Reference/Reference.html#//apple_ref/occ/instp/UITableView/separatorStyle

作为一直走这条路的 iPhone 开发者，我建议您尽可能避免使用图片，并使用 API 来构建您的应用。

如果你坚持你的鲁莽课程，或者如果你有一个客户要求这个或什么，那么你可以做的是子类 UITableViewCell。

在您的 UITableViewCell 子类中，您可以向单元格的 contentView 添加任何您想要的 UI 元素，包括单元格底部的分隔符图像。

所以，这是一个使用自定义 UITableViewCell 返回表格单元格的委托函数的实现：

- (UITableViewCell *)tableView:(UITableView *)tableView 
         cellForRowAtIndexPath:(NSIndexPath *)indexPath {

  static NSString *CellIdentifier = @"Cell";

  // notice I use a SavedTableCell here instead of a UITavbleViewCell
  SavedTableCell *cell = (SavedTableCell *)[tableView dequeueReusableCellWithIdentifier:CellIdentifier];

  if (cell == nil) {
    cell = [[[SavedTableCell alloc] initWithReuseIdentifier:CellIdentifier hasIcon:YES] autorelease];
  }

  // custom function to set the fields in the cell
  [cell setItem:[self.items objectAtIndex:indexPath.row]];  
  return cell;
}

然后是我对 SavedTableCell.h 的简化实现：

#import <UIKit/UIKit.h>
#import "Item.h"

@interface SavedTableCell : UITableViewCell {

  // my cell has one label and one image, but yours would have an image placed at the bottom of the cell's frame
  UILabel *primaryLabel;
  UIImageView *icon;
}

// i just made up the class Item... in my code they are actually Waypoints.
- (void) setItem:(Item*)item;


@property(nonatomic,retain) UILabel *primaryLabel;
@property(nonatomic,retain) UIImageView *icon;


@end

这是一个简化的 SavedTableCell.m：

#import "SavedTableCell.h"

@implementation SavedTableCell

@synthesize primaryLabel, icon;


- (id)initWithReuseIdentifier:(NSString *)reuseIdentifier {
  if (self = [super initWithStyle:UITableViewStylePlain reuseIdentifier:reuseIdentifier]) {
    icon = [[UIImageView alloc] initWithFrame:CGRectMake(5,5,40,40)];
    [self.contentView addSubview:icon];
    primaryLabel = [[UILabel alloc]init];
primaryLabel.font = TITLE_FONT;     
    [self.contentView addSubview:primaryLabel]; 
  } 
  return self;
}


- (void) setItem:(Item*)item {
  self.primaryLabel.text = [item name];
  [self.icon setImage:[item imageName]];
}

- (void)layoutSubviews {
  [super layoutSubviews];
  primaryLabel.frame = LABEL_FRAME;
  icon.frame = ICON_FRAME;  
}

- (void)dealloc {
  [icon release];
  [primaryLabel release];
}


@end

【讨论】：

@Andrew：通过子类 UITableViewCell，你的意思是说“cellForRowAtIndexPath”方法？？另外，如何确定单元格的底部？
@Andrew：另外你能不能详细说说：“作为一个一直走在这条路上的 iPhone 开发者，我建议你尽可能避免使用图片，并使用 API 来构建你的应用程序。”
我添加了向您展示如何自定义 UITableViewCell 的代码。如果你想在单元格的底部放置一个图像作为分隔符，那么只需适当地设置它的框架。因此，如果您的表格单元格是 40 像素高和 320 像素宽，那么您的图像框架将为 CGRectMake(0,40-image-size.height,image.size.width,image.size.height);
"[...]没有理由制作自定义表格分隔符。"不正确。你的评论是从 2010 年开始的，从那时起事情就发生了变化（尽管我认为当时它也是不正确的）。鉴于 Apple 在 iOS 5 和 6 中为简化 UI 定制所做的努力，以及 TweetBot 等华丽的、高度定制的应用程序的出现和流行，当设计需要时，绝对有理由使用表格单元格分隔符等元素进行定制。
我同意@JKLaiho - 在 UITableViewCells 中使用图像和透明胶片不再是问题。 2010 年，人们拥有 iPhone 3G 手机——现代 iPhone 都不会有卡顿的 tableViews，除非你真的有复杂的大图像。我也曾经做过诸如预实例化视图之类的事情，并使用行为委托，这样我就可以在不重新制作类的情况下改变它们的行为——但所有这些都是为了过去的 iOS 开发。

【解决方案3】：

我只想为 Andrew Johnson 的回答添加一些想法。

如果将子视图添加到 contentView 并使用 accesoryView 或图像，则会错误地显示分隔符图像。使用类似

UIView *bg = [[UIView alloc] initWithFrame:CGRectMake(5, 5, 40, 40)];
    bg.backgroundColor = [[UIColor redColor] colorWithAlphaComponent:0.2];
                    //or [UIColor colorWithImagePattern];
                    //or crete UIImageView and assign to backgroundView of the cell
self.backgroundView = bg;
[bg release];

【讨论】：