कीनोट WWDC 2019 को देखने के बाद और SwiftUI को जानने के लिए, जो कि कोड में UIs का वर्णन करने के लिए डिज़ाइन किया गया है, मैं इस बात पर अटकल लगाना चाहता हूं कि प्लेट और संग्रह में घोषणात्मक रूप से कैसे भरें। उदाहरण के लिए, इस तरह:

enum Builder { static func widgets(objects: Objects) -> [Widget] { let header = [ Spacing(height: 25).widget, Header(string: " ").widget, Spacing(height: 10, separator: .bottom).widget ] let body = objects .flatMap({ (object: Object) -> [Widgets] in return [ Title(object: object).widget, Spacing(height: 1, separator: .bottom).widget ] }) return header + body } } let objects: [Object] = ... Builder .widgets(objects: objects) .bind(to: collectionView)

संग्रह में, इसे निम्नानुसार प्रस्तुत किया गया है:

परिचय

जैसा कि आप आधिकारिक स्रोतों से जानते हैं : अपने समय के विशाल बहुमत, एक सामान्य iOS डेवलपर टैबलेट के साथ काम करने में खर्च करता है। यदि हम यह मान लेते हैं कि परियोजना में डेवलपर्स की कमी है और टैबलेट सरल नहीं हैं, तो बाकी एप्लिकेशन के लिए बिल्कुल समय नहीं बचा है। और इसके साथ कुछ करने की जरूरत है ... एक संभावित समाधान सेल अपघटन होगा।

सेल अपघटन का अर्थ है एक कोशिका को कई छोटी कोशिकाओं के साथ बदलना। इस प्रतिस्थापन के साथ, नेत्रहीन कुछ भी नहीं बदलना चाहिए। एक उदाहरण के रूप में, iOS के लिए VK समाचार फ़ीड से पोस्ट पर विचार करें। एक पोस्ट को एकल कोशिका, या कोशिकाओं के समूह के रूप में प्रस्तुत किया जा सकता है - आदिम ।

Decomposing कोशिकाओं हमेशा काम नहीं करेगा। एक सेल को उन प्राइमिटिव में तोड़ना मुश्किल होगा जिनकी सभी तरफ छाया या गोलाई है। इस मामले में, मूल कोशिका एक आदिम होगी।

पेशेवरों और विपक्ष

कोशिकाओं के अपघटन का उपयोग करते हुए, तालिकाओं / संग्रहों में प्रायमिक्स शामिल होते हैं जिन्हें अक्सर पुन: उपयोग किया जाएगा: पाठ के साथ एक आदिम, चित्र के साथ एक आदिम, एक पृष्ठभूमि के साथ एक आदिम। एक एकल आदिम की ऊंचाई की गणना बड़ी संख्या में राज्यों के साथ एक जटिल सेल की तुलना में बहुत सरल और अधिक प्रभावी है। यदि वांछित है, तो आदिम की गतिशील ऊंचाई की गणना की जा सकती है या यहां तक कि पृष्ठभूमि में खींची जा सकती है (उदाहरण के लिए, CTFramesetter माध्यम से पाठ)।

दूसरी ओर, डेटा के साथ काम करना अधिक जटिल हो जाता है। प्रत्येक आदिम के लिए डेटा की आवश्यकता होगी, और आदिम के IndexPath अनुसार यह निर्धारित करना मुश्किल होगा कि यह किस वास्तविक सेल से संबंधित है। हमें अमूर्तता की नई परतों को पेश करना होगा या किसी तरह इन समस्याओं को हल करना होगा।

आप इस उद्यम के संभावित पेशेवरों और विपक्षों के बारे में लंबे समय तक बात कर सकते हैं, लेकिन सेल अपघटन के दृष्टिकोण का वर्णन करने की कोशिश करना बेहतर है।

उपकरण चुनना

चूंकि UITableView अपनी क्षमताओं में सीमित है, और, जैसा कि पहले ही उल्लेख किया गया है, हमारे पास जटिल प्लेट हैं, UICollectionView का उपयोग करने के लिए एक उपयुक्त समाधान होगा। यह UICollectionView बारे में है UICollectionView इस प्रकाशन में चर्चा की जाएगी।

