Build interfaces with style

Highlight

Xcode 13 allows Interface Builder to directly configure iOS 15 button styles, Table View Cell content configuration, SF Symbols layered rendering and accessibility preview. Developers can complete style iterations and discover dynamic font layout issues in the canvas.

Core Content

In many UIKit projects, Storyboard and XIB still take on a lot of interface building work. The problem is that modern iOS interfaces rely more and more on system styles: buttons need to support Dynamic Type, multi-line titles, state changes, and Mac Catalyst; list cells need to have clear titles, subtitles, and icons; symbols need to follow the tint color rendering hierarchy; accessibility settings also change text size, color, and layout boundaries.

In the past, when doing these things, I often had to switch back and forth between Interface Builder and code. To design a reservation button, first set the position on the canvas, and then write code to handle the background color, rounded corners, and icon spacing. To adjust a Table View Cell, first change the prototype cell, and then run it in the simulator to confirm the Dynamic Type. After discovering that the text was cropped, I went back to the constraints and label attributes to modify it.

This session was conducted throughout the whole process using a hotel app. The Booking Scene has Book Room, Check in, Check out, Get Help and Guests selection buttons; the Promotions Scene has a set of optional discount buttons; the Amenities Table View has a list of restaurants and other facilities; the menu details page is used to test text wrapping in large font sizes. The focus of Xcode 13 is to put these high-frequency interface iterations directly back into Interface Builder.

Apple made four categories of improvements. The toolbar at the bottom of the canvas is more compact, and the outline view supports drag-and-drop scene rearrangement and batch selection of constraint groups. Button inspector supports Plain, Gray, Tinted, and Filled styles, and exposes attributes such as subtitle, image placement, corner style, and button size. Table View Cell inspector supports new content configuration styles. The canvas can also directly open accessibility overrides and preview the interface performance under settings such as Dynamic Type and Increase Contrast.

Detailed Content

Canvas and document outline are more suitable for organizing large Storyboards

（00:51）

Xcode 13 redesigns Interface Builder’s canvas bottom bar. Device selection, scene layout, orientation, appearance, and accessibility options are all packed into more compact controls, leaving more space on the canvas. Changes in the Outline view are more direct: you can drag and move one or more scenes, or you can select a group such as Constraints and modify or delete them collectively.

Booking Scene
Promotions Scene
Constraints
  Top
  Leading
  Trailing
  Bottom

Key points:

• Booking SceneCan be dragged toPromotions SceneNearby, the Storyboard structure and segue relationships are easier to correspond to.
• CheckConstraintsgroup is equivalent to selecting all constraints in the group, suitable for batch modification of constant or one-time deletion.
• Hold down Option and drag the scene to copy the entire scene, which is suitable for iterating from similar pages.

Adopt new button styles in Interface Builder

（02:53）

The Button inspector in Xcode 13 adds a Style property. When you select Filled, Tinted, or Gray, the button enters iOS 15’s new button system, automatically gaining Dynamic Type, multi-line title, and accessibility support. In the video, Book Room uses Filled, Check in and Check out use Tinted, and Get Help uses Gray.

Time	Canvas Object	Operation	Result
03:39	Book Room button	Open the Style menu in the Button inspector after pinch-to-zoom	Prepare to modify the bottom main button
04:16	Book Room button	Select Filled style	The button gets blue fill and rounded corners
05:54	Check in / Check out buttons	Press Command in outline view to multi-select, select Tinted style	Two date buttons get transparent tint background
08:04	Get Help button	Drag out the Gray button from the object library and put it on the navigation bar	Add a new help entrance
08:42	Get Help button	Set Title, Subtitle, question mark symbol, Image Padding	Button with title, subtitle and icon spacing
09:13	Get Help button	Try Capsule Corner Style first, then change to Large Corner Style	Compare the rounded corners directly in the canvas

Key points:

• Filled style uses app tint as the fill color, which is suitable for main operations such as Book Room.
• Tinted style uses a transparent tint background, suitable for buttons that are important but do not require strong emphasis.
• Button inspector will display Subtitle, title alignment, color options, image positioning, Corner Style and other properties after selecting the style.
• The Size inspector provides Small, Medium, and Large button sizes, and the Corner Style provides options such as Dynamic, Fixed, Small, Medium, Large, and Capsule.

Use toggle and pop-up button to express selection status

（07:29）

The Get button in the Promotions Scene needs to change its appearance after being clicked to indicate that a certain offer has been selected. In Xcode 13, you can turn on Selection as Primary Option in the Menu area of ​​the inspector and turn the button into a toggle button. The Guests selection in the Booking Scene is suitable for pop-up buttons: after clicking, a menu of 1 to 4 people pops up, and the selected item becomes the new label of the button.

Time	Canvas Object	Operation	Result
06:36	Promotions Scene	Use canvas Minimap to double-click to jump	Quickly locate the promotion list scene
06:56	Three Get buttons	Press Command in outline view to multi-select	Modify multiple buttons at the same time
07:10	Three Get buttons	Select Tinted in the Style menu	Buttons that cover the image for higher contrast
07:40	Three Get buttons	Open Selection as Primary Option in the Menu area	The Get button becomes toggle buttons
10:21	Guests field	Drag Pop Up Button from object library	Create a selection control for 1 to 4 guests
10:38	Pop Up Button	Select Tinted style	Match appearance Check in and Check out
10:48	menu items	Use Option-drag to copy two menu items and configure them from 1 to 4	The menu has four optional values
11:34	Pop Up Button	Set Tool Tip in Control inspector	Get mouseover tips for Mac Catalyst version

