UIStackView For Showing And Hiding User Interface Controls

Let’s take a look at a very useful feature of UIStackView: showing and hiding user interface controls.

In an earlier tutorial, I demonstrated how to implement a custom edit button in each row for a UITableView. To show and hide the edit button, I used a width constraint with an IBOutlet to access it in code, and was then able to set the width to 0 for hiding the button, and to a non-zero value to show it.

I used a similar technique for showing and hiding the keyboard without any need for manual frame size calculations. You can see that in my How To Access Storyboard and Xib Constraints in Code post. In the keyboard case, there is no explicit setting of the height constraint value, and no manual frame size calculations. The height constraint is set based on the keyboard height, which is available from the keyboardWillShow notification.

Christian Tietze at Clean Cocoa raised the topic of whether the edit button functionality could be realized without specifying a width constraint. I always appreciate comments and discussions, and this one sparked an idea. This would be a perfect candidate for one of the lesser known features of UIStackView, which is showing and hiding views. Note: Christian’s blog is full of unique and valuable content. If you are not already following along, you should definitely check it out.

This tutorial achieves the same functionality as the earlier one for a custom edit button in each row, but it is targeted at iOS 9.0+, since it uses UIStackView. Given that UIStackView is well known as a way to eliminate many constraints, we’ll double the payback in this tutorial and not only use it to show and hide the custom edit button, but we’ll add another UIStackView, and the net result will be the elimination of all constraints except those needed for the top level UIStackView.

26 Feb 2017: I’ve updated the code in GitHub to be Swift 3 compliant.

To recap the objective, we want a custom Edit button next to the UIKit Delete icon when a UITableView is in edit mode. By edit, I don’t mean the green plus sign to add an entry. This Edit button is for editing data in the row. There will be one edit button in each row.

Here are screenshots of what the rows will look like when in normal and edit mode.

normalMode

 

With a UIStackView, when you set a control to be hidden, the control is removed from the view hierarchy, but is still owned by the UIStackView. Making it appear again simply requires setting it to be visible. There is no adding and removing of views, and no setting or changing of constraints. UIStackView and Auto Layout do all of the work, which is excellent.

As you can see from the above screenshots, this UITableView will display Awesome Swift Books, left justified, and below those, the author of each book, right justified. The custom edit icon I created with Sketch will slide in to the left, along with the UIKit Delete icon.

Specifics for handling table edit mode and automatically sizing table cell row heights are described in the tutorial I referenced above, so in this post I’ll focus on the UIStackViews.

Here is the storyboard with the Edit button, and labels for Title and Author.

Screen Shot 2016-05-17 at 4.28.36 PM

There is one top level UIStackView within the cell Content View. The only constraints required in this example are for this UIStackView in the Content View. I’ve specified that it should be bound to the top, bottom, leading, and trailing edges with an inset of 5 for a nice visual effect.

Under the top level horizontal UIStackView, there is the Edit button, and then a vertical UIStackView that contains the Title and Author labels.

The custom UITableViewCell class has IBOutlet properties for the button and two labels.

The TableWithEditIconsController class is the subclass of UITableViewController. Within the cellForRowAtIndexPath method, when the table is in edit mode, the buttonEdit from the custom BookTableViewCell is set to hidden = false. When not in edit mode, it is set to hidden = true.

This is all that UIStackView needs to know to add or remove the edit button. The beauty is that it adjusts the view automatically.

There are many cases where you might want to show and hide a view based on user actions or state data, so definitely consider using a UIStackView for such cases.

You can find the completed project here on GitHub.

Leave a Comment: