I'm trying to achieve the following behavioural attached in the image and I did it using vies with custom classes, the question is that how can I achieve this using view controllers,
the behavioural works as follow: when tapped and swipe left the previous screen should start appear but without pop from navStack, just slide to show and when user leave his finger will return to initial state which same as above image, I did it by adding a UIGestureRecognizer on this white slide edge start change the x position for the upper view but, both upper and previous are views not UIViewColtrollers, the question is how to implement this using UIView controllers or make the background colour of the upper view controller transition colour.
have any idea about this or do sth like this before to help ?
Related
Is there any way to drag a view controller onto the current view controller using Swift? I would like to drag from the bottom of the screen and have the new view controller follow the finger. When the finger releases, I want for the view to snap into place. The view controller that I plan to drag on needs to have a transparent background so that the previous view is still visible. I tried using a swipe gesture paired with an animation that brings in the view from the bottom, but the previous view turns black momentarily before the animation is complete. Also, it doesn't follow the finger's path. This is similar to what happens when you try drag from the bottom of the camera app. It brings up a page, following your finger, and darkening the background. I am doing this programmatically. Thanks.
To do this you will need to use a UIPageViewController and set its transition style to scroll and navigation to vertical. There are lot's of great tutorials on how to use a UIPageViewController so just look online.
Here is a part of the AirBnB app I would like built.
Here are the 3 questions that I'm in need of advice on.
How do i get a cell on a UITableView to act like the [ MORE FILTERS ] button? The button seems to act like a UITableView cell that always stay at the top. YET, it fades away just before going out of scope. Is this even a tableViewCell?
The view [ARRIVES | DEPARTS]. What view is this on a UITableView? When the tableView is scrolled all the way to the top it connects seamlessly with the [MORE FILTERS] button making it seem like its one view. But when the tableView starts scrolling, the [MORE FILTERS] button can be seen sliding over it as it fades away.
What is the [SHOW FILTERS] button? Is it a UINavigationItem titleView property or some separate view? As the table scrolls up it can be seen attaching itself to the UINavigationBar in a fade transition. At first i thought it was a just a UINavigationBarItem, but I do not know how to add items under the title of the bar. Any clarification on what this is or how can be accomplished?
I have already looked at Apple's Example on customized UINavigationBar, but it doesnt provide any clues to accomplish this. Any help appreciated
just like you did, when I came across an application like this one which has cool UI effects and animation, I would like to analyse and if possible try to do the same effect by myself, so that I could get innovations as well as knowledges.
Let's analyse it first, at the meantime you will probably find all the answers. I just drew a graph which shows the UI hierarchy of the screen, of course this hierarchy is based on my analysis, I cannot guarantee that the hierarchy is 100% correct.
I will do a bit of explanations here. From top to bottom:
1. The Navigation Bar(Red), just a opaque navigation bar, nothing special;
2. The Show Filters View(Purple) is a view which anchors to the bottom of the Navigation Bar(Red), and it is hided when the screen launches. Please note that this view is not a subview of Arrives & Departs View(Blue). It is added directly to the view controller's root view. Which means Purple and Blue are siblings;
3. The Arrives & Departs View(Blue), nothing special;
4. The More Filters View(Green), nothing special;
5. The Table View(Orange), nothing special;
So from my analysis, Purple, Blue, Green and Orange are all siblings.
Now let's move on to the fancy UI effects and animations. The trick here is you need to observe the change of the table view's contentOffset (I recommend to do it in the scroll view's delegate - scrollViewDidScroll), and move, hide or show the views accordingly. There are four stages:
1. The initial stage, like the graph above.
2. The Blue starts fading out, Green moves up as the finger moves, Orange increases its height. (Purple is still at the same position and hided, I just removed it from the graph in order to make it clearer);
Blue totally faded out, Green starts fading out and Purple starts fading in. Orange is still doing the same - increasing its height;
Green totally faded out, Purple totally faded in and Orange increases its height to fill the screen and then anchors to the bottom of Purple.
The [MORE FILTERS] button does appear to be a cell of the UITableView. Since it is a different type of cell than the other cells containing the UIImageView and the UILabels using a different identifier you can tell the cell to fade away with an animation. Try this link for more information.
The [ARRIVES | DEPARTS] seems to be its own view. I believe that this and the tableview are both part of a UIScrollView. This is the reason that it seamlessly disappears when the [MORE FILTERS] cell scrolls up towards it.
The [SHOW FILTERS] button could just be a part of the navigation bar. When the scrollView finishes scrolling the navigation bar can be extended. However, it is also possible that the button is in a view of its own and is hidden until the scrollview finishes scrolling. Either way should be possible but I would recommend putting it in its own view rather than attaching it to the navigation bar.
Messing around with pushViewcontroller due to one of the awkward requirement :/
So there is a rootViewcontroller with 1 Background Image and UITableView with custom cells and there is a detailViewController with similar backgruound image with different views.
Requirement is:
On tap of UITableViewCell... the whole navigation animation should not affect the background image. Background Image should stay as it is and all other view should slide.
How I can slide only UITableView and display detail screen without changing background image ?
There is one possible solution is just add 2 child view controller and apply slide animation on both child. But in that case I have to keep on removing the child. I can't remove child because on tap of custom bottom back button I have to display the 1st screen instantly.
Any other possible solution or improvement ?
You can wrap your UINavigationController in a custom view controller that contains the background image. Then make sure your content view, as well as the pushed controller's views have a clear background.
How to make a UiViewController appear from the right of the screen, the same way as this application(Break) does on iPad.
https://itunes.apple.com/us/app/funny-videos-pics-by-break.com/id342257973?mt=8
In fact, I would like that my UIViewController appears on the screen from a side and not to fill the entire UIView of my main ui view controller. The background view should also be darken.
To sum up, I would like to mimic the same Break's behavior.
Here is a picture if needed
Any idea ? Thanks for your time !
You may need to just do some manual work with UIViews. So rather than push a viewcontroller onto the stack you would overlay a semi transparent black view over your background view to darken it and then simply do an addSubView of the view you want to show on top.
Background:
I am working on an iPad app that will pop a custom view when the user clicks on an image.
I want the view to have rounded corners and a close button ( red x in a circle ) that sits on right top edge.
The button in half inside and half outside the view.... Take a look at the Kayak or Zynga Poker apps to see what I am talking about.
Question : If I create the view programmatically and add the button, it works.
However, I really want to user a nib to create the view so I can design the view correctly. So when I call self.layer.maskToBounds = YES on the view ( to create the rounded corners with a radius of 25 ), it clips my button ( since its half in and half out ). How do I retain my button without it getting clipped and still have rounded corners ?
Sounds to me like you are using a view and a button. What you might try is using a third container view (with clear background) in which you place your original view and your button. The button will need to be on top of the view, so to speak, so it is not obscured by your view. But that should allow you to have properly rounded corners on your view (not the container view) and have your button fully visible.
Some settings, such as maskToBounds, cornerRadius, aren't available in IB. You can create the entire view using a NIB except it won't have rounded corners in IB and in viewDidLoad you set just those properties that couldn't be set in IB.