- Notch Simulator helps tell those components (which are all
INotchSimulatorTarget) a simulated safe area and cutouts for use at design time. You will see them adapt immediately on toggling on-off the simulator or changing devices so you can iterate your UI design.
- It also shows an overlay of respective device to help you better picture the obstacles on the screen.
- It even works in the prefab mode, or as called
The tool is accessible from
Window > General > Notch Simulator. Then you can dock it somewhere. The simulation will not happen if the panel is not present, all simulation occurs in
void OnGUI() of that
Use the check box to turn on-off the simulator so you see if your UI looks great on device with or without
Additionally with Shortcuts API introduced in 2019.1, you could press
Alt/Option + N to toggle it to confirm your design. It could be adjusted in the
Shortcuts... preference menu.
"The configuration system" let you quickly switch between 2 configs. A common desire is not to just toggling on and off the simulation, but also switch around the device. Commonly between 2 extremes such as iPhone vs iPad.
By clicking on the word "Config A" it will change to "Config B". If you change the simulated device while in "Config B", it will be remembered to this configuration instead. After you have finished setting up your A and B it is easy with shortcut
Alt/Option + M to switch A-B repeatedly and see if the design works on both or not.
The configuration system even has a separated A and B per build platform. If you were working on iOS and switched to Android, then you are allowed to have one more set of A and B configs. When working on Android it could be Galaxy Note 10+ and Galaxy S10+ instead of iPhone and iPad, for example.
How it works
If you found some bugs or want to mess with the code this should be helpful :
- The simulator maintains 2
Canvasgame objects, one in the normal scene and one in the prefab environment scene. They are with
HideFlagsthat make it invisible on Hierarchy and do not get saved.
AssetDatabaseuses a fixed GUID to go to an overlay collection folder and load the correct one.
Canvasis on "Screen Space - Overlay". with high sort order. Effectively any image put on this should be on top of everything.
- You need to set the game view to match your simulation device choice or it would looks weird.
- Portrait or landscape orientation is determined from width vs height of the current game view's size. The overlay will be flipped accordingly.
INotchSimulatorTargetfound will be sent a simulated
cutouts. You can keep the data in the component to use it later.
The overlay is also useful for aiming roughly what can fit in the corner around the notch, because you can see the notch's width and also rounded corner visually where safe area does not cover such information. (Safe area is a rectangle.) Although please note that Apple advise against intentionally trying to design on that gap.
There is a preference menu available. For example you could change prefab mode overlay color to be different from Game view ones.