Layout

Using a consistent layout that adapts to various contexts makes your experience more approachable and helps people enjoy their favorite apps and games on all their devices.

Guides and safe areas

A layout guide defines a rectangular region that helps you position, align, and space your content on the screen. The system includes predefined layout guides that make it easy to apply standard margins around content and restrict the width of text for optimal readability. You can also define custom layout guides.

A safe area defines the area within a view that isn’t covered by a navigation bar, tab bar, toolbar, or other views a window might provide. Safe areas are essential for avoiding a device’s display and interactive features, like a sensor housing or Home indicator.

In iOS, iPadOS, and tvOS, the system defines a collection of traits that characterize variations in the device environment that can affect the way your app displays on the screen. Using SwiftUI or Auto Layout, you can ensure that your interface adapts dynamically to a wide range of traits, including:

  • Different device screen sizes, resolutions, and color spaces
  • Different device orientations (portrait/landscape)
  • Split view
  • Multitasking modes on iPad
  • Dynamic Type text-size changes
  • Internationalization features the system can enable based on locale (left-to-right/right-to-left layout direction, date/time/number formatting, font variation, text length)
  • System feature availability

Best practices

Design a consistent layout that adapts gracefully to context changes, while displaying the same content as much as possible. People expect your experience to work well and remain familiar when they rotate their device, resize a window, or switch to a different device. Ensure an adaptable interface by respecting system-defined safe areas, margins, and guides and specifying layout modifiers to fine-tune the placement of views in your hierarchy.

Respect key display and system features in each platform. Safe areas help you accommodate features like the corner radius and sensor housings on various devices, and avoid interfering with interactive system elements like the Home indicator and app switcher on iPhone and iPad. Safe areas also help you account for interactive components like bars, dynamically repositioning content if sizes change.

Use placement to convey relative importance. In general, place principal items in the upper half of the screen or window, near the leading side. People typically start in this area, whether they’re looking at the screen or using a screen reader like VoiceOver.

Elevate essential information by giving it sufficient space. People want to view the most important information instantly, so you don’t want to clutter the screen or window with nonessential details. People can easily access secondary information by scrolling.

Create visual groupings to help people find the information they want. For example, you might use negative space, background shapes, colors, and materials, or separator lines to display related elements and information in distinct areas.

Use alignment to ease visual scanning and to communicate organization and hierarchy. Alignment makes an app look neat and organized, helps people focus while scrolling, and makes it easier to find information. Indentation and alignment can also help people visualize an information hierarchy.

Be mindful of aspect ratio. Different screen sizes may have different aspect ratios, causing artwork to appear cropped, letterboxed, or pillarboxed. When this is the case, don’t change the aspect ratio of the artwork; instead, scale it to fill the screen so that important visual content remains in view on all display sizes.

Be prepared for text-size changes. People expect most apps to respond when they choose a different text size. To accommodate text-size changes, you might need to adjust the layout. For guidance on displaying text in your app, see Typography.

When possible, consider alluding to hidden content by partially displaying offscreen elements. In large collections where content doesn’t fit on a single screen, you might be able to hint at the additional content by showing portions of the offscreen items.

On touch screens, provide ample touch targets for interactive components. Maintain a minimum tappable area of 44x44 points for all controls.

Preview your app on multiple devices, using different orientations, localizations, and text sizes. Although it’s generally best to preview features like wide color on actual devices, you can use Xcode Simulator to check for clipping and other layout issues. For example, if your iOS app supports landscape mode, you can use Simulator to make sure your layouts look great regardless of whether the device rotates left or right.

Platform considerations

iOS, iPadOS

Aim to support both portrait and landscape orientations. People choose different orientations for a variety of reasons, and they generally expect apps to work well in every context. If it’s essential that your app run in a single orientation, don’t tell people to rotate their device to match; if your app doesn’t rotate automatically when someone holds the device in an unsupported orientation, they’ll know instinctively to rotate it. If your app is landscape-only, make sure it runs equally well whether people rotate their device to the left or the right.

