Ich habe die willDisplayCell weiter angepasst, um eine bessere Simulation der Zellstile in der Einstellungs-App zu erhalten.
Ziel c
- (void)tableView:(UITableView *)tableView willDisplayCell:(UITableViewCell *)cell forRowAtIndexPath:(NSIndexPath *)indexPath
{
if ([cell respondsToSelector:@selector(tintColor)]) {
if (tableView == self.tableView) {
CGFloat cornerRadius = 5.f;
cell.backgroundColor = UIColor.clearColor;
CAShapeLayer *layer = [[CAShapeLayer alloc] init];
CGMutablePathRef pathRef = CGPathCreateMutable();
CGRect bounds = CGRectInset(cell.bounds, 10, 0);
BOOL addLine = NO;
if (indexPath.row == 0 && indexPath.row == [tableView numberOfRowsInSection:indexPath.section]-1) {
CGPathAddRoundedRect(pathRef, nil, bounds, cornerRadius, cornerRadius);
} else if (indexPath.row == 0) {
CGPathMoveToPoint(pathRef, nil, CGRectGetMinX(bounds), CGRectGetMaxY(bounds));
CGPathAddArcToPoint(pathRef, nil, CGRectGetMinX(bounds), CGRectGetMinY(bounds), CGRectGetMidX(bounds), CGRectGetMinY(bounds), cornerRadius);
CGPathAddArcToPoint(pathRef, nil, CGRectGetMaxX(bounds), CGRectGetMinY(bounds), CGRectGetMaxX(bounds), CGRectGetMidY(bounds), cornerRadius);
CGPathAddLineToPoint(pathRef, nil, CGRectGetMaxX(bounds), CGRectGetMaxY(bounds));
addLine = YES;
} else if (indexPath.row == [tableView numberOfRowsInSection:indexPath.section]-1) {
CGPathMoveToPoint(pathRef, nil, CGRectGetMinX(bounds), CGRectGetMinY(bounds));
CGPathAddArcToPoint(pathRef, nil, CGRectGetMinX(bounds), CGRectGetMaxY(bounds), CGRectGetMidX(bounds), CGRectGetMaxY(bounds), cornerRadius);
CGPathAddArcToPoint(pathRef, nil, CGRectGetMaxX(bounds), CGRectGetMaxY(bounds), CGRectGetMaxX(bounds), CGRectGetMidY(bounds), cornerRadius);
CGPathAddLineToPoint(pathRef, nil, CGRectGetMaxX(bounds), CGRectGetMinY(bounds));
} else {
CGPathAddRect(pathRef, nil, bounds);
addLine = YES;
}
layer.path = pathRef;
CFRelease(pathRef);
layer.fillColor = [UIColor colorWithWhite:1.f alpha:0.8f].CGColor;
if (addLine == YES) {
CALayer *lineLayer = [[CALayer alloc] init];
CGFloat lineHeight = (1.f / [UIScreen mainScreen].scale);
lineLayer.frame = CGRectMake(CGRectGetMinX(bounds)+10, bounds.size.height-lineHeight, bounds.size.width-10, lineHeight);
lineLayer.backgroundColor = tableView.separatorColor.CGColor;
[layer addSublayer:lineLayer];
}
UIView *testView = [[UIView alloc] initWithFrame:bounds];
[testView.layer insertSublayer:layer atIndex:0];
testView.backgroundColor = UIColor.clearColor;
cell.backgroundView = testView;
}
}
}
Schnell
override func tableView(tableView: UITableView, willDisplayCell cell: UITableViewCell, forRowAtIndexPath indexPath: NSIndexPath) {
if (cell.respondsToSelector(Selector("tintColor"))){
if (tableView == self.tableView) {
let cornerRadius : CGFloat = 12.0
cell.backgroundColor = UIColor.clearColor()
var layer: CAShapeLayer = CAShapeLayer()
var pathRef:CGMutablePathRef = CGPathCreateMutable()
var bounds: CGRect = CGRectInset(cell.bounds, 25, 0)
var addLine: Bool = false
if (indexPath.row == 0 && indexPath.row == tableView.numberOfRowsInSection(indexPath.section)-1) {
CGPathAddRoundedRect(pathRef, nil, bounds, cornerRadius, cornerRadius)
} else if (indexPath.row == 0) {
CGPathMoveToPoint(pathRef, nil, CGRectGetMinX(bounds), CGRectGetMaxY(bounds))
CGPathAddArcToPoint(pathRef, nil, CGRectGetMinX(bounds), CGRectGetMinY(bounds), CGRectGetMidX(bounds), CGRectGetMinY(bounds), cornerRadius)
CGPathAddArcToPoint(pathRef, nil, CGRectGetMaxX(bounds), CGRectGetMinY(bounds), CGRectGetMaxX(bounds), CGRectGetMidY(bounds), cornerRadius)
CGPathAddLineToPoint(pathRef, nil, CGRectGetMaxX(bounds), CGRectGetMaxY(bounds))
addLine = true
} else if (indexPath.row == tableView.numberOfRowsInSection(indexPath.section)-1) {
CGPathMoveToPoint(pathRef, nil, CGRectGetMinX(bounds), CGRectGetMinY(bounds))
CGPathAddArcToPoint(pathRef, nil, CGRectGetMinX(bounds), CGRectGetMaxY(bounds), CGRectGetMidX(bounds), CGRectGetMaxY(bounds), cornerRadius)
CGPathAddArcToPoint(pathRef, nil, CGRectGetMaxX(bounds), CGRectGetMaxY(bounds), CGRectGetMaxX(bounds), CGRectGetMidY(bounds), cornerRadius)
CGPathAddLineToPoint(pathRef, nil, CGRectGetMaxX(bounds), CGRectGetMinY(bounds))
} else {
CGPathAddRect(pathRef, nil, bounds)
addLine = true
}
layer.path = pathRef
layer.fillColor = UIColor(red: 255/255.0, green: 255/255.0, blue: 255/255.0, alpha: 0.8).CGColor
if (addLine == true) {
var lineLayer: CALayer = CALayer()
var lineHeight: CGFloat = (1.0 / UIScreen.mainScreen().scale)
lineLayer.frame = CGRectMake(CGRectGetMinX(bounds)+10, bounds.size.height-lineHeight, bounds.size.width-10, lineHeight)
lineLayer.backgroundColor = tableView.separatorColor.CGColor
layer.addSublayer(lineLayer)
}
var testView: UIView = UIView(frame: bounds)
testView.layer.insertSublayer(layer, atIndex: 0)
testView.backgroundColor = UIColor.clearColor()
cell.backgroundView = testView
}
}
}
Swift 3
func tableView(_ tableView: UITableView, willDisplay cell: UITableViewCell, forRowAt indexPath: IndexPath) {
let cornerRadius: CGFloat = 5
cell.backgroundColor = .clear
let layer = CAShapeLayer()
let pathRef = CGMutablePath()
let bounds = cell.bounds.insetBy(dx: 20, dy: 0)
var addLine = false
if indexPath.row == 0 && indexPath.row == tableView.numberOfRows(inSection: indexPath.section) - 1 {
pathRef.__addRoundedRect(transform: nil, rect: bounds, cornerWidth: cornerRadius, cornerHeight: cornerRadius)
} else if indexPath.row == 0 {
pathRef.move(to: .init(x: bounds.minX, y: bounds.maxY))
pathRef.addArc(tangent1End: .init(x: bounds.minX, y: bounds.minY), tangent2End: .init(x: bounds.midX, y: bounds.minY), radius: cornerRadius)
pathRef.addArc(tangent1End: .init(x: bounds.maxX, y: bounds.minY), tangent2End: .init(x: bounds.maxX, y: bounds.midY), radius: cornerRadius)
pathRef.addLine(to: .init(x: bounds.maxX, y: bounds.maxY))
addLine = true
} else if indexPath.row == tableView.numberOfRows(inSection: indexPath.section) - 1 {
pathRef.move(to: .init(x: bounds.minX, y: bounds.minY))
pathRef.addArc(tangent1End: .init(x: bounds.minX, y: bounds.maxY), tangent2End: .init(x: bounds.midX, y: bounds.maxY), radius: cornerRadius)
pathRef.addArc(tangent1End: .init(x: bounds.maxX, y: bounds.maxY), tangent2End: .init(x: bounds.maxX, y: bounds.midY), radius: cornerRadius)
pathRef.addLine(to: .init(x: bounds.maxX, y: bounds.minY))
} else {
pathRef.addRect(bounds)
addLine = true
}
layer.path = pathRef
layer.fillColor = UIColor(white: 1, alpha: 0.8).cgColor
if (addLine == true) {
let lineLayer = CALayer()
let lineHeight = 1.0 / UIScreen.main.scale
lineLayer.frame = CGRect(x: bounds.minX + 10, y: bounds.size.height - lineHeight, width: bounds.size.width - 10, height: lineHeight)
lineLayer.backgroundColor = tableView.separatorColor?.cgColor
layer.addSublayer(lineLayer)
}
let testView = UIView(frame: bounds)
testView.layer.insertSublayer(layer, at: 0)
testView.backgroundColor = .clear
cell.backgroundView = testView
}
Swift 4.2
override func tableView(_ tableView: UITableView, willDisplay cell: UITableViewCell, forRowAt indexPath: IndexPath) {
if (cell.responds(to: #selector(getter: UIView.tintColor))){
if tableView == self.tableView {
let cornerRadius: CGFloat = 12.0
cell.backgroundColor = .clear
let layer: CAShapeLayer = CAShapeLayer()
let path: CGMutablePath = CGMutablePath()
let bounds: CGRect = cell.bounds
bounds.insetBy(dx: 25.0, dy: 0.0)
var addLine: Bool = false
if indexPath.row == 0 && indexPath.row == ( tableView.numberOfRows(inSection: indexPath.section) - 1) {
path.addRoundedRect(in: bounds, cornerWidth: cornerRadius, cornerHeight: cornerRadius)
} else if indexPath.row == 0 {
path.move(to: CGPoint(x: bounds.minX, y: bounds.maxY))
path.addArc(tangent1End: CGPoint(x: bounds.minX, y: bounds.minY), tangent2End: CGPoint(x: bounds.midX, y: bounds.minY), radius: cornerRadius)
path.addArc(tangent1End: CGPoint(x: bounds.maxX, y: bounds.minY), tangent2End: CGPoint(x: bounds.maxX, y: bounds.midY), radius: cornerRadius)
path.addLine(to: CGPoint(x: bounds.maxX, y: bounds.maxY))
} else if indexPath.row == (tableView.numberOfRows(inSection: indexPath.section) - 1) {
path.move(to: CGPoint(x: bounds.minX, y: bounds.minY))
path.addArc(tangent1End: CGPoint(x: bounds.minX, y: bounds.maxY), tangent2End: CGPoint(x: bounds.midX, y: bounds.maxY), radius: cornerRadius)
path.addArc(tangent1End: CGPoint(x: bounds.maxX, y: bounds.maxY), tangent2End: CGPoint(x: bounds.maxX, y: bounds.midY), radius: cornerRadius)
path.addLine(to: CGPoint(x: bounds.maxX, y: bounds.minY))
} else {
path.addRect(bounds)
addLine = true
}
layer.path = path
layer.fillColor = UIColor.white.withAlphaComponent(0.8).cgColor
if addLine {
let lineLayer: CALayer = CALayer()
let lineHeight: CGFloat = 1.0 / UIScreen.main.scale
lineLayer.frame = CGRect(x: bounds.minX + 10.0, y: bounds.size.height - lineHeight, width: bounds.size.width, height: lineHeight)
lineLayer.backgroundColor = tableView.separatorColor?.cgColor
layer.addSublayer(lineLayer)
}
let testView: UIView = UIView(frame: bounds)
testView.layer.insertSublayer(layer, at: 0)
testView.backgroundColor = .clear
cell.backgroundView = testView
}
}
}
[UIBezierPath bezierPathWithRoundedRect:bounds byRoundingCorners:corner cornerRadii:cornerSize];
In iOS 13 und höher wird dieser Tabellenstil mit der neuen UITableView.Style.insetGrouped endlich von Apple zur Verfügung gestellt, ohne ihn neu entwickeln zu müssen Tabellenansichtsstil entwickeln zu müssen.
In Xcode 11 und höher kann dies in den Einstellungen des Schnittstellen-Generators für die Tabellenansicht festgelegt werden, indem für den Stil Inset Grouped ausgewählt wird:
quelle
Beantwortung von @NarasimhaiahKolli, wie ich die Hintergrundansicht der Zelle so einstelle, dass die gesamte Zelle nicht so aussieht, als wäre sie hervorgehoben. Hoffe das hilft.
quelle
Die Antwort von @jvanmetre ist großartig und es funktioniert. Darauf aufbauen und wie von @SergiySalyuk in den Kommentaren vorgeschlagen. Ich habe den Code aktualisiert, um UIBezierPath zu verwenden, damit er einfacher zu verstehen und etwas schneller ist.
Meine Version behebt auch den Trennfehler und fügt eine ausgewählte Hintergrundansicht hinzu, die zur Zelle passt.
Denken Sie daran, Ihre Tabellenansicht auf kein Trennzeichen zu setzen:
tableView.separatorStyle = UITableViewCellSeparatorStyleNone;
Ziel c
quelle
Ich habe versucht, das gleiche abgerundete Aussehen der App für Einstellungen auf den Tabellenansichtszellen zu erzielen. Meine Antwort basiert auch auf einer SO-Antwort zum Festlegen von CornerRadius nur für die obere linke und obere rechte Ecke eines UIView. .
quelle
Nachdem ich einige der Antworten hier ausprobiert hatte, entschied ich mich, eine ganze Unterklasse darüber zu implementieren
UITableView
undUITableViewCell
den abgerundeten gruppierten Tabellenansichtsstil in iOS 7 zu replizieren.https://github.com/TimOliver/TORoundedTableView
Es war ein sehr komplizierter Prozess:
layoutSubviews
inUITableView
jeder Zelle und Zubehör Blick auf Neu - Layout , so dass sie nicht länger waren von Rand zu Rand.UITableViewCell
erstellen, um die Ansichten des oberen und unteren Trennhaars zu entfernen (aber die innerhalb des Abschnitts unberührt zu lassen).UITableViewCell
Hintergrundansicht erstellt, die optional abgerundete Ecken oben und unten haben kann, um für die erste und letzte Zelle in jedem Abschnitt verwendet zu werden. Diese Elemente mussten seinCALayer
, umUITableView
das implizite Verhalten zu vermeiden , die Farbe der Hintergrundansichten zu ändern, wenn ein Benutzer auf die Zelle tippt.CALayer
Instanzen handelt, auf die nicht reagiert wirdlayoutSubviews
, musste ich einige Core-Animationen basteln, um sicherzustellen, dass die Größe der oberen und unteren Zellen mit der gleichen Geschwindigkeit wie bei den anderen Zellen geändert wird, wenn der Benutzer das Gerät dreht.Alles in allem ist dies möglich, aber da es einiges an Aufwand erfordert und ein wenig Leistung kostet (da es ständig gegen Apples Code kämpft, der versucht, alles zurückzusetzen), ist es möglicherweise am besten, ein Radar bei Apple einzureichen, um dies anzufordern diesen Stil offiziell enthüllen. Bis dahin können Sie meine Bibliothek nutzen. :) :)
quelle
Ich habe eine Methode namens erstellt
addRoundedCornersWithRadius:(CGFloat)radius ForCell:(UITableViewCell *)cell atIndexPath:(NSIndexPath *)indexPath
die abgerundete Ecken am oberen und unteren Rand jedes Abschnitts erstellt.Der Vorteil der Verwendung der
maskView
Eigenschaft vonUITableViewCell
besteht darin, dass bei Auswahl der Zelle die abgerundeten Ecken weiterhin sichtbar sind.quelle
Meine Antwort mag zu spät sein, aber für die Swift-Version (jede) wird sie sicherlich nützlich und sehr einfach zu verwenden sein.
PS: Ich habe folgenden Code für Swift 3.0 verwendet.
quelle
Arbeitscode für Swift ... was wir tatsächlich tun, ist, wenn der Abschnitt nur eine Zeile hat, dann tun wir es auf allen Seiten, wenn der Abschnitt mehrere Zeilen hat, dann tun wir es oben in der ersten Zeile und unten in der letzten Zeile ... die Eigenschaften BottomLeft, BottomRight, topLeft, TopRight sollten vom Typ Rect Corner sein (Vorschläge von xcode, wenn Sie tippen ... es gibt eine andere Eigenschaftsinhaltsecke mit demselben Namen ... überprüfen Sie dies)
quelle
Ich fürchte, es scheint keinen einfachen Weg zu geben, dies zu tun. Sie müssen Ihre UITableViewCell anpassen, so etwas funktioniert:
Stellen Sie den Stil Ihrer tableView auf gruppiert ein.
Stellen Sie Ihre TableView-Hintergrundfarbe auf klare Farbe ein.
(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)
Machen Sie auf Ihrem - den Zellenhintergrund klar und erstellen Sie eine UIView mit den gewünschten abgerundeten Ecken als Hintergrund. Etwas wie das:Möglicherweise müssen Sie weiter polieren, aber dies ist die Hauptidee.
quelle
Ich wollte das gleiche erreichen, aber mit einem Rand um jeden Abschnitt (Zeile in iOS6). Da ich keine einfache Modifikation der vorgeschlagenen Lösungen gefunden habe, habe ich mir eine eigene ausgedacht. Es ist eine Modifikation der Antwort, die @Roberto Ferraz in diesem Thema gegeben hat. Ich habe eine benutzerdefinierte Klasse erstellt, die von UITableViewCell erbt. Darin habe ich eine Containeransicht mit der entsprechenden Größe hinzugefügt (in meinem Fall auf beiden Seiten mit 15px verkleinert). Als in der Klasse habe ich das gemacht:
Dann machen Sie in Ihrer Datenquelle Folgendes:
Und voila - du hast abgerundete Ecken UND Ränder an deinen Abschnitten.
Hoffe das hilft!
PS Einige Änderungen vorgenommen, da ich einige Fehler im Originalcode gefunden habe - hauptsächlich habe ich nicht in allen Fällen alle Werte festgelegt, was bei der Wiederverwendung von Zellen zu erstaunlichen Effekten führt :)
quelle
swift 4 Wenn Sie auch die Abschnittsüberschrift einfügen möchten, versuchen Sie es unter einer
deklarieren Sie CornerLayerWidth als globale Variable
var CornerLayerWidth: CGFloat = 0.0
und
quelle
In Swift 4.2:
Benutzen:
Wenn die Zelle die erste einer Gruppe ist, setzen Sie
top = True
, wenn es die letzte Zelle istbottom = true
, wenn die Zelle die einzige in der Gruppe ist, setzen Sie beide auftrue
.Wenn Sie mehr oder weniger gerundet sein möchten, ändern Sie einfach die Funkgeräte von 10 auf einen anderen Wert.
quelle
Dieser Code setzt abgerundete Ecken für die gesamte Tabellenansicht anstelle einer einzelnen Zelle.
Und löschen Sie die Hintergrundfarbe jeder Zelle in cellForRow
quelle
Fügen Sie dies hinzu, um die oberste Zeile in der Tabellenansicht zu entfernen. Self.tableView.separatorStyle = UITableViewCellSeparatorStyleNone;
quelle