When making iOS applications, it’s often necessary to ignore the safe area of the device and extend content in it. That mostly because we need to expand a background color, an image, or any other SwiftUI view in order to end up with a unified background that won’t be looking broken by the safe area. As you will see in this quick post, it’s really easy to achieve that.
Let’s start with a really simple example; the following color that stops in the safe area bounds:
|
1 2 3 4 5 |
var body: some View { Color(UIColor.systemIndigo) } |
See that the top and bottom edges of the safe area remain unaffected. To change that, we can use the ignoresSafeArea view modifier:
|
1 2 3 4 5 6 |
var body: some View { Color(UIColor.systemIndigo) .ignoresSafeArea() } |
The above modifier returns a new view that ignores all safe area edges and expands to all directions. And it’s all we need to do the trick! However, what if we wanted to ignore a specific edge or edges, and not all of them?
Thankfully, ignoresSafeArea has an alternative initializer; it allows to specify the edges we want to ignore:
|
1 2 3 4 5 6 |
var body: some View { Color(UIColor.systemIndigo) .ignoresSafeArea(.all, edges: .bottom) } |
By setting the .bottom value as the second argument in the above modifier, only the bottom edge is ignored. The original behavior is maintained for the rest.
If more than one edges should be ignored, then the second argument must be an array. For instance, the following ignores bottom and trailing edges:
|
1 2 3 |
.ignoresSafeArea(.all, edges: [.bottom, .trailing]) |
Note that ignoresSafeArea view modifier is available on iOS 14 and above. That means that if supporting iOS 13 is a requirement this modifier just can’t be used.
However, there is another modifier to apply instead, called edgesIgnoringSafeArea. It expects one argument only; the edge or edges to ignore:
|
1 2 3 4 5 6 |
var body: some View { Color(UIColor.systemIndigo) .edgesIgnoringSafeArea(.all) } |
The above has the same results to simply calling the ignoresSafeArea modifier without arguments. It ignores all edges. But similarly as shown before, specific edges can be provided here too:
|
1 2 3 |
.edgesIgnoringSafeArea([.top, .bottom]) |
Important Note: Even though at the time or writing edgesIgnoringSafeArea is the way to ignore safe area edges when supporting iOS 13, it seems that this modifier will become deprecated with the coming of iOS 14.5 according to Apple docs. So be cautious with it.
So, to summarize, ignoring safe areas in SwiftUI is just a matter of calling a simple view modifier. Apply it whenever necessary, and expand the safe area of your views in order build an interface the way you like it.
