Understanding UI Layout Constraints (part 1)

This is the first in a series of posts where I attempt to understand and explain how UI layout constraints (such as Apple’s Auto Layout) work and are implemented. Along the way, we will learn about a field of mathematics known as “linear programming”.

This series is mainly targeted at software developers who want to understand how UI layout constraint algorithms work, but who don’t necessarily have a very strong or recent background in mathematics. I will assume you are familiar with basic algebra such as y ≤ 2x + 3. More advanced concepts will be explained as they are used.

Please be advised that I am not an expert on linear programming or these algorithms. I’m just a software developer who got curious. I will try to explain things as clearly and accurately as I can, but I might make some mistakes. If you have any questions, comments, feedback, or corrections, please email me: john (at) croisant (dot) net.

If you find this series interesting, enjoyable, or useful, please send me a little email to let me know. I spent a long time researching, writing, and polishing this series. It’s nice to hear that my efforts have made a positive difference (however small) in someone else’s life.

In this first post, I will introduce the concepts of UI layout constraints and linear programming. I will also convert a UI layout constraint example into a system of linear equations, and graph the system visually. In future posts, I will explain the simplex method, the Cassowary algorithm, and how to implement the Cassowary algorithm as a computer program.

Update history:

  • 2016-05-01: Removed links to learning resources, and “Preparing for the Simplex Method” section; updated versions of them will appear in the next post in this series. Tweaked description of the objective function. Added “Recap” section.

Continue reading Understanding UI Layout Constraints (part 1)

Meter Bars

I generalized the DemaMeter class into a Meter class, which implements behavior for drawing a progress meter / health bar / etc. widget. It takes a player and can track any attribute (given a symbol with the name). It can also take two colors, the background color and fill color. Then I made RatingMeter and VolumeMeter subclasses, which show the audience rating and volume level of the player. The small green bar is volume.

Meter Bars