Build interfaces with style

Hello. My name is Luke Larson, and I'm an Xcode engineer. Later, I'll be joined by my colleague, Youssef Elabd. Interface Builder provides a simple and intuitive way to build app user interfaces visually without writing any code, allowing developers to focus on what's important in making their app stand out. Today we're going to show you what's new in Interface Builder in Xcode 13 that makes it easier than ever to utilize the latest platform features, including new system provided control styles, to make your app stand out even more. In this video, we're going to cover improvements to the Interface Builder canvas and authoring support for button styles, table content styles, hierarchical symbols, and accessibility. Let's start with canvas improvements. One of the first things you'll notice with Interface Builder in Xcode 13 is the completely redesigned canvas bottom bar.

The controls to the left of the bar provide all the same functionality as before, but in a more compact form, reserving more space for the canvas. There's a popover to choose a device which contains a variety of devices organized in groups. Clicking a different device group expands it and causes the previous group to collapse, making it easier to find the device you're looking for.

There are also buttons to configure scene layout, orientation, appearance, and all-new accessibility options that we'll show later in the video. Other improvements include refinements to the canvas outline view. And to show them, let's jump into Interface Builder. I'm working on a Booking Scene in a hotel app, and I noticed that it isn't positioned next to the Promotions Scene in the outline view to the left.

Which is what I expect, since the Booking Scene segues to the Promotions Scene. It's now possible to move and rearrange one or more selected scenes in the outline view using drag and drop. So I'll drag the Booking Scene down to be positioned just above the Promotions Scene.

Great. Now the two scenes are positioned next to each other and are easier to navigate between. You can also copy entire scenes by holding the Option key while dragging. Another refinement to the outline view is that outline groups like Constraints are now selectable, allowing for keyboard navigation and easy modification or deletion of entire groups of objects. To show this, I'll select a constraint group in the outline view. This is equivalent to selecting all the constraints in the group. I'll press the Right Arrow key to reveal the four edge constraints contained in the group. Now I can easily modify the constants for all group constraints in the inspector Or delete the entire constraint group by selecting it and pressing the Delete key. Next, let's continue to new button styles.

Interface Builder in Xcode 13 supports authoring buttons with new preset styles, including the familiar Plain style, and three new styles: Gray, Tinted, and Filled. These new styles make it easy to create beautiful and consistent looking buttons directly in Interface Builder that automatically provide support for system features like dynamic type, multiline titles, and accessibility. Additionally, button styles support further customization with options like preset button sizes and corner styles. I'll go into more style customization later in the video. Check out the video "Meet the UIKit button system" for more information on button styles. Let's jump back into Interface Builder to show these new styles in action. There's a Book Room button at the bottom of the scene that could use some attention. I'll use pinch-to-zoom to get a closer look.

I'd like this button to have a fill color and rounded corners to draw more attention to it. In Xcode 13, it's now possible to create buttons like this directly in Interface Builder using button styles. Let's focus on the inspector. There's a new Style property near the top of the Button inspector. When a non-default style is selected, a button will be opted into the new button system, automatically getting support for dynamic type, multiline titles, and accessibility. I'll go ahead and open the Style pop-up menu in the inspector and select the Filled style for my Book Room button. The button now has a blue fill color and rounded corners that look just right. And all I had to do was make a single change. Button styles are great for quickly getting the look you want. After selecting a style, new properties appear in the Button inspector, enabling further style customization, including Subtitle, title alignment, and color options, image positioning, Corner Style, and more advanced background configuration options.

As the name suggests, the Filled style uses the app tint to set a button's fill color, giving it a prominent look and making it appropriate for important buttons in a user interface. And corner styles mean you don't have to worry about setting a specific corner radius. The default corner style is called Dynamic, which provides a great-looking corner radius that automatically scales with dynamic type, maintaining the appearance of the button at any size. Alternatively, the Fixed corner style's radius remains the same as button sizes change. For cases where more control is needed, both Dynamic and Fixed corner styles have customizable corner radiuses. Additionally, a range of preset corner styles are provided, including Small, Medium, Large, and Capsule, all supporting dynamic corner scaling. Buttons with styles also gain access to a new Button Size property in the Size inspector containing preset button sizes, including Small, Medium, and Large. Let's go back to the hotel app to look for more opportunities to adopt button styles. The Check in and Check out buttons are looking a bit plain. To make them more visible, I'll use the Tinted button style, which has a transparent tint-colored background and is great for buttons that are important but don't quite need the prominent look that the Filled style provides. I'll select the Check in and Check out buttons in the outline view by holding the Command key.

