विभिन्न हिस्सों से पिज्जा के लिए UICollectionViewLayout

हिस्सों से पिज्जा बनाने के लिए, हमने दो UICollectionViewLayout उपयोग किया। मैं इस बारे में बात कर रहा हूं कि हमने iOS के लिए इस तरह का एक लेआउट कैसे लिखा, हमने क्या सामना किया और क्या इनकार किया।

प्रोटोटाइप

जब हमें आधे हिस्सों से पिज्जा के लिए एक इंटरफ़ेस बनाने का काम मिला, तो हम थोड़ा उलझन में थे। मैं इसे खूबसूरती से, और स्पष्ट रूप से, और आसानी से, और बड़े, और अंतःक्रियात्मक और बहुत कुछ चाहता हूं। मैं कूल रहना चाहता हूं।

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

कैसे UICollectionView काम करता है

UICollectionView UIScrollView का एक उपवर्ग है, और यह एक नियमित UIView है, जिसमें स्वाइप से bounds बदल जाती है। इसे स्थानांतरित करके .origin , हम दृश्यमान क्षेत्र को बदलते हैं, और बदलते हैं .size को प्रभावित करते हैं।

जब स्क्रीन UICollectionView कोशिकाओं का निर्माण (या पुन: उपयोग) करता है, और उन्हें प्रदर्शित करने के नियम UICollectionViewLayout में वर्णित हैं। हम उसके साथ काम करेंगे।

UICollectionViewLayout की संभावनाएं बड़ी हैं, आप कोशिकाओं के बीच किसी भी संबंध को निर्दिष्ट कर सकते हैं। उदाहरण के लिए, आप iCarousel क्या कर सकते हैं के समान है :

पहला तरीका

स्क्रीन को बदलते हुए देखने को बदलना मेरे लिए लेआउट के लेआउट को समझना आसान हो गया।
हम इस तथ्य के लिए उपयोग किए जाते हैं कि कोशिकाएं स्क्रीन के चारों ओर घूमती हैं (हरे रंग की आयत फोन की स्क्रीन है):

लेकिन इसके विपरीत, यह स्क्रीन कोशिकाओं के सापेक्ष चलती है। पेड़ अभी भी हैं, यह ट्रेन यात्रा करती है:

उदाहरण में, सेल फ्रेम नहीं बदलता है, लेकिन संग्रह की bounds ही बदल जाती हैं। इस bounds Origin ज्ञात contentOffset ।

एक लेआउट बनाने के लिए आपको दो चरणों से गुजरना होगा:

• सभी कोशिकाओं के आकार की गणना करें
• केवल स्क्रीन पर दिखाई दे रहा है।

UITableView के रूप में सरल लेआउट

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

शुरू करने के लिए, UICollectionViewLayout एक सरल UICollectionViewLayout , जो UITableView के व्यवहार को दोहराता है: कोशिकाएं पूरी चौड़ाई पर कब्जा कर लेती हैं, एक के बाद एक UICollectionViewLayout हैं।

4 कदम आगे:

• prepare विधि में सभी कोशिकाओं के लिए frame गणना करें।
• layoutAttributesForElements(in:) में दिखाई देने वाली कोशिकाओं को layoutAttributesForElements(in:) ।
• layoutAttributesForItem(at:) में अपने सूचकांक द्वारा सेल मापदंडों को layoutAttributesForItem(at:) । layoutAttributesForItem(at:) विधि पर। उदाहरण के लिए, इस विधि का उपयोग संग्रह विधि को स्क्रॉल करते समय किया जाता है स्क्रॉलऑइटम (:) पर।
• collectionViewContentSize में परिणामी सामग्री के आयामों को लौटें। इसलिए कलेक्टर यह पता लगाएगा कि आप किस सीमा तक स्क्रॉल कर सकते हैं।

अधिकांश उपकरणों पर, पिज्जा का आकार 300 अंक होगा, फिर सभी कोशिकाओं के निर्देशांक और आकार:

