Side Menu in IOS SwiftUI
Hi Guys, in this blog you will learn how to create a side menu in ios SwiftUI. Follow along with the blog and you will get how to create a side menu.
Step-1
Create a brand new SwiftUI project in XCode and rename the ContentView with MainTabbedView.
Import five icons for Home, Favorite, Chat, Profile, and Side Menu views.
After that create four views for Home, Favorite, Chat, and Profile Tab. This will be the simple code, which has one binding property presentSideMenu with one side menu icon and text in the view. As you can see HomeView code is below.
Step-2
After that create a SideMenu view which will be the container for the SieMenuViews.
SideMenu is taking the isShowing Binding property which will control the appearance of the view and content view which will show inside the Side Menu. As we need to transition the view from leading that's why edgeTransition is taking the movement from .leading. This will help the view to show from leading.
After that use a ZStack with frame height and width infinite and ignoringSafeArea which will spread the view on the complete screen. .animation is used to animate the view appearance.
Inside the ZStack, check that the isShowing is true or false. If true then show the inside content. Two things are used inside that (if) block, One is the background color for the side menu. Here we are using the black color with opacity 0.3 with ignoringSafeArea to spread it on the complete screen and onTapGesture to hide it when it is pressed and the other is a content view that will show inside the Side Menu with clear background.
Step-3
After that create an enum SideMenuRowType which will be extended with the Int and CaseIterable. CaseIterable is used for iterating the SideMenuRowType all cases. It will gather the information of the SideMenu row title and icon.
Step-4
After that create a SideMenuView which will show inside the SideMenu as content. SideMenuView has two binding properties selectedSideMenuTab and presentSideMenu. selectedSideMenuTab will tell us which tab is currently selected and presentSideMenu will tell us the current side menu appearance status and will change both binding properties inside the SideMenuView.
Inside of SideMenuView, first, create an HStack with clear background and then inside it write a ZStack and Spacer. Inside ZStack create a rectangle which will be the background of the side menu and then create a VStack with alignment .leading and spacing zero. Inside that VStack we are using the ProfileImageView, which is a function which is returning a profile image view for Side Menu. That function is created inside the SideMenuView. Also iterating the RowView by using the SideMenuRowType enum allCases inside that VStack. RowView is the view for Side Menu Row which will contain the icon and title. The background of RowView is controlling with the isSelected parameter. If the row is selected then the background will be purple otherwise the background will be white and also icon and title color will be gray if not selected.
Final Step:
Now the final step is to create two State properties inside the MainTabbedView. One is presentSideMenu which will control the presentation of the side menu and the other is selectedSideMenuTab which will control which side menu row is currently selected.
Now create a ZStack and inside ZStack create TabView and give it the selection selectedSideMenuTab. Inside TabView call those four views which you created earlier HomeView, FavoriteView, ChatView, and ProfileView with (.tag) property, and give the value from zero to onward.
After that under the TabView call the SideMenu view and bind this with the presentSideMenu and pass the SideMenuView by using the AnyView type modifier.
Now run the code and click on the menu icon then you will see the lovely side menu.
Hope this blog helps you. Thanks for reading. 😘😘😘😘😘😘😘😘😘😘😘😘😘😘😘😘😘😘😘😘😘😘😘😘😘😘😘😘😘😘😘😘😘😘😘😘😘😘😘😘😘😘😘😘😘😘😘😘😘😘😘😘😘😘😘
