I have the following autolayout-driven setup:
Main viewController, with a scrollview inside it. Scrollview pinned to superview edges. This one scrolls up and down.
A few normal, fixed size views at the top of the scrollview
Another scrollview. This one scrolls left and right. The second scrollview contains a couple of tableviews, side by side. The idea is that the user can switch between them. They both contain a handful of cells, all the same width as the screen and 72pts tall.
The problem I'm trying to solve is that the tableview contents are not the same size. The left one has say, 6 cells, and the right one has 3.
My first approach was to dynamically change the second scrollview height to match which ever tableview was currently visible. What ended up happening was that switching between the two tableviews (by doing setContentOffset:animated:) went extremely wrong if animated was set to true - it would adjust the content offset so everything was offscreen. In fact it would set the content offset to and then as I switched, about a dozen times, then it'd reset. It was weird, I gave up.
Now I'm trying to just adjust the content inset of the main scrollview to offset the gap in the content of the current tableview, and it's also being weird. When I set the bottom content inset in viewDidLoad, it works fine. When I set it at the time the tableview becomes current, it does nothing.
What gives? What scenarios would lead to these view interactions not behaving properly?
Use different tableViewController for each table.
Embed them in pageViewController.
Add those few normal, fixed size views at the top of the pageViewControllers view.
Conform scrollViewDelegate in pageViewController.
Pass scrollViewDidScroll from tableViews to pageViewController.
Set tableViews inset to match those fixed size views at top.
Change height according to the scroll.
This is the way you can achieve the functionality you want.
I hope it helps.
Related
I have a UITableView in the bottom of UIViewController and tableview height is 100 point now.
The tableview has 20 cells and tableview's header view is 100 point. And I've added a up UISwipeGestureRecognizer and a down UISwipeGestureRecognizer in table view header.
Now I want to change the tableview height constraint constant to 400 in up gesture action and change the tableview height constraint constant to 100 in down gesture action.
Now the problem is gesture recognizer isnt working in tableview
header when tableview scroll is enabled.
If tableview scroll is disabled then the gesture recognizer is
working. But unable to view all cells once the tableview height is
changed.
Here's a different approach. Don't use swipe gesture recognizers at all.
Instead, make the table always the full 400 points tall. Set its contentInset.top to 300. This will allow the table view to scroll so that only its top 100 points of content are visible at the bottom of the screen. Specifically, the table view will allow its contentOffset.y (which is its vertical scrolling position) to go down to -300 (instead of only down to 0). The table's content always starts at y = 0, so when the table's contentOffset.y is -300, only the top 100 points of its content are visible. As the contentOffset.y increases, more of its content becomes visible.
Then, override the table view's point(inside:withEvent:) method to return true only for points with y >= 0. This means the table will ignore (pass through) touches above its content when its content is scrolled so only the top 100 points are visible.
This is the final effect for a small table:
or for a big table:
You can find a detailed explanation (in Objective-C) and a link to the full test project (also in Objective-C) in this answer.
As it may help others, here is the simplest possible solution to this type of problem.
Extremely simple solution -
no tricks, nothing fancy -
don't have a "table view header".
Just make a new UIViewController
class TableWithRedTop: UIViewController
that has ...
[ red area .. swipe detection ]
[ main area - the table view]
Then simply put 'TableWithRedTop' inside a container view.
(Container view tutorial if you need one.)
In your MainView just have a call
func toggleTableHeight
When 'TableWithRedTop' gets a swipe, have one line of code to call toggleTableHeight in MainView
Note that in toggleTableHeight you can easily animate the height change, tilt it on an angle, duplicate it or do anything you want, as you're using a container view in MainView.
I'm going to make another suggestion that may solve the issue for you.
It could be what you want is an:
"self-expanding" table...
First implement the following with no animations, for simplicity.
You have two heights for the table, small and large.
Start the table on height small.
Remarkably, you only have to implement these two rules: just two simple lines of code:
Any time the user is scrolling upwards - in fact, change to "height large".
Any time the user is scrolling downwards, and, you are at the top position of the table (i.e. you can see cell #1) in fact change to "height small".
It's one of those things that is "so simple, it's hard to believe it works!"
It's sometimes referred to as a "pull-up table" I think.
(Note. If you're not familiar with detecting when the user is scrolling, fortunately it is trivial - code shown here for example.)
Set both swipe gesture’s cancelsTouchesInView to true and make sure that the gestures are added directly to the header and not the tableView.
That should do the trick, but so should adding a view with the gesture recognizes to the container view and setting it’s constraints to match the tableView’s top, left, and right constraints and setting its height to 100.
I have a horizontal-scrolling UICollectionView which is nested in a UIView that is centred and occupies 80% of the screen width.
I want the UICollectionView to be visible screen edge-to-edge rather than constrained to the super UIView bounds.
I have set the following which shows the UICollectionView across the screen width:
collectionView.clipToBounds = NO
...but when dragging the collectionView, it hides cells when they are completely outside of the super UIView bounds even though they are partially visible on the screen, which leads to a weird flickering of blank space/cell.
Ideally, I'd like a way to prevent the hiding of the cells completely out of bounds. Is there a way to do this?
The UICollectionView has a maximum size of 3 cells, so I'm not particularly worried about any performance implications of having all cells visible all the time.
The only way I found is to enlarge the frame of the collection view (and its superview in your case) and add contentInset's to it. You might also want to update scrollIndicatorInsets.
I've been trying to replicate this effect for a couple days which was inspired by Tumblr.
I've previously asked questions on here with different approaches of the same problem but to no avail. I'm just curious as to how the engineers at Tumblr created a horizontal collection view, with two vertical collection views, and is able to scroll down without affecting the view above (without resetting the position of the view when you scroll vertically in a different tab).
Header Views
I tried this, but the header view was isolated and I had to scroll to the right to see the collectionView cells. This did not work.
Changing the topLayoutConstraint constant of my UIView (not cv header) with respect to the contentOffSet of the vertical collectionView.
This almost got the effect I wanted, except that when I scrolled horizontally, there was a huge gap between my collection view and if I scrolled in that new tab, the UIView would appear again because, again, topLayoutConstraint gets scrolled up depending on the contentOffSet of my vertical collectionView contentOffset.
Changing the position of the UICollectionView frame, and scrolling the super view up simultaneously with NSNotificationCenter.
Alas, this method did the same as method #2, except that the vertical collection view cells scrolled faster than the super view.
I ran out of options to make this work so I will show you in detail what's attempted to be replicated (also note the scroll bar on the right):
Note when I scroll down the first tab. I switch, and then scroll down further. Originally, as I've said, there would be a gap between the second main CV, and when I scrolled, the view would reposition as if were scrolling up again. On here, the view on top keeps going up. So I'm curious as to what method Tumblr engineers used to do this. UICollectionView inside UIScrollView? Other suggestions?
I believe there is no UICollectionView involved. It looks like UIPageViewController and each its page is a UITableView.
Perhaps the UIPageViewController sits in a UITableView as well - the header also moves up when you scroll. This main table has only one cell (and a header) which is occupied by the UIPageViewController.
Hope it helps.
I have a UIScrollView designed with IB.
UIView
UIScrollView
UIView
UITextField
UIButton
...
If I tap on the text field the view scrolls away towards the upper left corner of the screen before the keyboard is appearing. The space above the keyboards remains empty. I can scroll back the view if I drag in this empty space.
I have googled around, but found only postings where users want to scroll UIScrollView. I want the view to stay where it is.
Thanks in advance for any suggestions.
Here's what happened.
You designed the whole thing in Interface Builder.
The scroll view was not scrolling, so you set its contentSize in code to the size of the scroll view's primary subview (what I like to call the content view).
The scroll view was still not scrolling, so you munged the content insets - and this caused the problem that brought you here.
Your mistake was (3). Instead, you should have thought more about (2), i.e., why isn't my scroll view scrolling even though I have given it a nice big content size?
The answer is that, in a storyboard or xib that has auto layout turned on, that's not what you do. What you do is use constraints from the content view to its superview (the scroll view), on all four sides. Set the constant for all four constraints to zero. This causes the content size to match the size of the content view, automatically.
I've created a UITableVIew and it is a subview of a UIView. There are three issues that i'm having and it is only occurring on iOS 4 devices:
1) The table doesn't bounce when the view hits either the top or bottom of the table while scrolling. The vertical bar doesn't shrink either, it feels sticky and it is very much acting like an Android table view. I've tried enabling the bounce property but that doesn't make any difference.
2) The horizontal scroll bar appears when the view is scrolled down to the bottom of the table. This shouldn't appear since the table view's contentSize has been set correctly. It does eventually disappear when the contentSize is set 20 pixels less than what it should be.
3) I can't scroll to the bottom of the footer view, and only half the footer view is visible.
I've added a UITableView as a subview to other views throughout my project and this has never occurred, and so i've copied the way that I create other UITableViews, but still no luck.
Any suggestions would be greatly appreciated.
Thanks,
Ankur
I worked out the problem. The problem is a little strange, although i had a feeling that the way i was coding was a little messy.
I am subclassing a View, and the parent view has a layoutSubview method, which is only calculating and setting the frame for a table view subview. In the subclass, i had to override layoutSubview for the same reason as the values for the table view's frame need to be different. This means that the table view's frame was being laid out twice, once by the parent class and a second time by the subclass. It seems that iOS 4 doesn't like this, and i should only set the frame once per subview per layoutSubview call.
Now i've created a layoutTableView method, which is called from the parents layoutSubview, and i've overridden layoutTableView in the subclass. Therefore the table view's frame is only being set once.