WWDC22: Use The New CircleLayout To Equally Space Views Around A Specific Radius
Daily Coding Tip 105
Celebrating WWDC 2022 and the 100th Daily Coding Tip 🥳
All tutorials will be free this week!
This is a quick look at CircleLayout, which is not yet an official layout.
I first found out about it from this tweet by Khoa:
In the replies it was mentioned that there is an underscore because it is an undocumented private API.
But let’s have a look at it anyway!
Khoa’s use of AnyLayout didn’t work for me, but I was able to use _CircleLayout directly anyway. It didn’t seem to work when my ForEach wasn’t inside a Group, so the layout is one of many that can’t deal with ForEach directly.
I’m changing the colour by an amount relative to the progress of the index towards the total number of capsules. This means that if I have a total of 100 capsules, index 90 would be equivalent to 0.9, a value between 0 and 1 that is therefore compatible with the Color initialiser.
For fun I’ve added a Stepper to let you change things as runtime.
There’s even a Button to animate the layout, although it comes with some limitations.
The animation would barely work at all before I gave the capsules the .id(index) identifiers. This lets SwiftUI know that between view refreshes these remain the same capsules, numbered based on their order of appearance.
If you have more than 50 capsules, the capsules with an index of 51 or higher will fade away, and the first 50 capsules will move into their correct positions.
If you have less than 50 capsules, only the capsules that exist will move into place, while the rest will fade into existence to fill the gaps.