UICollectionView to make EPG

Question

I was told by some folks at WWDC that UICollectionView would be ideal for creating an EPG (Electronic Program Guide) style view in iOS, like the image below. However, I can't find any samples that are even close to this... does anyone know to go about it?

enter image description here

You would need a custom layout. Here's my thoughts: you use decoration view to show channel/time. And you layout your grids(blocks of programs) in landscape for each channel. — Shane Hsu, Nov 22 '12 at 09:23

score 1 · Answer 1 · edited Oct 12 '12 at 21:07

In a lot of cases you'll be able to get it done by subclassing the UICollectionViewFlowLayout class. But in this case, you gotta write your own layout. Because UICollectionViewFlowLayout is for line-based layouts, where lines break at the end. But in this case that wouldn't work.

So a custom layout is the way to go. You might wanna check the WWDC sessions on custom layouts and Apple's documentation.

score 1 · Answer 2 · answered Feb 14 '15 at 22:24

1

Here is an example for creating an EPG Grid in swift using UICollectionView and custom UICollectionViewLayout https://github.com/CoderXpert/EPGGrid....

answered Feb 14 '15 at 22:24

Adnan Aftab

14,377
4
45
54

score 0 · Answer 3 · answered Oct 03 '12 at 09:26

0

I got the same question - I'm not sure but I think you (we) would have to subclass

UICollectionViewFlowLayout

In order to achieve this layout :P

answered Oct 03 '12 at 09:26

Tom Albrecht

31
1
2

1

Flow layout only works in one direction.. Horizontal or Vertical – cannyboy Oct 03 '12 at 15:48
WWDC 2012 Session 219 "Advanced Collection Views and Building Custom Layouts". They describe how to subclass UICollectionViewFlowLayout/UICollectionViewLayout – Tom Albrecht Oct 05 '12 at 14:26

score 0 · Answer 4 · answered Oct 19 '12 at 08:29

Well It looks simple, You just need one section in CollectionView and Height of each item same. To make length dynamic for item you just need this api where you can calculate your space and return a proper size.

- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath

this is one of UICollectionViewDelegateFlowLayout Protocol method. make sure your horizontal scrolling is enable for collection view, you can set it from storyboard.

score 0 · Answer 5 · answered Jul 15 '13 at 09:43

0

https://github.com/NOUSguide/NGVaryingGridView A GridView which allows to set individual Rects for the Cells. So you can define Cells with different Sizes, used for e.g. in Timetables, EPGs, etc.

answered Jul 15 '13 at 09:43

user2582969

1

score 0 · Answer 6 · answered Dec 19 '14 at 12:35

0

https://github.com/inspace-io/INSElectronicProgramGuideLayout UICollectionViewLayout for displaying electronic program guide which will help you.

answered Dec 19 '14 at 12:35

Michal Zaborowski

5,039
36
35

UICollectionView to make EPG

6 Answers6