UICollectionView ระยะห่างระยะห่าง


181

ฉันมีรูปUICollectionViewที่แสดง ผมได้สร้าง collectionview UICollectionViewFlowLayoutโดยใช้ มันใช้งานได้ดี แต่ฉันต้องการเว้นระยะขอบ มันเป็นไปได้ที่จะทำใช้UICollectionViewFlowLayoutหรือฉันจะต้องดำเนินการของตัวเองUICollectionViewLayout?

คำตอบ:


332

คุณสามารถใช้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)];

อัปเดตสำหรับSwift 5

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

35
ฉันดูเหมือนจะไม่ได้รับซ้ายและขวา insets ทำงานเมื่อใช้รูปแบบการไหลในแนวตั้ง ...
John

1
ตอนนี้การแทนที่เมธอด sectionInset ของคลาส UICollectionViewFlowLayout แบบ subclassed ก็ไม่มีผลเช่นกัน การตั้งค่าคุณสมบัติที่อธิบายด้านล่างใช้งานได้
Dren

4
หมายเหตุ: อย่าลืมเพิ่มไว้UICollectionViewDelegateFlowLayoutในรายชื่อผู้รับมอบสิทธิ์ ViewController ของคุณเพื่อใช้วิธีการinsetForSectionAtIndex
David Douglas

98

การตั้งค่าสิ่งที่ใส่เข้าไปในตัวสร้างส่วนต่อประสานเช่นที่แสดงในภาพหน้าจอด้านล่าง

การตั้งค่าส่วนแทรกสำหรับ UICollectionView

จะส่งผลดังนี้:

เซลล์มุมมองคอลเล็กชันที่มีส่วนของส่วนแทรก


2
คำตอบที่ยอดเยี่ยมเพียงแค่ต้องการชี้ให้เห็นว่าคุณจะต้องเล่นด้วยระยะห่างขั้นต่ำเพื่อให้ส่วนที่แทรกเข้าไปทำงานได้ดี
Smit Yash

75

ในการเพิ่มระยะห่างในภาพรวม UICollectionView :

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

หากต้องการเล่นกับระยะห่างระหว่างองค์ประกอบของแถวเดียวกัน (คอลัมน์หากคุณเลื่อนแนวนอน) และขนาด:

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

5
ใช้งานได้ แต่collection.collectionViewLayoutต้องการนักแสดงตามตัวอย่างโดย @Pooja: UICollectionViewFlowLayout *flow = (UICollectionViewFlowLayout*) self.collectionViewLayout;
jwj

หล่ออย่างรวดเร็วif let flow = collectionViewLayout as? UICollectionViewFlowLayout { flow.itemSize = CGSize(width: 100, height: 100) }
ลี่

41

สวิฟท์ 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

แก้ไข XCode 11.4 และรวดเร็ว 5

let flow = collectionView.collectionViewLayout as! UICollectionViewFlowLayout

ไม่ทำงาน ใช้งานด้านล่าง

let flow = UICollectionViewFlowLayout()

ป้อนคำอธิบายรูปภาพที่นี่


มีวิธีการตั้งค่าสีเป็นระยะห่างหรือไม่?
Martín Serrano

1
@ MartínDanielเพียงแค่ตั้งค่าของbackgroundColor collectionViewหรืออะไรก็ตามที่ดูสุด ๆ
William Hu

1
แต่ไม่มีระยะขอบที่ขอบ
user924

@ user924 ระยะขอบที่ขอบสามารถตั้งค่าด้วย UIEdgeInsets (บน: ซ้าย: ล่าง: ขวา:) หากเลื่อนในแนวตั้งให้ใส่ด้านซ้าย / ขวา หากเลื่อนตามแนวนอนให้ตั้งค่าส่วนบนและส่วนล่าง
Marcy

40

เพียงเพื่อแก้ไขข้อมูลที่ผิดในหน้านี้:

1- ขั้นต่ำInteritemSpacing : ระยะห่างต่ำสุดที่จะใช้ระหว่างรายการในแถวเดียวกัน

ค่าเริ่มต้น: 10.0

(สำหรับตารางเลื่อนแนวตั้งค่านี้แสดงระยะห่างต่ำสุดระหว่างรายการในแถวเดียวกัน)

2- MinimumLineSpacing : ระยะห่างต่ำสุดที่จะใช้ระหว่างบรรทัดของรายการในตาราง

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


2
สิ่งนี้ดูเหมือนจะไม่ส่งผลกระทบต่อการเว้นวรรคระหว่างส่วนเฉพาะระหว่างรายการในส่วนเดียวกันเท่านั้น
Crashalot