If your app runs on a specific device, make sure it runs on every screen size for that device. In other words, an iPhone-only app must run on every iPhone screen size and an iPad-only app must run on every iPad screen size. For guidance, see Device screen sizes and orientations.

Inset full-width buttons. Respect the standard system-defined margins on the sides of full-width buttons. A full-width button at the bottom of the screen generally looks best when it has rounded corners and it aligns with the bottom of the safe area — which also ensures that it doesn’t conflict with the Home indicator.

Extend visual content to fill the screen. Make sure backgrounds extend to the edges of the display, and that vertically scrollable layouts, like tables and collections, continue all the way to the bottom.

On iPad, consider placing controls on the sides of the screen in landscape orientation. When controls are on the left and right sides of the screen, people can reach them easily with both hands while they’re holding the device.

Avoid placing interactive controls at the bottom edge of the screen when possible. Regardless of orientation, people use system gestures at the bottom edge of the display to access features like the Home screen and app switcher, and these gestures may cancel custom gestures you implement in this area. Also avoid placing controls in the far corners of the screen because these areas can be difficult for people to reach comfortably. If your game needs to place controls in the lower portion of the screen — below the safe area — use matching insets when placing them at the top and bottom of the screen, and leave ample space around the Home indicator so people don’t accidentally target it when trying to interact with a control.

Be prepared for different status bar heights. If you display content below the status bar, you can use the safe area to help dynamically reposition the content as needed.

Hide the status bar only when it adds value or enhances your experience. The status bar displays information people find useful and it occupies an area of the screen most apps don’t fully use, so it’s generally a good idea to keep it visible.

iOS, iPadOS safe areas

The safe area defines the area within a view that isn’t covered by a navigation bar, tab bar, toolbar, or other views a view controller might provide.

iOS keyboard layout guide

iOS 15 defines a keyboard layout guide that represents the space the keyboard currently occupies and accounts for safe area insets. Using this guide can help you make the keyboard feel like an integral part of your app, regardless of the type of keyboard people use or where they position it. For developer guidance, see UIKeyboardLayoutGuide.

When the keyboard is visible, the layout guide represents its area and position.

When the keyboard dismisses, the top of the layout guide matches the bottom of the safe area layout guide.

macOS

Avoid placing controls or critical information at the bottom of a window. People often move windows so that the bottom edge is below the bottom of the screen.

tvOS

TVs vary widely in size. On Apple TV, app layouts don’t automatically adapt to the size of the screen like they do on iPhone or iPad. Instead, apps show the same interface on every display. Take extra care in designing your layout so that it looks great in a variety of screen sizes.

Adhere to the screen’s safe zone. Inset primary content 60 pixels from the top and bottom of the screen, and 80 pixels from the sides. It can be difficult for people to see content that close to the edges, and unintended cropping can occur due to overscanning on older TVs. Allow only partially displayed offscreen content and elements that deliberately flow offscreen to appear outside this zone.

A diagram of a TV with safe zone border on all sides. In width, the top and bottom borders measure 60 points, and the side borders both measure 80 points.

Include appropriate padding between focusable elements. When you use UIKit and the focus APIs, an element gets bigger when it comes into focus. Consider how elements look when they’re focused, and make sure they don’t unintentionally overlap important information.

A diagram that shows vertical yellow rectangles of padding between focusable items.

Use layout templates to build media-centered apps and use grids to provide collections of content. If the layout of your media app simply needs to present content beautifully with minimal layout customization, use a predesigned layout template. If your app needs to showcase a collection of content, use a grid to make the content easy to browse at a distance and quick to navigate with the remote.

Layout templates

Apple TV templates deliver clean, consistent layouts that make content the center of attention. These templates — based on JavaScript and the Apple TV markup language (TVML) — dynamically load and populate with content when people open your app. Templates give you flexibility to create content-rich apps with predefined layouts that look good on the TV screen and are ideal for streaming media.

