Universelle Lösung für UITableViewRowAction und UIContextualAction

Viele sind auf das Problem gestoßen, eine schöne Schaltflächenzuordnung für eine UITableViewCell zu implementieren, wenn diese nach links verschoben wird. Einige verwendeten die Standardfunktionalität "out of the box", andere kümmerten sich um ihre eigene Implementierung, während andere mit Unicode-Zeichen verwaltet wurden. In diesem Artikel werde ich Ihnen erklären, wie Sie die maximale Anpassung von UITableViewRowAction erreichen.

Zunächst eine kleine Theorie: UITableViewRowAction ist eine Klasse, mit der der Benutzer bestimmte Aktionen mit dieser Zelle ausführen kann, wenn er eine Zelle nach links verschiebt (z. B. Löschen, Ändern usw.). Jede Instanz dieser Klasse stellt eine auszuführende Aktion dar und enthält Text, Stil und einen Klick-Handler. Mit dem iOS SDK können wir die UITableViewRowAction wie folgt anpassen:

public convenience init(style: UITableViewRowActionStyle, title: String?, handler: @escaping (UITableViewRowAction, IndexPath) -> Swift.Void) 

Sie können auch backgroundColor festlegen.

Bestehende Methoden.

Betrachten Sie die vorhandenen Implementierungsbeispiele oder das, was ich im Internet gefunden habe.
Methodennummer 1 . Nutzen Sie die Funktionalität "out of the box". Dies reicht aus, um normale Schaltflächen mit Text und Hintergrund zu verwenden. Es sieht zu einfach und langweilig aus:


Methode Nummer 2 . Legen Sie backgroundColor mit UIColor fest (patternImage: UIImage) . Dies wird Schönheit erreichen, aber es wird die Vielseitigkeit beeinträchtigen, eine Reihe von Einschränkungen und Schwierigkeiten hinzufügen. Da die Breite der UITableViewRowAction anhand der Größe des Texts berechnet wird, müssen Sie den Titel als eine Reihe von Leerzeichen mit einer bestimmten Breite angeben. Wir können diese Methode nicht für Zellen mit dynamischen Höhen verwenden. Wenn die Zelle an Höhe zunimmt, sieht sie ungefähr so ​​aus:



Methode Nummer 3 . Verwenden Sie Unicode-Zeichen. Es ist nicht erforderlich, die Größe des Texts mit Leerzeichen zu berechnen, und diese Methode eignet sich für Zellen mit dynamischer Höhe. Es sieht gut aus:



Wenn wir jedoch den Text unter dem Symbol erstellen möchten, passt diese Methode nicht zu uns.

Methodennummer 4 . Verwenden Sie CoreGraphics, um UI-Komponenten zu rendern. Die Idee ist, ein Bild mit der gewünschten Anordnung von Elementen (Text und Bild) manuell zu zeichnen. In diesem Fall müssen Sie die Größen und Koordinaten für die Position jedes Elements berechnen. Mit dieser Methode können wir sowohl Text als auch ein Bild erstellen und sie nach Bedarf anordnen. Diese Methode ist jedoch schwer zu implementieren. Wir wollen etwas Einfacheres.

Andere Implementierungen . Es gibt noch einige fertige Lösungen. Sie verwenden ihre eigene Implementierung der Zelle mit ScrollView und anderer Logik. Zum Beispiel SwipeCellKit oder MGSwipeTableCell . Diese Lösungen ermöglichen jedoch nicht das Erreichen eines Standard-iOS-Verhaltens, da sie im Gegensatz zur UITableViewRowAction, die im Tabellendelegierten erstellt wird, nur eine Zelle abdecken. Wenn Sie beispielsweise mit einer dieser Lösungen Aktionen für die Linksverschiebung für mehrere Zellen öffnen, müssen Sie diese Aktionen in jeder dieser Zellen manuell schließen, was äußerst unpraktisch ist. Dazu müssen Sie Ihre eigene Logik hinzufügen, um offene Aktionen beim Wischen zu steuern. Wir möchten eine einfache Lösung erstellen, die keine zusätzlichen Kosten erfordert, als ob wir die Standardimplementierung von UITableViewRowAction verwenden.

Fangen wir an

