Colliding Views
Informative views such as text elements or images should not overlap with another view.
This rule uses a trained computer vision algorithm and will only show results from views rendered on the screen at the time of the scan.
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
- Look at the bounds of each informative view
- You will find one of the following:
- Inaccessible: A view's bounds intersect with another view.
- Accessible: No informative views have overlapping bounds.
- 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.