Choose a template based on its purpose. You can customize a template’s background, color, size, layout, and more, but if your customizations make the template jarring or unrecognizable, consider using a different one or designing a custom interface.

  • Alert Template on Apple TV

    Alert Template

    The alert template displays a message that asks for permission to perform an action, such as confirming a purchase or a destructive action like a deletion.

    See also Alerts.

  • Catalog Template on Apple TV

    Catalog Template

    Use the catalog template to display groupings of related items, such as genres of movies or TV shows. People view the list of groupings on the left, and focus on one to see its items on the right.

  • Compilation Template on Apple TV

    Compilation Template

    The compilation template displays elements contained by an item, such as songs in an album or tracks in a playlist. This template works especially well to display audio-related content.

  • Descriptive Alert Template on Apple TV

    Descriptive Alert Template

    The descriptive alert template can show a lengthy message that may ask the user to perform an action, such as agreeing to terms and conditions or reading a licensing agreement.

    Show, don’t tell. Whenever possible, avoid descriptive alert text. Aim to present the same information in a more digestible way, such as with images.

    Keep alerts short and avoid making people scroll. Reading lots of text on a distant screen strains the eyes and isn’t much fun. Minimize the amount of text your app displays.

    If the message is scrollable, position buttons side by side. With this layout, scrolling up and down scrolls the text, while scrolling left and right switches focus between buttons.

    For guidance, see Alerts.

  • Form Template on Apple TV

    Form Template

    The form template displays a keyboard and one or more text fields where viewers can enter information, such as a name or an email address.

    See also Text and Search.

  • List Template on Apple TV

    List Template

    The list template shows a list of items on the right, such as movies or TV shows. People focus on one item to view its related content, such as its artwork or description, on the left.

  • Loading Template on Apple TV

    Loading Template

    The loading template temporarily displays a progress indicator and some descriptive text while the server retrieves your content. It lets people know something is happening, so your app doesn’t appear frozen.

    Keep loading text concise and informative. If loading is quick, people may not have time to read longer text before it disappears, making them feel like they’ve missed something.

    See also Progress Indicators.

  • Menu Bar Template on Apple TV

    Menu Bar Template

    The menu bar template is designed for top-level navigation, such as an entry page to your content. It includes a menu of items across the top. People focus on an item to view related content below the menu.

    Keep the menu bar uncluttered. Each additional item you display adds more choices and increases the complexity of your app.

    Keep menu items onscreen. When the menu bar is in focus, ensure that all of its items are visible. In general, include seven or fewer items with short labels, to avoid crowding content and causing items to scroll off the screen.

    See also Tab Bars.

  • Parade Template on Apple TV

    Parade Template

    The parade template shows rotating previews for a focused grouping of content, such as movies or albums in a particular genre. A list of groupings is shown on the right. People focus on one grouping to view noninteractive rotating previews of its elements on the left.

  • Product Template on Apple TV

    Product Template

    The product template promotes movies, TV shows, or other products. It typically includes a product image, background, and descriptive information. A shelf below the product content displays related products, and people can scroll down to bring up more information, like cast and crew listings, ratings, and reviews.

    If you customize the background, make sure it doesn’t clash with your other content. Consider image and text colors carefully before customizing the background. By default, the background displays a blurred copy of your product image, producing a complementary visual effect.

  • Product Bundle Template on Apple TV

    Product Bundle Template

    The product bundle template promotes a series of related TV shows, movies, and other products. It typically includes an image, background, and descriptive information. A shelf below the content displays the products the bundle contains, such as the episodes of a TV season. People can scroll down to bring up more information, such as cast and crew listings, ratings, and reviews.

  • Rating Template on Apple TV

    Rating Template

    The rating template lets people adjust the rating of a particular item, such as a movie or a song.

  • Search Template on Apple TV

    Search Template

    The search template lets people search your content and view results. It includes a search field, a keyboard, and a list of results.

  • Stack Template on Apple TV

    Stack Template

    The stack template displays groups of products — such as different genres of movies — in rows. Each group of products displays directly beneath the previous group.

Customize templates tastefully. Layout templates are highly customizable; you have control over the background, tinting, size, layout, and more. As you design your app, defer to content whenever possible, avoiding customizations that appear distracting, jarring, or obtrusive.

