Reveal Tutorial: Live View Debugging

Challenge: Changing Modal Styles

Though you may have known about these new modal presentation styles in iOS 8, have you been able to play around with them? Reveal actually helps you visualize the effect you get from using UIModalPresentationOverFullScreen.

Challenge: Change the modalPresentationStyle to UIModalPresentationFullScreen. How can you use Reveal to tell the difference between the two presentation styles?

[spoiler title=Answer]
After you change the presentation style, build and run the app and reconnect the simulator in Reveal. You may need to delete the app from the simulator first.

All the off-screen content that wasn’t drawn in the simulator but showed in Reveal is now removed from the view hierarchy. As the content is no longer in the view hierarchy, Reveal doesn’t display it:

[/spoiler]

Inspecting Artsy’s Home Screen

You’ve paid enough attention to the splash screen, so it’s time to move on to the home screen.

If you haven’t already, dismiss the splash screen by tapping TRY WITHOUT AN ACCOUNT. The splash screen will dismiss and you’ll see the home screen that you previously saw lurking underneath the splash screen:

Take a moment to play around with the contents of the home screen. It’s fairly rich in content, with some artwork in the header and a plethora of controls in the white area below. If you scroll up, you’ll even see the white content scroll over the artwork.

There is clearly quite a bit going on here, but how is it built? Now that you have Reveal at your side, dissecting the view hierarchy will be no problem.

“Revealing” the Home Screen

Back in Reveal, hit the refresh button to update the view hierarchy. You should see Reveal look something like this:

A couple of things that you’ll notice immediately:

1. The artwork at the top appears to sit below the content area.
2. The content area appears to be a UITableView, based on the numerous vertically stacked views, but is still too complex to understand from this vantage point.

It’s a good idea to dive into the table view to get a better idea of its construction.

In Reveal, focus on the table view by rotating the view 45 degrees to the right and clicking on the area below all the content and cells, which will select the instance of ARTopTapThroughTableView:

Now that you’ve selected the table view, it’s fairly obvious how to achieve the effect where the table view appears to scroll over the content below.

The content view is not part of the table view, but the table view is on top of the content view. The content view is visible because the table view is allowed to scroll down far enough to show it!

With the table view selected, open the Attributes Inspector in the right pane. Scroll down to the UIScrollView section, and you’ll see the Y value of the content offset is -252, which moves the content down far enough to see the content behind it.

Set the Y value to 0, and then watch the content section snap to the top and cover the artwork behind it.

“Revealing” the Table View

Double-click on the table view in the view hierarchy you just selected. Alternatively, double-click on ARTopTabThroughTableView in the left pane. You’ll see Reveal now focuses on the table view and the rest of the view hierarchy is no longer shown:

Focusing on a particular view in the hierarchy makes it easier to concentrate on that one area, as well as being easier to navigate. The view hierarchy in the left pane is also much simpler now.

Note: You can return to the full view hierarchy by clicking the back button at the top-left of the Reveal window, or by using the breadcrumb trail that’s along the top.

If you look at the hierarchy in the left pane, you’ll see that the cells begin under the CURRENT SHOWS header, and are of type ARModernPartnerShowTableViewCell.

A vanilla UIView contains everything above the cells, and you achieve this by setting a custom tableHeaderView on the table view.

One more observation to makes is that all the cell’s contents don’t reside in it’s contentView, but instead are placed directly inside it’s view:

Dive one level deeper by double-clicking on ARModernPartnerShowTableViewCell in the left pane to focus on the cells construction:

From this perspective, it’s easy to see how the break down of the heirarchy. There are three separate instances of UILabel that display information about the collection, and a UICollectionView wrapped inside a UIView, which displays a collection of artwork.

There are many methods that you can use to center labels with Auto Layout, but which one did the Artsy engineers use?

Click on the top label and view the Participating Constraints section of the Layout Inspector to see how it’s done:

Reveal reveals (sorry!) the layout is achieved by pinning the label to the center of its superview, combined with making the width 40 points less than the superview to provide padding.

Two additional constraints seem a bit out of place. Look at the most recent screenshot; there’s one constraint limiting the width to 167.66 and one keeping the height at 19.33. Look at the top of the Layout Inspector tab, and you’ll see that the label’s actual width and height is 280 x 19.333.

What’s happened with these constraints, and where did they come from?

In this case, the width and height in blue represent the intrinsic content size of the label, or in other words, the measured size of the text within the UILabel. Since these are system constraints, they are discarded when laying out the label in favor of those constraints added by the developer.

If you want a reminder of what the colors mean, expand this spoiler.

[spoiler title=Color Explanation]

• Blue: Represents constraints generated automatically
• Purple: Represents constraints added manually by the developer

[/spoiler]

Good job! Without ever once touching the source code, you have a pretty good understanding of two of Artsy’s complex and beautiful screens.

Live View Debugging

In Artsy, hit the EXPLORE button the tab bar. Then in Reveal, hit refresh to update the view hierarchy with the EXPLORE screen; it should look something like this:

Imagine you would like to experiment with the visuals a bit, such as the background color and the text content.

In Reveal, click on the white background behind the cells to select the background view.

Open the Attributes Inspector in the right pane. Scroll down to the UIView section where you will find the Color group.

Select the dropdown for background and choose Light Gray Color, the background color should update in Reveal:

The new background looks pretty good, but darkening background reduced some of the contrast between the image and the background.

In the center pane, click on one of the images to select it. It will likely grab the UIImageView itself, though you will want to select the UICollectionViewCell subclass it is a part of instead. In the left pane, select the ARBrowseViewCell that the UIImageView is a subclass of.

Open the Layer Inspector in the right pane. Scroll down to the Border section and change the width to 1, and the color to Dark Gray Color:

Note: Changes to the layer’s border generally won’t be visible unless the view hierarchy is “collapsed” in Reveal.

The center cell now has a 1-point border to help give the images some pop from the darker background.

Not only did you just change UIView properties in real-time, but you also were able to modify the CALayer itself. Pretty powerful stuff.

Select the “AUCTIONS” text in the middle cell. Then, open the Attributes Inspector in the right pane and change the text field to:

Ray Wenderlich Art Fair - Come browse hundreds of the finest collection of Rageface art from around the world!

In the same inspector, change the lines property to 0 to support word wrapping:

You should see the updated text show up in Reveal: