62 Followers
0 Following
30 Posts
Visualise Size Classes, Layout Margins, Safe Area, SF Symbols, System Colors and more. Made by @geoffhackworth
Websitehttps://hacknicity.com/adaptivity
App Storehttps://apps.apple.com/app/id1054670022

Fun #sfSymbols fact: there are 24 symbols with three letter names and none of them have been renamed (yet!)

The first screenshot shows them all in a custom collection I made in Adaptivity. I’ve configured the availability annotation to only annotate symbols added (or renamed) in iOS 13.1 or later. Those without an annotation have been available since iOS 13.

A much simpler way to see the symbols available since iOS 13 is to change to the iOS 13 data set, which hides newer symbols. There’s 13.

Adaptivity is really useful in exploring how window layout changes when using Stage Manager on iPad.

It clearly shows the stretching that occurs when moving between the different hard-coded window sizes available and when the horizontal size class shifts between regular and compact.

Single view: https://youtu.be/0USQ9_w8nq4

Split view: https://youtu.be/huotAOGk5_E

Adaptivity iOS App with iPad Stage Manager

YouTube

Adaptivity is really useful in exploring how window layout changes when using Stage Manager on iPad.

It clearly shows the stretching that occurs when moving between the different hard-coded window sizes available and when the horizontal size class shifts between regular and compact.

Single view: https://youtu.be/0USQ9_w8nq4

Split view: https://youtu.be/huotAOGk5_E

Adaptivity iOS App with iPad Stage Manager

YouTube

A nice way to randomly discover interesting #sfSymbols is to use Adaptivity’s symbol widget(s) on your Home Screen. They support all sizes and have configuration parameters to select specific categories, render mode, refresh interval and light/dark appearance.

#iOSDev #indieDev

Adaptivity received a small update today. Version 9.5 includes a new #sfsymbols data set for iOS 16.4. You need to be running iOS 16.4 beta 1 or later (or macOS 13.3 beta 1 or later for the Mac Catalyst version) to see this data set. I posted some screenshots with the changes a few days ago on my personal account: https://iosdev.space/@geoffhackworth/109880046816310968 and wrote about them in more detail here: https://hacknicity.medium.com/sf-symbols-changes-in-ios-16-4-876dad98f7c2

#iOSDev #indieDev

Geoff Hackworth (@[email protected])

Attached: 4 images iOS 16.4 beta 1 has a few small changes to #sfsymbols There are four new symbols for individual left/right powerbeats and powerbeats3 earpieces. The "axel" symbols added in iOS 16.1 have been renamed to "axle". The old names still work, but the new names require iOS 16.4. list.clipboard now supports multicolor rendering. 1.lane to 12.lane now support Arabic and Hindi localizations. These images are taken from an upcoming release of Adaptivity running on iOS 16.4b1. #iosdev #indieapps

iOS Dev Space

Adaptivity’s comprehensive collection of SF Symbol data sets is also available in the form of a Mac menu bar app: SF Menu Bar. It makes finding symbols and copying the name very easy. Or copy the Unicode character for a symbol to use in Figma, Sketch, Pixelmator Pro etc. It has configurable layout and symbol sizes to work well from the smallest laptop to the largest external monitor.

https://apps.apple.com/app/id1615595104

See @sfmenubar for tips and news about SF Menu Bar.

‎SF Menu Bar

‎SF Menu Bar helps developers and designers browse Apple's collection of over 4,400 SF Symbols and quickly copy a symbol's name or unicode character to the clipboard. FEATURES • Instantly-accessible menu bar app with optional global keyboard shortcut • Smart search algorithm to quickly find symbols…

Mac App Store

Browsing SF Symbols is one of many #iosdev features in Adaptivity. It has some very useful features that Apple’s SF Symbols app does not. Browse any of the eleven (!) different SF Symbol data sets over time, with names that were valid in that version (and later). It’s very easy to see which iOS version symbols were added or renamed using annotations on the symbols or the separate smart collections for added and renamed symbols. See other posts in this account for more.

https://apps.apple.com/app/id1054670022

‎Adaptivity (A)

‎Adaptivity is an invaluable tool for developers and designers. Use it to visualize how Size Classes and margins for layout, readable content and the safe area look on real devices and how they change with respect to orientation, iPad multitasking and Dynamic Type size changes. A comprehensive System…

App Store
iOS 16 also introduced a new default automatic render mode. This shows an image in either monochrome or hierarchical render mode. The latter is used for symbols Apple thinks looks better in that mode. It is mostly used for symbols showing Apple devices in their non-filled, non-circular forms. Monochrome rendering can be forced, if required.
iOS 16 added support for variable color. This customises the image content using a value between 0 and 1. Variable color is not a render mode itself and can be combine with the other render modes. Even though it is not a render mode, Adaptivity has a “variable” category alongside the other render modes to make compatible symbols easier to find.

iOS 15 added hierarchical rendering to show two or three layers of compatible symbols in different intensities to indicate depth. A tint color can be applied and affects all layers.

Palette rendering allowed the colors for each layer to be customised individually.

A “hierarchical / palette” category was added to make it easier to find symbols supporting these render modes.