Colliding Views

Learn how we're using artificial intelligence for this rule!

Views containing information should not intersect with another view, either entirely or partially.

Impact

Colliding Views impact people with sight and may impact people utilizing dynamic typography. Dynamic Type settings may automatically adjust the sizes of text elements. A larger font may make views larger, potentially causing overlap. Overlapping text elements may result in missed or unreadable information presented to the end-user.

Confirmation

1. Look at the bounds of each informative view
2. You will find one of the following:
   • Inaccessible: A view's bounds intersect with another view.
   • Accessible: No informative views have overlapping bounds.
3. If there are text elements, try larger Dynamic Type sizes and repeat this process to ensure that these views do not intersect with other views when becoming larger

How to Fix

UIKit

Improper constraints can cause an issue found by this rule. While every situation will be different, ensure that the view's constraints provide adequate space between informative elements. If a constraint does not exist between two neighboring informative views, you may need to add one to ensure they do not overlap when Dynamic Type updates to a larger setting.

SwiftUI

Overlapping views cause an issue found by this rule. While every situation will be slightly different, ensure that each view has proper view modifiers to limit overlapping of the bounds. It's recommended to use HStack and VStack views as parents. ZStack is another option but shouldn't be used for views containing text elements.

React Native

Overlapping views cause an issue found by this rule. While every situation will be slightly different, ensure that:

• Views with text, or views with scalable content, do not have a maxHeight set
• When using flex layout, consider adding a value for the gap property to increase readability