UITableViewRowAction और UIContextualAction के लिए सार्वभौमिक समाधान

कई को UITableViewCell के लिए एक सुंदर बटन मैपिंग को लागू करने की समस्या का सामना करना पड़ा जब बाईं ओर स्थानांतरित किया गया। कुछ ने मानक कार्यक्षमता का उपयोग किया "बॉक्स से बाहर", अन्य अपने स्वयं के कार्यान्वयन से परेशान हैं, जबकि अन्य यूनिकोड वर्णों के साथ प्रबंधित हैं। इस लेख में मैं आपको बताऊंगा कि कैसे UITableViewRowAction का अधिकतम अनुकूलन प्राप्त किया जाए।

सबसे पहले, एक छोटा सा सिद्धांत: UITableViewRowAction एक ऐसा वर्ग है जो उपयोगकर्ता को इस सेल के साथ कुछ सेल को बाईं ओर ले जाने पर (जैसे "डिलीट", "परिवर्तन", आदि) करने की अनुमति देता है। इस वर्ग का प्रत्येक उदाहरण निष्पादन और पाठ, शैली और एक क्लिक हैंडलर शामिल करने के लिए एक क्रिया का प्रतिनिधित्व करता है। IOS SDK हमें इस प्रकार UITableViewRowAction को अनुकूलित करने की अनुमति देता है:

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

आप BackgroundColor भी सेट कर सकते हैं।

मौजूदा तरीके।

मौजूदा कार्यान्वयन उदाहरणों पर विचार करें, या मुझे इंटरनेट पर क्या मिला।
विधि संख्या 1 । कार्यक्षमता का उपयोग करें "बॉक्स से बाहर"। यह पाठ और पृष्ठभूमि के साथ साधारण बटन का उपयोग करने के लिए पर्याप्त है। यह बहुत सरल और उबाऊ लगता है:


विधि संख्या 2 । UIColor (patternImage: UIImage) का उपयोग कर बैकग्राउंड सेट करें। यह सुंदरता को प्राप्त करेगा, लेकिन यह बहुमुखी प्रतिभा को वंचित करेगा, कई प्रतिबंधों और कठिनाइयों को जोड़ देगा। चूंकि UITableViewRowAction की चौड़ाई पाठ के आकार द्वारा गणना की जाती है, इसलिए आपको शीर्षक को एक निश्चित चौड़ाई के सफेद स्थान वर्णों के सेट के रूप में निर्दिष्ट करना होगा। हम गतिशील ऊंचाइयों वाले कोशिकाओं के लिए इस पद्धति का उपयोग करने में सक्षम नहीं होंगे। यदि सेल ऊंचाई में बढ़ जाती है, तो यह कुछ इस तरह दिखाई देगा:



विधि संख्या 3 । यूनिकोड वर्णों का उपयोग करें। रिक्त स्थान के साथ पाठ के आकार की गणना करने की आवश्यकता नहीं है, और यह विधि गतिशील ऊंचाई वाले कोशिकाओं के लिए उपयुक्त है। यह अच्छा लग रहा है:



लेकिन अगर हम आइकन के तहत पाठ बनाना चाहते हैं, तो यह विधि हमारे अनुरूप नहीं होगी।

विधि संख्या 4 । UI घटकों को प्रस्तुत करने के लिए CoreGraphics का उपयोग करें। विचार मैन्युअल रूप से तत्वों (पाठ और छवि) की वांछित व्यवस्था के साथ एक छवि तैयार करना है। इस मामले में, आपको प्रत्येक तत्व के स्थान के लिए आकार और निर्देशांक की गणना करने की आवश्यकता है। इस पद्धति का उपयोग करके, हम पाठ और एक तस्वीर दोनों बना सकते हैं, उन्हें आवश्यकतानुसार व्यवस्थित कर सकते हैं। लेकिन इस विधि को लागू करना मुश्किल है। हम कुछ सरल चाहते हैं।

