UITableView 上的圆角

Posted 2023-02-27

【中文标题】UITableView 上的圆角

【英文标题】：Round corners on UITableView

【发布时间】：2009-07-09 22:54:27

【问题描述】：

在 Stocks 和 Spotlight 中看到的在整个 UITableView 上获得圆角的最佳方法是什么？分组样式不能解决问题，因为圆角会随着单元格滚动。我正在尝试剪辑视图，因此无论滚动位置如何，角始终是圆形的。

我看到另一个关于对 UIImage 执行此操作的讨论，该讨论建议用另一个图像对其进行屏蔽。我不确定这是否可行，因为我需要水龙头才能通过桌子。这对我来说并不理想，因为我希望背景图案通过角落显示出来。

【问题讨论】：

另一种方法是使用 Core Graphics 屏蔽 UITableView。可以在此处找到屏蔽 UIView 的示例：iphonedevelopment.blogspot.com/2008/11/…

这很有帮助，但是当单元格滚动经过 UITableView 本身的剪切区域时，它不会剪切单元格。

我不敢相信这个七年前的问题仍然受到关注。我很久以前就放弃了这个功能，很抱歉我自己无法测试和接受任何答案。我看到很多复选标记，谢谢大家！我很高兴看到这很有帮助。

【参考方案1】：

这是一个老问题，但也许你仍然想知道如何做到这一点。

我在 Stocks/Spotlight 中复制了一个 tableView。诀窍是

view.layer.cornerRadius = 10; 

为此，您需要将 QuartzCore 包含到您调用该属性的类中：

#import <QuartzCore/QuartzCore.h>

我听说这仅适用于 OS 3.0。但由于我的应用程序使用的是核心数据，所以这不是问题，因为它已经适用于 OS 3.0 和高版本。

我用cornerRadius 10和

创建了一个自定义UIView

view.backgroundColor = [UIColor clearColor];

然后您必须在该子视图中放置一个 UITableView 分组样式。您需要将 backgroundColor 设置为 clearColor，将 separatorColor 设置为 clearColor。然后您必须将 tableview 定位在圆角视图内，这是通过设置框架大小和原点来完成的。我的自定义 UIView 的 loadView 类如下所示：

self.view = [[UIView alloc] init];
self.view.backgroundColor = [UIColor clearColor];

CustomUIViewClass *scherm = [[CustomUIViewClass alloc] init];

CGRect frame;
frame.origin.x = 10;
frame.origin.y = 50;
frame.size.width = 300;
frame.size.height = 380;

scherm.frame = frame;
scherm.clipsToBounds = YES;
scherm.layer.cornerRadius = 10;

[self.view addSubview:scherm];

CustomUITableViewClass *table = [[CustomUITableViewClass alloc] initWithStyle:UITableViewStyleGrouped];

frame.origin.y = -10;
frame.origin.x = -10;
frame.size.width = 320;
frame.size.height = 400;

table.tableView.frame = frame;
[scherm addSubview:table.tableView];

我希望你能理解我的英语，也许我会写一篇关于这种技术的简短博客文章，并附上一个示例项目，当我准备好时会在此处发布链接。

【讨论】：

这是我在 2010 年 9 月测试的各种解决方案中唯一一个在 ios 4 和 iOS 3.2 上运行良好且性能出色的解决方案。将其集成到我的应用程序中。谢谢你，汉斯！

【参考方案2】：

更简单的方法是将 QuartzCore 框架导入您的项目。 #import <QuartzCore/QuartzCore.h> 到您的 tableViewController 并设置

myTableView.layer.cornerRadius=5;

这将为您提供圆角，而无需将您的 tableview 添加到 superView 或剪切它。

【参考方案3】：

这里有一个易于模仿的分组样式，而不是破解代码。如果你想要的只是一个部分，这很有效。

在界面生成器中：

将 UITableView 样式设置为 Plain 并在框架的左侧和右侧添加一些填充，可能 x = 10 和宽度 = 300。