मैंने एक अलग वर्ग में गणनाएँ कीं। इसमें दो भाग होते हैं: यह कंस्ट्रक्टर के सभी फ़्रेमों की गणना करता है, और उसके बाद ही तैयार परिणामों तक पहुँच देता है:

 class TableLayoutCache { // MARK: - Calculation func recalculateDefaultFrames(numberOfItems: Int) { defaultFrames = (0..<numberOfItems).map { defaultCellFrame(atRow: $0) } } func defaultCellFrame(atRow row: Int) -> CGRect { let y = itemSize.height * CGFloat(row) let defaultFrame = CGRect(x: 0, y: y, width: collectionWidth, height: itemSize.height) return defaultFrame } // MARK: - Access func visibleRows(in frame: CGRect) -> [Int] { return defaultFrames .enumerated() // Index to frame relation .filter { $0.element.intersects(frame)} // Filter by frame .map { $0.offset } // Return indexes } var contentSize: CGSize { return CGSize(width: collectionWidth, height: defaultFrames.last?.maxY ?? 0) } static var zero: TableLayoutCache { return TableLayoutCache(itemSize: .zero, collectionWidth: 0) } init(itemSize: CGSize, collectionWidth: CGFloat) { self.itemSize = itemSize self.collectionWidth = collectionWidth } private let itemSize: CGSize private let collectionWidth: CGFloat private var defaultFrames = [CGRect]() } 

फिर लेआउट वर्ग में आपको केवल कैश से पैरामीटर पास करने की आवश्यकता होती है।

1. prepare विधि सभी फ़्रेमों की गणना को आमंत्रित करती है।
2. LayoutAttributesForElements (में :) तख्ते को फ़िल्टर करेगा। यदि फ़्रेम दृश्य क्षेत्र के साथ अंतर करता है, तो सेल को प्रदर्शित करने की आवश्यकता है: सभी विशेषताओं की गणना करें और इसे दृश्यमान कोशिकाओं के सरणी में लौटा दें।
3. LayoutAttributesForItem (:) पर - एक एकल कक्ष के लिए विशेषताओं की गणना करता है।

 class TableLayout: UICollectionViewLayout { override var collectionViewContentSize: CGSize { return cache.contentSize } override func prepare() { super.prepare() let numberOfItems = collectionView!.numberOfItems(inSection: section) cache = TableLayoutCache(itemSize: itemSize, collectionWidth: collectionView!.bounds.width) cache.recalculateDefaultFrames(numberOfItems: numberOfItems) } override func layoutAttributesForElements(in rect: CGRect) -> [UICollectionViewLayoutAttributes]? { let indexes = cache.visibleRows(in: rect) let cells = indexes.map { (row) -> UICollectionViewLayoutAttributes? in let path = IndexPath(row: row, section: section) let attributes = layoutAttributesForItem(at: path) return attributes }.compactMap { $0 } return cells } override func layoutAttributesForItem(at indexPath: IndexPath) -> UICollectionViewLayoutAttributes? { let attributes = UICollectionViewLayoutAttributes(forCellWith: indexPath) attributes.frame = cache.defaultCellFrame(atRow: indexPath.row) return attributes } var itemSize: CGSize = .zero { didSet { invalidateLayout() } } private let section = 0 var cache = TableLayoutCache.zero } 

हम आपकी आवश्यकताओं के अनुसार बदलते हैं

हमने तालिका दृश्य को हल कर दिया है, लेकिन अब हमें एक गतिशील लेआउट बनाने की आवश्यकता है। प्रत्येक उंगली की शिफ्ट में, हम कोशिकाओं की विशेषताओं को पुनर्गणना करेंगे: वे फ़्रेम लें जो पहले से ही गिने जा चुके हैं, और .transform का उपयोग करके उन्हें बदल दें। सभी परिवर्तन PizzaHalfSelectorLayout एक उपवर्ग में किए PizzaHalfSelectorLayout ।

हमने वर्तमान पिज्जा इंडेक्स पढ़ा

सुविधा के लिए, आप contentOffset बारे में भूल सकते हैं और इसे वर्तमान पिज्जा की संख्या से बदल सकते हैं। फिर आपको निर्देशांक के बारे में सोचने की आवश्यकता नहीं होगी, सभी निर्णय स्क्रीन के केंद्र से पिज्जा नंबर और इसके विस्थापन के आसपास होंगे।

दो तरीकों की आवश्यकता है: एक contentOffset को एक पिज्जा नंबर में परिवर्तित करता है, दूसरा इसके विपरीत:

 extension PizzaHalfSelectorLayout { func contentOffset(for pizzaIndex: Int) -> CGPoint { let cellHeight = itemSize.height let screenHalf = collectionView!.bounds.height / 2 let midY = cellHeight * CGFloat(pizzaIndex) + cellHeight / 2 let newY = midY - screenHalf return CGPoint(x: 0, y: newY) } func pizzaIndex(offset: CGPoint) -> CGFloat { let cellHeight = itemSize.height let proposedCenterY = collectionView!.screenCenterYOffset(for: offset) let pizzaIndex = proposedCenterY / cellHeight return pizzaIndex } } 

स्क्रीन के केंद्र के लिए contentOffset गणना extension में दी गई है:

 extension UIScrollView { func screenCenterYOffset(for offset: CGPoint? = nil) -> CGFloat { let offsetY = offset?.y ?? contentOffset.y let contentOffsetY = offsetY + bounds.height / 2 return contentOffsetY } } 

हम केंद्र में पिज्जा पर रोकते हैं

पहली चीज जो हमें करने की ज़रूरत है वह स्क्रीन के केंद्र में पिज्जा को रोकना है। targetContentOffset(forProposedContentOffset:) विधि पूछती है कि कहाँ रुकना है यदि वर्तमान गति पर यह proposedContentOffset पर रुकने वाला है।

गणना सरल है: देखें कि कौन सा पिज्जा proposedContentOffset में गिर जाएगा और स्क्रॉल करेगा ताकि यह केंद्र में खड़ा हो:

  override func targetContentOffset(forProposedContentOffset proposedContentOffset: CGPoint, withScrollingVelocity velocity: CGPoint) -> CGPoint { let pizzaIndex = Int(self.pizzaIndex(offset: proposedContentOffset)) let projectedOffset = contentOffset(for: pizzaIndex) return projectedOffset } 

UIScrollView में दो स्क्रॉल .normal : .normal और .fast । .fast अधिक उपयुक्त .fast :

 collectionView!.decelerationRate = .fast 

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

सावधानी, हैक!

यदि सेल नहीं बदलती है, तो हम वर्तमान contentOffset वापस कर देते हैं। इसलिए, स्क्रॉल बंद हो जाता है। फिर, हम स्वयं मानक scrollToItem का उपयोग करके पिछली जगह पर स्क्रॉल करेंगे। काश, आपको एसिंक्रोनस रूप से स्क्रॉल करना भी होगा, ताकि कोड को return बाद कहा जाए, फिर एनीमेशन के दौरान बहुत कम लुप्त होती होगी।

  override func targetContentOffset(forProposedContentOffset proposedContentOffset: CGPoint, withScrollingVelocity velocity: CGPoint) -> CGPoint { let pizzaIndex = Int(self.pizzaIndex(offset: proposedContentOffset)) let projectedOffset = contentOffset(for: pizzaIndex) let sameCell = pizzaIndex == currentPizzaIndexInt if sameCell { animateBackwardScroll(to: pizzaIndex) return collectionView!.contentOffset // Stop scroll, we've animated manually } return projectedOffset } /// A bit of magic. Without that, high velocity moves cells backward very fast. /// We slow down the animation private func animateBackwardScroll(to pizzaIndex: Int) { let path = IndexPath(row: pizzaIndex, section: 0) collectionView?.scrollToItem(at: path, at: .centeredVertically, animated: true) // More magic here. Fix double-step animation. // You can't do it smoothly without that. DispatchQueue.main.async { self.collectionView?.scrollToItem(at: path, at: .centeredVertically, animated: true) } } 

समस्या दूर हो गई है, अब पिज्जा आसानी से लौटता है:

सेंट्रल पिज्जा बढ़ाएं

हम चलते समय लेआउट को याद करते हैं

केंद्रीय पिज्जा को धीरे-धीरे बढ़ाना आवश्यक है क्योंकि यह केंद्र के पास पहुंचता है। ऐसा करने के लिए, आपको शुरू में एक बार नहीं, बल्कि प्रत्येक बार ऑफसेट पर मापदंडों की गणना करने की आवश्यकता है। बस चालू होता है:

  override func shouldInvalidateLayout(forBoundsChange newBounds: CGRect) -> Bool { return true } 

अब, प्रत्येक ऑफसेट के साथ, prepare और layoutAttributesForElements(in:) विधियों को बुलाया जाएगा। तो हम एक पंक्ति में कई बार UICollectionViewLayoutAttributes अपडेट कर सकते हैं, आसानी से स्थिति और पारदर्शिता को बदल सकते हैं।

कोशिकाओं को बदलना

टेबल लेआउट में, कोशिकाएं एक-दूसरे के नीचे पड़ी थीं और उनके निर्देशांक एक बार गिने गए थे। अब हम उन्हें स्क्रीन के केंद्र के सापेक्ष स्थिति के आधार पर बदल देंगे। एक विधि जोड़ें जो उन्हें मक्खी पर बदल देगा।

layoutAttributesForElements विधि में, layoutAttributesForElements से विशेषताओं को प्राप्त करने की आवश्यकता है, कोशिकाओं की विशेषताओं को फ़िल्टर करें और उन्हें updateCells विधि में पास करें:

  override func layoutAttributesForElements(in rect: CGRect) -> [UICollectionViewLayoutAttributes]? { guard let elements = super.layoutAttributesForElements(in: rect) else { return nil } let cells = elements.filter { $0.representedElementCategory == .cell } self.updateCells(cells) } 

अब हम एक फ़ंक्शन में सेल की विशेषताओं को बदलेंगे:

  private func updateCells(_ cells: [UICollectionViewLayoutAttributes]) 

आंदोलन के दौरान, हमें पारदर्शिता को बदलने, आकार देने और पिज्जा को केंद्र में रखने की आवश्यकता है।

स्क्रीन के केंद्र के सापेक्ष सेल की स्थिति आसानी से एक सामान्यीकृत रूप में प्रस्तुत की जाती है। यदि कक्ष केंद्र में है, तो पैरामीटर 0 है, यदि इसे स्थानांतरित किया जाता है, तो चलते समय पैरामीटर -1 से बदलता है, जब चलती है तो 1 तक। यदि मान 1 / -1 से शून्य से दूर हैं, तो इसका मतलब है कि सेल अब केंद्रीय नहीं है और उसने बदलना बंद कर दिया है। मैंने इस पैमाने को पैरामीटर कहा:

आपको फ्रेम के केंद्र और स्क्रीन के केंद्र के बीच अंतर की गणना करने की आवश्यकता है। एक अंतर से अंतर को विभाजित करते हुए, हम मान को सामान्य करते हैं, और न्यूनतम और अधिकतम -1 से +1 तक की सीमा तक ले जाएगा:

 extension PizzaHalfSelectorLayout { func scale(for row: Int) -> CGFloat { let frame = cache.defaultCellFrame(atRow: row) let scale = self.scale(for: frame) return scale.normalized } func scale(for frame: CGRect) -> CGFloat { let criticalOffset = PizzaHalfSelectorLayout.criticalOffsetFromCenter // 200 pt let centerOffset = offsetFromScreenCenter(frame) let relativeOffset = centerOffset / criticalOffset return relativeOffset } func offsetFromScreenCenter(_ frame: CGRect) -> CGFloat { return frame.midY - collectionView!.screenCenterYOffset() } } extension CGFloat { var normalized: CGFloat { return CGFloat.minimum(1, CGFloat.maximum(-1, self)) } } 

आकार

सामान्यीकृत scale होने scale , आप कुछ भी कर सकते हैं। -1 से +1 तक के परिवर्तन बहुत मजबूत हैं, उन्हें आकार में परिवर्तित करने की आवश्यकता है। उदाहरण के लिए, हम चाहते हैं कि आकार केंद्रीय पिज्जा के आकार का अधिकतम 0.6 तक घट जाए:

  private func updateCells(_ cells: [UICollectionViewLayoutAttributes]) { for cell in cells { let normScale = scale(for: cell.indexPath.row) let scale = 1 - PizzaHalfSelectorLayout.scaleFactor * abs(normScale) cell.transform = CGAffineTransform(scaleX: scale, y: scale) } } 

.transform कोशिकाओं के केंद्र के सापेक्ष आकार बदलता है। केंद्रीय सेल में normScale = 0 है, इसका आकार नहीं बदलता है:

पारदर्शिता

alpha पैरामीटर के माध्यम से पारदर्शिता को बदला जा सकता है। transform में हमने जो scale उपयोग किया वह भी उपयुक्त है।

  cell.alpha = scale 

अब पिज्जा अपने आकार और पारदर्शिता को बदलता है। पहले से ही नियमित तालिकाओं में उबाऊ नहीं है।

आधे में विभाजित

इससे पहले, हमने एक पिज्जा के साथ काम किया: हमने केंद्र से संदर्भ प्रणाली सेट की, आकार और पारदर्शिता को बदल दिया। अब आपको आधे में विभाजित करने की आवश्यकता है।

इसके लिए एक संग्रह का उपयोग करना बहुत मुश्किल है: आपको प्रत्येक आधे के लिए अपना खुद का इशारा हैंडलर लिखना होगा। दो लेआउट बनाना आसान है, प्रत्येक का अपना लेआउट है। केवल अब, एक पूरे पिज्जा के बजाय, आधा हो जाएगा।

दो नियंत्रक, एक कंटेनर

लगभग हमेशा, मैं एक स्क्रीन को कई UIViewController में तोड़ता हूं, प्रत्येक अपने स्वयं के कार्य के साथ। इस बार यह इस तरह निकला:

1. मुख्य नियंत्रक: सभी भागों में इसे इकट्ठा किया जाता है और "मिक्स" बटन।
2. आधा के लिए दो कंटेनरों के साथ नियंत्रक, एक केंद्रीय हस्ताक्षर और स्क्रॉल संकेतक।
3. एक कलेक्टर (सही सफेद) के साथ नियंत्रक।
4. कीमत के साथ निचला पैनल।

बाएं और दाएं आधे के बीच अंतर करने के लिए, मैंने एनम शुरू किया, इसे लेआउट में संग्रहित किया गया है।

 enum PizzaHalfOrientation { case left case right func opposite() -> PizzaHalfOrientation { switch self { case .left: return .right case .right: return .left } } } 

हम हिस्सों को केंद्र में स्थानांतरित करते हैं

पिछले लेआउट ने वह करना बंद कर दिया जो हम उम्मीद करते हैं: हाफ़ अपने संग्रह के केंद्र में स्थानांतरित करना शुरू कर दिया, न कि स्क्रीन के केंद्र में:

फिक्स सरल है: आपको क्षैतिज रूप से कोशिकाओं को स्क्रीन के केंद्र में आधा स्थानांतरित करने की आवश्यकता है:

  func centerAlignedFrame(for element: UICollectionViewLayoutAttributes, scale: CGFloat) -> CGRect { let hOffset = horizontalOffset(for: element, scale: scale) switch orientation { case .left: // Align to right return element.frame.offsetBy(dx: +hOffset - spaceBetweenHalves / 2, dy: 0) case .right: // Align to left return element.frame.offsetBy(dx: -hOffset + spaceBetweenHalves / 2, dy: 0) } } private func horizontalOffset(for element: UICollectionViewLayoutAttributes, scale: CGFloat) -> CGFloat { let collectionWidth = collectionView!.bounds.width let scaledElementWidth = element.frame.width * scale let hOffset = (collectionWidth - scaledElementWidth) / 2 return hOffset } 

पड़ावों के बीच की दूरी को तुरंत नियंत्रित कर लिया जाता है।

सेल ऑफसेट

गोल पिज्जा को एक वर्ग में फिट करना आसान था, और आधे के लिए आपको आधा वर्ग चाहिए:

आप फ़्रेम की गणना को फिर से लिख सकते हैं: चौड़ाई को आधा कर दें, फ़्रेम को प्रत्येक आधे के लिए अलग से केंद्र में संरेखित करें। सादगी के लिए, केवल सेल के अंदर चित्र की contentMode बदलें:

 class PizzaHalfCell: UICollectionViewCell { var halfOrientation: PizzaHalfOrientation = .left { didSet { imageView?.contentMode = halfOrientation == .left ? .topRight : .topLeft self.setNeedsLayout() } } } 

पिज्जा को लंबवत दबाएं

पिज्जा कम हो गए, लेकिन उनके केंद्रों के बीच की दूरी नहीं बदली, बड़े अंतराल दिखाई दिए। आप उनके लिए उसी तरह से क्षतिपूर्ति कर सकते हैं जिस तरह से हमने केंद्र में हिस्सों को संरेखित किया था।

  private func verticalOffset(for element: UICollectionViewLayoutAttributes, scale: CGFloat) -> CGFloat { let offsetFromCenter = offsetFromScreenCenter(element.frame) let vOffset: CGFloat = PizzaHalfSelectorLayout.verticalOffset( offsetFromCenter: offsetFromCenter, scale: scale) return vOffset } static func verticalOffset(offsetFromCenter: CGFloat, scale: CGFloat) -> CGFloat { return -offsetFromCenter / 4 * scale } 

परिणामस्वरूप, सभी क्षतिपूर्ति इस तरह दिखती हैं:

  func centerAlignedFrame(for element: UICollectionViewLayoutAttributes, scale: CGFloat) -> CGRect { let hOffset = horizontalOffset(for: element, scale: scale) let vOffset = verticalOffset (for: element, scale: scale) switch orientation { case .left: // Align to right return element.frame.offsetBy(dx: +hOffset - spaceBetweenHalves / 2, dy: vOffset) case .right: // Align to left return element.frame.offsetBy(dx: -hOffset + spaceBetweenHalves / 2, dy: vOffset) } } 

और सेल सेटिंग इस तरह है:

  private func updateCells(_ cells: [UICollectionViewLayoutAttributes]) { for cell in cells { let normScale = scale(for: cell.indexPath.row) let scale = 1 - PizzaHalfSelectorLayout.scaleFactor * abs(normScale) cell.alpha = scale cell.frame = centerAlignedFrame(for: cell, scale: scale) cell.transform = CGAffineTransform(scaleX: scale, y: scale) cell.zIndex = cellZLevel } } 

भ्रमित न करें: फ़्रेम सेटिंग परिवर्तन से पहले होनी चाहिए। यदि आप ऑर्डर बदलते हैं, तो गणनाओं का परिणाम पूरी तरह से अलग होगा।

हो गया! हमने हिस्सों को काट दिया और उन्हें केंद्र में संरेखित किया:

कैप्शन जोड़ें

UICollectionViewLayoutAttributes(forCellWith:) को सेल के रूप में उसी तरह बनाया जाता है, केवल UICollectionViewLayoutAttributes(forCellWith:) बजाय आपको कंस्ट्रक्टर UICollectionViewLayoutAttributes(forSupplementaryViewOfKind:) का उपयोग करने की आवश्यकता है
और layoutAttributesForElements(in:) में सेल मापदंडों के साथ उन्हें वापस करें

सबसे पहले, हम IndexPath द्वारा हेडर प्राप्त करने के लिए एक विधि का वर्णन IndexPath :

  override func layoutAttributesForSupplementaryView(ofKind elementKind: String, at indexPath: IndexPath) -> UICollectionViewLayoutAttributes? { let attributes = UICollectionViewLayoutAttributes( forSupplementaryViewOfKind: elementKind, with: indexPath) attributes.frame = defaultFrameForHeader(at: indexPath) attributes.zIndex = headerZLevel return attributes } 

फ़्रेम गणना defaultFrameForHeader विधि (बाद में defaultFrameForHeader ) में छिपी हुई है।

अब आप दृश्य कोशिकाओं के IndexPath प्राप्त कर सकते हैं और उनके लिए IndexPath दिखा सकते हैं:

  override func layoutAttributesForElements(in rect: CGRect) -> [UICollectionViewLayoutAttributes]? { … let visiblePaths = cells.map { $0.indexPath } let headers = self.headers(for: visiblePaths) updateHeaders(headers) return cells + headers } 

बहुत लंबा फ़ंक्शन कॉल headers(for:) में छिपा होता है headers(for:) विधि के लिए:

  func headers(for paths: [IndexPath]) -> [UICollectionViewLayoutAttributes] { let headers: [UICollectionViewLayoutAttributes] = paths.map { layoutAttributesForSupplementaryView( ofKind: UICollectionView.elementKindSectionHeader, at: $0) }.compactMap { $0 } return headers } 

zindex

अब कोशिकाएं और हस्ताक्षर "ऊंचाई" के समान स्तर पर हैं, इसलिए उन्हें एक दूसरे के ऊपर स्तरित किया जा सकता है। हेडरों को हमेशा ऊंचा रखने के लिए, उन्हें शून्य से अधिक zIndex दें। उदाहरण के लिए, 100।

हम एक स्थिति ठीक करते हैं (वास्तव में नहीं)

स्क्रीन पर तय किए गए हस्ताक्षर थोड़े गूढ़ हैं। आप ठीक करना चाहते हैं, लेकिन इसके विपरीत, लगातार bounds के साथ चलते हैं:

कोड में सब कुछ सरल है: हम स्क्रीन पर हस्ताक्षर की स्थिति प्राप्त करते हैं और इसे contentOffset स्थानांतरित करते हैं:

  func defaultFrameForHeader(at indexPath: IndexPath) -> CGRect { let inset = max(collectionView!.layoutMargins.left, collectionView!.layoutMargins.right) let y = collectionView!.bounds.minY let height = collectionView!.bounds.height let width = collectionView!.bounds.width let headerWidth = width - inset * 2 let headerHeight: CGFloat = 60 let vOffset: CGFloat = 30 let screenY = (height - itemSize.height) / 2 - headerHeight / 2 - vOffset return CGRect(x: inset, y: y + screenY, width: headerWidth, height: headerHeight) } 

हस्ताक्षरों की ऊंचाई अलग-अलग हो सकती है, प्रतिनिधि (और वहां कैश) में इस पर विचार करना बेहतर है।

हस्ताक्षर हस्ताक्षर करना

सब कुछ कोशिकाओं के समान है। वर्तमान scale आधार पर, आप सेल की पारदर्शिता की गणना कर सकते हैं। ऑफसेट को .transform माध्यम से सेट किया जा सकता है, इसलिए शिलालेख को इसके फ्रेम के सापेक्ष स्थानांतरित किया जाएगा:

  func updateHeaders(_ headers: [UICollectionViewLayoutAttributes]) { for header in headers { let scale = self.scale(for: header.indexPath.row) let alpha = 1 - abs(scale) header.alpha = alpha let translation = 20 * scale header.transform = CGAffineTransform(translationX: 0, y: translation) } } 

अनुकूलन

हेडर जोड़ने के बाद, प्रदर्शन में तेजी से गिरावट आई। ऐसा इसलिए हुआ क्योंकि हमने हस्ताक्षरों को छिपा दिया था, लेकिन फिर भी उन्हें UICollectionViewLayoutAttributes वापस कर दिया। इससे हेडर को पदानुक्रम में जोड़ा जाता है, लेआउट में भाग लेते हैं, लेकिन प्रदर्शित नहीं होते हैं। हमने केवल उन कोशिकाओं को दिखाया जो वर्तमान bounds साथ अंतर करती हैं, और हेडर को alpha द्वारा फ़िल्टर करने की आवश्यकता होती है:

  override func layoutAttributesForElements(in rect: CGRect) -> [UICollectionViewLayoutAttributes]? { … let visibleHeaders = headers.filter { $0.alpha > 0 } return cells + visibleHeaders } 

हम केंद्रीय हस्ताक्षर (मूल नुस्खा) से सहमत हैं

हमने बहुत अच्छा काम किया, लेकिन इंटरफ़ेस में एक विरोधाभास था - यदि आप दो समान हिस्सों का चयन करते हैं, तो वे एक नियमित पिज्जा में बदल जाते हैं।

हमने इसे इस तरह छोड़ने का फैसला किया, लेकिन हालत को सही ढंग से संसाधित करते हुए, यह दिखाते हुए कि यह एक नियमित पिज्जा था। हमारा नया काम समान पिज्जा के लिए केंद्र में एक लेबल दिखाना, और किनारों के साथ छिपाना है।

अकेले लेआउट को हल करना बहुत मुश्किल है, क्योंकि शिलालेख दो कलेक्टरों के जंक्शन पर है। यह आसान होगा यदि नियंत्रक, जिसमें दोनों संग्रह शामिल हैं, सभी हस्ताक्षर के आंदोलन का समन्वय करता है।

स्क्रॉल करते समय, हम नियंत्रक को वर्तमान सूचकांक पास करते हैं, यह सूचकांक को विपरीत आधे पर भेजता है। यदि सूचकांक मेल खाते हैं, तो यह मूल पिज्जा का शीर्षक दिखाता है, और यदि अलग है, तो प्रत्येक आधे के लिए हस्ताक्षर दिखाई देते हैं।

अपने लेआउट का आविष्कार कैसे करें

सबसे कठिन हिस्सा यह पता लगाना था कि अपने विचार को कंप्यूटिंग में कैसे रखा जाए। उदाहरण के लिए, मैं पिज्जा को ड्रम की तरह रोल करना चाहता हूं। समस्या को समझने के लिए, मैं 4 सामान्य चरणों से गुजरा:

1. मैंने कुछ राज्यों को आकर्षित किया।
2. मैं समझ गया कि तत्व स्क्रीन की स्थिति से कैसे संबंधित हैं (तत्व स्क्रीन के केंद्र के सापेक्ष चलते हैं)।
3. ऐसे वैरिएबल बनाए गए हैं जो स्क्रीन के मध्य (सेंट्रल पिज्जा फ्रेम, स्केल) के साथ काम करने के लिए सुविधाजनक हैं।
4. मैं सरल चरणों के साथ आया, जिनमें से प्रत्येक को सत्यापित किया जा सकता है।

राज्यों और एनिमेशन कीनोट में खींचना आसान है। मैंने मानक लेआउट लिया और पहले दो चरणों को आकर्षित किया:

वीडियो इस प्रकार है:

इसमें तीन बदलाव हुए:

1. कैश से फ्रेम के बजाय हम centerPizzaFrame ।
2. scale का उपयोग करते हुए scale इस फ्रेम से ऑफसेट पढ़ें।

3. पुनर्गणना zIndex ।

   
   

    func centerAlignedFrame(for element: UICollectionViewLayoutAttributes, scale: CGFloat) -> CGRect { let hOffset = self.horizontalOffset(for: element, scale: scale) let vOffset = self.verticalOffset (for: element, scale: scale) switch self.pizzaHalf { case .left: // Align to right return centerPizzaFrame.offsetBy(dx: hOffset - spaceBetweenHalves / 2, dy: vOffset) case .right: // Align to left return centerPizzaFrame.offsetBy(dx: -hOffset + spaceBetweenHalves / 2, dy: vOffset) } } private func horizontalOffset(for element: UICollectionViewLayoutAttributes, scale: CGFloat) -> CGFloat { let collectionWidth = self.collectionView!.bounds.width let scaledElementWidth = centerPizzaFrame.width * scale let hOffset = (collectionWidth - scaledElementWidth) / 2 return hOffset } private func verticalOffset(for element: UICollectionViewLayoutAttributes, scale: CGFloat) -> CGFloat { let totalProgress = self.scale(for: element.frame).normalized(by: 1) let criticalOffset = PizzaHalfSelectorLayout.criticalOffsetFromCenter * 1.1 return totalProgress * criticalOffset } 

   
   

एक बार जब सेल ओवरलैप हो जाते हैं, तो आपको उन्हें सही क्रम में सेट करने की आवश्यकता होती है zIndex। विचार यह है: केंद्रीय पिज्जा के करीब सेल, स्क्रीन के करीब, और बड़ा zIndex।

  private func updateCells(_ cells: [UICollectionViewLayoutAttributes]) { for cell in cells { let normScale = self.scale(for: cell.indexPath.row) let scale = 1 - PizzaHalfSelectorLayout.scaleFactor * abs(normScale) cell.alpha = 1//scale cell.frame = self.centerAlignedFrame(for: cell, scale: scale) cell.transform = CGAffineTransform(scaleX: scale, y: scale) cell.zIndex = self.zIndex(row: cell.indexPath.row) } } private func zIndex(row: Int) -> Int { let numberOfCells = self.cache.defaultFrames.count if row == self.currentPizzaIndexInt { return numberOfCells } else if row < self.currentPizzaIndexInt { return row } else { return numberOfCells - row - 1 } } 

फिर, यदि तीसरा सेल चालू है, तो यह इस तरह निकलता है:

 row: zIndex` 0: 0 1: 1 2: 2 3: 10 —   4: 5 5: 4 6: 3 7: 2 8: 1 9: 0 

मुझे उत्पादन में ऐसा कोई लेआउट नहीं मिला, इसके लिए मुझे पारदर्शी पृष्ठभूमि वाले चित्रों की आवश्यकता होगी।

रिलीज की तारीख

इस तरह के एक इंटरफ़ेस का निर्माण, हम एक छोटे से प्रयोग में शामिल हो गए: पहली बार हमने इस तरह के एक असामान्य लेआउट को लिखा, और बाद में कार्ड स्क्रीन पर एक संवादात्मक संक्रमण जोड़ा। प्रयोग ने भुगतान किया: शीर्ष बिक्री में आधा-पिज्जा फट गया और केवल क्लासिक पेपरोनी से हारकर दूसरा स्थान हासिल किया।

बेशक, उत्पादन को और अधिक काम की जरूरत है:

• आधे में पिज्जा चित्र काटें,
• , : , ,
• ,
• ,
• -,
• «»,
• Voice Over.

:

github , .

UICollectionViewLayout , A Tour of UICollectionView

, .