Understand a template’s purpose before using it. If your customizations make the underlying template unrecognizable, consider using a different template or building a custom interface.

For detailed information about integrating templates into your app, see TVML.

Grids

The following grid layouts provide an optimal viewing experience. Be sure to use appropriate spacing between unfocused rows and columns to prevent overlap when an item is brought into focus.

If you use the UIKit collection view flow element, the number of columns in a grid is automatically determined based on the width and spacing of your content. For developer guidance, see UICollectionViewFlowLayout.

  • A diagram that shows one full row of two rectangles. An additional column and row are partially visible on the left side and bottom edge of the screen.

    Two-Column Grid

    Attribute Value
    Unfocused content width 860pt
    Horizontal spacing 40pt
    Minimum vertical spacing 100pt
  • A diagram that shows two full rows of three rectangles each. An additional column and row are partially visible on the left side and bottom edge of the screen.

    Three-Column Grid

    Attribute Value
    Unfocused content width 560pt
    Horizontal spacing 40pt
    Minimum vertical spacing 100pt
  • A diagram that shows three full rows of four rectangles each. An additional column and row are partially visible on the left side and bottom edge of the screen.

    Four-Column Grid

    Attribute Value
    Unfocused content width 410pt
    Horizontal spacing 40pt
    Minimum vertical spacing 100pt
  • A diagram that shows three full rows of five rectangles each. An additional column and row are partially visible on the left side and bottom edge of the screen.

    Five-Column Grid

    Attribute Value
    Unfocused content width 320pt
    Horizontal spacing 40pt
    Minimum vertical spacing 100pt
  • A diagram that shows two full rows of six rectangles each. An additional column and row are partially visible on the left side and bottom edge of the screen.

    Six-Column Grid

    Attribute Value
    Unfocused content width 260pt
    Horizontal spacing 40pt
    Minimum vertical spacing 100pt
  • A diagram that shows three full rows of seven rectangles each. An additional column and a row divider are partially visible on the left side and bottom edge of the screen.

    Seven-Column Grid

    Attribute Value
    Unfocused content width 217pt
    Horizontal spacing 40pt
    Minimum vertical spacing 100pt
  • Eight-Column Layout Grid

    Eight-Column Grid

    Attribute Value
    Unfocused content width 184pt
    Horizontal spacing 40pt
    Minimum vertical spacing 100pt
  • Nine-Column Layout Grid

    Nine-Column Grid

    Attribute Value
    Unfocused content width 160pt
    Horizontal spacing 40pt
    Minimum vertical spacing 100pt

Include additional vertical spacing for titled rows. If a row has a title, provide enough spacing between the bottom of the previous unfocused row and the center of the title to avoid crowding. Also provide spacing between the bottom of the title and the top of the unfocused items in the row.

Use consistent spacing. When content isn’t consistently spaced, it no longer looks like a grid and it’s harder for people to scan.

Make partially hidden content look symmetrical. To help direct attention to the fully visible content, keep partially hidden offscreen content the same width on each side of the screen.

watchOS

Align text with the system-defined side margins. In Apple Watch Series 4 and later, watchOS defines a one-pixel boundary at the side edges of the screen. Although you need to align text with the minimum side layout margins so that it remains legible at a glance, you can make graphic elements and button backgrounds extend beyond the margins and up to this one-pixel boundary.

Diagram of a watch face showing a black rounded rectangle on top of a red rectangle of the same dimensions, leaving only the four corners of the red rectangle visible inside the black bezel. At the top of the black rounded rectangle, a navigation bar displays the word Title on the left and the time 10:09 on the right. Blue shading starts at the bottom of the navigation bar and extends to the bottom edge of the black rounded rectangle, indicating a content safe area that measures 146 points wide and 160 points tall. A callout indicates a vertical layout margin on both sides of the safe area that measures eight points wide.

40mm