然后自己设置圆角半径和颜色：

 #import <QuartzCore/QuartzCore.h>

 self.tableView.layer.borderColor = [UIColor colorWithWhite:0.6 alpha:1].CGColor;   
 self.tableView.layer.borderWidth = 1;
 self.tableView.layer.cornerRadius = 4;

【讨论】：

干净！简单的！看起来很棒。我喜欢！

【参考方案4】：

你试过“分组”的表格视图样式吗？

self.tableView.style = UITableViewStyleGrouped;

如需进一步参考，请参阅Table View Programming Guide。 “关于表格视图”一章有一些很好的屏幕截图，描述了不同的样式。

【讨论】：

当你向上滚动表格时，它会用圆角掩盖它，我认为这就是他所指的。虽然我想这将是一个好的开始，并使背景透明。

是的，听起来你在这个方向上是正确的。

@Garrett：哦.. 刚启动我的股票应用程序，看看你的意思。直到现在才真正注意到这种效果.. ;-) 抱歉打扰了，我以为他指的是简单的分组表视图。

我稍微澄清了这个问题，因为角落需要留在那里，但非常感谢您的快速回答。

【参考方案5】：

嗯，有很多方法可以解决这个问题。

但是，就我而言，一切都无法正常工作。我的桌子有时比桌子小。

我会分享我的做法。我相信比上面的一些选项更容易和更快。

使第一个和最后一个项目四舍五入。

为顶部（左|右）和底部（左|右）创建CAShapeLayer。

shapeTop = [CAShapeLayer layer];
shapeTop.path = [UIBezierPath 
bezierPathWithRoundedRect:CGRectMake( 0.0f, 0.0f, 306.0f, 58.0f )
byRoundingCorners:UIRectCornerTopLeft | UIRectCornerTopRight
cornerRadii:CGSizeMake( 6.0f, 6.0f )].CGPath;

shapeBottom = [CAShapeLayer layer];
shapeBottom.path = [UIBezierPath 
bezierPathWithRoundedRect:CGRectMake( 0.0f, 0.0f, 306.0f, 58.0f )
byRoundingCorners:UIRectCornerBottomLeft | UIRectCornerBottomRight
cornerRadii:CGSizeMake( 6.0f, 6.0f )].CGPath;

表格需要背景为clearColor；

单元格必须是彩色背景；

设置它的layer.mask

UIView* backgroundView = [[UIView alloc] initWithFrame:CGRectZero];
backgroundView.backgroundColor = [UIColor whiteColor];
cell.backgroundView = backgroundView;

别忘了#import <QuartzCore/QuartzCore.h>

【参考方案6】：

我最近遇到了这个问题，并以不同的方式解决了它。我想我会与大家分享结果。

我创建了一个具有清晰、圆角内部的矩形 UIView，然后将它放在 UITableView 的顶部。您可以在my programming blog 找到完整的描述。

它完全按照我想要的方式工作。

【参考方案7】：

以下 Swift 版本代码：

 let redColor = UIColor.redColor()
 self.tableView.layer.borderColor = redColor.colorWithAlphaComponent(0.9).CGColor
 self.tableView.layer.borderWidth = 1;
 self.tableView.layer.cornerRadius = 4;

确保您在导入部分中有import QuartzCore。

【参考方案8】：

这里是快速扩展：

extension UITableView 
     public var cornerRadius: CGFloat 
        get 
            return layer.cornerRadius
        
        set 
            layer.cornerRadius = newValue
            layer.masksToBounds = true
        
    

这样使用

  tableView.cornerRadius = 7.5

【参考方案9】：

UITableViewStyleInsetGrouped

一个表格视图，其中分组的部分带有圆角。

示例代码： self.tableView = [[UITableView alloc] initWithFrame:CGRectZero style:UITableViewStyleInsetGrouped];

看起来像： Settings looking table view sections