CODEWITHSUNDEEP
iosuitableviewuiviewautolayoutuicollectionview
Angolao
Angolao

Reputation: 992

How to layout UICollectionView with tabbar on SupplementaryView, and switching different content?

I want to implement the UICollectionView effect with tabbar and possible to switch different content like a lot of social app does.

enter image description here

You can click Home to display timeline and click Album to display photos on content area. The top of content like avatar and username are no change, and the content offset will keep the same when you switch is completed.

I try it with a UICollectionView containing SupplementaryView for displaying avatar and handling tabbar click event. Assign different delegate, dataSource and layout object while switching different content. But I got a lot of problem and crash.

What's the correct way to implement this kind of layout and how to handle switching event?

Upvotes: 8

Views: 2132

Answers (3)

Warif Akhand Rishi
Warif Akhand Rishi

Reputation: 24248

With CollectionView
https://github.com/jamztang/CSStickyHeaderFlowLayout

Without CollectionView (test project created for demo purpose)
https://github.com/rishi420/issue-12-interactive-animations-uidynamics

For segment control
https://github.com/dzenbot/DZNSegmentedControl

With collectionView, first section in cellForItemAtIndexPath is the profile picture area. Second section in cellForItemAtIndexPath is another view which contains a segment control with all 3 (Home, Album, Profile) scrollable views.

You can also create a pull-able view which stays fixed at the bottom part of the screen or takes more space as user scroll up.

Upvotes: 0

Anton Tyutin
Anton Tyutin

Reputation: 644

Just decompose your logic, there is no necessity to keep everything in one UICollectionView and switch data sources and delegates.

Upvotes: 1

Dallas Johnson
Dallas Johnson

Reputation: 1536

If I understand correctly the top part of your view does not change and remains as the logo with an avatar. If this is the case I would not worry about supplementary views. Supplementary views are more for section headers/separators in a similar way to the use of section headers for UITableViews. Instead have a container view at the bottom which would hold the collectionView with UISegmentedControl above which would trigger the changes in the container view. If the container is to display the same data with different layouts (ie. photos scrolling vertically to horizontally) then the segmented control could trigger a change to the collectionViewFlowLayout but if the data changes (ie Timeline to Album) then I would suggest switching to different child view controllers in the container view triggered from the segmented control actions. You would probably want to save the current scroll offset in the container view controllers so that it can be restored when switching back. Also having separate child view controller classes will help prevent the container view controller from getting too large and keep each child collection view controller simple and focused.

Upvotes: 1

Related Questions