UICollectionView अंतर मार्जिन

Question

मेरे पास एक UICollectionViewफोटो है जो दिखाता है। मैंने उपयोग करते हुए संग्रह क्रम बनाया है UICollectionViewFlowLayout। यह अच्छा काम करता है लेकिन मैं मार्जिन पर अंतर रखना चाहूंगा। क्या यह संभव है कि UICollectionViewFlowLayoutमैं अपने स्वयं के कार्यान्वयन का उपयोग करूं या करूं UICollectionViewLayout?

Answer 1

आप collectionView:layout:insetForSectionAtIndex:अपने लिए विधि का उपयोग कर सकते हैं UICollectionViewया अपने से जुड़ी वस्तु की sectionInsetसंपत्ति सेट UICollectionViewFlowLayoutकर सकते हैं UICollectionView:

- (UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout insetForSectionAtIndex:(NSInteger)section{
    return UIEdgeInsetsMake(top, left, bottom, right);
}

या

UICollectionViewFlowLayout *aFlowLayout = [[UICollectionViewFlowLayout alloc] init];
[aFlowLayout setSectionInset:UIEdgeInsetsMake(top, left, bottom, right)];

स्विफ्ट 5 के लिए अपडेट किया गया

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAt section: Int) -> UIEdgeInsets {
       return UIEdgeInsets(top: 25, left: 15, bottom: 0, right: 5)
    }

Comments

मैं ऊर्ध्वाधर प्रवाह लेआउट का उपयोग करते समय काम करने के लिए बाएं और दाएं इनसेट नहीं लगता है ...

— जॉन

अब उपवर्गित UICollectionViewFlowLayout के सेक्शन इनसेट विधि को ओवरराइड करने से भी कोई प्रभाव नहीं पड़ता है। नीचे वर्णित कार्यों की संपत्ति सेट करना।

— Dren

NB: UICollectionViewDelegateFlowLayoutविधि का उपयोग करने के लिए ViewController प्रतिनिधियों की अपनी सूची में जोड़ने के लिए याद रखेंinsetForSectionAtIndex

— डेविड डगलस

Answer 2

इंटरफ़ेस बिल्डर में इनसेट सेट करना जैसे नीचे स्क्रीनशॉट में दिखाया गया है

परिणाम कुछ इस तरह होगा:

Comments

महान जवाब, बस यह इंगित करना चाहता था कि आपको न्यूनतम रिक्ति के साथ भी खेलना होगा ताकि अनुभाग इनसेट अच्छी तरह से काम करे।

— स्मित यश

Answer 3

पूरे पर रिक्ति जोड़ने के लिए UICollectionView:

UICollectionViewFlowLayout *flow = (UICollectionViewFlowLayout*) collection.collectionViewLayout;
flow.sectionInset = UIEdgeInsetsMake(topMargin, left, bottom, right);

एक ही पंक्ति के तत्वों (यदि आप क्षैतिज रूप से स्क्रॉल कर रहे हैं) और उनके आकारों के बीच रिक्ति के साथ खेलने के लिए :

flow.itemSize = ...;
flow.minimumInteritemSpacing = ...;

Comments

यह काम करता है, लेकिन collection.collectionViewLayout@Pooja द्वारा उदाहरण में एक कलाकार की जरूरत है: UICollectionViewFlowLayout *flow = (UICollectionViewFlowLayout*) self.collectionViewLayout;

— jwj

स्विफ्ट में कास्टिंगif let flow = collectionViewLayout as? UICollectionViewFlowLayout { flow.itemSize = CGSize(width: 100, height: 100) }

— एमिली

Answer 4

स्विफ्ट 4

    let flow = collectionView.collectionViewLayout as! UICollectionViewFlowLayout // If you create collectionView programmatically then just create this flow by UICollectionViewFlowLayout() and init a collectionView by this flow.

    let itemSpacing: CGFloat = 3
    let itemsInOneLine: CGFloat = 3
    flow.sectionInset = UIEdgeInsets(top: 0, left: 0, bottom: 0, right: 0)
    let width = UIScreen.main.bounds.size.width - itemSpacing * CGFloat(itemsInOneLine - 1) //collectionView.frame.width is the same as  UIScreen.main.bounds.size.width here.
    flow.itemSize = CGSize(width: floor(width/itemsInOneLine), height: width/itemsInOneLine)
    flow.minimumInteritemSpacing = 3
    flow.minimumLineSpacing = 3

EDIT XCode 11.4 और स्विफ्ट 5

let flow = collectionView.collectionViewLayout as! UICollectionViewFlowLayout

काम नहीं करता है। नीचे दिए गए कार्यों का उपयोग करें।

let flow = UICollectionViewFlowLayout()

Comments

क्या रिक्ति के लिए रंग सेट करने का एक तरीका है?

— डैनियल

