I've got a UITableView and a big "button" view in front of it. The "button" view, which has transparent areas, should be able to response to a tap. But enabling user interaction for this view blocks any scrolling touches from getting to the table view located under the "button" view.
The upper view is a UIView (not UIButton). Given how the two views work together, the upper view is essentially part of what's going on with the table view and reacts to the table view being scrolled. But scrolling is the main thing and I'd like the user to have the largest scrolling area possible.
How do I best resolve this conflict so that the table view is scrollable as usual?
I guess you could subclass your UIButton and UITableView common superview, and override its hitTest:withEvent: to verify which view is hit, something like if you are in a clear or an opaque part of the button?
As pbush25 is mentionning however, it goes more or less against Apple's recommendation.
Related
Suppose there are two UIVIew subclasses in two different regions of the screen.
The first UIView subclass is a table or collectionView
The second view is a simple UIView.
Is it possible for gestures inside the second view to be "carried over" to the first view so that for example, a swipe up gesture in the second view would make the table/collection view scroll up ?
In WWDC 2012 Session 223: Enhancing User Experience with Scroll Views, Apple engineers explained that you can take a scroll view's panGestureRecognizer and add it to a different view to make that other view control the scroll view's scrolling.
Note that UITableView and UICollectionView are subclasses of UIScrollView.
So if you can put your table view and your second view into a common superview, you can move the table view's panGestureRecognizer to the superview and it will detect touches on both subviews.
[commonSuperview addGestureRecognizer:tableView.panGestureRecognizer];
The best way to achieve that is to encapsulate your 2 views in a another view and to add the GestureRecognizer on the motherView.
This way when the gesture triggers, with the location of the touch you can figure out if it started in one view or the other and you can track the move all the way to the second view.
I've have been trying for a while now, to implement a specific behavior in my app. On the initial view of my app, there must be a logo(imageView), a label and a textField. It should be possible to scroll down from the initial view, to a tableView. while the user scrolls down, the label in moved up in the window, to form a search field for the tableView. Then the scrollView should lock to the part with the tableView, and it should only be possible to scroll back up, if dragging elsewhere than the tableView.
What is best practice for doing as described?
The image show (only for illustration, i havn't been using story board when trying to implement it) an overview of the problem:
The way I've tried to do this so far, is by embedding the tableView in a scrollView (as seen on image), enabling paging on the scrollView, and than disabling scrolling on the scrollView, when the buttom part has been reached. I've added a gesture reconizer on the part with of the screen with the textField.
These two posts (Scrollview with embedded tableview and Use Pan Recognizer to Control ScrollView) descripe i further detail what i've tried so far.
But the question is more to, is there an alternate solution for making behaviour descriped above?
Maybe interactive animated transitioning between view controllers somehow?
YES there are! Implement a table view with a header view. And remove the scroll view.
self.tableView.tableHeaderView = topView
where topView will be the view wish as the UIImage, the label and textField
I am trying to recreate a UIView I have seen in multiple apps, mainly Shazam. The top half of the screen has some interactive buttons, and the bottom half looks like a tableView with custom cells. When the bottom half is panned/swiped up, the tableView scrolls over the top half with velocity, much like a scroll view.
I have been researching this and experimenting for a couple days now. I have gotten close, but not quite there.
My last approach was a view that had a tableView inside it. When the view was panned, the view would move to wherever the finger moved it to, but then would not have any velocity afterwards. Also when the tableView was panned/swiped down, it wouldn't move the whole view down.
Before that I tried a scrollView that took up the whole length of the screen. That gave the desired effect, but the button wasn’t tappable, and you could scroll the view in the button area, which is undesired.
Does it utilize ScrollViews or is it using a tableView that acts much like a ScrollView somehow.
Here is the Shazam UI/UX I am looking to recreate:
The top portion has interactive buttons, and doesn’t scroll. The bottom half shows content and when scrolled, covers up the top portion.
Below is what I have tried so far: This one is the panning view, which sort of works, but doesn’t have velocity and the tableView doesn’t scroll the view back down.
Any thoughts on a direction I can take from here is greatly appreciated. I am using Swift.
Cheers
This sort of thing is perhaps best done with a collection view and a custom layout — you can have some items for which you set layout attributes absolute to the view, and others relative to the scroll content offset.
There's a great (if wandering) discussion of this and other techniques in the Advanced User Interfaces with Collection Views talk from WWDC 2014.
This is actually simple than it seems at first. Here's how you can achieve this:
Create a UIViewController (not a UITableViewController).
Add some buttons to the top area of the screen.
Add a table view spanning the entire view controller's view. Make sure the table view is on top of the buttons added in the previous step.
Configure the top cell of the table view to be transparent (by setting its background color to Clear). Set the background color on the table view to Clear as well. This way it won't obscure the elements at the top of the screen, unless the table is scrolled up.
Because your table view is now transparent, you'll need to explicitly set the background color on the table cells other than the top one.
Profit!
I'm creating my views programmatically. I have a UITableView in my UIViewController subclass that I want to add a scrolling subview to that is not a cell. I want to add some text-based subview to the UITableView that scrolls with the table and starts out above y=0 so the user will only see it if he pushes the table down. That is, it should reside above the first section of my table. If it helps for visualization, I intend to make something similar to those "scroll down to refresh" features and want some indication to the user that scrolling down causes a refresh. Is there any way to do this without something messy like using another UITableViewCell to represent it or abusing the UITableView delegate methods to move a view around whenever the user scrolls?
Simply using [tableView addSubview:] in my viewWillLoad only makes it appear for a split-second then disappear once the table data is loaded. This seems weird to me because UITableView is a subclass of UIScrollView, which is meant to hold other views in it. Using [tableView.backgroundView addSubview] does nothing.
P.S. Why not use a UIRefreshControl for this? I'm still undecided but leaning towards not using one because I don't like how slow that spinning wheel "feels" when the refreshes are usually very very quick. I've been looking at other options like flashing the background subtly and only showing a wheel if it's taking a longer time than usual.
I You can implement pull to refresh with only a table view
To do this using the scroll view delegate, since tableview is a subclass of scroll view.
Set view controller to be the tableview delegate and implement
(void)scrollViewDidScroll:(UIScrollView *)scrollView
When scrollview content offset y value passed a point, add a label to the viewcontroller.view not tableview. When you scroll back or release, remove the view.
You might also be able to add label to the table view and set the frame origin to negative y value, so when you pull the label will move into view (Never tested this do might not work)
I have a view hierarchy that looks like this.
buttonsView <-- UIView with 1-3 small buttons
MKMapView <-- bottom most view
When my buttonsView is shown I still want the user to be able to scroll the MKMapView if the user is NOT touching any of the buttons.
I have tried different combinations of userInteractionEnabled = NO but nothing helps.
You have several ways to solve this:
The top view with the three small buttons can be much smaller, so that is only covers the area the three small buttons need. By this, the top view won't cover the map view, and you can still scroll it around.
Implement your own hitTest / pointInside functions to let the top view decide whether it wants to catch an event (when you tap on one of its buttons) or it decides to send the event further up the responder chain (when the user taps anything else). See for example here for possible ways to do it: Allowing interaction with a UIView under another UIView
The view on the front takes all the interactions. No matter if it is transparent or not. You should pass the gestures to the MKMapView in the bottom.
Another approach is to resize the view with the buttons to not cover the whole MKMapView, but only the part with the buttons. In that way, the user will be able to scroll only in the area where there are no buttons.