Key points:

• Selection as Primary Option is a setting in the inspector, which switches the selected state after clicking the button.
• The behavior of Pop Up Button is to click to display the menu, select a single item and turn the item into a button label.
• Transcript clearly reminds menu items that they must be connected to actions and will not be displayed until runtime.
• iOS pop-up buttons, buttons with styles and tooltips all support Mac Catalyst 15.

Refresh Table View with content configuration and hierarchical symbols

（12:31）

The problem with the Amenities Table View is that the title and subtitle hierarchy are not clear enough, and the icons lack color. Xcode 13’s Table View Cell inspector can select new content configuration styles such as Subtitle Cell, Value Cell, Grouped Header, and Grouped Footer. Subsequently, the Render Mode of SF Symbols can be switched to Hierarchical, and tint color can be used to add emphasis to the main level of the symbol.

Time	Canvas Object	Operation	Result
12:49	Table View controller	two-finger double tap Focus	Enter Amenities Table View
13:36	All cells	Select all in document outline	Prepare to modify cell styles in batches
13:40	Attributes inspector	Open the Styles drop-down menu	View new content configuration styles
13:48	All cells	Select Subtitle Cell	The title is larger and the subtitle level is clearer
13:51	All cells	Adjust Image Padding in the inspector	Leave a sense of breathing between the image and text
15:17	cell symbols	Open the Render Mode drop-down menu	Prepare to modify symbol rendering
15:21	cell symbols	Select Hierarchical and Tint Color	The main level is more prominent, and the symbols match the App color scheme

Key points:

• New cell styles include grouped header, value cell, grouped footer and Subtitle Cell.
• These styles work with images and have Dynamic Type support.
• Hierarchical render mode will use the main layer color to derive levels of different transparency.
• Palette render mode was also mentioned in the session, which allows setting different colors for different symbol layers.

Preview accessibility settings in canvas

（15:42）

The Description Label on the menu details page uses subhead text style and supports Dynamic Type. After enlarging the Dynamic Type slider, the label in the video exceeds the view bounds. The fix is ​​very specific: add a trailing constraint and change the number of lines to 0 so that the text can wrap as needed.

Time	Canvas Object	Operation	Result
16:16	Accessibility popover	Click the Accessibility button of the canvas bottom bar	Open the design-time accessibility override
16:39	Dynamic Type slider	Activate settings and drag the slider	Description Label exceeds view bounds
16:53	Description Label	Open the Constraint popover and add trailing constraint	The right border is constrained
17:00	Description Label	Set the number of lines to 0 in the Attributes inspector	Wrap text as needed
17:15	Dynamic Type slider	Drag the slider again to verify	Label can be fully displayed in each font size

Key points:

• Setting number of lines to 0 corresponds to the attribute modification in the inspector, allowing the label to occupy multiple lines.
• trailing constraint solves the problem of text overflowing to the right under large font sizes.
• Accessibility popover can open overrides such as Dynamic Type and Increase Contrast during design, reducing the number of layout problems discovered after running the simulator.
• This process is suitable for quick accessibility inspection of Storyboard projects.

Core Takeaways

1. Migrate button styles to the old Storyboard

What to do: Change the primary action button to Filled, change the secondary action button to Tinted, and change the tool button to Gray or Plain.

Why it’s worth doing: This session shows that button styles directly support Dynamic Type, multi-line titles, corner styles and Mac Catalyst mapping, with migration costs focused on the inspector.

How ​​to start: First select a checkout, reservation or submission page, list the primary, secondary and utility buttons, then apply Filled, Tinted, Gray or Plain respectively, and check the large font size.

2. Change the filter item to pop-up button

What to do: Make radio settings such as number of people, sorting method, and date range into pop-up buttons.

Why it’s worth doing: The Guests button in the video illustrates that the pop-up button can combine the menu and the current selection in one control, which is especially suitable for compact selections in forms.

How ​​to start: Drag the Pop Up Button into the object library, use Option-drag to copy the menu items, configure the candidate values ​​completely, and confirm that each menu item is connected to the action.

3. Use content configuration to update the settings page or details page list

What to do: Change the facilities, settings, and account information in the static Table View to system content configuration styles.

Why it’s worth doing: The Amenities Table View example shows that the title, subtitle, image spacing and Dynamic Type can be left to the system style maintenance.

How ​​to start: Start with the Subtitle Cell, select static cells in batches, adjust Styles, Image Padding and symbol Render Mode, and then use the canvas to check the title, subtitle and icon levels.

4. Create an Accessibility Canvas Checklist

What to do: After each storyboard change, check the Dynamic Type, Increase Contrast and different appearance in Interface Builder.

Why it’s worth doing: The overflow problem of Description Label in the video is directly exposed in the canvas. To fix it, you only need to add trailing constraint and multi-line settings.

How ​​to start: Select 5 text-intensive pages in the app, drag the Dynamic Type slider to a larger font size, and record the clipping, overlap and contrast issues one by one.

Related Sessions

• Meet the UIKit button system — An in-depth talk about the button styles, toggle button, pop-up button and menu state of iOS 15.
• What’s new in UIKit — Summary of buttons, symbols, cell configuration and Mac Catalyst updates for UIKit in iOS 15.
• What’s new in SF Symbols — Explain the design and usage of symbol rendering modes such as hierarchical, palette, multicolor, etc.
• SF Symbols in UIKit and AppKit — Demonstrates how colorful SF Symbols are integrated in UIKit and AppKit controls.
• Make blazing fast lists and collection views — Extend the content configuration of Table View/Collection View from the perspective of list performance and cell life cycle.