एक UICollectionView में छवियों को प्रदर्शित करें - छवियों के बीच निश्चित लंबवत अंतर को कैसे प्राप्त करें?

Question

मैं एक आईफोन ऐप (आईओएस 6) में छवियों का ग्रिड प्रस्तुत करने के लिए एक यूआईसीओलेक्शन व्यू का उपयोग कर रहा हूं।

मैं UICollectionView के लिए लंबवत स्क्रॉलिंग का उपयोग कर रहा हूं, और सभी छवियों ने चौड़ाई और अलग-अलग ऊंचाई तय की है। छवियों की चौड़ाई सेट की गई है ताकि एक आईफोन पर, यह छवियों के 3 कॉलम प्रदर्शित करता है। यह ठीक काम करता है, और मुझे ग्रिड व्यू में प्रस्तुत छवियां मिलती हैं।

हालांकि, बाद से मेरी छवियाँ ऊंचाई विविध स्तर है, एक कॉलम में छवियों बीच की लंबवत स्पेसिंग भिन्न होता है और यह बहुत अच्छा नहीं लग रहा है, जैसा कि आप निम्न छवि में देख सकते हैं (एचटीएमएल में किए गए एक mockup):

मैं इसके बजाय अधिक तरल प्रवाह प्राप्त करना चाहता हूं, जहां कॉलम में छवियों के बीच लंबवत अंतर समान होता है। निम्नलिखित mockup दिखाता है कि कैसे मैं यह काम करने के लिए करना चाहते हैं:

यह कैसे हल करने के लिए की कोई भी विचार?

इसके अलावा, एक बोनस प्रश्न के रूप में, किसी को भी करता है, तो अनुप्रयोग iOS6 के लिए नहीं बनाया गया था एक ही समस्या हल करने के लिए (के बाद से UICollectionView iOS6 में ही उपलब्ध है) एक तरह से पता है। या तो किसी तृतीय पक्ष घटक का उपयोग करके या मानक आईओएस नियंत्रण के साथ इसे हल करके।

Answer 1

उपवर्ग UICollectionViewFlowLayout और उस कक्षा में इन तरीकों में जोड़ें। (नोट: यह एक ऊर्ध्वाधर अभिविन्यास मान लिया गया है, और यह पहली पंक्ति को छोड़ देता है, और यह उन दोनों के बीच एक निरंतर 10 पिक्सल है देखें:। how do you determine spacing between cells in UICollectionView flowLayout आप क्षैतिज संस्करण

- (NSArray *)layoutAttributesForElementsInRect:(CGRect)rect { 
NSArray* arr = [super layoutAttributesForElementsInRect:rect]; 
for (UICollectionViewLayoutAttributes* atts in arr) { 
    if (nil == atts.representedElementKind) { 
     NSIndexPath* ip = atts.indexPath; 
     atts.frame = [self layoutAttributesForItemAtIndexPath:ip].frame; 
    } 
} 
return arr; 
} 

- (UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath { 
UICollectionViewLayoutAttributes* atts = 
[super layoutAttributesForItemAtIndexPath:indexPath]; 

if (indexPath.item == 0 || indexPath.item == 1) // degenerate case 1, first item of section 
    return atts; 

NSIndexPath* ipPrev = 
[NSIndexPath indexPathForItem:indexPath.item-2 inSection:indexPath.section]; 

CGRect fPrev = [self layoutAttributesForItemAtIndexPath:ipPrev].frame; 
CGFloat rightPrev = fPrev.origin.y + fPrev.size.height + 10; 
if (atts.frame.origin.y <= rightPrev) // degenerate case 2, first item of line 
    return atts; 

CGRect f = atts.frame; 
f.origin.y = rightPrev; 
atts.frame = f; 
return atts; 
} 

Answer 2

स्विफ्ट 3 मेरे लिए इस कोड को काम के लिए जरूरत है, शीर्ष पर पहली पंक्ति की जगह सहित ...

override func layoutAttributesForElements(in rect: CGRect) -> [UICollectionViewLayoutAttributes]? { 
    let arr = super.layoutAttributesForElements(in: rect) 

    for atts:UICollectionViewLayoutAttributes in arr! { 
     if nil == atts.representedElementKind { 
      let ip = atts.indexPath 
      atts.frame = (self.layoutAttributesForItem(at: ip)?.frame)! 
     } 
    } 
    return arr 
} 

override func layoutAttributesForItem(at indexPath: IndexPath) -> UICollectionViewLayoutAttributes? { 
    let atts = super.layoutAttributesForItem(at: indexPath) 

    if indexPath.item == 0 || indexPath.item == 1 { 
     var frame = atts?.frame; 
     frame?.origin.y = sectionInset.top; 
     atts?.frame = frame!; 
     return atts 
    } 

    let ipPrev = IndexPath(item: indexPath.item - 2, section: indexPath.section) 

    let fPrev = self.layoutAttributesForItem(at: ipPrev)?.frame 

    let rightPrev = (fPrev?.origin.y)! + (fPrev?.size.height)! + 10 

    if (atts?.frame.origin.y)! <= rightPrev { 
     return atts 
    } 

    var f = atts?.frame 
    f?.origin.y = rightPrev 
    atts?.frame = f! 
    return atts 
}