I'm trying to create a screen similar to that in the new iTunes store:
That is, a grid that's scrollable both horizontally and vertically.
The first approach I've tried involved creating a UITableView (for the vertical rows) and, within each UITableViewCell of that UITableView, another UITableView that's rotated 90 degrees.
This seems to work visually but I'm not able to scroll vertically. I believe the gesture recognizers from the subview tables are preventing the gesture recognizers from the parent table view from receiving touch events.
Basically, the rows scroll horizontally but not vertically.
The next approach I've thought then is to create UISrollViews for each row but I was wondering if there's something I've missed?
Has anyone else encountered this issue in the past?
I have done something similar to what you have with table view inside a table view, I made the rotated 90° table view the parent instead. I think I also had to turn off scrolling for one table views when scrolling is detected in the other table view, and visa-versa.
If your trying to target below iOS 6.0, ruling out using the UICollectionView, I would try using GMGridView:
https://github.com/gmoledina/GMGridView
It's very complete and has many features. It also has horizontal paging support which may achieve what you are looking for.
You should have a look at UICollectionView.
Never tried to build something like that but... Idea :
One tableview, n-cell, each cell embed a scrollView wich can contains, n-subviews.
Related
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 need to have iOS app with screen like this:
screen
The idea is when user start to scroll down the first UIView to move up until the second UIView reach the top where it will stick and only UICollectionView will continue to move up.
Currently I'm using this structure
UIScrollView (main scroll)
UIView (some banners)
UIView (UISegmentedControl)
UICollectionView (grid with items, scroll is disabled, main scroll is used)
I manage to do it, but I needed to set UICollectionView height constraint manually in the code (calculated based on all items in grid) in order to appear in UIScrollView (everything else is handled by AutoLayout in Storyboard). The problem with this is that UICollectionView think all cells are visible and load them, so the whole recycling & reusing thing does not work. It's even worst because I use willDisplayCell method on UICollectionView to load more data when last cell is displayed, but now it load all pages at once.
My question (actually they are 2)
How can I fix the issue above?
What is the right way to achieve this functionality? Maybe my whole approach is conceptually wrong?
Collection view is a scroll view itself. So maybe you could have same functionality only with Collection view with sections or even custom layout?
I'm new in iOS development. Based on my assumption, Feature page in App Store was created using a combination of UITableView and UICollectionView. But how to do that in theory and code? I know it's a bit vague, because it's quite hard to describe it, but I just need some people to help me explain it.
For this case I will try to use these naming:
1. Top section, it's a view which showing banners of apps, people can swipe it to view another banner.
2. Middle section, views which can be scrolled horizontally. (Best New Apps, Best New Games, etc).
3. Bottom section, starts from Quick Links to the bottom.
Questions:
1. The scroll indicator is starts from the root view's top guide, that's normal, but:
a. When we scroll it up, the bounciness is start from the middle section. How to do that? Is the top section and middle section is a separated view? But how can the scroll indicator is started from the root view's top guide if top and middle section is a separated view? (Separated view means that the views should have different scroll indicator unless it's actually subviews of UIScrollView).
b. When we scroll it down, there is nothing that floating. So it looks like that the whole page is a subview of a single scroll view but the bounciness is starts from the middle section. How to create that bounciness effect while only have one scroll indicator for the whole page?
2. In the middle section, there's a several collection view that has horizontal scroll direction. Is it the best way to create it like that is to use UITableView with cell that has UICollectionView inside it? It looks like it was created that way, but:
a. Is it the most efficient way to do that?
b. Because of the case in my first question is my source of confusion.
3. The bottoms section has a different separator from the middle section. The middle section has indentation while the bottom section doesn't. How can I do that if the case is it's a UITableView?
My whole question is just how to create a layout like that. If you cannot help me by providing me some sample codes that's fine, please just explain me the concept or theory of how to do that.
If the whole answer is just I have to create it using vertical/horizontal UIScrollView from scratch that's fine. I just want to make sure of that since I tried to avoid dealing with creating manual tiling.
OK, I think I finally found my own answer.
First, I need a UIScrollView to be root of the view. Then I set the contentSize to be a specific value.
The top section can be a UIPageController or a horizontal UIScrollView.
The middle section is a UITableView with scrollEnabled to NO and cells are static. The static cells (could also be dynamic cells) will contains UICollectionView. Since the scroll is disable, it will use the scroll from the parent UIScrollView. So that's why I can get the same bouncy effect in the middle section.
The bottom section is just another cell of a UITableView.
Thanks.
This might help you with implementing UICollectionViews in your UITableViewCell: http://ashfurrow.com/blog/putting-a-uicollectionview-in-a-uitableviewcell
To make the first cell "float" in the TableView you could make sure that cell never goes out of screen in scrollViewDidScroll
I have a problem, it is not so much about a bug, but rather how to approach the issue.
I wanna create a UICollectionViewLayout where I can scroll a single column. Normally when
we scroll a scroll view, all the subviews scroll up/down/left/right. But here I wanna have a set of columns, and basically as user scrolls vertically, I want to only scroll that column and leave the others where they were. More over if the user scrolls horizontally I want the normal behavior, that is, all columns scroll left or right.
Any idea how to approach this problem ?
It's a little late, but, better late than ever!
You are right in that you need to rock your own UICollectionViewLayout. I recommend you start with having it work normally before you start working on your particular behaviour.
Basically what you want to do is have all cells but one column be vertically sticky.
To achieve that, you need reposition all your cells (but the ones that actually move) based on the Collection View's xOffset and yOffset.
Checkout my answer on this post for more information: https://stackoverflow.com/a/20987008/322377
For this you can use a UITableView with custom UITableViewCell containing UIScrollView and you can set scrollview to scroll in desired direction.
I have a slightly complicated system that I am having some reuse issues with, wanted to get some feedback. Basically it is a vertical tableview, and each cell contains another tableview that is rotated 90 degrees, so that each cell scrolls horizontally. Each horizontal cell is also set up to scroll infinitely with paginated responses from an API. I am having issues where cells are copying on top of each other when the vertical table is scrolled down. I have reuse identifiers set up correctly and in each of the horizontal tableviews I am running the following:
- (void)prepareForReuse
{
[_horizontalTableView reloadData];
}
If I turn off reusing cells the issue doesn't happen, but the vertical scrolling performance suffers. I am wondering if its possible that reusing cells in this type of a set up just isnt possible? Any experience with this is helpful. Thanks.
This is not a direct way to solve your issue, but I believe if you use a horizontal scroll view inside each vertical cell, you will have this done faster and with less weird behaviours. I also believe this is not a standard way, so weird stuff will happen.
All you do is set or extend the content size of the scroll off screen continuously to create an infinite scrolling behaviour. Create views within the scroll view pragmatically to simulate each cell. Hope this helps.