Colliding Controls

Interactive views should not have intersecting bounds.

Impact

Issues found by Colliding Controls impact people using touch screens and people utilizing dynamic typography. Dynamic Type settings may automatically adjust the sizes of controls that contain text. A larger font may make controls larger, potentially causing overlap. Activating a control while it's overlapped with another may result in activating the wrong control.

Confirmation

1. Look at the bounds of each control
2. You will find one of the following:
   • Inaccessible: A control's bounds intersect with another control.
   • Accessible: None of the controls have overlapping bounds.
3. If there are controls with text (such as buttons or links), try larger Dynamic Type sizes and repeat this process to ensure that the controls do not intersect with other controls when becoming larger.

How to Fix

UIKit

Improper constraints will result in an issue found by this rule. While every situation will be different, ensure that constraints provide adequate space between controls. If a constraint does not exist between two adjacent controls, you may need to add one to ensure they do not overlap when Dynamic Type updates to a larger setting.

SwiftUI

Overlapping controls cause an issue found by this rule. While every situation will be different, ensure that each control 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 controls that contain text elements.