Grid Line Constraint Layout for Responsive UI Resizing

Resolve Bottlenecks,
Find Innovative SolutionsGenerate Solutions

Solution Overview

Problem

Designing a flexible layout manager that can consistently display user-interface layouts across diverse devices with varying display sizes and resolutions is challenging, particularly for devices with smaller screen resolutions.

Innovation Solution

A method that generates user-interface displays by solving a series of constraints specified for rectangular components within a container rectangle, using grid lines to arrange components, and employing algorithms like the Bellman-Ford algorithm to determine optimal grid line locations, allowing for flexible and efficient resizing and redrawing of layouts.

Engineering Contradictions & Design Principles

VSEngineering Contradiction Analysis

1Adaptability or versatility

If traditional layout managers are used to design user interfaces, then the layout can be simple to implement, but the layout cannot consistently display across diverse devices with varying display sizes and resolutions

Engineering Contradiction:

Improvelayout adaptabilityVSAvoidlayout manager complexity

Core Design Contradiction:

Adaptability or versatilityVSDevice complexity

Solution Approach 1:

The patent segments the layout problem into discrete grid lines and constraints. Each grid line represents a potential component boundary, and constraints define relationships between grid lines. This segmentation allows the layout manager to handle diverse device sizes by selectively applying constraints to grid lines, making the system adaptable without requiring complete redesign for each device type.

Inventive Principle:

Principle #1Segmentation

Solution Approach 2:

The patent uses parameter changes by representing layout specifications as numerical constraints on grid line positions. The system solves a system of linear equations where grid line positions are variables and component size requirements are parameters. This mathematical approach allows automatic adaptation to different device dimensions by simply changing the input parameters (component sizes and constraints) while maintaining the same underlying layout logic.

Inventive Principle:

Principle #35Parameter changes

2Adaptability or versatility

If the layout manager implements flexible resizing and redrawing operations, then the user interface can adapt to different screen sizes, but the computation time and processing complexity increase

Engineering Contradiction:

Improveresizing flexibilityVSAvoidcomputation time

Core Design Contradiction:

Adaptability or versatilityVSLoss of time

Solution Approach 1:

The patent applies preliminary action by pre-defining grid lines and constraints based on component specifications before actual layout rendering. The system pre-processes the layout specification into a system of linear equations that can be efficiently solved. This preliminary setup allows rapid adaptation to different screen sizes during runtime, as the heavy computational work of parsing and understanding component relationships has already been performed.

Inventive Principle:

Principle #10Preliminary action

Solution Approach 2:

The patent replaces traditional mechanical layout adjustment methods with a mathematical system of linear equations. Instead of manually adjusting component positions or using complex geometric algorithms, the system substitutes a mathematical model where grid line positions are determined by solving linear constraints. This substitution dramatically reduces computation time and enables efficient resizing operations across diverse devices.

Inventive Principle:

Principle #28Mechanics substitution (Replace mechanical system)

3Ease of manufacture

If the layout manager uses a simple grid-based approach, then the implementation is easier, but it cannot handle complex spatial constraints and component relationships

Engineering Contradiction:

Improveimplementation easeVSAvoidconstraint handling capability

Core Design Contradiction:

Ease of manufactureVSAdaptability or versatility

Solution Approach 1:

The patent achieves universality by designing a constraint system that can handle multiple types of spatial relationships through a unified mathematical model. The same system of linear equations framework can represent component sizes, spacing requirements, alignment constraints, and proportional relationships. This multi-functional approach maintains implementation simplicity while significantly expanding the types of complex constraints that can be expressed and solved.

Inventive Principle:

Principle #6Universality (Multi-functionality)

Data Source

PatentEP2761443B1Methods and apparatus for general solution of the two-dimensional layout problem by reduction to a single-source path-length problem on a weighted graph

Publication Date: 2017.03.01 GOOGLE LLC

Figure 1
Figure 2A~2B
Figure 3

AI summary

Disclosed are apparatus and methods for generating displays based on a user-interface layout. A user-interface layout can specify at least first and second rectangular components, both being within a container rectangle, each having respective sizes in a dimension. The computing device determines a plurality of grid lines from the user-interface layout, where the first and second rectangular components are respectively associated with first and second sets of at least two grid lines. The computing device generates at least first and second constraints, respectively related to the first and second sets of at least two grid lines. The computing device solves the system of constraints to determine respective location for the grid lines. The computing device generates and displays a user-interface display including the first and second rectangular components.