Diagram of a watch face showing a black rounded rectangle on top of a red rectangle of the same dimensions, leaving only the four corners of the red rectangle visible inside the black bezel. At the top of the black rounded rectangle, a navigation bar displays the word Title on the left and the time 10:09 on the right. Blue shading starts at the bottom of the navigation bar and extends to the bottom edge of the black rounded rectangle, indicating a content safe area that measures 165 points wide and 182 points tall. A callout indicates a vertical layout margin on both sides of the safe area that measures nine and a half points wide.

44mm

Design your content to extend from one edge of the screen to the other. The Apple Watch bezel provides a natural visual padding around your content. To avoid wasting valuable space, consider minimizing the padding between elements.

A screenshot of the Workout app’s main list of workouts. A callout indicates that the currently focused workout item spans the full width of the available screen area.

Avoid placing more than two or three controls side by side in your interface. As a general rule, display no more than three buttons that contain glyphs — or two buttons that contain text — in a row. Although it’s usually better to let text buttons span the full width of the screen, two side-by-side buttons with short text labels can also work well, as long as the screen doesn’t scroll.

Screenshot of the Stopwatch app’s Hybrid screen, highlighted to show the Reset and Start buttons at the bottom of the screen. The Reset button is gray with lighter gray text and the Start button is green with black text.

Support autorotation in views people might want to show others. When people flip their wrist away, apps typically respond to the motion by sleeping the display, but in some cases it makes sense to autorotate the content. For example, a wearer might want to show an image to a friend or display a QR code to a reader. For developer guidance, see isAutorotating.

Specifications

iOS, iPadOS

Device screen sizes and orientations

Device Dimensions (portrait)
12.9" iPad Pro 1024x1366 pt (2048x2732 px @2x)
11" iPad Pro 834x1194 pt (1668x2388 px @2x)
10.5" iPad Pro 834x1194 pt (1668x2388 px @2x)
9.7" iPad Pro 768x1024 pt (1536x2048 px @2x)
7.9" iPad mini 768x1024 pt (1536x2048 px @2x)
10.5" iPad Air 834x1112 pt (1668x2224 px @2x)
9.7" iPad Air 768x1024 pt (1536x2048 px @2x)
10.2" iPad 810x1080 pt (1620x2160 px @2x)
9.7" iPad 768x1024 pt (1536x2048 px @2x)
iPhone 13 Pro Max 428x926 pt (1284x2778 px @3x)
iPhone 13 Pro 390x844 pt (1170x2532 px @3x)
iPhone 13 390x844 pt (1170x2532 px @3x)
iPhone 13 mini 375x812 pt (1125x2436 px @3x)
iPhone 12 Pro Max 428x926 pt (1284x2778 px @3x)
iPhone 12 Pro 390x844 pt (1170x2532 px @3x)
iPhone 12 390x844 pt (1170x2532 px @3x)
iPhone 12 mini 375x812 pt (1125x2436 px @3x)
iPhone 11 Pro Max 414x896 pt (1242x2688 px @3x)
iPhone 11 Pro 375x812 pt (1125x2436 px @3x)
iPhone 11 414x896 pt (828x1792 px @2x)
iPhone XS Max 414x896 pt (1242x2688 px @3x)
iPhone XS 375x812 pt (1125x2436 px @3x)
iPhone XR 414x896 pt (828x1792 px @2x)
iPhone X 375x812 pt (1125x2436 px @3x)
iPhone 8 Plus 414x736 pt (1080x1920 px @3x)
iPhone 8 375x667 pt (750x1334 px @2x)
iPhone 7 Plus 414x736 pt (1080x1920 px @3x)
iPhone 7 375x667 pt (750x1334 px @2x)
iPhone 6s Plus 414x736 pt (1080x1920 px @3x)
iPhone 6s 375x667 pt (750x1334 px @2x)
iPhone 6 Plus 414x736 pt (1080x1920 px @3x)
iPhone 6 375x667 pt (750x1334 px @2x)
4.7" iPhone SE 375x667 pt (750x1334 px @2x)
4" iPhone SE 320x568 pt (640x1136 px @2x)
iPod touch 5th generation and later 320x568 pt (640x1136 px @2x)

