SwiftUI Essentials: Push-In & Push-Out Views, you must know this!

KD Knowledge Diet
2 min readJun 9, 2022

If you use SwiftUI without understanding the nature of the view, you will definitely run into a huge problem. In particular, Push-In & Push-Out is the most basic concept to know when creating layouts. Never rely on your senses and let’s use it properly.

Push-In Views

Text(“”) is the most common example. These views take as much space as it needs. You can think of it as Intrinsic Size in UIKit.

Push-In Views Examples

Image & Text. Those views are Push-In Views. They take up as much space as it needs
Push-In Views

Push-Out Views

Push-outs views, on the contrary to Push-In Views, take as much space as possible. If you develop without knowing the push-out view concept, the pain is unimaginable. Why can’t I draw what I want?!

Circle, Rectangle, RoundedRectangle, Color, etc. belong to Push-out view.

Example 1) Taking the entire space

Push-Out Views
Rectangle

If you don’t specify its size, push-out views stretch as far as they can go.

Example 2) Push out views are divided equally.

Two Push-Out Views in VStack
Push-Out Views Divided Equally

If you have more than two push-out views, it’s divided equally.

Conclusion

  • Push-In Views take as much space as they need
  • Push-Out Views take as much space as possible
  • Push-Out Views are divided equally when there are more than two

--

--

KD Knowledge Diet

Software Engineer, Mobile Developer living in Seoul. I hate people using difficult words. Why not using simple words? Keep It Simple Stupid!