If you have seen the mailbox app you can swipe cells left and right and they have a UIView underneath that like green with a checkmark or whatever. I want to do this same thing. I have a tableView with custom cells that have gesture recognizers to animate/swipe them left and right but I can't figure out how to place a background underneath them. Does anyone know how to do this?
It might work if you add the subview and then bring the cell's content view above it, and then slide the content view over.
You could also just have a mask that clips the the visibility of your button container, and then animate the size of the mask so that it becomes visible as your cell content slides away.
You would want to add the container on the swipe before the animation starts, and then remove it after the animation stops when hiding it.
If placing it beneath the content view doesn't work, then use the mask, which will.
Related
I am trying to create a tinder like swipe left and right in UITableView cell. Here, the tableview cell contains an image view which I can move around with pan gesture. When I initiate the gesture on the image view, I want to move it freely over my device screen.
I am facing the problem that when I move the image view around it goes below the current cell. How can I bring the image view over all others so it doesn't go below the cell frame?
I tried using view.bringSubviewToFront but it doesn't work.
Please suggest a way I can achieve this.
An image view still contained in a cell is not going to be reliably brought on top of all other relevant views. You will have to move that view from the cell to the table view's parent view while dragging (and then return it to the cell if necessary at the end).
You will probably want to look into UIView.convert(_:from:) to figure out the frame to move the image view to in the parent view.
I have a view where content is supposed to scroll over a few elements. One of which is a button. What I did is place the button and all background elements, and then created a scrollview on top of that.
However, the touch events now (obviously) go to the scrollview, and not to the elements in the back. Is it possible to enable interaction through the empty parts of a scroll view?
Screenshot here:
There is a scrollview on top of e.g. the "next" and "edit" buttons. but I'd like these to be clickable anyways.
Thanks.
I'm going to assume that the content you want to scroll is in a subview. ScrollViews always serve as the first layer of any scrollable UI. Put scrollview in your subview then UIView over your ScrollView and over that add your elements.
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!
How can I ensure that a UITextField stays on screen despite not currently viewing the bottom of a UITableView? Like when I scroll up, how can it stay on-screen rather than disappear at the bottom of the screen. I want it anchored to the bottom of the screen at all times.
Edit: It does not appear when I add it as a subview.
2ndEdit: Stop docking post please..
You can add it to view that contains tableView i.e tableView superView.if your viewController has tableView.You can do like
self.view.addSubView(yourTextFied)
self.view.bringSubviewToFront(yourTextFied)
and set the frame of yourTextField approprately
If you just put a UIButton in a UIScrollView, the button does not highlight when you tap on it quickly. Instead, you have to tap and hold for a while before the button highlights. According to the documentation, this is because UIScrollView waits a little to determine if the user intends to drag the scroll view before forwarding touches to the views in the scroll view.
As noted in several Stackoverflow answers (such as this one: https://stackoverflow.com/a/19656611/2135004), the solution is to prevent this delay by setting the delaysContentTouches property of UIScrollView to NO. (An additional step is to subclass UIScrollView to override touchesShouldCancelInContentView: to return YES for UIButtons, so the user can still scroll the scroll view if the user initially touched the button in the scroll view.)
However, interacting with the App Store app seems to suggest another solution. (Although it may be a little picky, one reason I am not going with the solution where delaysContentTouches is set to NO is because I do not want the button to highlight if the user quickly drags on a button to scroll the scroll view. This is actually the highlighting behavior UITableViewCells.) Consider the following screenshot of the App Store app:
The blue "Quick Links" buttons (namely, "App Collections," "Game Collections," and "Apps Made by Apple") seem to be implemented as UIButtons with the UIButtonTypeSystem style because their highlighting fades in and out as you drag your finger in and out of them. In addition, the scroll view's delaysContentTouches property does not seem to be set to NO because the blue "Quick Links" buttons do not highlight when you quickly tap on them. However, the gray bordered buttons (namely, "Redeem," "Send Gift," and "Apple ID: ...") do highlight when you quickly tap on them! (Their highlighting also fades in and out as you drag your finger in and out of them.) Also note that the buttons do not highlight when you just happen to be touching them when you drag the scroll view.
How are these gray bordered buttons implemented? The key behavior I want is that they highlight when you quickly tap on them in a scroll view that delays content touches. (They should also highlight and unhighlight as you drag your finger in and out of them like plain UIButtons, preferably by fading their highlighting.) I do not see how this could be easily achieved by just subclassing UIButton, and I'm not even sure if somehow subclassing UIControl to create a new button class would work either.
I think what's happening here is that the grey button's highlighted state is being set when its action fires, then unset when the resulting alert or sheet is shown.
(If you're not showing an alert or a sheet, you'll just have to arrange for it to be unhighlighted on the next run loop.)