Versuchen wir, eine universelle Lösung zu erstellen, mit der Sie UITableViewRowAction mit jedem von uns benötigten Design erstellen können.

Erstellen Sie unsere Nachkommenklasse aus UITableViewRowAction und definieren Sie die Methode zur Erstellung der Hauptinstanz:

 typealias RowActionTapHandler = (RowAction, IndexPath) -> Void class RowAction: UITableViewRowAction { static func rowAction(with actionHandler: @escaping RowActionTapHandler) -> Self { let rowAction = self.init(style: .default, title: nil) { action, indexPath in guard let action = action as? RowAction else { return } actionHandler(action, indexPath) } return rowAction } } 

Da UITableViewRowAction keinen primären Initialisierer hat, können wir der Einfachheit halber eine statische Methode erstellen, in der wir auf standardmäßige Weise eine UITableViewRowAction erstellen und einen actionHandler hineinwerfen, um den Klick zu verarbeiten.

Versuchen wir nun, die Schaltfläche UITableViewRowAction universell anzupassen. Die Idee ist, das Aussehen der Schaltfläche aus dem fertigen UIView zu erhalten (das in einer regulären xib konfiguriert werden kann). So können wir eine beliebige Schaltfläche erstellen, die auf individuellen Vorlieben basiert (beliebige Schriftart des Textes, Größe und Anordnung der Elemente usw.).

Wir haben zwei Dinge, die wir in UITableViewRowAction ändern können: backgroundColor und title . Derzeit besteht die einzige Möglichkeit, das Aussehen der Schaltfläche UITableViewRowAction zu ändern, darin, die Eigenschaft backgroundColor zu ändern. Daher ist es unser Ziel, Folgendes zu transformieren: UIView -> UIImage -> UIColor. Wir können die Farbe mit dem Bild wie folgt erhalten: UIColor (patternImage: UIImage) . Und wir können das Bild von UIView erhalten, indem wir es mit dem Standard-CoreGraphics-Framework rendern.

Zunächst entscheiden wir jedoch, wie die Größe der Schaltfläche festgelegt werden soll: "Out of the Box" gibt es diese Funktion nicht, und die Größe in der UITableViewRowAction wird anhand der Größe des Textes des Titelfelds berechnet.

Nachdem ich Experimente durchgeführt hatte (Messung der berechneten und tatsächlichen Breite der Schaltfläche), fand ich ein leeres Unicode-Zeichen mit der kleinsten Breite ungleich Null: U + 200A

Wir werden es verwenden und eine Konstante erstellen:

 private enum Constants { static let placeholderSymbol = "\u{200A}" } 

Wir werden eine Funktion schreiben, um eine Folge von Leerzeichen zu erhalten, die der Größe entsprechen, die wir benötigen:

 private static let placeholderSymbolWidth: CGFloat = { let flt_max = CGFloat.greatestFiniteMagnitude let maxSize = CGSize(width: flt_max, height: flt_max) let attributes = [NSFontAttributeName : UIFont.systemFont(ofSize: UIFont.systemFontSize)] let boundingRect = Constants.placeholderSymbol.boundingRect(with: maxSize, options: .usesLineFragmentOrigin, attributes: attributes, context: nil) return boundingRect.width }() private func emptyTitle(for size: CGSize) -> String { var usefulWidth = size.width - Constants.minimalActionWidth usefulWidth = usefulWidth < 0 ? 0 : usefulWidth let countOfSymbols = Int(floor(usefulWidth * Constants.shiftFactor / RowAction.placeholderSymbolWidth)) return String(repeating: Constants.placeholderSymbol, count: countOfSymbols) } 

Die Variable placeholderSymbolWidth ermittelt die Breite unseres Unicode-Zeichens, und die Funktion emptyTitle (für Größe: CGSize) -> String berechnet die Anzahl der Leerzeichen entsprechend der Größengröße und gibt eine Zeichenfolge dieser Zeichen zurück. Die obige Formel verwendet die ShiftFactor- Konstante. Dies ist der Abweichungskoeffizient der Breite vom Nennwert. Tatsache ist, dass mit zunehmender Breite der UITableViewRowAction ein kleiner Fehler zunimmt (d. H. Die tatsächliche Breite der Schaltfläche unterscheidet sich von der berechneten Breite durch die übliche Formel). Um dies zu vermeiden, verwenden wir diese experimentell abgeleitete Konstante.