UICollectionView का उपयोग करते UICollectionView एक ऐसी स्थिति का सामना करना पड़ता है, जहां आधार UICollectionViewFlowLayout संग्रह के तत्वों की वांछित व्यवस्था नहीं UICollectionViewFlowLayout सकता है (हम नए UICollectionViewCompositionalLayout को ध्यान में नहीं UICollectionViewCompositionalLayout )। ऐसे क्षणों में, निर्णय आमतौर पर कुछ ओपन-सोर्स UICollectionViewLayout को खोजने के लिए किया जाता है। लेकिन तैयार किए गए समाधानों के बीच भी, एक उपयुक्त एक नहीं हो सकता है, उदाहरण के लिए, एक बड़े ऑनलाइन स्टोर या सामाजिक नेटवर्क के गतिशील मुख्य पृष्ठ के मामले में। हम सबसे खराब मानते हैं, इसलिए हम अपना सार्वभौमिक UICollectionViewLayout ।

लेआउट चुनने में कठिनाई के अलावा, आपको यह तय करने की आवश्यकता है कि संग्रह डेटा कैसे प्राप्त करेगा। सामान्य दृष्टिकोण के अलावा, जहां एक ऑब्जेक्ट (सबसे अधिक बार एक UIViewController ) UICollectionViewDataSource प्रोटोकॉल का अनुपालन करता है और एक संग्रह के लिए डेटा प्रदान करता है, डेटा-संचालित फ्रेमवर्क का उपयोग लोकप्रियता प्राप्त कर रहा है। इस दृष्टिकोण के उज्ज्वल प्रतिनिधि CollectionKit , IGListKit , RxDataSources, और अन्य हैं। इस तरह के ढांचे का उपयोग संग्रह के साथ काम को सरल करता है और डेटा को चेतन करने की क्षमता प्रदान करता है, क्योंकि अलग एल्गोरिथ्म पहले से ही ढांचे में मौजूद है। प्रकाशन के उद्देश्यों के लिए, RxDataSource ढांचे का चयन किया जाएगा।

विजेट और उसके गुण

हम एक मध्यवर्ती डेटा संरचना का परिचय देते हैं और इसे विजेट कहते हैं । हम मुख्य गुणों का वर्णन करते हैं जो एक विजेट में होना चाहिए:

विजेट को डेटा-संचालित ढांचे का उपयोग करने के लिए आवश्यक प्रोटोकॉल का पालन करना चाहिए। इस तरह के प्रोटोकॉल में आमतौर पर एक संबद्ध मान होता है (जैसे RxDataSources में IdentifiableType टाइप )
किसी सरणी में विभिन्न प्राइमेट के लिए विजेट्स को इकट्ठा करना संभव होना चाहिए। इसे प्राप्त करने के लिए, विजेट में संबंधित मूल्य नहीं होने चाहिए। इन उद्देश्यों के लिए, आप प्रकार के क्षरण के तंत्र का उपयोग कर सकते हैं या ऐसा कुछ कर सकते हैं।
विजेट आदिम के आकार को गिनने में सक्षम होना चाहिए। फिर, UICollectionViewLayout बनाते समय, यह केवल पूर्वनिर्धारित नियमों के अनुसार आदिम स्थिति को सही ढंग से रखने के लिए रहता है।
विजेट UICollectionViewCell लिए कारखाना होना चाहिए। इसलिए, UICollectionViewDataSource के कार्यान्वयन से UICollectionViewDataSource सेल बनाने के सभी तर्क हटा दिए जाएंगे और जो कुछ भी शेष है:
```
 let cell = widget.widgetCell(collectionView: collectionView, indexPath: indexPath) return cell 
```

विजेट कार्यान्वयन

RxDataSource फ्रेमवर्क के साथ विजेट का उपयोग करने में सक्षम होने के लिए, इसे Equatable और IdentifiableType Equatable प्रोटोकॉल का पालन करना चाहिए । चूंकि विजेट एक आदिम का प्रतिनिधित्व करता है, इसलिए यह प्रकाशन उद्देश्यों के लिए पर्याप्त होगा यदि विजेट पहचान करने IdentifiableType प्रोटोकॉल के अनुपालन के लिए स्वयं की IdentifiableType है। व्यवहार में, यह इस तथ्य को प्रभावित करेगा कि जब विजेट बदलता है, तो आदिम को फिर से लोड नहीं किया जाएगा, लेकिन हटा दिया और डाला जाएगा। ऐसा करने के लिए, नया WidgetIdentifiable प्रोटोकॉल पेश करें:

 protocol WidgetIdentifiable: IdentifiableType { } extension WidgetIdentifiable { var identity: Self { return self } }

