-2

I am trying to build a collection view on a page which has 2 sections. I want the section 1 cells to be coloured yellow and the section 2 cells to be coloured blue.

I have managed to get the collectionview cells to show up - however the cells don't appear to have any padding between them - and where the background colour ends. How do I add more coloured padding around the cells to make them look tidier? ( ideally with interface builder) Screenshot: Collectionview no padding

Edit: After adding Edge Insets to my custom cell - it gets me closer to what I am after but seems to truncate the text - and remove my rounded corners:

Code: 

override func drawText(in rect: CGRect) {
    let insets = UIEdgeInsets.init(top: 5, left: 5, bottom: 5, right: 5)
        super.drawText(in: UIEdgeInsetsInsetRect(rect, insets))
    }

Insets

Is there a way to get UICollectionViewFlowLayoutAutomaticSize to take into account the extra 10 width and keep the rounded corners ( when using insets)?

UKDataGeek
  • 6,338
  • 9
  • 46
  • 63

2 Answers2

2

If you are using UICollectionViewFlowLayout, you can adjust line spacing and item spacing in Interface Builder by setting properties of your layout instance.

You can find layout instance right below/within your UICollectionView instance in left pane of Interface Builder.

  1. Open Interface Builder
  2. Find UICollectionViewFlowLayout object within UICollectionView
  3. Select Size Inspector tab in right pane
  4. Change Min Spacing

Note: That will leave some space between your cells. If you wanna change content insets of your cells or labels, you should use custom cells. To add content insets to your UILabels, you can have a look at this question and/or that question

Community
  • 1
  • 1
Mert Buran
  • 2,989
  • 2
  • 22
  • 34
  • thanks so much @Mert- actually the last point is what I am after- how do I change the content insets if I have a custom cell already( which I have) – UKDataGeek Apr 10 '17 at 14:43
  • then your question becomes "how to add contentInsets to UILabel?". there are already many questions on this in SO, i added two of them to the answer. hope that helps – Mert Buran Apr 10 '17 at 14:48
  • Thanks Mert - I tried out the first solution - and it seems to truncate everything) ( have added this to the question above ) so you can see the out put - I guess I need to do more work with overiding the intrinsic content size. This seems like a lot of work for what should be a simple, common use case. Hope I am just missing something. – UKDataGeek Apr 10 '17 at 15:03
  • exactly. your label draws the text but when autolayout engine asks for its content size, it returns a smaller size so that it ends up truncated. i'm sorry i can't explain that in detail here but i suggest googling autolayout to have a general idea – Mert Buran Apr 10 '17 at 15:05
  • Thanks it was down to this SO ticket in the end that helped solve the problem http://stackoverflow.com/questions/21167226/resizing-a-uilabel-to-accomodate-insets/21267507#21267507. Appreciate the help though Mert- Do you want to update your answer and I will mark it as the answer? – UKDataGeek Apr 10 '17 at 15:18
0

You may use a UIView first on your cell by setting its constraints and then add your labels in that view.

at last give appropriate colour to cell, UIView, labels as per your choice.

Navjot Singh
  • 65
  • 12
  • Thanks - but adding a view around the cell - doesn't let me add more padding within the cell itself. ( see the screenshot above) – UKDataGeek Apr 10 '17 at 14:48
  • You may set UIView constraints to cell with desire constraintsConstant(i.e leading, trailing, top and bottom to 5 for example) – Navjot Singh Apr 10 '17 at 14:54
  • 1
    this will lead to more color padding but now i got to know that you want simple Spacing between cells – Navjot Singh Apr 10 '17 at 14:56