NOTE All scale factors in the table above are UIKit scale factors, which may differ from native scale factors. For developer guidance, see scale and nativeScale.

Device size classes

Different size class combinations apply to the full-screen experience on different devices, based on screen size.

Diagram of an iPad and an iPhone in both portrait and landscape orientations. Each device in each orientation includes a red outline around the available full-screen area for that orientation and arrowed lines that indicate the height and width of the area.

Device Portrait orientation Landscape orientation
12.9" iPad Pro Regular width, regular height Regular width, regular height
11" iPad Pro Regular width, regular height Regular width, regular height
10.5" iPad Pro Regular width, regular height Regular width, regular height
9.7" iPad Regular width, regular height Regular width, regular height
7.9" iPad mini Regular width, regular height Regular width, regular height
iPhone 13 Pro Max Compact width, regular height Regular width, compact height
iPhone 13 Pro Compact width, regular height Compact width, compact height
iPhone 13 Compact width, regular height Compact width, compact height
iPhone 13 mini Compact width, regular height Compact width, compact height
iPhone 12 Pro Max Compact width, regular height Regular width, compact height
iPhone 12 Pro Compact width, regular height Compact width, compact height
iPhone 12 Compact width, regular height Compact width, compact height
iPhone 12 mini Compact width, regular height Compact width, compact height
iPhone 11 Pro Max Compact width, regular height Regular width, compact height
iPhone 11 Pro Compact width, regular height Compact width, compact height
iPhone 11 Compact width, regular height Regular width, compact height
iPhone XS Max Compact width, regular height Regular width, compact height
iPhone XS Compact width, regular height Compact width, compact height
iPhone XR Compact width, regular height Regular width, compact height
iPhone X Compact width, regular height Compact width, compact height
iPhone 8 Plus Compact width, regular height Regular width, compact height
iPhone 8 Compact width, regular height Compact width, compact height
iPhone 7 Plus Compact width, regular height Regular width, compact height
iPhone 7 Compact width, regular height Compact width, compact height
iPhone 6s Plus Compact width, regular height Regular width, compact height
iPhone 6s Compact width, regular height Compact width, compact height
iPhone SE Compact width, regular height Compact width, compact height
iPod touch 5th generation and later Compact width, regular height Compact width, compact height

On iPad, size classes also apply when your app or game runs in a multitasking configuration.

Diagram of iPad in landscape orientation with the left two-thirds of its screen shaded in yellow.

2/3 split view

Diagram of iPad in landscape orientation with the left half of its screen shaded in yellow.

1/2 split view

Diagram of iPad in landscape orientation with left one-third of its screen shaded in yellow.

1/3 split view

Device Mode Portrait orientation Landscape orientation
12.9" iPad Pro 2/3 split view Compact width, regular height Regular width, regular height
1/2 split view N/A Regular width, regular height
1/3 split view Compact width, regular height Compact width, regular height
11" iPad Pro 2/3 split view Compact width, regular height Regular width, regular height
1/2 split view N/A Compact width, regular height
1/3 split view Compact width, regular height Compact width, regular height
10.5" iPad Pro 2/3 split view Compact width, regular height Regular width, regular height
1/2 split view N/A Compact width, regular height
1/3 split view Compact width, regular height Compact width, regular height
9.7" iPad 2/3 split view Compact width, regular height Regular width, regular height
1/2 split view N/A Compact width, regular height
1/3 split view Compact width, regular height Compact width, regular height
7.9" iPad mini 4 2/3 split view Compact width, regular height Regular width, regular height
1/2 split view N/A Compact width, regular height
1/3 split view Compact width, regular height Compact width, regular height

watchOS

Series Screen size Width (pixels) Height (pixels)
7 and later 41 mm 352 430
7 and later 45 mm 396 484
4, 5, and 6 40 mm 324 394
4, 5, and 6 44 mm 368 448
1, 2, and 3 38 mm 272 340
1, 2, and 3 42 mm 312 390