For debug tools and such, use Immediate Mode GUI (IMGUI).

void OnGUI() {
    if (GUILayout.Button("Press Me")) {
        Debug.Log("Hello!");
    }
}

Resizing is good, scaling is bad. Resizing is changing the size of the rect transform, keeping everything crips. Scaling is changing the scale of the rect transform, making small images blurry.

Anchoring stuff to parent makes everything resize.

Automatically resizing parents:

-> Vertical Layout Group + Content Size Fitter (Vertical Fit: Preferred Size)
    -> Horizontal Layout Group
        -> Horizontal Layout Group
            -> Horizontal Layout Group
                -> Text
    -> Layout Element (Ignore Layout [x])

-> Vertical Layout Group + Content Size Fitter (Vertical Fit: Preferred Size)
    -> Layout Element (Preferred Height: 200)
    -> Layout Element (Preferred Height: 200)

Components

• Canvas: defines an invisible area where all UI elements should be placed. UI elements in the Canvas are drawn in the same order they appear in the Hierarchy.

• Canvas Scaler: defines if canvas should be resized based on screen size. Reference resolution defines "original" resolution thus defining if UI should be scaled up or down.

• Canvas Group: controls alpha, interactivity or raycasts of all child UI elements.

• Canvas Renderer: all UI elements have this which allows them to be rendered.

• RectTransform: defines an invisible area in 2D space.

• Anchors: How RectTransforms are positioned relative to each other.

• Text: shows sting as on-screen text.

• Image: shows an image to the user. Allows animations and filling the area, but only accept Sprite source.

• Raw Image: shows an image to the user. Accepts texture and WWW image sources, but has more limited options.

• Mask: create an area, children outside of the area are hidden.

• RectMask2D: like Mask. RectMask2D is more performant but doesn't have as much options and doesn't work with non-coplanar elements.

• Button: allows defining OnClick

• Toggle: ON-off checkbox.

• Toggle Group: A group of toggles

• Slider: defines a decimal value.

• Scrollbar: defines a decimal value and the handler size can be controlled.

• Dropdown: defines a list of options to choose from.

• Input Field: text input box.

• ScrollRect: allows scrolling over content.

Effects:

• Shadow: adds drop shadow effect on the game object e.g. text or image.
• Outline: adds outline store effecton the game object e.g. text or image.
• Position as UV1: passes the canvas position through to the first UV channel, used for fancier graphics stuff.

Canvas types:

• Screen Space - Overlay: the usual in your face UI.
• Screen Space - Camera: persepctive UI.
• World Space: UI that is meant to be part of the game world.

The auto layout system is based on a concept of layout elements and layout controllers.

• First minimum sizes are allocated.
• If there is sufficient available space, preferred sizes are allocated.
• If there is additional available space, flexible size is allocated.

Texts, images and layout groups have Layout Element component by default.

• Content Size Fitter: functions as a layout controller that controls the size of its own layout element. Direction of resizing is controlled by the pivot.

• Aspect Ratio Fitter: adjust the height to fit the width or vice versa, or it can make the element fit inside its parent or envelope its parent. Direction of resizing is controlled by the pivot.

• A layout group functions as a layout controller that controls the sizes and positions of its child layout elements: Horizontal Layout Group, Vertical Layout Group and Grid Layout Group. A layout group doesn’t control its own size.

• Grid Layout Group: places its child layout elements in a grid. Ignores min and preferred sizes of children.

• Horizontal Layout Group: places its child layout elements side by side.

• Vertical Layout Group: places its child layout elements on top of each other.

Rebuild is done end of the frame. Calculating new dimensions etc.

When a property on a component changes which can cause the current layout to no longer be valid, a layout recalculation is needed. This can be triggered using the call:

LayoutRebuilder.MarkLayoutForRebuild (transform as RectTransform);

Guidelines for when a rebuild should be triggered:

• In setters for properties that can change the layout.
• In these callbacks:
• OnEnable
• OnDisable
• OnRectTransformDimensionsChange
• OnValidate (only needed in the editor, not at runtime)
• OnDidApplyAnimationProperties

Rich text allows:

• bolding and italics
• partially changing text size
• partially changing text color
• partially changing text material
• adding an in-line image

Sources

• Unity Docs - Basic Layout