And choose Tinted from the Button Style menu in the inspector.

This is exactly what I was looking for for these buttons. Moving on, the Promotions Scene in this app has a few buttons that would also be perfect for the new Tinted style. Let's segue on over and take a look. Using the canvas Minimap, I'll double click on the Promotions Scene to jump directly to it.

This scene displays a list of active hotel promotions guests can choose from by tapping the appropriate Get button. Each Get button overlays an image and will benefit from the extra contrast provided by the transparent background of the Tinted style. I'll go ahead and select the three Get buttons in the outline view by holding the Command key.

and choose Tinted from the Style menu in the inspector to change all the button styles at the same time.

That looks great. Tinted button title and background colors are based on the app's tint color and provide the appropriate level of contrast. I'd also like the Get buttons to toggle and change their appearance after being tapped to indicate which promotions have been selected. I'll configure them to be toggle buttons to achieve this behavior, which are new in iOS 15. In the inspector under Menu, I'll toggle the "Selection as Primary Option" property to make the selected buttons toggle buttons.

Before continuing, I'd like to add a new button to the Booking Scene to allow customers to request help.

I'll go ahead and open the object library...

which now has buttons preconfigured to use the new style system, including buttons with the Plain style and three new styles: Gray, Tinted, and Filled. The Gray style has a transparent gray background which provides a bit more contrast, so I'll drag out a new Gray button to act as a "Get Help" button and position it in the navigation bar.

I'll select the new button in the outline view...

and use pinch-to-zoom to get a closer look.

I'll set the button's Title and Subtitle...

its Image to a question mark symbol...

and to add a bit more space between the image and titles, I'll set the image Padding.

One of the advantages of using Interface Builder is being able to try out changes and quickly check the result. I'm not sure which Corner Style to use here, so I'll try the Capsule style to see how it looks.

That looks good, but it's not what I'm looking for. Instead, I'll choose the Large Corner Style to get the desired look. That was easy. Everything needed to create great-looking buttons is now available directly in the Button inspector. For cases where more advanced style customization is desired, setting a custom Background Configuration enables more fine-grained control by revealing additional properties, including Corner Radius, Stroke, and Background Image.

One of the steps before booking a room should be selecting the number of guests expected to stay in the room. I'd like this scene to have the option to choose between 1 and 4 guests. iOS 15 now supports Pop Up Buttons, which are perfect for this feature. A pop-up button is a button that when clicked displays a menu with a list of items. A single item can then be selected from that menu, which becomes the new label of the pop-up button.

I've already created a Guests label, so all I need to do now is add a Pop Up Button. I'll open the object library and drag one out.

Pop Up Buttons also support button styles, so I'll choose the Tinted style to match the Check in and Check out buttons.

Then, I'll create two more menu items using Option-drag to copy the existing menu items in the outline view.

Finally, I'll configure the menu items to have values from 1 to 4.

Note that when an app is running on a Mac with Mac Catalyst 15, buttons with styles automatically map to native macOS variants, making it easier to get your app looking great on the Mac. iOS pop-up buttons are also now supported on Mac Catalyst 15, as well as tooltips, which provide more information when the mouse cursor hovers over a control.

I'm planning to have a Mac Catalyst version of this app, so I'll go ahead and set a Tool Tip for the new Pop Up Button in the Control inspector.

And we're done. Note that menu items must be connected to actions to display at runtime.

Now that I've adopted new button styles across the app, let's build and run.

Here's the app running with the new Gray styled Get Help button, Tinted room options and Filled "Book Room" buttons.

And finally the Tinted promotion buttons, and they look great.