अन्य कार्यान्वयन । कुछ और तैयार समाधान हैं। वे स्क्रॉल दृश्य और अन्य तर्क के साथ सेल के अपने स्वयं के कार्यान्वयन का उपयोग करते हैं। उदाहरण के लिए, SwipeCellKit या MGSwipeTableCell । लेकिन ये समाधान मानक iOS व्यवहार को प्राप्त करने की अनुमति नहीं देते हैं, वे केवल एक सेल को कवर करते हैं, UITableViewRowAction के विपरीत, जो तालिका प्रतिनिधि में बनाया गया है। उदाहरण के लिए, इन समाधानों में से एक का उपयोग करते हुए, यदि आप कई कक्षों के लिए बाईं पारी के लिए क्रिया खोलते हैं, तो आपको उनमें से प्रत्येक में इन कार्यों को मैन्युअल रूप से बंद करना होगा, जो बेहद असुविधाजनक है। ऐसा करने के लिए, आपको एक स्वाइप पर खुले कार्यों को नियंत्रित करने के लिए अपना तर्क जोड़ना होगा। हम एक सरल समाधान बनाना चाहते हैं, जिसमें अतिरिक्त लागतों की आवश्यकता न हो, जैसे कि हम UITableViewRowAction के मानक कार्यान्वयन का उपयोग कर रहे हैं।

चलिए शुरू करते हैं

आइए एक सार्वभौमिक समाधान बनाने की कोशिश करें जो आपको किसी भी डिज़ाइन के साथ UITableViewRowAction बनाने की अनुमति देता है जो हमें चाहिए।

UITableViewRowAction से हमारे वंशज वर्ग बनाएं और मुख्य उदाहरण निर्माण विधि को परिभाषित करें:

 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 } } 

चूंकि UITableViewRowAction में प्राथमिक इनिशियलाइज़र नहीं है, इसलिए सुविधा के लिए हम एक स्टैटिक विधि बना सकते हैं, जहाँ हम एक मानक तरीके से UITableViewRowAction बनाते हैं और क्लिक को हैंडल करने के लिए इसमें एक एक्शनहैंडलर फेंकते हैं।

अब UITableViewRowAction बटन के सार्वभौमिक अनुकूलन को प्राप्त करने का प्रयास करते हैं। यह विचार है कि बटन को यूएवीवाई से समाप्त करना है (जिसे नियमित एक्सिब में कॉन्फ़िगर किया जा सकता है)। इसलिए हम व्यक्तिगत प्राथमिकताओं (पाठ के किसी भी फ़ॉन्ट, आकार और तत्वों की व्यवस्था, आदि) के आधार पर किसी भी प्रकार का एक बटन बना सकते हैं।

हमारे पास दो चीजें हैं जिन्हें हम UITableViewRowAction में बदल सकते हैं: बैकग्राउंड कलर और शीर्षक । फिलहाल, UITableViewRowAction बटन के लुक को बदलने का एकमात्र तरीका बैकग्राउंड कलर प्रॉपर्टी को बदलना है। इसलिए, हमारा लक्ष्य परिवर्तन करना है: UIView -> UIImage -> UIColor। हम निम्नानुसार छवि का उपयोग करके रंग प्राप्त कर सकते हैं: UIColor (patternImage: UIImage) । और हम मानक CoreGraphics ढांचे का उपयोग करके इसे प्रदान करके UIView से छवि प्राप्त कर सकते हैं।

लेकिन पहले हम यह तय करेंगे कि बटन का आकार कैसे तय किया जाए: "बॉक्स से बाहर" यह कार्यक्षमता नहीं है, और UITableViewRowAction में आकार शीर्षक फ़ील्ड के पाठ के आकार से गणना की जाती है।

प्रयोगों का संचालन करने के बाद (बटन की गणना की गई और वास्तविक चौड़ाई को मापते हुए), मुझे एक खाली यूनिकोड वर्ण मिला जिसमें सबसे छोटी नॉनजरो चौड़ाई है: U + 200A

हम इसका उपयोग करेंगे और एक स्थिरांक बनाएंगे:

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

हम व्हाट्सएप वर्णों की एक स्ट्रिंग प्राप्त करने के लिए एक फ़ंक्शन लिखेंगे जो हमें आवश्यक आकार के अनुरूप है:

 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) } 