WidgetIdentifiable अनुरूप होने के लिए, विजेट को WidgetIdentifiable प्रोटोकॉल के अनुरूप होना चाहिए। Hashable विजेट उस प्रोटोकॉल से अनुपालन के लिए डेटा लेगा जो किसी विशेष आदिम का वर्णन करेगा। आप ऑब्जेक्ट प्रकार विजेट को "मिटा" करने के लिए AnyHashable का उपयोग कर सकते हैं।

 struct Widget: WidgetIdentifiable { let underlying: AnyHashable init(_ underlying: AnyHashable) { self.underlying = underlying } } extension Widget: Hashable { func hash(into hasher: inout Hasher) { self.underlying.hash(into: &hasher) } static func ==(lhs: Widget, rhs: Widget) -> Bool { return lhs.underlying == rhs.underlying } }

इस स्तर पर, विजेट के पहले दो गुणों को निष्पादित किया जाता है। एक सरणी में विभिन्न प्रकार की वस्तुओं के साथ कई विजेट्स को इकट्ठा करके जांचना मुश्किल नहीं है।

 let widgets = [Widget("Hello world"), Widget(100500)]

शेष गुणों को लागू करने के लिए, हम एक नया प्रोटोकॉल WidgetPresentable पेश WidgetPresentable

 protocol WidgetPresentable { func widgetCell(collectionView: UICollectionView, indexPath: IndexPath) -> UICollectionViewCell func widgetSize(containerWidth: CGFloat) -> CGSize }

widgetSize(containerWidth:) फ़ंक्शन का उपयोग UICollectionViewLayout में कोशिकाओं के गुण पैदा करते समय किया जाएगा, और widgetCell(collectionView:indexPath:) - कोशिकाओं को प्राप्त करने के लिए।

यदि विजेट WidgetPresentable प्रोटोकॉल के WidgetPresentable , तो विजेट प्रकाशन की शुरुआत में संकेतित सभी गुणों को पूरा करेगा। हालाँकि, विजेट AnyHashable में निहित ऑब्जेक्ट को WidgetPresentable और WidgetHashable साथ WidgetHashable होगा, जहाँ WidgetHashable का संबद्ध मान नहीं होगा (जैसा कि WidgetHashable के मामले में) और विजेट के अंदर ऑब्जेक्ट का प्रकार "मिट" रहेगा:

 protocol WidgetHashable { func widgetEqual(_ any: Any) -> Bool func widgetHash(into hasher: inout Hasher) }

अंतिम संस्करण में, विजेट इस तरह दिखेगा:

 struct Widget: WidgetIdentifiable { let underlying: WidgetHashable & WidgetPresentable init(_ underlying: WidgetHashable & WidgetPresentable) { self.underlying = underlying } } extension Widget: Hashable { func hash(into hasher: inout Hasher) { self.underlying.widgetHash(into: &hasher) } static func ==(lhs: Widget, rhs: Widget) -> Bool { return lhs.underlying.widgetEqual(rhs.underlying) } } extension Widget: WidgetPresentable { func widgetCell(collectionView: UICollectionView, indexPath: IndexPath) -> UICollectionViewCell { return underlying.widgetCell(collectionView: collectionView, indexPath: indexPath) } func widgetSize(containerWidth: CGFloat) -> CGSize { return underlying.widgetSize(containerWidth: containerWidth) } }

आदिम वस्तु

आइए सरलतम आदिम को इकट्ठा करने का प्रयास करें, जो किसी दिए गए ऊंचाई का इंडेंटेशन होगा।

 struct Spacing: Hashable { let height: CGFloat } class SpacingView: UIView { lazy var constraint = self.heightAnchor.constraint(equalToConstant: 1) init() { super.init(frame: .zero) self.constraint.isActive = true } } extension Spacing: WidgetHashable { func widgetEqual(_ any: Any) -> Bool { if let spacing = any as? Spacing { return self == spacing } return false } func widgetHash(into hasher: inout Hasher) { self.hash(into: &hasher) } } extension Spacing: WidgetPresentable { func widgetCell(collectionView: UICollectionView, indexPath: IndexPath) -> UICollectionViewCell { let cell: WidgetCell<SpacingView> = collectionView.cellDequeueSafely(indexPath: indexPath) if cell.view == nil { cell.view = SpacingView() } cell.view?.constraint.constant = height return cell } func widgetSize(containerWidth: CGFloat) -> CGSize { return CGSize(width: containerWidth, height: height) } }

