Vertical UICollectionViewLayout supporting inline sections #450

rnystrom · 2017-01-27T05:58:16Z

Working on porting our collection view layout to IGListKit. I'm doing this because its a solid layout, and we just finished preparing it to work with inline sections. It is designed to work in tandem with IGListKit, so we're adding it.

This is still a WIP as I add more tests, but I'd love as much feedback as possible.

Aside from the glob of header documentation, this has the following features:

Infinite sections that each have infinite items. Sections and items can fall inline. When they break the width of their container they will fall on the next row.
Sections can have their own insets, line spacing, and interitem spacing.
Sticky header support! When you use headers, it will always newline the section.
Maximum width with a border decoration view
- Use this to pinch in your content on larger devices

Followup to #423

TODO

~~Move decoration view support to delegate~~ removed
Unit test changing top y sticky inset
~~Update initWithCoder: to use sensible defaults~~
Test initWithCoder: throws
Test when remaining cells outside of visible bounds
~~Move decorationBorderViewOfKind: internal? C function? (or add unit tests)~~ removed
Unit test changing bounds size

jessesquires · 2017-01-30T22:18:06Z

naming nit: how about just IGListCollectionViewLayout ?

rnystrom · 2017-01-31T07:42:25Z

@jessesquires I dig it. I left "vertical" b/c atm it only supports v-scrolling, but we could maybe add horizontal down the road. Or not. I like that better.

facebook-github-bot · 2017-01-31T18:46:08Z

@rnystrom updated the pull request - view changes

facebook-github-bot · 2017-02-02T17:03:36Z

@rnystrom updated the pull request - view changes

rnystrom · 2017-02-02T17:03:38Z

@jeremycohen how do you feel about me landing this and setting up our internal tests? This is copy-pasted and cleaned up from D4455662.

zhubofei · 2017-02-02T21:10:38Z

Source/IGListCollectionViewLayout.h

+
+ Please see the unit tests for more configuration examples and expected output.
+ */
+IGLK_SUBCLASSING_RESTRICTED


Can we allow subclass here? Subclassing UICollectionViewFlowLayout proved to be useful.

Hmm, maybe we could. It's not really designed to be subclassed, but I guess we could let people do that if they wanted. @jessesquires any thoughts?

zhubofei · 2017-02-02T22:01:45Z

Source/IGListCollectionViewLayout.h