Next, I'll hand it off to Youssef, who will cover table content styles, hierarchical symbols, and accessibility. Youssef? Thanks, Luke. The next workflow we'll be visiting is styling your Table View Cells using Table View Cell contentconfiguration styles. Most great hotels also have a great restaurant. This hotel is no different. Recently, I've been working on adding a few views to the app to let guests check out the restaurant's menu. Let's pick up where I left off. I'll two-finger doubletap on his Table View controller to focus in on it. This static Table View shows a list of the amenities at the hotel, and I've recently added another Table View row for the restaurant. I want the title labels in the cells here to stand out above the subtitle labels underneath them. One of the new Table View Cell content configuration styles can give us the appearance that I want. Here are some of the cell layouts you get with the new cell styles like grouped header, value cell, and grouped footer. These new styles work great with images and also get some functionality like dynamic type for free. So let's head back to Interface Builder and restyle the cells in this Table View. I'll select all of the cells in the document outline, and I'll click on the Styles drop down near the top of the Attributes inspector, showing me all of the new content configuration styles. I'll select Subtitle Cell. Since we're now using one of the new styles, we can change Image Padding right from the inspector. Let's do that here to put some breathing room between the cell's labels and their images. Our cells now have larger, clearer title labels. This is exactly what I wanted, and a good visual improvement, but I still think the cells could do with some more color. Next, let's go over how hierarchical symbols can help us out here. New in iOS 15, symbols can have multiple layers that I can specify the color for on a layer-by-layer basis. This rendering can add more color and depth to my symbols. There are two new render modes that take advantage of this. The first is Hierarchical, which lets you specify the color for the symbol's primary layer and derives the colors for the symbol's other layers as reduced alpha versions of the primary layer color. The other mode is Palette, which lets you independently set the colors for the symbol's layers. You can learn more about the new symbol rendering modes in the "What's new in SF Symbols" video. The symbols in our Table View are currently rendering in Monochrome mode. However, I want to emphasize the symbol's primary elements. The Hierarchical rendering mode is perfect for this. Here are our symbols rendered using this new mode. The varied opacities between the symbol's layers give it the emphasis that I want, so let's go ahead and adopt this in Interface Builder. Again, with all of the cells selected, I'll click on the Render Mode drop down for cells' symbols.

I'll select Hierarchical and choose Tint Color to match my app's color scheme.

Great. We've given this Amenities view a fresh new look by using one of the new content configuration styles for our cells and the Hierarchical rendering mode for our symbols. Now that we've updated our Amenities view, let's go over accessibility. Let's turn our attention to the menu item detail view, which shows us some more information on one of the restaurant's menu items. The Description Label here is using the subhead text style, which means it supports dynamic type. This label is already pretty wide, and I suspect we might run into some layout issues with some of the larger type settings. New in Interface Builder in Xcode 13, you can now preview how your iOS scenes react to Accessibility settings right in Interface Builder at design time. As Luke mentioned before, the canvas bottom bar has all-new accessibility options. Clicking the Accessibility button brings up a popover showing me the different settings that I can adjust in Interface Builder. Some settings can change text sizes, frame values, and colors in my scenes. Now I can enable and preview those settings in my canvas to make sure my views react as intended. All right, let's get back to our Description Label and verify that it works well in larger type sizes. To do this, I'll open up the Accessibility popover, activate the settings, and move the Dynamic Type slider. Notice that the Description Label is now out of the view's bounds. I can fix this by opening up the Constraint popover and adding a trailing constraint to my label. I'll also need to change the label's number of lines property from the Attributes inspector and set it to 0. This makes the label wrap around to as many lines as needed. With those changes, my label is no longer clipped and grows to fit its text. Dragging the Dynamic Type slider again, notice that the Description Label now fits great across all type sizes.

Being able to preview Accessibility settings at design time is really powerful because it allows you to iterate faster and stay within Interface Builder when adjusting your views for the iOS Accessibility settings. Now that we've made all of those changes, let's check out our app running in the simulator. The cells in our Amenities Table View are using one of the Table View Cell content configuration styles that gave us the new layout that we wanted. The cells have the symbols we configured to use the Hierarchical rendering mode, making the symbol's primary elements more prominent. Clicking through to our menu item detail view, the Description Label fits in great here. To recap, we started off by touring the more compact device bar and improvements to the outline view. We took a look at how you can customize your app's buttons using the powerful new button style system. We went over how to adopt pop-up buttons for both iOS and Mac Catalyst, as well as how to quickly give your Table View Cells a new layout using content configuration styles. Your symbols can also get a lot more color and emphasis with the new rendering modes. Finally, we also went over how previewing Accessibility settings at design time makes it much easier to ensure that your app's views work as intended for the many iOS Accessibility settings available. We made all of these changes without writing a single line of code, letting you spend more time focusing on what makes your app stand out.

We invite you to use all the tools we talked about today to refresh, stylize, and modernize your app. And be sure to sure to check out the "Meet the UIKit button system" and "What's new in SF Symbols" videos. Thanks for watching, and have a great WWDC21. [percussive music]