====== Phase 2: The Canvas (Structure & Workflow) ======

Now that styling an object is better understood, how is it placed on an object. Total Launcher is not just a grid of icons; it is a free-form design canvas. This phase covers the architecture: **Pages, Windows, Layouts, and Positioning.**

===== The Hierarchy =====
Understanding the container hierarchy is critical for troubleshooting.
  * **The Screen:** The physical display of a user device.
  * **The Page:** The main workspace (Home Screen) ... and multiple pages are also possible.
  * **The Window:** A floating //container// that sits above the page. (Used for pop-ups, sidebars, or overlays).
  * **The Layout:** A group of objects anchored together (like a grid of icons).
  * **The Object:** The individual item (Icon, Text, Widget).

===== Page Management =====
Total Launcher allows extensive management of screens and pages.

  * **Adding/Removing Pages:** Enter [[:section:section1-2-e_beginners_basic_editing_steps#to_enter_edit_mode|Edit mode]]. When viewing the ++screen |{{:uitlm-1-2-e-fig1.webp?200}}++ make sure to tap the ''Edit Off'' icon to turn the ++Edit On|{{:section:section-phase2-page-edit.webp?200}}++. Tap the "New Page" icon {{:ui:ui-icon_page-new_page.webp?direct&25}} to add, or the "Trash" icon {{:ui:ui-icon_delete.webp?direct&15}} to remove the current page (shows in the center of the screen).
  * **Arranging Pages:** In the page overview, use the ''Swap Button'' {{:ui:ui-icon_page_swap.webp?direct&25}} to exchange positions of pages.
  * **The Home Page:** Indicated by a ''House Icon'' {{:ui:ui-icon_page_home.webp?direct&25}}. To change the default home page, swipe left or right and tap the house icon on the desired page.
  * **Scrolling:**
    * **Horizontal:** Standard swiping between pages.
    * **Vertical:** Each page can be individually set to "Scroll Vertically" in Page Options {{:ui-icon_option.webp?direct&25}}. Just "uncheck" the ''Fit the content to the screen height (make not scrollable)'' option, then follow this [[howto:howto-page_scrolling-vertical|setup procedure]]. This allows for an almost infinite scrolling page similar to a social media feed.
  * **Orientation:** Total Launcher supports independent page designs for **Portrait** and **Landscape** modes. Arrange objects separately for each orientation.

===== Layouts (Grids & Circles) =====
While objects can be freely placed, "Layouts" are containers that snap objects into a structured formation.

  * **Grid Layout:** Snaps items into rows and columns.
    * *Customization:* You can adjust ''Columns/Rows'' (1 to 16).
  * **Circle Layout:** Arranges items in a perfect circle.
    * *Customization:* You can adjust the size, rotation angle and even transform it to unique viewpoints.
  * **Why use a Layout?**
    * **Automatic Spacing:** If resizing a Grid Layout, all icons inside resize and space themselves automatically.
    * **Batch Editing:** Changing the "Icon Size" in the Layout Options changes *every* icon in that grid instantly.

==== Grouping vs. Layouts ====
New users often confuse these two features.
  * **Layout:** A container that forces items into a grid/circle. You cannot drag items freely inside it.
  * **Group:** A selection of free-floating objects glued together.
    * *How to Group:* Highlight multiple objects by a tap/hold. This activates the Object Design Menus. In the bottom menu, tap the ''Group'' icon {{:ui:ui-icon_group.webp?direct&25}}.
    * *Benefit:* You can move, rotate, or animate the entire group as one unit (e.g., a "Music Player" group containing Play, Pause, and Album Art objects).

===== Anchoring & Screen Adaptation =====
When moving or sharing themes between devices with different screen sizes (aspect ratios), objects can shift unexpectedly. Total Launcher uses two positioning modes to fix this.

  * **Top Anchor (Default):**
    * **Behavior:** Objects are positioned based on their distance (Y-axis) from the **Top** of the screen.
    * **Best for:** Headers, Clocks, and Status Bars.
  * **Bottom Anchor (The "Fit Content" Mode):**
    * **Problem:** On a taller screen, a "Dock" anchored to the top might float in the middle of the screen.
    * **Solution:** Enable ''Fit content to the screen height'' in the ''Page Options''.
      * **How to set:** Once enabled, select the object and use the **Y-Position** entry to adjust alignment to the desired level.
    * **Best for:** Docks, Navigation Bars, and Footers. This ensures stability across different devices.

==== Pinning ====
    * **Behavior:** A pinned object floats above the page system, appearing on **every** page in the exact same location.
    * **Action:** With Edit mode On, select the object to activate the Object Design Menu. In the top menu, tap the ''Pin'' icon {{ui:ui-icon_pin.webp?direct&20}}.

===== Z-Order (Layers) =====
Objects in Total Launcher sit in layers, like a stack of papers.
  * **The Issue:** When a large transparent shape is placed *over* a button, the button becomes unclickable because the shape is blocking the touch.
  * **The Fix:**
    * **Access:**  With the desired object selected and the Object Design Menu (bottom) activated, then:
      * **Bring to Front:** {{:ui:ui-icon_zorder_front.webp?direct&25}} - Moves the object to the top of the stack.
      * **Send to Back:** {{:ui:ui-icon_zorder_back.webp?direct&25}} -  Moves the object behind everything else (ideal for Background Shapes). 

===== The Grid vs. Free Positioning =====
  * **Snap-to-Grid:** By default, objects in ''Edit On'' mode when selected will snap to invisible grid lines for neatness when manually moved.
  * **Nudging:** For pixel-perfect precision, still in Edit On mode with the object selected, quickly tap one of the ''Edit'' {{:ui:ui-icon_object_edit.webp?direct&25}} elements to use the directional arrow keys to finitely move an object or the ''pencil'' to manually adjust the position coordinates 1 pixel at a time.

<WRAP noprint>{{page>site:site-footer-comment_feedback_block}}</WRAP>