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)

chicken-sdl2 0.2.0 Released

Screenshot of a graphics demo showing waves, the moon, stars, and constellations.
Screenshot of “The Sea and the Stars”, a new demo program using chicken-sdl2 0.2.0.
Today I released version 0.2.0 of chicken-sdl2 (aka the sdl2 egg).

chicken-sdl2 provides CHICKEN Scheme bindings to version 2 of the Simple DirectMedia Layer (SDL) game development library.

Highlights of this release include:

  • Support for 2D accelerated rendering (renderer and texture)
  • Support for hints (configuration variables)
  • Support for most SDL 2.0.4 features
  • Efficient color, point, and rect operations
  • Performance improvements
  • Improved integer type checking
  • Miscellaneous other changes

For more details, please see the CHANGELOG.

Many thanks to Kooda Loutre and Kristian Lein-Mathisen for submitting suggestions which have been implemented in this release. :)