@ MartínDaniel बस सेट backgroundColorकी collectionView। या सुपर व्यू जो भी हो।

— विलियम हू

लेकिन किनारों पर कोई मार्जिन नहीं है

— user924

किनारों पर @ user924 मार्जिन UIEdgeInsets (शीर्ष: बाएं: नीचे: दाएं:) के साथ सेट किया जा सकता है। यदि लंबवत स्क्रॉल करते हैं, तो बाएँ / दाएँ इनसेट सेट करें। यदि क्षैतिज रूप से स्क्रॉल किया जाता है, तो ऊपर और नीचे इनसेट सेट करें।

— मर्सी

Answer 5

इस पृष्ठ में कुछ गलत जानकारी को ठीक करने के लिए:

1- न्यूनतम इन्टरमिटेमस्पेसिंग : न्यूनतम एक ही पंक्ति में वस्तुओं के बीच उपयोग करने के लिए न्यूनतम रिक्ति।

डिफ़ॉल्ट मान: 10.0

(लंबवत स्क्रॉल ग्रिड के लिए, यह मान एक ही पंक्ति में आइटम के बीच न्यूनतम रिक्ति का प्रतिनिधित्व करता है।)

2- न्यूनतमलाइनिंग : ग्रिड में वस्तुओं की पंक्तियों के बीच उपयोग करने के लिए न्यूनतम अंतर।

Ref: http://developer.apple.com/library/ios/#documentation/uikit/reference/UICollectionViewFlowLayout_class/Reference/Reference.html

Comments

यह वर्गों के बीच रिक्ति को प्रभावित नहीं करता है, केवल उसी सेक्शन के भीतर वस्तुओं के बीच?

— Crashalot

@ चरसालोट - क्या आप सुनिश्चित हैं कि आपका मतलब मिनिमल स्पेसिंग से नहीं है? यानी कोशिकाओं की हर पंक्ति? यदि आप वास्तव में सेक्शन का उपयोग कर रहे हैं तो सेक्शन इनसेट के विकल्प भी मौजूद हैं।

— चंकी

यह मेरे लिए स्टोरीबोर्ड इंटरफ़ेस के माध्यम से कर रहा है। मैं क्षैतिज केवल संग्रह विचारों के लिए एक समाधान की तलाश कर रहा था। धन्यवाद +10

— केमिकोफा भूत

Answer 6

आधुनिक स्विफ्ट, स्वचालित लेआउट गणना

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

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

यहाँ कोड है:

// Create flow layout
let flow = UICollectionViewFlowLayout()

// Define layout constants
let itemSpacing: CGFloat = 1
let minimumCellWidth: CGFloat = 120
let collectionViewWidth = collectionView!.bounds.size.width

// Calculate other required constants
let itemsInOneLine = CGFloat(Int((collectionViewWidth - CGFloat(Int(collectionViewWidth / minimumCellWidth) - 1) * itemSpacing) / minimumCellWidth))
let width = collectionViewWidth - itemSpacing * (itemsInOneLine - 1)
let cellWidth = floor(width / itemsInOneLine)
let realItemSpacing = itemSpacing + (width / itemsInOneLine - cellWidth) * itemsInOneLine / max(1, itemsInOneLine - 1))

// Apply values
flow.sectionInset = UIEdgeInsets(top: 0, left: 0, bottom: 0, right: 0)
flow.itemSize = CGSize(width: cellWidth, height: cellWidth)
flow.minimumInteritemSpacing = realItemSpacing
flow.minimumLineSpacing = realItemSpacing

// Apply flow layout
collectionView?.setCollectionViewLayout(flow, animated: false)

Comments

यदि itemsInOneLine1 है तो यह शून्य में विभाजित होने के कारण एक NaN में परिणाम देगा:itemsInOneLine / (itemsInOneLine - 1)

— TylerJames

@TylerJames धन्यवाद! मैंने समस्या को ठीक करने के लिए कोड को समायोजित किया;)

— fredpi

Answer 7

उपयोग setMinimumLineSpacing:और setMinimumInteritemSpacing:पर UICollectionViewFlowLayout-Object।

Comments

नहीं, यह उम्मीद के मुताबिक काम नहीं करता है। setMinimumLineSpacing है: एक ही पंक्ति में वस्तुओं के बीच उपयोग करने के लिए न्यूनतम रिक्ति। और setMinimumInteritemSpacing है: ग्रिड में वस्तुओं की पंक्तियों के बीच उपयोग करने के लिए न्यूनतम रिक्ति। मेरा सवाल तत्वों के बीच अंतर नहीं मार्जिन के बारे में है। जैसे। पहले तत्व का बायां और ऊपर का गोला।

— मर्ट

एक वर्टिकल ट्रोलडायरेक्शन मानकर आप पहली और आखिरी पंक्ति के टॉप और बॉटम स्पेसिंग के लिए contentInset का उपयोग कर सकते हैं। इसके अलावा आप अपने सेल में अपना मार्जिन जोड़ सकते हैं।