WidgetCell<T> का सिर्फ एक उपवर्ग है जो एक UIView स्वीकार करता है और इसे एक UICollectionViewCell रूप में जोड़ता है। cellDequeueSafely(indexPath:) एक फ़ंक्शन है जो संग्रह में एक सेल को फिर से उपयोग करने से पहले पंजीकृत करता है यदि संग्रह में कोई सेल पहले पंजीकृत नहीं किया गया है। प्रकाशन की शुरुआत में वर्णित Spacing का उपयोग किया जाएगा।

विगेट्स की सरणी प्राप्त करने के बाद, यह केवल observerWidgets लिए बाध्य करने के लिए बनी हुई है:

 typealias DataSource = RxCollectionViewSectionedAnimatedDataSource<WidgetSection> class Controller: UIViewController { private lazy var dataSource: DataSource = self.makeDataSource() var observerWidgets: (Observable<Widgets>) -> Disposable { return collectionView.rx.items(dataSource: dataSource) } func makeDataSource() -> DataSource { return DataSource(configureCell: { (_, collectionView: UICollectionView, indexPath: IndexPath, widget: Widget) in let cell = widget.widgetCell(collectionView: collectionView, indexPath: indexPath) return cell }) } }

परिणाम

अंत में, मैं संग्रह का वास्तविक काम दिखाना चाहूंगा, जो पूरी तरह से विगेट्स पर बनाया गया है।

जैसा कि आप देख सकते हैं, UICollectionViewCell अपघटन संभव है और उपयुक्त स्थितियों में डेवलपर के जीवन को सरल बना सकता है।

टिप्पणी

प्रकाशन में दिया गया कोड बहुत सरल है और इसे संकलित नहीं किया जाना चाहिए। लक्ष्य दृष्टिकोण का वर्णन करना था, न कि टर्नकी समाधान प्रदान करना।

WidgetPresentable प्रोटोकॉल को अन्य कार्यों के साथ विस्तारित किया जा सकता है जो लेआउट को अनुकूलित करते हैं, उदाहरण के लिए, widgetSizeEstimated(containerWidth:) या widgetSizePredefined(containerWidth:) , जो क्रमशः अनुमानित और निश्चित आकार लौटाते हैं। यह ध्यान देने योग्य है कि widgetSize(containerWidth:) फ़ंक्शन को गणना की मांग के लिए भी आदिम के आकार को वापस करना चाहिए, उदाहरण के लिए, systemLayoutSizeFitting(_:) । इस तरह की गणनाओं को Dictionary , NSCache आदि के माध्यम से कैश्ड किया जा सकता है

जैसा कि आप जानते हैं, UICollectionView द्वारा उपयोग किए जाने वाले सभी सेल प्रकारों को संग्रह में पूर्व-पंजीकृत होना चाहिए। हालांकि, विभिन्न स्क्रीन / संग्रह के बीच विगेट्स का पुन: उपयोग करने और सभी सेल पहचानकर्ताओं / प्रकारों को पहले से पंजीकृत नहीं करने के लिए, आपको एक तंत्र प्राप्त करना होगा जो प्रत्येक संग्रह के भीतर इसके पहले उपयोग से तुरंत पहले एक सेल को पंजीकृत करेगा। प्रकाशन में, फ़ंक्शन cellDequeueSafely(indexPath:) उपयोग इसके लिए किया cellDequeueSafely(indexPath:) ।

संग्रह में कोई हेडर या पाद नहीं हो सकता है। उनके स्थान पर आदिम होंगे। संग्रह में अनुपूरक की उपस्थिति वर्तमान दृष्टिकोण में कोई विशेष बोनस नहीं देगी। आमतौर पर उनका उपयोग तब किया जाता है जब डेटा सरणी सख्ती से कोशिकाओं की संख्या से मेल खाती है और कोशिकाओं के पहले या बाद में अतिरिक्त दृश्य दिखाने के लिए आवश्यक है। हमारे मामले में, सहायक दृश्यों के लिए डेटा को विजेट सरणी में भी जोड़ा जा सकता है और आदिम के रूप में तैयार किया जा सकता है।

एक ही संग्रह के भीतर, एक ही ऑब्जेक्ट के साथ विजेट स्थित हो सकते हैं। उदाहरण के लिए, संग्रह के आरंभ में और अंत में समान Spacing । इस तरह की गैर-अनोखी वस्तुओं की उपस्थिति इस तथ्य को जन्म देगी कि संग्रह में एनीमेशन गायब हो जाता है। ऐसी वस्तुओं को विशिष्ट बनाने के लिए, आप विशेष AnyHashable टैग, #file और #line उपयोग कर सकते हैं जहां ऑब्जेक्ट बनाया गया था, आदि।

UICollectionViewCell का निस्तारण करना