How to Do this UI set revealing animation in swift - ios

I am new to iOS development. Currently I'm developing a part from my previous Android app for learning purpose. I want to do following animation. I don't know a proper name for the animation so check below gif.
I have both text label with text field inside stack view. Can some one share the code for this animation or post a helpful link?

For such a case, I would suggest to use a UIStackView (vertical) to be the container for the components in the scene. When working with stack views, you could easily get such an animation for free! For applying the desired animation, the simplest way is to implement the popular UIView animate(withDuration:animations:) and hide the desired view in its animations block parameter:
UIView.animate(withDuration: 1.0) {
self.viewToHide.isHidden = !self.viewToHide.isHidden
}
By following this approach, you would be able to create an animation -which is what are you looking for- like this:
Resource: Easy Animation with UIStackView.
Official Reference:
You could review Mysteries of Auto Layout, Part 1 Apple Session (at 00:12:22, it should contains the topic that you are asking about).

There are various ways you could handle that. Below is one way. (Note that Ahmad's suggestion of a stack view would be easier and cleaner.)
Place your views that you want to appear inside another view. I'll call this view a container view (although in this case I don't mean container view the way interface builder refers to a view that can hold a child view controller.) Set the clipsToBounds flag on the container view to true.
Add a height constraint to the container view.
Select the constraint and control drag into your source file to make an outlet to the constraint. Note the current height value of the height constraint.
Now change the height value to zero. This should cause the views inside the container view to disappear.
When you want to animate those controls into place use a UIView animation that contains a call to self.view.layoutIfNeeded(). Set the height constraint of the ContainerView to its nonzero value immediately before the call to UIView.animate(duration:animations:).

Related

In swift, I have a UIButton inside a UIView inside a UIStackView, and the button is not responding

I have a UIButton, for which I have a touchUpInside IBAoutlet function call, and it is embedded inside a view, which is then embedded inside a stackview. I have User Interaction enabled for all three of of the stackview, the view and the button.
However, the touchUpInside function is not called when I click the button. Does anyone know if this has a solution?
With the limited context, I can only give a guess. Perhaps something is blocking the button such as another view on top of it? Sometimes the order of things in your storyboard file can make certain things not register touches.
The container view for the button is likely shrined to a small size and thus it and its subviews do not receive touches. Subviews are displayed because "Clip to bounds" is false by default for all views. So subviews are drawn even outside the bounds. The easiest way to check is to give a container view a background color.
If this is the case, then there are several ways to resolve the issue:
Set a reasonable constraints to the container. Stick to nearest neighbour boundaries, for example. Or set a minimum size.
Set a size for the container view.
If the container view is inside UIStackView you can set Alignment = Fill, (not Center) which will make the container view take the space suggested by UIStackView.

UIViewController subviews added in interface builder not showing up

Ok so basically I just used the interface builder with auto layout to add some subviews and constraints to my UIViewController. My app is supposed to segue to this view when the user wants to take a photo. I laid out a few camera buttons on a black, square UIView that will serve as the camera view once I have programmed it. Since I wanted to make the camera view a square, I also had some extra space where I just made a label that says "Take a photo!" This is how the interface builder for this view controller looks:
And this is how the same view looks when I run the app:
I'm guessing it's something simple that I'm missing that's causing this problem but I will be grateful to anyone who can help me!
When you are using autoLayout you should set all needed constraint to the view. Otherwise it is an ambiguous layout problem, and the system is not knowing where to set your view
If you want the height to be the same like the width set the aspect ratio constraint to your view
And be sure that the multiplier of constraint is 1
Bring that subview to front, putting all other views to its back
try it will work
parentView.bringSubview(toFront: childView)
This method can also be used to bring any subview to the front, even if you're not sure where it is:
childView.superview.bringSubview(toFront: childView)

hide/ show controls in View controllers

