UICollectionViewLayout का अनुकूलन। कला के नाम पर

हे सब लोग!

परिचय

मैं निकटतम विदेशी देश (रूस में) के एक प्रांतीय देश के एक प्रांतीय शहर में एक आईओएस डेवलपर के रूप में काम करता हूं। लगभग डेढ़ साल पहले, देश ने फैसला किया कि मैंने उसे कुछ दिया है, और विशेष रूप से: मैंने अपने जीवन के लिए एक साल, कम कुशल काम का एक साल, अपने परिवार और काम पर घर लौटने के एक साल के लिए बकाया ... - संक्षेप में, मुझे सेना में ड्राफ्ट किया गया था। और इस मामले के लिए, मैं किसी भी तरह अपने सभी फीचर्स के साथ iOS 6 को जारी करने से चूक गया, जिसमें लंबे समय से अधिक यूआईसीओलेक्टियन व्यू भी शामिल है।
आउटफिट्स, ट्रेनिंग ग्राउंड्स, एक चार्टर और अन्य आकर्षक चीजों के साथ समाप्त होने के बाद, मैं घर लौट आया, फिर से काम करना शुरू कर दिया, और निश्चित रूप से एक प्रोजेक्ट जिसमें ग्राहक को डेटा को "पिन्टरेस्ट बोर्ड" के रूप में प्रदर्शित करने की आवश्यकता थी, अर्थात्, UICollectionView ही, इंतजार नहीं किया।

परियोजना

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

UICollectionViewFlowLayout

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


आप स्क्रीनशॉट में दो चीजें देख सकते हैं।

• पहला: UICollectionViewFlowLayout तत्वों को व्यवस्थित करता है ताकि शीर्ष पंक्ति में तत्व का केंद्र नीचे के तत्वों के केंद्र से ऊपर हो। एक शब्द में, यह तुरंत रोल नहीं करता है।
• दूसरा: एक उदाहरण के रूप में, मैंने सर्वोच्च-संस्थापक के कृति की पृष्ठभूमि के खिलाफ अवांट-गार्डे कलाकारों द्वारा अभी भी अलिखित चित्रों को पोस्ट करने का निर्णय लिया।

RFQuiltLayout

या तो मेरे googling कौशल बेहद कमजोर हैं, या RFQuiltLayout एकमात्र टर्नकी समाधान है जो मेरे मामले में रोल करने के लिए लगता है।
यह वर्ग चर ब्लॉकपिक्सल्स का उपयोग करता है, जो डिफ़ॉल्ट सेल आकार CGSize को संग्रहीत करता है। प्रतिनिधि विधि

- (CGSize) blockSizeForItemAtIndexPath:(NSIndexPath *)indexPath; 

