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)