SwiftUI menu is a versatile control for presenting a menu of actions. It supports submenus and the primary action from iOS 15. SwiftUI menu is more user friendly and advance than the action sheet. Let’s try a menu named “Manage Document” and a submenu called “Upload”. Both menus have two options. Custom primary action help you to write action when you press the item on the menu.

The context menu provides you access to additional functionality related to onscreen items without cluttering the screen. You can create a context menu using .contextMenu modifier. The context menu is triggered with a long press. Each menu item in the context menu represents a SwiftUI button. You can add action, text and icon on those buttons. Here, we have a context menu with three buttons. You can use the “Long press for menu” to reveal a context menu. When open, a context menu displays a preview of the item and lists the commands that act on it. It is recommended to place the most frequently used menu items at the top of the menu.

Glassmorphism is a very trending UI design paradigm nowadays. We can use the semi-transparent blurry background to give more focus on the foreground content. SwiftUI provides .blur() modifier to create the background blur but it has very limited functionality compared to UIVisualEffectView. Get ahead of the competition and ace your next iOS interview with expert-curated resources. Check out the collection of SwiftUI and Swift interview questions and answers, behavioral interview tips, and the popular custom layout contents. Plus, go through the new section for Engineering Manager to help you excel in your career! Join my free Newsletter 🚀 SwiftUI does not provide any built-in visual effects view or something related to background blur. But we can use UIKit in SwiftUI using UIViewRepresentable. To implement a background blur effect in SwiftUI, I am using the Apple-provided VisualEffectBlur.swift file(Fruta) in the article. UIVisualEffectView can support multiple styles from ultra-thin to thick. .systemUltraThinMaterial.systemThinMaterial.systemMaterial.systemThickMaterial.systemChromeMaterial You can simply pass the style using VisualEffectBlur(blurStyle: .systemThinMaterial). The default blur style is .systemMaterial. VisualEffectBlur.swift

ScrollView in SwiftUI presents its content within the scrollable region. ScrollView can scroll horizontally, vertically, or both. The alignment of the ScrollView is vertical. If you want to make it horizontal then you need to use the horizontal parameter for the ScrollView. In the following example, the ScrollView allows the user to scroll through multiple RoundedRectangle child views. You can use showsIndicators false/true to toggle the scroll indicator. Output

If you want to place a view on top of another view(s), you need to use ZStack. The ZStack places each child view a higher z-axis value than the one before it. It simply means that later children are presented “on top” of the earlier child views. The very common use of Zstack is placing a test on top of a view. Let’s place a text on top of a view – The default ZStack alignment is center. ZStack doesn’t have a spacing property but you can offset() to move the position of child view. Output

Shapes in SwiftUI are a very innovative, exceptionally simple way to build a user interface component. In this article, we will take a look at simple shapes like rectangle, rounded rectangle, ellipse, circle and capsule. The common use of built-in shapes is clipping content, creating custom views, custom component etc. Using the built-in shapes, I will create a cell at the end of this article. Rectangle It creates a box with specified dimensions. Rounded rectangle It provides a rectangular shape with rounded corners. We can simply create a rounded rectangle from the rectangle. It is aligned inside the frame of the view containing it. Mostly used in cell and overlay. Circle Use Circle to circular shape. The circle’s radius equals half the length of the frame rectangle’s smallest edge. Mostly used for clipping the avatar. Capsule A capsule is an enhanced version of a rounded rectangle where the corner radius is half the length of the rectangle’s smallest edge. Normally used to create a badge or a button. Ellipse The Ellipse is a distorted version of a circle. An ellipse aligned inside the frame of the view containing it. Output I have used Rectangle to create an orange background. Other…

Custom view modifier is very powerful concept in SwiftUI which will allow you to write reusable code. If you are using same kind of modifiers throughout multiple of views, it is better to create a custom view modifier. The main benefit of custom view modifier is that it will help you to generate a good design system. Creating custom view modifiers promotes consistency, clarity, and quality in the SwiftUI application design process. It can also deliver significant competitive advantages for small team. Conform the ViewModifier protocol when you want to create a reusable view modifier that you can apply to any view. In this example, you can notice that both buttons have the same set of modifiers(the only font difference is font) and it makes sense to reuse those modifiers. The example below combines several modifiers to create a new modifier called CustomButtonModifier. As you can see that I have passed font as a parameter for CustomButtonModifier to differentiate primary and secondary button. You can apply the custom view modifier using modifier(_:) keyword but I prefer to create a function using the name of the custom modifier inside the View extension. It makes the code more readable. Output