प्रत्येक कोशिका के ब्लॉकपिक्सल्स के लिए गुणक लौटाता है। यही है, अगर blockPixels = {100, 100}, और blockSizeForItemAtIndexPath = {2.2, 0.8}, तो सेल का आकार {220, 80} होगा।
मेरी राय में, यह थोड़ा अजीब सिस्टम है, मैं {1, 1} को ब्लॉकपिक्सल सेट करना चाहता हूं और प्रतिनिधि विधि में तत्व के लिए आवश्यक आकार वापस करना चाहता हूं, लेकिन इस मामले में प्लेसमेंट एल्गोरिदम 15 तत्वों के लिए भी बहुत लंबा समय लेता है, और इसे जगह देने में 100 तत्व लगते हैं। आईपैड की तुलना में कंप्यूटिंग पावर अचानक। मेरे पास धैर्य के एल्गोरिथ्म को अलग करने के लिए पर्याप्त समय नहीं है, इसलिए मैंने चयन विधि द्वारा ब्लॉकपिक्सल के लिए {20, 20} का मूल्य चुना, जिसने मेरी 15 कोशिकाओं के साथ, सामान्य प्रदर्शन और अच्छी प्लेसमेंट सटीकता दी।
फटी एड़ियों को बनाने के लिए, मुझे थोड़ी सी चाल का उपयोग करना पड़ा - वास्तव में, मैंने सेल के आकारों को स्वयं नहीं छुआ, क्योंकि प्लेसमेंट के चरण में मुझे यह पता नहीं चल पाया कि सेल किस पंक्ति में है, लेकिन तस्वीर को स्थापित करते समय मैंने पंक्ति की जाँच की और पहली और आखिरी पंक्तियों के लिए पंक्तियों की ऊंचाई कम की तस्वीरें। छवियों को ऊपर और नीचे से थोड़ा काट दिया गया था। यदि बहुत कुछ, जिसकी तस्वीर क्रॉपिंग के तहत आई थी, एक चित्र था, तो लोगों ने मुकुट और उनकी छाती के नीचे खो दिया, अगर बहुत चीनी मूर्तिकला था, तो ड्रैगन बिना शिखा के प्रदर्शित किया गया था, और फ़ारसी कालीनों पर गंदे हैक ने ढेर काट दिया। लेकिन ग्राहक संतुष्ट था, जिसका अर्थ है कि मैं प्रसन्न था, तब तक, जब तक कि तकनीकी विशिष्टताओं को थोड़ा ठीक नहीं किया गया था। मुख्य स्क्रीन पर दयनीय 15 तत्वों के बजाय, सभी बहुत सारे प्रदर्शित होने चाहिए थे। सभी पंद्रह सौ।

अधिक कला!

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

तो SKRaggyCollectionViewLayout

तुरंत मैं कक्षा के गूंगे नाम के लिए माफी माँगता हूँ।
सबसे पहले, मैंने इसके प्रतिनिधि के लिए एक प्रोटोकॉल परिभाषित किया।

 @protocol SKRaggyCollectionViewLayoutDelegate <UICollectionViewDelegate> - (float)collectionLayout:(SKRaggyCollectionViewLayout*)layout preferredWidthForItemAtIndexPath:(NSIndexPath *)indexPath; @optional - (UIEdgeInsets)collectionLayout:(SKRaggyCollectionViewLayout*)layout edgeInsetsForItemAtIndexPath:(NSIndexPath *)indexPath; @end 

चूंकि प्रतिनिधि सेल की ऊंचाई को प्रभावित नहीं कर सकता है, वह केवल प्रबंधक को उस चौड़ाई से गुजरता है जिसे वह किसी विशेष सेल के लिए देखना चाहता है। खैर, और वह विधि जो UIEdgeInsets (सेल के लिए आंतरिक पैडिंग) लौटाती है, जहां इसके बिना।
और निश्चित रूप से, वह संपत्ति जो पंक्तियों की संख्या को संग्रहीत करती है, एक चलना की तरह चलना है, कक्षा को सार्वभौमिक होने दें, न कि केवल तीन पंक्तियों के लिए!

 @property (nonatomic, assign) NSUInteger numberOfRows; 