प्लेसहोल्डरस्मॉलबॉवर्ड वेरिएबल को हमारे यूनिकोड चरित्र की चौड़ाई मिलती है, और रिक्त शीर्षक (आकार के लिए: CGSize) -> स्ट्रिंग फ़ंक्शन आकार के अनुरूप व्हॉट्सएप वर्णों की संख्या की गणना करता है और इन वर्णों की एक स्ट्रिंग लौटाता है। उपरोक्त सूत्र शिफ्टफैक्टर स्थिरांक का उपयोग करता है। यह नाममात्र मूल्य से चौड़ाई के विचलन का गुणांक है। तथ्य यह है कि जैसे ही UITableViewRowAction की चौड़ाई बढ़ती है, एक छोटी सी त्रुटि बढ़ जाती है (यानी, बटन की वास्तविक चौड़ाई सामान्य सूत्र द्वारा गणना की गई चौड़ाई से भिन्न होती है)। इससे बचने के लिए, हम प्रयोगात्मक रूप से व्युत्पन्न इस स्थिरांक का उपयोग करते हैं।

इसके अलावा UITableViewRowAction की न्यूनतम चौड़ाई 30 है (उदाहरण के लिए, यदि आपने शीर्षक = "" सेट किया है)। शीर्षक की बाईं और दाईं ओर इंडेंटेशन के लिए यह चौड़ाई न्यूनतम आवश्यक है।
हमारे स्थिरांक अपडेट करें:

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

अब आइए UIView से छवि प्राप्त करें। हम निम्नलिखित फ़ंक्शन लिखेंगे:

 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 } 

यह फ़ंक्शन हमारे दृश्य को एक तस्वीर में परिवर्तित करता है। इस मामले में, छवि का आकार दृश्य के आकार से मेल खाता है।

अंतिम चरण बना हुआ है, जहां हम UIV का उपयोग करके UITableViewRowAction की स्थापना के लिए विधि लागू करते हैं:

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

यहां हम अपने बटन को कॉन्फ़िगर करने और परिणामी छवि का उपयोग करके बैकग्राउंड सेट करने के लिए पहले लिखे गए कार्यों का उपयोग करते हैं।

बस इतना ही। हमें UITableViewRowAction के लिए एक सार्वभौमिक समाधान मिला और अब हम इसे UIVIV का उपयोग करके किसी भी तरह से अनुकूलित कर सकते हैं।



IOS 11 के साथ शुरू, Apple ने तालिका में कोशिकाओं के लिए स्वाइप एक्शन के लिए एक नया वर्ग जोड़ा है - UIContextualAction। यह आपको तुरंत उस छवि को निर्दिष्ट करने की अनुमति देता है जो स्वाइप पर कार्रवाई पर प्रदर्शित की जाएगी (यह वह है जो हम यूआईटेबल व्यू रोवाशन का उपयोग करने के इन सभी वर्षों के लिए गायब है)। वह हमारे जीवन को आसान बनाने वाला था, लेकिन एक नए अवसर के अलावा, उसने अतिरिक्त समस्याएं पैदा कीं। यह वर्ग चित्र के आकार पर प्रतिबंध लगाता है, एक ही समय में पाठ और चित्र के उपयोग की अनुमति नहीं देता है, और साथ ही, चित्र में एक विशेष प्रारूप (टेम्पलेट छवि) होना चाहिए। इसलिए, मैंने iOS 11 में स्वाइप क्रियाओं का समर्थन करने के लिए अपने समाधान को अंतिम रूप दिया। अब UITableViewRowAction या UIContextualAction बनाने के लिए, आपको सबसे पहले RowActionFactory फैक्ट्री बनाने की आवश्यकता है, इसे अपने दृष्टिकोण (जैसे कि हमने सेटअपफॉरसेल (दृश्य के साथ: UIView) विधि का उपयोग करके कॉन्फ़िगर करें ) और हमारे द्वारा आवश्यक इकाई वापस करें: UITableViewRowAction या UIContextualAction ( rowAction () का उपयोग करके या प्रासंगिकता के लिए (IndexPath के लिए: IndexPath) विधियों, क्रमशः)। निम्नलिखित 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 } 

तैयार समाधान यहां पाया जा सकता है: TCSCustomRowActionFactory (github.com) ।