Question

我有一个分组UITableView，其中包含多个单元格（只是标准UITableViewCell s），所有单元格都是UITableViewCellStyleSubtitle样式。布埃诺。但是，当我将图像插入其中时（使用提供的imageView属性），左侧的角落变为方形。

Example Image http://files.lithiumcube.com/tableView.png

用于将值分配到单元格中的代码是：

cell.textLabel.text = currentArticle.descriptorAndTypeAndDifferentiator;
cell.detailTextLabel.text = currentArticle.stateAndDaysWorn;
cell.imageView.image = currentArticle.picture;

和currentArticle.picture是UIImage（也就是图片，你可以看到，除了方角以外，它们显示得很好）。

它在我的iPhone 3G，iPhone 4模拟器和iPad模拟器中显示相同的内容。

我想要的是类似于Apple在其iTunes应用中使用的UITableViewCell。

关于我做错了什么的想法？

谢谢，
-Aaron

Answer 1

cell.imageView.layer.cornerRadius = 16; // 16 is just a guess
cell.imageView.clipsToBounds = YES;

这会使UIImageView四舍五入，因此它不会覆盖单元格。它也会围绕你所有图像的所有角落，但这可能没问题。

否则，您必须添加自己的图像视图，该视图将围绕一个角落。您可以通过在drawRect中设置剪辑区域来执行此操作：在调用super之前。或者只是添加自己的图像视图，它不是靠近左边缘。

Answer 2

您可以在UIImage上添加类别并包含以下方法：

// Return the image, but with rounded corners. Useful for masking an image
// being used in a UITableView which has grouped style
- (UIImage *)imageWithRoundedCorners:(UIRectCorner)corners radius:(CGFloat)radius {

    // We need to create a CGPath to set a clipping context
    CGRect aRect = CGRectMake(0.f, 0.f, self.size.width, self.size.height);
    CGPathRef clippingPath = [UIBezierPath bezierPathWithRoundedRect:aRect byRoundingCorners:corners cornerRadii:CGSizeMake(radius, radius)].CGPath;

    // Begin drawing
    // Start a context with a scale of 0.0 uses the current device scale so that this doesn't unnecessarily drop resolution on a retina display.
    // Use `UIGraphicsBeginImageContextWithOptions(aRect.size)` instead for pre-iOS 4 compatibility.
    UIGraphicsBeginImageContextWithOptions(aRect.size, NO, 0.0);
    CGContextRef context = UIGraphicsGetCurrentContext();
    CGContextAddPath(context, clippingPath);
    CGContextClip(context);
    [self drawInRect:aRect];
    UIImage *croppedImage = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();

    return croppedImage;
}

然后，在配置单元格时，在表格视图控制器中，调用类似于：

的内容

if ( *SINGLE_ROW* ) {
    // We need to clip to both corners
    cell.imageView.image = [image imageWithRoundedCorners:(UIRectCornerTopLeft | UIRectCornerBottomLeft) radius:radius];
} else if (indexPath.row == 0) {
    cell.imageView.image = [image imageWithRoundedCorners:UIRectCornerTopLeft radius:radius];   
} else if (indexPath.row == *NUMBER_OF_ITEMS* - 1) {
    cell.imageView.image = [image imageWithRoundedCorners:UIRectCornerBottomLeft radius:radius];
} else {
    cell.imageView.image = image;
}

但用真实逻辑替换SINGLE_ROW等来确定你是否在一个部分中有一行，或者它是最后一行。这里需要注意的一点是，我已经（实验性地）发现组样式表的半径是12，它在模拟器中完美运行，但在iPhone上却没有。我无法在非视网膜设备上进行测试。半径30在iPhone 4上看起来不错（所以我想知道这是否是图像比例的东西，因为我使用的图像来自AddressBook，因此没有隐含的比例因子）。因此，我在此之前有一些修改半径的代码......

CGFloat radius = GroupStyleTableCellCornerRadius;
if ([[UIScreen mainScreen] respondsToSelector:@selector(scale)] && [[UIScreen mainScreen] scale] == 2){
    // iPhone 4
    radius = GroupStyleTableCellCornerRadiusForRetina;
}

希望有所帮助。

UITableViewCell具有方形角和图像

2 个答案: