Menu & Search

Hiding views with Auto Layout

September 16, 2015

If you’re using Auto Layout, you’ve certainly encountered a case where you had to hide some views. Without Auto Layout, that’s rather straightforward. You just access the views’ frame, set its height to 0 and reassign it to the view.

With Auto Layout, this requires a bit more work, but the reward is much greater. Why? Read on.

You see, with a properly set up Auto Layout hierarchy, all views are in harmony. This means you can’t violently adjust frames whenever you want, but you should instead access and adjust proper constraints.

Solution

The simplest way to do this is to set up a height or width constraint on all the views you want to resize, then simply set those constraint’s constant value to zero.

Below’s a sample of a view with 3 labels and a button that toggles the second label’s height and subsequently hiding or showing it.

I’ve set up all the necessary constraints and linked all the height and vertical spacing constraints to my ViewController.swift file.

hiding-labels-constraints

Adjusting constraints

By hiding labels or views like this, you won’t break Auto Layout and all other views will be repositioned or resized accordingly. That’s why this approach is so great!

Don’t forget the spacing

If you want your views to look pixel perfect, you shouldn’t forget about adjusting the vertical or horizontal spacing between views. If you just set the height or width of the hiding view to zero, you’ll still be left with whatever the spacing is. So link the constraint to your View Controller and set its constant to zero as well.

hiding-labels-vertical-spacing

Bonus

If you’re hiding views in front of your user (on demand), you should be a good developer and animate them. Remember:

Animation is a nice way of letting your users know what’s happening with the UI.

A popular question among developers new to Auto Layout is how to animate constraint’s constant changes. I’ve written a short post on this here, but to cut the story short, you still have to call the UIView.animateWith… The catch is that you have to adjust the constraint’s constants before doing the animation, and in the animation block only call the super.view.layoutIfNeeded() which will indeed animate all changes.

Here’s how I tackled toggling the second label with animation:

 

Find the complete source code on GitHub or download directly via a handy .zip file link.

STOP LOSING TIME WITH AUTO LAYOUT!

Take part in the 5-day course with actionable tasks that will let you become a master at recognizing and solving the most common mistakes iOS developers do with Auto Layout.

Let Auto Layout become a tool you swing with your utmost confidence!

I won't send you spam, I promise. Unsubscribe at any time. Powered by ConvertKit
Hey there! You're already subscribed to my newsletter and you've hopefully gotten some useful tips and tricks when working with iOS. If you're also working with Auto Layout, make sure to check out my book called Auto Layout Fundamentals and get a 20% off for being my subscriber! https://gum.co/autolayoutfundamentals/youareawesome
Jure Zove

A lot of things but mostly a programmer who really likes fast cars. Check me out on Twitter, if you fancy.

Related article

Introducing The “How do I Auto Layout” Cheatsheet

STOP LOSING TIME WITH AUTO LAYOUT! Take part in the…

Fastest way to use Auto Layout in code

Raise your ✋ if you hate adding views and setting…

Swift Optionals Demystified

STOP LOSING TIME WITH AUTO LAYOUT! Take part in the…

  • Rajat Pagare

    Hello Jure,

    Nice tutorial, but i am getting an issue, when i set the height constraint to greater then or equal, the Label not gets hide properly, there is some space left of that. Also when the label has more then 1 line then only the space gets hide not the view.

    Hope you will resolve this problems.

    • Hey Rajat! Thanks for your message.

      It’s hard to tell without seeing the code, but if you set the constraint to >= 0, then you can’t hide it. This approach only works if the relation is Equal (=). For example, if you say your label should be >= 0, it can be 20, 30, 40, etc.

      Maybe labels are not the perfect example of this method. For multi line labels you could reverse the logic and add a height constraint that equals 0 and then use the NSLayoutConstraint’s attribute called active to hide or show it.

      Let me know if that helps!

      Jure

  • Mr. Burns

    If your deployment target is iOS9+ you should UIStackViews instead for this.

    • @Mr_BurnsX:disqus excellent point, I’ve yet to dig in properly into UIStackViews – hopefully I can write up a short tutorial on that.

  • vivek kumar gupta

    this is really gud tutorial…..But if i want to write …. var defaultLabelHeight: CGFloat? and defaultLabelHeight = self.secondHeightConstraint.constant in objective -c then how can i write?????

    • You can write:
      @property CGFloat defaultLabelHeight;

      The other part stays the same, so:
      defaultLabelHeight = self.secondHeightConstraint.constant;

      Hope this helps!

Type your search keyword, and press enter to search