Constraints-based layout system for efficient layout and control of user interface elements

Patent metadata

Field	Value
Publication number	US-11030386-B2
Application number	US-201715494349-A
Country	US
Kind code	B2
Filing date	Apr 21, 2017
Priority date	May 17, 2016
Publication date	Jun 8, 2021
Grant date	Jun 8, 2021

Abstract

Aspects of the subject technology relate to systems and methods for constraints-based layout and control of user interface (UI) elements. The system receives a first user input indicating an instruction to position a first UI element on a page of the layout application. The system receives a second user input indicating an instruction to position a second UI element on the page. The system receives a third user input indicating an instruction to create a connection from the second UI element to the first UI element. The system generates a layout constraint indicating a spatial relationship between the first UI element and the second UI element based on the connection. The system provides the layout constraint in a layout data file associated with the UI.

First claim

What is claimed is:

1. A computer-implemented method, comprising:
providing, on a computing device, a layout application for developing a user interface (UI), the layout application including a representation of a page that allows UI elements to be visually positioned relative to each other prior to a runtime process of the UI;
receiving a first user input comprising a visual placement of a first UI element on the page;
receiving a second user input comprising a visual placement of a second UI element on the page;
receiving a third user input comprising a visual connection on the page from the second UI element to the first UI element;
generating a layout constraint indicating how the second UI element is positioned relative to the first UI element on the page by at least:
mapping the visual connection on the page to relationship data, the relationship data indicating a directional relationship between the first UI element and the second UI element with respect to one of the first UI element or the second UI element;
mapping the visual connection on the page to spatial positioning data, the spatial positioning data indicating a location on the page with respect to the first UI element and the second UI element;
determining coordinates on the page respectively for the first UI element and the second UI element based on the spatial positioning data and the relationship data, wherein determining the coordinates comprises:
making a determination of whether more than one potential set of coordinates can be calculated for at least one of the first UI element or the second UI element,
responsive to the determination that more than one potential set of coordinates can be calculated for at least one of the first UI element or the second UI element, determining the coordinates using a linear equation solver, and
responsive to the determination that more than one potential set of coordinates cannot be calculated for at least one of the first UI element or the second UI element, determining the coordinates without using a linear equation solver; and

providing the layout constraint in a layout data file associated with the UI, wherein runtime content associated with at least one of the first UI element or the second UI element is automatically arranged on the UI during the runtime process in accordance with the relationship data, spatial positioning data, and determined coordinates of the layout constraint in the layout data file.

2. The computer-implemented method of claim 1 , wherein determining the coordinates comprises:
processing the spatial positioning data and the relationship data;
classifying the relationship data and the spatial positioning data into a particular class of constraints;
determining whether the particular class of constraints is associated with a first class of constraints or a second class of constraints different from the first class of constraints;
resolving the relationship data and the spatial positioning data independent of the linear equation solver to determine the coordinates when it is determined that the particular class of constraints is associated with the first class of constraints;
transforming the relationship data and the spatial positioning data into one or more linear equations when it is determined that the particular class of constraints is associated with the second class of constraints; and
resolving the one or more linear equations through the linear equation solver to determine the coordinates when the relationship data and the spatial positioning data are transformed into the one or more linear equations.

3. The computer-implemented method of claim 1 , wherein the first UI element includes a first anchor and the second UI element includes a second anchor, wherein the second anchor of the second UI element is connected to the first anchor of the first UI element based on the visual connection on the page from the second UI element to the first UI element.

4. The computer-implemented method of claim 3 , wherein the visual connection on the page from the second UI element to the first UI element indicates that the first anchor and the second anchor occupy a same target location on the page.

5. The computer-implemented method of claim 3 , wherein the visual connection on the page from the second UI element to the first UI element indicates a defined distance between the first anchor and the second anchor.

6. The computer-implemented method of claim 3 , wherein generating the layout constraint further comprises:
determining that the visual connection on the page includes an error, the error indicating that the first anchor and the second anchor are restricted from being positioned on a target location on the page; and
modifying one or more dimensions of at least one of the first UI element or the second UI element; and
reducing an amount of the error to a predetermined value based on the modified one or more dimensions.

7. The computer-implemented method of claim 1 , further comprising:
receiving a fourth user input comprising a visual placement of a third UI element on the page;
receiving a fifth user input comprising a first visual connection on the page from the third UI element to the first UI element and a second visual connection on the page from the third UI element to the second UI element;
determining that the position of the third UI element with respect to the first UI element and the second UI element includes an error;
modifying a ratio of an amount of error on the first visual connection on the page to an amount of error on the second visual connection on the page;
adjusting the amount of error on the first visual connection on the page and the amount of error on the second visual connection on the page based on the modified ratio; and
determining coordinates for the third UI element based on the adjusted amount of error on the first visual connection on the page and the adjusted amount of error on the second visual connection on the page.

8. The computer-implemented method of claim 7 , wherein the layout constraint includes a first margin associated with the first visual connection on the page from the third UI element to the first UI element and a second margin associated with the second visual connection on the page from the third UI element to the second UI element, the first margin indicating a distance between the first UI element and third UI element and the second margin indicating a distance between the second UI element and the third UI element.

9. The computer-implemented method of claim 1 , further comprising:
providing for display a virtual object on the page, the virtual object being a visual guideline on the page;
receiving user input comprising a visual instruction to position one or more of the first UI element or the second UI element relative to the virtual object, the layout constraint indicating how the second UI element is positioned relative to the first UI element being based on the virtual object; and
rendering a final layout of the page based on the layout data file, wherein the virtual object is removed from display on the page at runtime of the final layout.

10. A system, comprising:
one or more processors;
a computer-readable storage medium coupled to the one or more processors, the computer-readable storage medium including instructions that, when executed by the one or more processors, cause the one or more processors to:
provide, on a computing device, a layout application for developing a user interface (UI), the layout application including a representation of a page that allows UI elements to be visually positioned relative to each other prior to a runtime process of the UI;
receive a first user inp

Assignees

• Google Llc

Inventors

• Hoford John
• ROARD Nicolas
• Guy Romain P

Classifications

• G06F8/38

  for implementing user interfaces · CPC title

• G06F8/34 Primary

  Graphical or visual programming · CPC title

• G06F30/392

  Floor-planning or layout, e.g. partitioning or placement · CPC title

• G06F2111/04

  Constraint-based CAD · CPC title

• G06T11/60

  Creating or editing images; Combining images with text · CPC title