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

Patent metadata

Field	Value
Publication number	US-12147753-B2
Application number	US-202017129207-A
Country	US
Kind code	B2
Filing date	Dec 21, 2020
Priority date	May 17, 2016
Publication date	Nov 19, 2024
Grant date	Nov 19, 2024

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 method comprising:
determining, by a computing device, a plurality of connections involving at least a first user interface (UI) element, a second UI element, and a third UI element, wherein the plurality of connections include at least a first layout constraint and a second layout constraint, wherein the first layout constraint defines a spatial relationship between the first UI element and the second UI element, and wherein the second layout constraint defines a spatial relationship between the second UI element and the third UI element;
determining, by the computing device, that the plurality of connections result in an error in positioning of the first UI element, the second UI element, or the third UI element;
determining, by the computing device, a ratio of an amount of error to spread to the first layout constraint to an amount of error to spread to the second layout constraint; and
adjusting, by the computing device, the first layout constraint and the second layout constraint to spread the error to the first layout constraint and the second layout constraint, wherein the error is spread according to the determined ratio.

2. The method of claim 1 , wherein determining the plurality of connections involving the first UI element, the second UI element, and the third UI element comprises:
providing, on the computing device, a layout application for developing a UI, the layout application including a representation of a page that allows UI elements to be visually positioned relative to each other; and
receiving, via the layout application, user input indicating the plurality of connections involving the first UI element, the second UI element, and the third UI element.

3. The method of claim 2 , further comprising after adjusting the first layout constraint and the second layout constraint, providing the first layout constraint and the second layout constraint in a layout data file associated with the UI.

4. The method of claim 1 , further comprising modifying one or more dimensions of the first UI element, the second UI element, or the third UI element to facilitate spread of the error to the first layout constraint and the second layout constraint.

5. The method of claim 1 , wherein determining the ratio is based on user input.

6. The method of claim 1 , wherein determining the ratio is based on user preferences stored in memory of the computing device.

7. The method of claim 1 , wherein determining the ratio comprises the computing device modifying a predetermined ratio value to a customized ratio value.

8. The method of claim 1 , further comprising determining coordinates for the first UI element, the second UI element, or the third UI element based on the ratio of the amount of error to spread to the first layout constraint to the amount of error to spread to the second layout constraint.

9. The method of claim 1 , further comprising generating a final layout of a UI based on the first adjusted layout constraint and the second adjusted layout constraint.

10. The method of claim 1 , wherein adjusting the first layout constraint and the second layout constraint to spread the error to the first layout constraint and the second layout constraint is performed using a linear equation solver.

11. The method of claim 10 , wherein the linear equation solver is applied responsive to a determination that more than one potential set of coordinates can be calculated for at least one of the first UI element, the second UI element, or the third UI element.

12. The method of claim 10 , wherein the linear equation solver is applied to a linear equation representing two opposite-connected anchors on one of the first UI element, the second UI element, or the third UI element.

13. The method of claim 12 , wherein the linear equation solver spreads the error equally among the two opposite-connected anchors.

14. The method of claim 12 , wherein the linear equation solver spreads the error such that more error is applied to a first anchor of the two opposite-connected anchors than to a second anchor of the two opposite-connected anchors.

15. A non-transitory computer readable storage medium is provided that includes instructions that, when executed by at least one processor, cause the at least one processor to:
determine a plurality of connections involving at least a first user interface (UI) element, a second UI element, and a third UI element, wherein the plurality of connections include at least a first layout constraint and a second layout constraint, wherein the first layout constraint defines a spatial relationship between the first UI element and the second UI element, and wherein the second layout constraint defines a spatial relationship between the second UI element and the third UI element;
determine that the plurality of connections result in an error in positioning of the first UI element, the second UI element, or the third UI element;
determine a ratio of an amount of error to spread to the first layout constraint to an amount of error to spread to the second layout constraint; and
adjust the first layout constraint and the second layout constraint to spread the error to the first layout constraint and the second layout constraint, wherein the error is spread according to the determined ratio.

16. 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:
determine a plurality of connections involving at least a first user interface (UI) element, a second UI element, and a third UI element, wherein the plurality of connections include at least a first layout constraint and a second layout constraint, wherein the first layout constraint defines a spatial relationship between the first UI element and the second UI element, and wherein the second layout constraint defines a spatial relationship between the second UI element and the third UI element;
determine that the plurality of connections result in an error in positioning of the first UI element, the second UI element, or the third UI element;
determine a ratio of an amount of error to spread to the first layout constraint to an amount of error to spread to the second layout constraint; and
adjust the first layout constraint and the second layout constraint to spread the error to the first layout constraint and the second layout constraint, wherein the error is spread according to the determined ratio.

17. The system of claim 16 , wherein the instructions cause the one or more processors to determine the plurality of connections involving the first UI element, the second UI element, and the third UI element by:
providing a layout application for developing a UI, the layout application including a representation of a page that allows UI elements to be visually positioned relative to each other; and
receiving, via the layout application, user input indicating the plurality of connections involving the first UI element, the second UI element, and the third UI element.

18. The system of claim 17 , wherein the instructions cause the one or more processors to provide a visual indication of the first adjusted layout constraint and the second adjusted layout constraint in the layout application.

19. The system of claim 16 , wherein the instructions cause the one or more processors to generating a final layout of a UI based on the first adjusted layou

Assignees

• Google Llc

Inventors

• Hoford John
• ROARD Nicolas
• Guy Romain P

Classifications

• G06F40/103

  Formatting, i.e. changing of presentation of documents (automatic justification G06F40/189; automatic line break hyphenation G06F40/191) · CPC title

• G06T11/60

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

• G06F2111/04

  Constraint-based CAD · CPC title

• G06F30/398

  Design verification or optimisation, e.g. using design rule check [DRC], layout versus schematics [LVS] or finite element methods [FEM] (optical proximity correction [OPC] design processes G03F1/36) · CPC title

• G06F30/392

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