My application gathers input from users and hence it is full of Labels, text boxes and buttons and I have to show or hide set of labels and text boxes based on certain conditions.
To accomplish it, I did the following.
Set fixed height (lets say 30) for all the controls
Set height constraint on each of the controls and created an outlet to the height constraint in the ViewController
Alter the heightConstraint.constant value programatically (between 0.0 and 30.0) based on the scenarios.
Having programmed like this, it is very difficult for me if there is any change in layout. (i.e., if user requested to add/remove any particular control from the view Controller).
I am using Auto Layout constraints. Could anyone suggest if there is a better way to accomplish my goal.
I am using IOS9 and Swift.
Many thanks in advance.
You can use UITableViewController with static cells for this case.
For hide/show row or section, you can change the size in the tableView:heightForRowAtIndexPath method.
UITableViewController automatically manages the layout and with static cell you can even create outlet for all the controls.
Have you considered using a table for this? It has mechanisms for inserting and deleting rows and would manage the layouting for you - only part you'd need to care about are the contents of the cells.
Instead of making IBOutlets to the height constraints of all the views that you might need to hide, you can just use the hidden property of UIViews to hide/show the view.
In case you need the view to make space for other views, you could set a simple animation and move the view out of screen bounds. You might face issues with layout constraints but it's surely worth the effort from a UI/UX perspective.
Additionally, if you know that you don't need a view any more you can even remove the view from it's superview.

Why would all views in a view have userInteractionEnabled set to NO

I have a view and for some unknown reason, it's not receiving any touches. When I debugged the view, I've found out that its views' userInteractionEnabled is set to NO. The problem is that, I haven't set it anywhere; neither in Interface Builder (triple checked) and code. The problem started when I first created the regular UIViewController in Interface Builder, without a subclass or any custom code. I know it's near impossible to tell something without code samples, but my project is heavily complicated, and as I've said, the problem is appearing in a regular UIViewController (no subclass) that I've set in interface builder, so there is no relevant code that would mean anything. The rest of the app just works fine, though.
What can possibly cause all views in a regular, default view controller to become userInteractionEnabled = NO?
Found the answer myself after traversing window's recursive description more carefully. I had a scroll view, and inside that, a content view, and other views inside. I'm on pure auto layout, so my scroll view's content view needs to calculate it's own intrinsic size. I was using a placeholder height for the content view in Interface Builder, to make editing interface visually easier. Apparently, I forgot to connect the last view inside my content view to bottom of my content view with a constraint, resulting in my content view having a height of 0 (though still displaying perfectly as it doesn't have clipping enabled). When it's size was 0, it was calculating userInteractionEnabled as NO automatically without being explicitly set to NO. I've added the required bottom constraint and the problem went away.

Why is the UIPageViewController resizing its UIViewControllers views after the page turn?

Within the pageViewController:viewControllerAfterViewController: method, just before the return statement, the view which is about to be returned as the next page has the correct view frame size.
However immediately after the pageViewController:didFinishAnimating:previousViewControllers:transitionCompleted: method is called, I check the frame size of the newly introduced view controller ([pageViewController2.viewControllers objectAtIndex:0];) and I find it resized.
Note that, I have set [self.pageViewController.view setAutoresizesSubviews:NO] and the autoresizing mask to None for the newly created ViewController.
Any ideas in which step the new ViewController is being resized?
I think the problem is inherently related to the nature of UIPageViewController. It is built from UIScrollView. I don't exactly know why there is strange resizing behavior, but it seems to be particularly pronounced when the view controllers that make up your pages use auto layout. Seemingly, locking the constraints in your page view controllers to the superview makes the elements resize after the transition because the superview is itself getting resized after said transition.
This sucks because Apple is basically pushing all of us to adopt auto layout. Auto layout is awesome, and I recommend everyone use it from now on, but it really really sucks when you use it with a UIPageViewController. They really ought to either scrap that class or build something easier for developers, something that can be dragged into a storyboard outright.
A few things to consider.
1.) Don't lock anything to the "Top Layout Guide" or the "Bottom Layout Guide". Also make sure you have "Constrain To Margins" disabled on any view intended to hug the sides of the screen.
2.) If you are using a label in your individual page / content view controllers, make sure you bind/constrain it to something other than the superview. I wanted to place a label over a UIImageView, so I aligned the label to the leading and top edges of the image view (using AutoLayout constraints only), creating an offset to give the label some margins.
3.) The following would otherwise be a good tutorial. However, it is a bit outdated. I downloaded the project and basically modified it to get a UIPageViewController implementation that works. The only problem with this project is that it doesn't use AutoLayout. I'm currently writing a blog post that more clearly discusses how to use UIPageViewController and Autolayout together.
http://www.appcoda.com/uipageviewcontroller-storyboard-tutorial/

Resources