— जोनाथन किचन

Answer 8

का उपयोग करना collectionViewFlowLayout.sectionInsetया collectionView:layout:insetForSectionAtIndex:सही हैं।

हालाँकि, यदि आपके संग्रह में कई खंड हैं और आप पूरे संग्रह में मार्जिन जोड़ना चाहते हैं, तो मैं स्क्रॉल व्यू सामग्री का उपयोग करने की सलाह देता हूं:

UIEdgeInsets collectionViewInsets = UIEdgeInsetsMake(50.0, 0.0, 30.0, 0.0);
self.collectionView.contentInset = collectionViewInsets;
self.collectionView.scrollIndicatorInsets = UIEdgeInsetsMake(collectionViewInsets.top, 0, collectionViewInsets.bottom, 0);

Answer 9

इस के बीच का CollectionItemउपयोग करने के लिए जगह है

viewdidload में यह दो लाइन लिखें

UICollectionViewFlowLayout *collectionViewLayout = (UICollectionViewFlowLayout*)self.collectionView.collectionViewLayout;
collectionViewLayout.sectionInset = UIEdgeInsetsMake(<CGFloat top>, <CGFloat left>, <CGFloat bottom>, <CGFloat right>)

Answer 10

अपने से जुड़ी वस्तु की insetForSectionAtसंपत्ति निर्धारित UICollectionViewFlowLayoutकरेंUICollectionView

इस प्रोटोकॉल को जोड़ना सुनिश्चित करें

UICollectionViewDelegateFlowLayout

तीव्र

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAt section: Int) -> UIEdgeInsets {
        return UIEdgeInsets (top: top, left: left, bottom: bottom, right: right)
    }

उद्देश्य सी

- (UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout insetForSectionAtIndex:(NSInteger)section{
    return UIEdgeInsetsMake(top, left, bottom, right);
}

Answer 11

ऑब्जेक्टिव-सी में

CGFloat spacing = 5;
UICollectionViewFlowLayout *flow = (UICollectionViewFlowLayout*)_habbitCollectionV.collectionViewLayout;
flow.sectionInset = UIEdgeInsetsMake(0, spacing, 0, spacing);
CGFloat itemsPerRow = 2;
CGRect screenRect = [[UIScreen mainScreen] bounds];
CGFloat oneMore = itemsPerRow + 1;
CGFloat width = screenRect.size.width - spacing * oneMore;
CGFloat height = width / itemsPerRow;

flow.itemSize = CGSizeMake(floor(height), height);
flow.minimumInteritemSpacing = spacing;
flow.minimumLineSpacing = spacing;

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

Comments

अच्छा ... इट्स वर्क परफेक्ट।

— सोहिल

Answer 12

निर्दिष्ट सेल में मार्जिन जोड़ने के लिए, आप इस कस्टम फ्लो लेआउट का उपयोग कर सकते हैं। https://github.com/voyages-sncf-technologies/VSCollectionViewCellInsetFlowLayout/

extension ViewController : VSCollectionViewDelegateCellInsetFlowLayout 
{
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForItemAt indexPath: IndexPath) -> UIEdgeInsets {
        if indexPath.item == 0 {
            return UIEdgeInsets(top: 0, left: 0, bottom: 10, right: 0)
        }
        return UIEdgeInsets.zero
    }
}

Answer 13

तेजी से 4 और autolayout में, आप उपयोग कर सकते हैं sectionInset इस तरह:

let layout = UICollectionViewFlowLayout()
        layout.scrollDirection = .vertical
        layout.itemSize = CGSize(width: (view.frame.width-40)/2, height: (view.frame.width40)/2) // item size
        layout.sectionInset = UIEdgeInsetsMake(10, 10, 10, 10) // here you can add space to 4 side of item
        collectionView = UICollectionView(frame: self.view.bounds, collectionViewLayout: layout) // set layout to item
        collectionView?.register(ProductCategoryCell.self, forCellWithReuseIdentifier: cellIdentifier) // registerCell
        collectionView?.backgroundColor = .white // background color of UICollectionView
        view.addSubview(collectionView!) // add UICollectionView to view

Answer 14

प्रत्येक अनुभाग के बीच 10px जुदाई जोड़ने के लिए बस इसे लिखें

flowLayout.sectionInset = UIEdgeInsetsMake(0.0, 0.0,10,0);

Comments

जब UICollectionReusableView का उपयोग कर रहे हैं, तो UICollectionElementKindSectionFooter का उपयोग करने पर, आपका समाधान काम नहीं करेगा

— प्रतीक जमरिया

Answer 15

- (UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout insetForSectionAtIndex:(NSInteger)section {       
         return UIEdgeInsetsMake(7, 10, 5, 10);    
   }