I am an Android dev trying to learn iOs development.
I am trying to implement a vertical scrolling UI inside an horizontal paging scroller (Like a RecyclerView inside a ViewPager).
I know I should use nested UICollectionView, I saw this tutorial doing similar stuff, however, it uses UITableView to create the reversed layout style (Horizontal scroll inside vertical scroll).
Can you tell me the best practice to implement this kind of layout? Is there any tutorial out there? I wasn't able to find really much (most stuff was regarding the reversed layout)
Thanks
edited:
1: if you want couple main pages you should implement uipageviewcontroller, to be able paging horizontally
2: if you want a lot reusable cells paging horizontally you should implement UICollectionViewController
if you need vertical scroll functionality inside every page/cells depends if you want paging/scrolling with many cells (you should use collection view) or scrolling some content like text or so (you want to use scrollview). And then you need to put UICollectionView/UIScrollView as a subview on your pages(uipageviewcontroller) / cells(collectionView)
btw. adding vertical scrolling if you need collectionviewcontroller would be bad idea, because you'd have many scrollviews within many cells
Related
I want to implement a cross layout just like Wallapop app does on its main feed.
As you can see, it's composed of two groups of cells (Featured items, Items near you). The first group is scrolled horizontally, and the second group is scrolled vertically.
The first UIKit component that came to my mind to make that kind of layout is UICollectionView, having one section for each scrolling direction. Unfortunately UICollectionView current implementation is very limited, forcing the scroll in one direction only, no matter how many sections you declare.
So I wanted to give it a shot with vanilla UIKit components and that's what I got;
The problem with my solution is that the vertical UICollectionViewController (highlighted in green) is scrolling on its own and not pushing the horizontal UICollectionViewControllers upward.
I've also thought about using a single UICollectionViewController for the vertical cells, and setting an UIStackView with horizontal UICollectionViewControllers as needed for the horizontal cells, but it's a messy solution and doesn't scale very well, I even couldn't set a title for the vertical cells section If I opt this way.
Ideally, I want each group of scrollable cells to be it's own UIViewController in order to have a clear separation of concerns and modularity.
Is there a better way to implement a layout like the one I want with vanilla UIKit components?
The easiest and the most stable solution is to use the following view hierarchy:
Use one UICollectionView(1) instance
Horizontally scrollable sections can be implemented as Screen width UICollectionViewCell containing horizontally scrollable UICollectionView
Vertically scrollable sections should be just a regular section of UICollectionView(1)
Pros
UIKit only
Nothing extraordinary is needed - just a UICollectionViewFlowLayout everywhere
Cells are the same for Horizontally scrollable cells and Vertically scrollable cells
Good scalability and separation of concerns. Independent behaviors of Horizontal and Vertical sections each of which can have multiple data sources.
Cons
Horizontally scrollable sections should have fixed height. Otherwise scrolling behavior will be harder to maintain.
Arrow on the image means Uses!
You could use following way:
A collection view with two cell in it. First cell is for featured items and the second cell is for items near you. The first cell will cover full width and height required by your design.
For scalability use a Container View which embed a CollectionViewController which will responsible for showing featured item. This embedded CollectionViewController will scroll horizontally.
Items near you are straight forward direct cell of the initial collection view controller.
So your implementation of featured horizontal collection view remain in the embedded CollectionViewController and the items for cell remains in the primary CollectionViewController which also contain a loose connection (embedding into a container view) to the featured item.
It also does not suffer from the problem like scrolling vertically the items for sale does not scroll up the featured items.
Here is a screenshot which depicts the idea
I need to horizontally scroll through a list of thumbnails at the bottom of the screen that shows all the user's recently taken photos / videos.
I created a UIScrollView with a UITableview inside of it.
Is this the correct approach because I can't seem to find an override method in its superclass for scrolling direction?
Most of the topics I can find online deals with putting a UIscrollview inside a TableCell, which will not work for my specific application?
The hierarchy is:
View > Scroll View > Table View > Table Cel > Content > PhotoThumbnail
Below is a screenshot of what I'm trying to do:
I am not really sure why do you want to use UITableView for horizontal scrolling which lay out there cells in vertical manner. If you want horizontal scrolling I would recommend using UICollectionView where cells can be added horizontally or vertically or both.
Still if you want tableview to be scrollable in horizontal direction I would suggest you to check this project to get inspiration or using it.
https://github.com/alekseyn/EasyTableView
Instead of using UITableView you can use UICollectionView to achieve the desired result i.e, horizontally scrollable cells with imageView and other elements that you need.
I'm trying to implement something similar to iTunes Store UI.
As you can see from the picture, there are two directions of scrolling possible. But I would like to prioritise scrolling of UICollectionView which is to the left or right because currently scroll down and scroll left/right are conflicting and causing weird behaviour.
Way to duplicate:
Scroll Down UITableView and then quickly try to swipe right or left on UICollectionView. UITableView will continue to scroll.
How can I do so? Do I need to use GestureRecognizer?
I always avoid collection view as it provides less flexibility to work with auto layout compared to a table view, however not against collection view every time. You should try the adding collection view inside a table view
There is a number of tutorials available for the same. eg (ios 8 Swift - TableView with embedded CollectionView)
I'm designing a layout for my app that is going to take advantage of UICollectionView. I have created some moderately complex collectionView-based apps before, but I may need to subclass the layout class for this one. The main point I'm trying to figure out is whether I can have different sections of the same collectionView scroll in different directions.
Based on what I have read and tried so far, the only way to have one section scroll horizontally and another vertically would be by using multiple nested instances of UICollectionView.
This is a basic idea of my layout. My guess is that even with subclassing, a single UICollectionView would not be able to handle it. Or would it?
I think you could do it with a custom UICollectionViewLayout but I'd use the default flow layout with one cell containing something like a SwipeView for the section 0 and other cells in your section 1.
I have a
UIScrollView
Labels
Labels
UICollectionView
I have disabled the UICollectionViews scrolling functionality, so I only want to scroll with the Scrollview. My problem is that I don't know how I can calculate the UICollectionViews height so I can update my UIScorllView. If it's many elements inside the UICollectionView, it's get clipped.
I have created this little HTML example to show what I'm looking for
http://jsfiddle.net/hDwPH/
Dummy code
So my suggestion would be to use a single UIScrollview. Create your own view (we'll call it A) with whatever you are trying to repeat in the Collection view and addSubview A to the UIScrollview over and over for however many times you want.
Another way that just came to mind would be to use entirely a collectionview create two collectionviewcells, one that has your labels and you only display it for the first cell and the other collectionviewcell for all the others