Außerdem hat UITableViewRowAction eine Mindestbreite von 30 (z. B. wenn Sie title = "" festlegen). Diese Breite ist das Minimum, das zum Einrücken links und rechts vom Titel erforderlich ist.
Aktualisieren Sie unsere Konstanten:

 private enum Constants { static let placeholderSymbol = "\u{200A}" static let minimalActionWidth: CGFloat = 30 static let shiftFactor: CGFloat = 1.1 } 

Lassen Sie uns nun das Bild aus der UIView holen. Wir werden die folgende Funktion schreiben:

 private func image(from view: UIView) -> UIImage? { UIGraphicsBeginImageContextWithOptions(view.bounds.size, view.isOpaque, UIScreen.main.scale) guard let context = UIGraphicsGetCurrentContext() else { assertionFailure("Something wrong with CoreGraphics image context"); return nil } context.setFillColor(UIColor.white.cgColor) context.fill(CGRect(origin: .zero, size: view.bounds.size)) view.layer.render(in: context) let img = UIGraphicsGetImageFromCurrentImageContext() UIGraphicsEndImageContext() return img } 

Diese Funktion wandelt unsere Ansicht in ein Bild um. In diesem Fall entspricht die Größe des Bildes der Größe der Ansicht .

Der letzte Schritt bleibt, in dem wir die Methode zum Festlegen von UITableViewRowAction mithilfe von UIView implementieren:

 func setupForCell(with view: UIView) { guard let img = image(from: view) else { return } self.title = emptyTitle(for: img.size) self.backgroundColor = UIColor(patternImage: img) } 

Hier verwenden wir die zuvor geschriebenen Funktionen, um unsere Schaltfläche zu konfigurieren und die Hintergrundfarbe anhand des resultierenden Bildes festzulegen.

Das ist alles Wir haben eine universelle Lösung für UITableViewRowAction und können sie jetzt mithilfe von UIView auf beliebige Weise anpassen.



Ab iOS 11 hat Apple eine neue Klasse für Wischaktionen für Zellen in der Tabelle hinzugefügt - UIContextualAction. Sie können damit sofort das Bild angeben, das bei der Aktion auf dem Wisch angezeigt wird (dies fehlt uns in all den Jahren, in denen UITableViewRowAction verwendet wurde). Er sollte unser Leben leichter machen, aber zusätzlich zu einer neuen Gelegenheit schuf er zusätzliche Probleme. Diese Klasse schränkt die Größe des Bildes ein, erlaubt nicht die gleichzeitige Verwendung von Text und Bild, und das Bild muss ein spezielles Format (Vorlagenbild) haben. Daher habe ich meine Lösung für die Unterstützung von Wischaktionen in iOS 11 fertiggestellt. Um eine UITableViewRowAction oder UIContextualAction zu erstellen, müssen Sie zunächst die RowActionFactory-Factory erstellen und sie mithilfe unserer Ansicht konfigurieren (wie oben in der setupForCell-Methode (mit Ansicht: UIView)). und geben Sie die benötigte Entität zurück: UITableViewRowAction oder UIContextualAction (unter Verwendung der Methoden rowAction () bzw. contextualAction (für indexPath: IndexPath) ). Das folgende Beispiel zeigt die Verwendung von RowActionFactory:

 @available(iOS 11.0, *) func tableView(_ tableView: UITableView, trailingSwipeActionsConfigurationForRowAt indexPath: IndexPath) -> UISwipeActionsConfiguration? { var contextualActions: [UIContextualAction] = [] for actionType in rowActionTypes { // actionType -     let rowActionFactory = RowActionFactory { (indexPath) in tableView.setEditing(false, animated: true) } let rowActionView = <...> //  UIView     rowActionFactory.setupForCell(with: rowActionView) if let contextualAction = rowActionFactory.contextualAction(for: indexPath) { contextualActions.append(contextualAction) } } let swipeActionsConfiguration = UISwipeActionsConfiguration(actions: contextualActions) swipeActionsConfiguration.performsFirstActionWithFullSwipe = false return swipeActionsConfiguration } 

Die fertige Lösung finden Sie hier: TCSCustomRowActionFactory (github.com) .