[英]Custom rounded corners for first and last cell in a grouped UITableView
My iPhone app is currently displaying a grouped table with 2 sections.我的 iPhone 应用程序当前正在显示一个包含 2 个部分的分组表。 I tried to change the radius of the rounded corners on the first and last cells of each section (or on the same cell in the case of sections with just one row) using:
我尝试使用以下方法更改每个部分的第一个和最后一个单元格(或者在只有一行的部分的情况下在同一单元格上)的圆角半径:
cell.layer.cornerRadius = 4;
or acting on the whole tableview:或作用于整个表视图:
self.tableView.layer.cornerRadius = 4;
but no luck...Of course I've imported QuartzCore before performing this operation.但是没有运气......当然我在执行这个操作之前已经导入了 QuartzCore 。 It looks like it's possible to customise the corners only when the table is displayed with plain style.
看起来只有当表格以普通样式显示时才能自定义角。
The ideal solution would be to customise top corners in the first one and bottom corners in the last.理想的解决方案是自定义第一个角的顶角和最后一个角的底角。
Any suggestions?有什么建议?
The simplest way is: 最简单的方法是:
Make a custom cells in a xib file, set their unique identifiers like: @"beginCell", @"middleCell", @"endCell"
. 在xib文件中创建自定义单元格,设置其唯一标识符,例如:
@"beginCell", @"middleCell", @"endCell"
。 You can make it according to this tutorial: http://www.bdunagan.com/2009/06/28/custom-uitableviewcell-from-a-xib-in-interface-builder/ 您可以根据本教程进行操作: http : //www.bdunagan.com/2009/06/28/custom-uitableviewcell-from-a-xib-in-interface-builder/
In method - (UITableViewCell *)tableView:(UITableView *)aTableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
you have to find ejther you are in the middle or on begin/end of the section and use the cell with proper identifier. 在方法
- (UITableViewCell *)tableView:(UITableView *)aTableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
您必须找到位于本节中间或开头/结尾的其他内容,并使用具有正确标识符的单元格。
What you can do is add a UIView
on the background of a cell, make the cell background as clearcolor . 您可以做的是在单元格的背景上添加
UIView
,使单元格背景为clearcolor。 Adjust the UIView
to have rounded corners. 调整
UIView
使其具有圆角。
Here's what works in Swift 4.2: 这是在Swift 4.2中可以使用的功能:
func tableView(_ tableView: UITableView, willDisplay cell: UITableViewCell, forRowAt indexPath: IndexPath)
{
let cornerRadius = 5
var corners: UIRectCorner = []
if indexPath.row == 0
{
corners.update(with: .topLeft)
corners.update(with: .topRight)
}
if indexPath.row == tableView.numberOfRows(inSection: indexPath.section) - 1
{
corners.update(with: .bottomLeft)
corners.update(with: .bottomRight)
}
let maskLayer = CAShapeLayer()
maskLayer.path = UIBezierPath(roundedRect: cell.bounds,
byRoundingCorners: corners,
cornerRadii: CGSize(width: cornerRadius, height: cornerRadius)).cgPath
cell.layer.mask = maskLayer
}
UIView *view = [UIView alloc]initWithFrame:YourFrame];
view.layer.cornerRadius = 8;
cell.backgroundView = view;
And don't forget the UITableView
background color to be transparent. 并且不要忘记
UITableView
背景色是透明的。
If You need just rounded corners there's another solution (inspired by grouped style of native uitableview(cell), in slowmo :) ). 如果您只需要圆角,还有另一种解决方案(灵感来自于本机uitableview(cell)的分组样式,在slowmo :)中)。 It should be something like this:
应该是这样的:
Cell subclass... 单元子类...
@interface MyCell : UITableViewCell
@property (nonatomic) top;
@property (nonatomic) bottom;
@end
@implementation MyCell
-(id)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier{
self = [super initWithStyle:style reuseIdentifier:reuseIdentifier];
if (self) {
self.backgroundColor = [UIColor clearColor]; // remove white default background
//example settings, UIImageViews with resizable images can be used too
self.backgroundView = [[UIView alloc] init];
self.selectedBackgroundView = [[UIView alloc] init];
self.backgroundView.backgroundColor = [UIColor greenColor];
self.selectedBackgroundView.backgroundColor = [UIColor blueColor];
self.backgroundView.layer.cornerRadius = self.selectedBackgroundView.layer.cornerRadius = 5; //
}
return self;
}
-(void)layoutSubviews{
[super layoutSubviews];
self.backgroundView.frame = self.selectedBackgroundView.frame = UIEdgeInsetsInsetRect(self.bounds, UIEdgeInsetsMake(self.top?0:-self.backgroundView.layer.cornerRadius, 0, self.bottom?0:-self.backgroundView.layer.cornerRadius, 0));
}
-(void)setTop:(BOOL)top{
_top = top;
[self setNeedsLayout];
}
-(void)setBottom:(BOOL)bottom{
_bottom = bottom;
[self setNeedsLayout];
}
@end
In dataSource you can just do this:... 在dataSource中,您可以执行以下操作:...
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
...cell initialization stuff...
[(MyCell *)cell setTop:(indexPath.row == 0)];
[(MyCell *)cell setBottom:(indexPath.row == [tableView numberOfRowsInSection:indexPath.section]-1)];
return cell;
}
Pros: 优点:
Cons: 缺点:
I hope this helps someone, but be aware that this code is not tested! 希望对您有所帮助,但请注意,此代码未经测试! I've implemented this idea few minutes before posting this answer and it just seems to work :)
在发布此答案的几分钟前,我已经实现了这个想法,它似乎很有效:)
I subclass my tableview cells:我将我的 tableview 单元格子类化:
class CGStandardCell: UITableViewCell {
override func awakeFromNib() {
super.awakeFromNib()
}
func setCornerRadius(forIndexPath indexPath: IndexPath, inTableView tableView: UITableView) {
let lastRow = tableView.numberOfRows(inSection: indexPath.section) - 1
if indexPath.row == 0 && indexPath.row == lastRow {
self.cornerRadius = 20
self.layer.maskedCorners = [.layerMaxXMinYCorner,
.layerMinXMinYCorner,
.layerMinXMaxYCorner,
.layerMaxXMaxYCorner]
} else if indexPath.row == 0 {
self.cornerRadius = 20
self.layer.maskedCorners = [.layerMaxXMinYCorner,
.layerMinXMinYCorner]
} else if indexPath.row == lastRow {
self.cornerRadius = 20
self.layer.maskedCorners = [.layerMinXMaxYCorner,
.layerMaxXMaxYCorner]
}
}
}
And then call it in tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath)然后在 tableView(_tableView: UITableView, cellForRowAt indexPath: IndexPath) 中调用
cell.setCornerRadius(forIndexPath: indexPath, inTableView: tableView)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.