Overlap

Anton Bukov
ML-Works Engineering
2 min readFeb 4, 2017

This short article is about one cool effect, made to keep visibility of visual objects on different backgrounds.

I use word overlap in the meaning of combining several styles of a single visual object with custom border shape. For example, you can navigate through app screens with swipes but wanna keep navigation buttons contrast enough on top of light and dark backgrounds. You may try to keep it visible by changing a color of buttons dynamically. But trust me, this will be high noticeable for users in a place where their attention is not needed. Overlap is the better way to achieve this, just look how iOS status bar can be overlapped:

iOS Status Bar overlap

The solution I am going to present you supports multiple overlaps simultaneously. You just need to compute several UIBezierPaths and call a proper method from -scrollViewDidScroll: or from UIPanGestureRecognizer’s arget-action.

UILabel multiple overlap

I like this effect badly and use it widely in Machine Learning Works. Recently we have opensourced library to handle it with ease: Overlap.

--

--