@Crashalot - คุณแน่ใจหรือว่าคุณไม่ได้หมายถึง MinimumLineSpacing คือทุกเซลล์หรือไม่ นอกจากนี้ยังมีตัวเลือกสำหรับส่วนแทรกหากคุณใช้ส่วนต่างๆ
Chucky

สิ่งนี้ใช้ได้สำหรับฉันที่ทำผ่านอินเทอร์เฟซกระดานเรื่องราว ฉันกำลังมองหาวิธีแก้ปัญหาสำหรับมุมมองการรวบรวมเฉพาะแนวนอน ขอบคุณ +10
kemicofa ghost

9

Modern Swift การคำนวณเลย์เอาต์อัตโนมัติ

ในขณะที่กระทู้นี้มีคำตอบที่เป็นประโยชน์มากมาย แต่ฉันต้องการเพิ่มเวอร์ชั่น Swift ที่ทันสมัยโดยยึดตามคำตอบของ William Hu นอกจากนี้ยังปรับปรุงสองสิ่ง:

  • ระยะห่างระหว่างบรรทัดที่แตกต่างกันจะตรงกับระยะห่างระหว่างรายการในบรรทัดเดียวกันเสมอ
  • โดยการตั้งค่าความกว้างต่ำสุดรหัสจะคำนวณจำนวนรายการในแถวโดยอัตโนมัติและใช้สไตล์นั้นกับเค้าโครงผังงาน

นี่คือรหัส:

// 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)

ถ้าitemsInOneLineเป็น 1 แล้วจะทำให้ NaN หารด้วยศูนย์ที่นี่:itemsInOneLine / (itemsInOneLine - 1)
TylerJames

1
@TylerJames ขอบคุณ! ฉันปรับรหัสเพื่อแก้ไขปัญหา;)
fredpi

8

ใช้setMinimumLineSpacing:และsetMinimumInteritemSpacing:บนUICollectionViewFlowLayout-Object


ไม่มันไม่ทำงานตามที่คาดไว้ setMinimumLineSpacing คือ: ระยะห่างต่ำสุดที่จะใช้ระหว่างรายการในแถวเดียวกัน และ setMinimumInteritemSpacing คือ: ระยะห่างต่ำสุดที่จะใช้ระหว่างบรรทัดของรายการในตาราง คำถามของฉันเกี่ยวกับระยะขอบไม่ใช่ช่องว่างระหว่างองค์ประกอบ เช่น. ระยะห่างด้านซ้ายและด้านบนขององค์ประกอบแรก
Mert

สมมติว่า srollDirection แนวตั้งคุณสามารถใช้ contentInset สำหรับการเว้นวรรคบนและล่างของแถวแรกและแถวสุดท้าย นอกจากนี้คุณสามารถเพิ่มระยะขอบในเซลล์ของคุณ
Jonathan Cichon

8

การใช้collectionViewFlowLayout.sectionInsetหรือcollectionView:layout:insetForSectionAtIndex:ถูกต้อง

อย่างไรก็ตามหาก collectionView ของคุณมีหลายส่วนและคุณต้องการเพิ่มระยะขอบให้กับทั้ง collectionView ฉันขอแนะนำให้ใช้ scrollView contentInset:

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);

5

หากต้องการเว้นช่องว่างระหว่างCollectionItemใช้สิ่งนี้

เขียนสองบรรทัดนี้ใน viewdidload

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

5

ตั้งค่า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);
}

2

ในวัตถุประสงค์ -C

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;

สิ่งที่คุณต้องทำคือเปลี่ยนค่า itemsPerRow และจะอัปเดตจำนวนรายการต่อแถวตามลำดับ นอกจากนี้คุณสามารถเปลี่ยนค่าระยะห่างหากคุณต้องการระยะห่างทั่วไปมากขึ้นหรือน้อยลง

ป้อนคำอธิบายรูปภาพที่นี่ ป้อนคำอธิบายรูปภาพที่นี่


1
ดีมาก ... มันได้ผลสมบูรณ์แบบ
sohil

1

สำหรับการเพิ่มระยะขอบให้กับเซลล์ที่ระบุคุณสามารถใช้เค้าโครงการไหลที่กำหนดเองนี้ได้ 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
    }
}

0

ใน swift 4 และ autoLayout คุณสามารถใช้ส่วนการตั้งค่าเช่นนี้:

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

-1

หากต้องการเพิ่มการแยก 10px ระหว่างแต่ละส่วนให้เขียนสิ่งนี้

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

เมื่อใช้ UICollectionReusableView ของ UICollectionElementKindSectionFooter ชนิด, การแก้ปัญหาของคุณจะไม่ทำงาน
Pratik Jamariya

-1
- (UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout insetForSectionAtIndex:(NSInteger)section {       
         return UIEdgeInsetsMake(7, 10, 5, 10);    
   }
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.