View individual UI Rect boxes when multiple UI elements are selected?

Question

I have 2D UI layout with multiple text boxes over the canvas, I need to easily be able to see where the Rect boxes for each are positioned, so that I can see where the safe areas are for placing buttons etc.

Selecting each individual item shows its own individual Rect box, but selecting multiple items just shows one big box around all of them.

Is there a way of selecting multiple items and see each individual Rect box? It's extremely time consuming having to go and check each one individually.

Answer 1

There's no setting for this in Unity, however, a custom script can do something like this. Here's a complete script I wrote, you'll just need to add it to any object in the scene. It will run in edit mode and draw red lines around each element and its descendants (assuming they have a RectTransform).

Everything selected:

A child element selected:

using UnityEditor;
using UnityEngine;

[ExecuteInEditMode]
class UISelector : MonoBehaviour {
    void OnDrawGizmos() {
        if (Selection.activeTransform != null) {
            if (Selection.activeTransform.GetComponent<RectTransform>() != null) {
                DrawChildRects(Selection.activeTransform.GetComponent<RectTransform>());
            }
        }
    }

    void DrawChildRects(RectTransform transform) {
        DrawRect(transform);
        foreach (RectTransform rect in transform) {
            DrawChildRects(rect);
            DrawRect(rect);
        }
    }

    void DrawRect(RectTransform rect) {
        Vector3[] points = new Vector3[] {
              new Vector3(rect.rect.min.x + rect.position.x,
                rect.rect.min.y + rect.position.y),
              new Vector3(rect.rect.min.x + rect.position.x,
                rect.rect.min.y + rect.position.y + rect.rect.height),
              new Vector3(rect.rect.min.x + rect.position.x,
                rect.rect.min.y + rect.position.y + rect.rect.height),
              new Vector3(rect.rect.max.x + rect.position.x,
                rect.rect.max.y + rect.position.y),
              new Vector3(rect.rect.max.x + rect.position.x,
                rect.rect.max.y + rect.position.y),
              new Vector3(rect.rect.max.x + rect.position.x,
                rect.rect.max.y + rect.position.y - rect.rect.height),
              new Vector3(rect.rect.max.x + rect.position.x,
                rect.rect.max.y + rect.position.y - rect.rect.height),
              new Vector3(rect.rect.min.x + rect.position.x,
                rect.rect.min.y + rect.position.y),
            };
        Handles.color = Color.red;
        Handles.DrawLines(points);
    }
}