अब कार्यान्वयन।
Apple हमें बताता है कि अगर हम UICollectionView के किसी भी अतिरिक्त तत्वों से परेशान नहीं होना चाहते हैं, जैसे कि अनुपूरक और सजावट दृश्य, तो हमें कम से कम निम्नलिखित विधियों को ओवरराइड करना होगा:

 - (CGSize)collectionViewContentSize; - (NSArray*)layoutAttributesForElementsInRect:(CGRect)bounds; - (UICollectionViewLayoutAttributes*)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath; - (BOOL)shouldInvalidateLayoutForBoundsChange:(CGRect)newBounds; 

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

 - (UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath { UIEdgeInsets insets = UIEdgeInsetsZero; if ([self.delegate respondsToSelector:@selector(collectionLayout:edgeInsetsForItemAtIndexPath:)]) { insets = [self.delegate collectionLayout:self edgeInsetsForItemAtIndexPath:indexPath]; } // Get saved frame and edge insets for given path and create attributes object with them CGRect frame = [self frameForIndexPath:indexPath]; UICollectionViewLayoutAttributes* attributes = [UICollectionViewLayoutAttributes layoutAttributesForCellWithIndexPath:indexPath]; attributes.frame = UIEdgeInsetsInsetRect(frame, insets); return attributes; } 

वास्तव में, कुछ भी दिलचस्प नहीं है - हम प्रतिनिधि से UIEdgeInsets प्राप्त करते हैं, यदि वह उन्हें हमें प्रदान करता है, तो हमें फ़्रेमफ़ोरइंडेक्सपैथ विधि का उपयोग करके फ़्रेम मिलता है, प्राप्त UIEdgeIstets और CGRect के साथ विशेषताओं को बनाएं और वापस करें। लेकिन फ़्रेमफ़ोरइंडेक्सपथ विधि में, शर्मिंदगी का मुख्य हिस्सा मुझसे छिपा हुआ है।

 - (CGRect)frameForIndexPath:(NSIndexPath*)path { // if there is saved frame for given path, return it NSValue *v = [self.framesByIndexPath objectForKey:path]; if (v) return [v CGRectValue]; // Find X-coordinate and a row which are the closest to the collection left corner. A cell for this path should be placed here. int currentRow = 0; float currentX = MAXFLOAT; for (int i = 0; i < self.edgeXPositions.count; i++) { float x = [[self.edgeXPositions objectAtIndex:i] floatValue]; if (x < currentX) { currentRow = i; currentX = x; } } // Calculate cell frame values based on collection height, current row, currentX, the number of rows and delegate's preferredWidthForItemAtIndexPath: value // If variableFrontierHeight is YES this value will be adjusted for the first and last rows float maxH = self.collectionView.frame.size.height; float rowMaxH = maxH / self.numberOfRows; float x = currentX; float y = rowMaxH * currentRow; float w = [self.delegate collectionLayout:self preferredWidthForItemAtIndexPath:path]; float h = self.collectionView.frame.size.height / self.numberOfRows; float newH = h; // Adjust height of the frame if we need raggy style if (self.variableFrontierHeight) { if (currentRow == 0) { float space = arc4random() % self.randomFirstRowVar; if (self.prevWasTallFirst) { space += self.fixedFirstRowVar; } self.prevWasTallFirst = !self.prevWasTallFirst; y += space; newH -= space; } else if (currentRow == self.numberOfRows - 1) { float space = arc4random() % self.randomLastRowVar; if (self.prevWasTallLast) { space += self.fixedLastRowVar; } self.prevWasTallLast = !self.prevWasTallLast; newH -= space; } } // Assure that we have preferred height more than 1 h = h <= 1 ? 1.f : h; // Adjust frame width with new value of height to save cell's right proportions w = w * newH / h; // Save new calculated data ad return [self.edgeXPositions replaceObjectAtIndex:currentRow withObject:[NSNumber numberWithFloat:x + w]]; CGRect currentRect = CGRectMake(x, y, w, newH); NSValue *value = [NSValue valueWithCGRect:currentRect]; [self.indexPathsByFrame setObject:path forKey:value]; [self.framesByIndexPath setObject:value forKey:path]; return currentRect; } 

यदि मेरा पास्ता कोड और अर्ध-अंग्रेजी टिप्पणियां बहुत स्पष्ट नहीं हैं, तो मैं स्पष्टता के अधिक अराजकता को छद्म पृष्ठ पर लाने की कोशिश करूंगा:

वैसे, हमें इन सभी indexPathsByFrame, फ्रेमबाय इंडेक्सएक्सपैथ और क्या-और-में-कैश्ड को अमान्यलेलेटआउट विधि से साफ़ करना नहीं भूलना चाहिए। स्वाभाविक रूप से, लापता नहीं [सुपर अमान्यलूटआउट]।

वापस संतोष करने के लिए। जाहिर है, क्षैतिज स्क्रॉल के साथ हमारे मामले में, इसे कुछ इस तरह से देखना चाहिए:

 - (CGSize)collectionViewContentSize { return CGSizeMake(self.edgeX, self.collectionView.frame.size.height); } 

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

 - (void)prepareLayout { [super prepareLayout]; // calculate and save frames for all indexPaths. Unfortunately, we must do it for all cells to know content size of the collection for (int i = 0; i < [self.collectionView.dataSource collectionView:self.collectionView numberOfItemsInSection:0]; i++) { NSIndexPath *path = [NSIndexPath indexPathForItem:i inSection:0]; [self frameForIndexPath:path]; } } 

हां, यदि सैकड़ों हजारों कोशिकाएं हैं, तो संग्रह लोड करने की जल्दी में नहीं होगा, लेकिन मुझे कोई अन्य तुच्छ रास्ता नहीं दिखता है।
और अंत में, यह अंतिम विधि को ओवरराइड करने के लिए बना हुआ है - लेआउटएट्टीजेजफॉर ईन्सेल्सइंटरक्ट। इसमें, आपको उन सभी तत्वों के लिए विशेषताओं को वापस करने की आवश्यकता है जो इस क्षेत्र में आते हैं। यह कहा जाता है कि हर बार संग्रह को उसके फ्रेम के आकार तक स्क्रॉल किया जाता है। तब ऐसा लगता है कि यह सब कैश्ड है, इसलिए इस विधि को सिर्फ contentSize. उपलब्धता / फ्रेम.size. उपलब्धता समय कहा जाएगा।
जिसे "माथे" कहा जाता है उसका मेरा कार्यान्वयन: हम प्रत्येक तत्व के लिए फ्रेम के माध्यम से देखते हैं, यदि वे इस क्षेत्र के साथ अंतर करते हैं, तो हम इसे वापस आये हुए सरणी में जोड़ते हैं।

 - (NSArray*)layoutAttributesForElementsInRect:(CGRect)bounds { if (CGRectEqualToRect(bounds, self.previousLayoutRect)) { return self.previousLayoutAttributes; } [self.previousLayoutAttributes removeAllObjects]; self.previousLayoutRect = bounds; NSArray *allFrames = self.framesByIndexPath.allValues; for (NSValue *frameValue in allFrames) { CGRect rect = [frameValue CGRectValue]; if (CGRectIntersectsRect(rect, bounds)) { [self.previousLayoutAttributes addObject:[self layoutAttributesForItemAtIndexPath:[self.indexPathsByFrame objectForKey:[NSValue valueWithCGRect:rect]]]]; } } return self.previousLayoutAttributes; } 

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

अंतभाषण

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

• एप्पल से गाइड
• कुछ दोस्त से हाइड - मेरी राय में, बहुत अधिक अपमानजनक
  
• मेरा जीथूब कोड
  

PS उन्होंने मुझे पहले ही लिखा था कि अंतिम स्पॉइलर में कोई चित्र नहीं है। मैंने तीन बार एक ही ऑपरेशन किया - मैंने इसे लापता लिंक डालकर संपादित किया, इसे बचाया, देखा कि बदलाव हुए थे, पृष्ठ को बंद कर दिया, इसे फिर से खोला और शाप दिया - चित्र फिर से गायब हो गया। इसके अलावा, लिंक या यहीं , जो एक ही तस्वीर के लिए नेतृत्व करना चाहिए, अपने कार्यात्मक कर्तव्यों को पूरा करने के लिए बंद हो गया है। मुसीबत।
बस के मामले में, मैं इस अनधिकृत लिंक को केवल पाठ के साथ यहां छोड़ता हूं
habr.habrastorage.org/post_images/0e1/0c7/be4/0e10c7be44690901268d5dfa9e532d0e.png