+ - (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout minimumInteritemSpacingForSectionAtIndex:(NSInteger)section;
+ - (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout referenceSizeForHeaderInSection:(NSInteger)section;
+
+ Sections and items are put into the same horizontal row until the max-y position of an item extends beyond the width


Sections and items are put into the same horizontal row until the max-y position of an item extends beyond the width

Should be max-x here, right?

zhubofei · 2017-02-02T22:06:36Z

Source/IGListCollectionViewLayout.mm

+
+ const IGSectionEntry section = _sectionData[sectionCount - 1];
+ const CGFloat height = CGRectGetMaxY(section.bounds) + section.insets.bottom;
+ return CGSizeMake(MIN(CGRectGetWidth(self.collectionView.bounds), self.maximumContentWidth), height);


Not sure if we should take collectionView.contentInset into account here.

It is my understanding that maximumContentWidth acts sort of like collectionView.contentInsethere so that we can have paddings on left and right. So, we do not take contentInset into account in this layout at all? However, we don't allow setting bottomInset in this layout. It is a little bit confusing.

I think that collectionView.contentInset is used by the actual scroll view and isn't used in the layout calculations. For instance in Instagram we use a variation of this layout and set the content inset to sit underneath the nav bar and it works. But that's a good point I haven't really considered that before. I'm not sure if the layout is supposed to consider that... 🤔

@rnystrom I found this tutorial on Raywenderlich.

They took contentInset into account in this sample code. Idk if it is the common practice or not.

zhubofei

👍👍👍

facebook-github-bot · 2017-02-09T20:43:35Z

@rnystrom updated the pull request - view changes - changes since last import

facebook-github-bot · 2017-02-09T20:43:59Z

@rnystrom has imported this pull request. If you are a Facebook employee, you can view this diff on Phabricator.

facebook-github-bot · 2017-02-09T22:06:35Z

@rnystrom updated the pull request - view changes - changes since last import

facebook-github-bot · 2017-02-09T22:07:58Z

@rnystrom has imported this pull request. If you are a Facebook employee, you can view this diff on Phabricator.

facebook-github-bot · 2017-02-09T22:08:22Z

@rnystrom has imported this pull request. If you are a Facebook employee, you can view this diff on Phabricator.

weyert · 2017-02-09T22:44:02Z

Any chance for an example which this new layout will bring us?

stevejcox · 2017-02-10T00:47:52Z

This is exactly what I need, arriving at just the right time!

rnystrom · 2017-02-10T16:04:11Z

@weyert yup! We'll add one shortly. Still ironing out some internal kinks as we land this.

rnystrom · 2017-02-11T01:00:18Z

Had a hiccup where we had to unland this, adding back ASAP

weyert · 2017-02-13T11:26:34Z

Thank you @rnystrom Does it mean you will support horizontal scrolling in inline controllers?

rnystrom · 2017-02-13T14:31:12Z

@weyert you can use embedded lists or scroll views to achieve an h-scroll, inline effect. If you want to use h-scrolling section controllers, check out our example.

Summary: Follow from #450, this layout has been replaced. You served us well! - [x] All tests pass. Demo project builds and runs. - [x] I added an entry to the `CHANGELOG.md` for any breaking changes, enhancements, or bug fixes. Closes #482 Differential Revision: D4553897 Pulled By: rnystrom fbshipit-source-id: caccb386ba8914fbbf5e81d997524efb78c6e4ea

weyert · 2017-02-16T10:10:24Z

@rnystrom Aha, so you need to make a collection view cell which in itself contains a UICollectionView instance again? I have to admit that I am really stupid and lost the clue by now. What's the added advantage of inline sections? Somehow I thought it was to add things like horizontal scrolling items.

rnystrom · 2017-02-20T20:14:29Z

@weyert oh sorry, I should have explained better. Inline sections are nice b/c UICollectionViewFlowLayout will "newline" each section. So if you have sections, each with a single cell that is 1/3 the width of the screen (think Instagram grids), flow layout will put each section-cell at x position 0 with a bunch of white space filling the remaining 2/3 of the collection view. It'll look like a single column of cells on the left.

Hope that explains it!

otymartin · 2017-04-21T04:26:50Z

@rnystrom Just curious if the sticky headers is now supported so I can drop my collectionView in a tableviewcell structure?

Nevermind you mention it here #533

facebook-github-bot added the CLA Signed label Jan 27, 2017

This was referenced Jan 27, 2017

[Proposal] Capability to update without reloading cells #451

Closed

Question about using IGListKit with Photos framework #454

Closed

jessesquires added this to the 3.0.0 milestone Feb 1, 2017

rnystrom mentioned this pull request Feb 2, 2017

Animating cell size change don't-know-how #459

Closed

2 tasks

rnystrom requested review from zhubofei and jeremycohen February 2, 2017 17:05

zhubofei reviewed Feb 2, 2017

View reviewed changes

zhubofei mentioned this pull request Feb 4, 2017

Multiple Sections, Different Scroll Directions and Sticky Headers #304

Closed

rnystrom force-pushed the layout branch from 7059463 to a74e1c1 Compare February 6, 2017 18:24

port layout

e0e5728

rnystrom force-pushed the layout branch from a74e1c1 to e0e5728 Compare February 6, 2017 18:25

Ryan Nystrom added 4 commits February 6, 2017 13:49

add header adjustment test

4d54333

add missing tests

8533d99

remove decoration view support and subclassing restriction

7ca205b

remove max content width, add content inset test

defd0cb

rnystrom mentioned this pull request Feb 6, 2017

Center aligned flow layout #263

Closed

rnystrom changed the title ~~WIP: Adding a vertical UICollectionViewLayout supporting inline sections~~ Vertical UICollectionViewLayout supporting inline sections Feb 7, 2017

Ryan Nystrom added 2 commits February 9, 2017 14:34

nits

20fdf9d

rename invalidation context

2b8d96b

remove throws test

4b4c88d

facebook-github-bot closed this in 7278334 Feb 10, 2017

rnystrom mentioned this pull request Feb 10, 2017

Remove IGListGridCollectionViewLayout #482

Closed

2 tasks

rnystrom deleted the layout branch February 11, 2017 01:00

rnystrom mentioned this pull request Feb 11, 2017

Vertical UICollectionViewLayout supporting inline sections (take 2) #484

Closed

7 tasks

ShaneQi mentioned this pull request Feb 20, 2017

WIP: Updating IGListGridCollectionViewLayout to be more flexible #423

Closed

10 tasks

Sherlouk mentioned this pull request Mar 9, 2017

Remove changelog placeholders #532

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Vertical UICollectionViewLayout supporting inline sections #450

Vertical UICollectionViewLayout supporting inline sections #450

rnystrom commented Jan 27, 2017 •

edited

Loading

jessesquires commented Jan 30, 2017

rnystrom commented Jan 31, 2017

facebook-github-bot commented Jan 31, 2017

facebook-github-bot commented Feb 2, 2017

rnystrom commented Feb 2, 2017

zhubofei Feb 2, 2017 •

edited

Loading

rnystrom Feb 2, 2017

zhubofei Feb 2, 2017 •

edited

Loading

rnystrom Feb 5, 2017

zhubofei Feb 2, 2017

zhubofei Feb 2, 2017 •

edited

Loading

rnystrom Feb 5, 2017

zhubofei Feb 5, 2017

zhubofei left a comment •

edited

Loading

facebook-github-bot commented Feb 9, 2017

facebook-github-bot commented Feb 9, 2017

facebook-github-bot commented Feb 9, 2017

facebook-github-bot commented Feb 9, 2017

facebook-github-bot commented Feb 9, 2017

weyert commented Feb 9, 2017

stevejcox commented Feb 10, 2017

rnystrom commented Feb 10, 2017

rnystrom commented Feb 11, 2017

weyert commented Feb 13, 2017

rnystrom commented Feb 13, 2017

weyert commented Feb 16, 2017

rnystrom commented Feb 20, 2017

otymartin commented Apr 21, 2017 •

edited

Loading

Vertical UICollectionViewLayout supporting inline sections #450

Vertical UICollectionViewLayout supporting inline sections #450

Conversation

rnystrom commented Jan 27, 2017 • edited Loading

TODO

jessesquires commented Jan 30, 2017

rnystrom commented Jan 31, 2017

facebook-github-bot commented Jan 31, 2017

facebook-github-bot commented Feb 2, 2017

rnystrom commented Feb 2, 2017

zhubofei Feb 2, 2017 • edited Loading

Choose a reason for hiding this comment

rnystrom Feb 2, 2017

Choose a reason for hiding this comment

zhubofei Feb 2, 2017 • edited Loading

Choose a reason for hiding this comment

rnystrom Feb 5, 2017

Choose a reason for hiding this comment

zhubofei Feb 2, 2017

Choose a reason for hiding this comment

zhubofei Feb 2, 2017 • edited Loading

Choose a reason for hiding this comment

rnystrom Feb 5, 2017

Choose a reason for hiding this comment

zhubofei Feb 5, 2017

Choose a reason for hiding this comment

zhubofei left a comment • edited Loading

Choose a reason for hiding this comment

facebook-github-bot commented Feb 9, 2017

facebook-github-bot commented Feb 9, 2017

facebook-github-bot commented Feb 9, 2017

facebook-github-bot commented Feb 9, 2017

facebook-github-bot commented Feb 9, 2017

weyert commented Feb 9, 2017

stevejcox commented Feb 10, 2017

rnystrom commented Feb 10, 2017

rnystrom commented Feb 11, 2017

weyert commented Feb 13, 2017

rnystrom commented Feb 13, 2017

weyert commented Feb 16, 2017

rnystrom commented Feb 20, 2017

otymartin commented Apr 21, 2017 • edited Loading

rnystrom commented Jan 27, 2017 •

edited

Loading

zhubofei Feb 2, 2017 •

edited

Loading

zhubofei Feb 2, 2017 •

edited

Loading

zhubofei Feb 2, 2017 •

edited

Loading

zhubofei left a comment •

edited

Loading

otymartin commented Apr 21, 2017 •

edited

Loading