Relation Among ZStack, NavigationView and Animation in SwiftUI
Lately, I have been trying SwiftUI to create a common layout screen that we frequently find in various iOS apps. I try to create a layout by having a list with navigation then showing a loading view. I found a few anomaly behaviour UI after I tried to compose the UI consisting of ZStack, NavigationView and Animation to show the loading view.
I know it is a fundamental screen that I am going to create. But for the time being in my writing, I am trying to tell people who are starting to create the app first time in SwiftUI. Some of us might find a lot of different problems when developing through using SwiftUI. I hope people can find a workaround to their problems at the very beginning when they started developing an app through SwiftUI. Thus, writing this might help people fix one of their fundamental problems when creating UI through SwiftUI.
When I am creating a screen with having animation progress, then populating a list of data. We have to put a few concern about the relation among ZStack, NavigationView and Animation in SwiftUI. Incorrect hierarchy of using those components will affect uncommon behaviour related to the UI and animation in SwiftUI.
I tried to segregate two cases to show you what will happen if we used the wrong hierarchy of those components (or a bug from Apple). Here are cases that I found.
Do not use ZStack as a child of NavigationView if your screen is using the List component. An anomaly UI layout will come out by watching the item of List component will not show fully as your parent view. I tried to put frame function either on Zstack or NavigationView; it did not work at all. But after I modified the code using Zstack as the parent of NavigationView instead of Zstack as the child of NavigationView. The UI layout showed properly.
When we are composing the screen with NavigationView as the parent of the ZStack component.
The layout will show an anomaly UI on List component does not fill fully with the parent view.
After we made the change ZStack to be the parent of NavigationView, we can see the List of items component show properly.
Do not call Animation on your custom loading view, such as creating from Circle, Rectangle inside NavigationView without involving ZStack. You will find silly behaviour for seeing the loading view has not been directly shown in the proper location instead of showing from the top left of the screen. It wasn’t delightful. We are as the user does not expect to see the loading view showed like that way. Here is what I said. It can be seen in this video.
If we notice regarding the screen in the video when showing loading view, there is an anomaly behaviour. But after I tried to modify the codes using ZStack. The anomaly has gone. It can be seen below this video.
After I told you about these cases, I hope we can learn something to create a layout to be more proper when deciding what or which component of SwiftUI that we are supposed to use hierarchically. Indeed this article is just one of the fundamentals of creating the layout through SwiftUI.
