Xcode 12 — iOS 14

Image for post
Image for post

In this tutorial, We are going to implement a UIKit like search without using any UIViewRepresentable.

We are going to divide the problem in following segments

  1. Create a search bar UI
  2. Add this search bar to List header

Search bar have a magnifying glass, an x button if text visible, and the cancel button to dismiss the search. We going to put all this in HStack with show/hide animation for cancel and x button.

We are going to use this Search bar in a list leader like following:

If we try now out search bar will look something…

SwiftUI + Visionkit — iOS 14 Xcode 12

Image for post
Image for post

With Apple’s Visionkit, It is super easy to create a document scanner. In this demo we are going to build MVP in less than 100 line.

In this document scanner, We are going to support following feature:

  1. Scan one or multiple documents
  2. Share the Scanned Document
  3. Delete if Document is not needed

*Complete code at the end

Considering you have already created an empty project.

Add NSCameraUsageDescription to info.plist

your access request message</string>

Create a base UI, With a button using which user can open camera to scan document.

We init and set delegate for VNDocumentCameraViewController in ContentView…

Xcode 12 — iOS 14

Image for post
Image for post

We are going to divide this problem into 2 Parts.

  1. Detecting if text can/cannot fit in given number of line. On Button click reset line count for text.
  2. Evaluating text size to add read more/read less at the end to text in the last line and handle click event shrink and expand.

To evaluate if the text string going to truncate or not, We will have to render the text string two times. One with line limit another without line limit.

We are going to leverage main text view’s background view for the same. Also…

Xcode 12 — iOS 13+

Image for post
Image for post

Notification and Toast views are basically an overlay view to existing view. To show an overlay, We will need a ZStack. this Zstack can wrap master View and below the overlay view and This overlay can be toggle via a bool.

In above code, the overlay takes the view which need to be shown on top of Main view and a binding object to show hide this view.

Now the second step would be to make the overlay view animatable.

Banner can be designed any way we like. …

Xcode 12.4 — iOS 14

Image for post
Image for post

SwiftUI’s TabView is not native SwiftUI component but rather a wrapper on UIKit’s UITabBarController. If can get access to UITabBarController, We can simply use UIKit APIs to set badge.

  1. To get UITabBarController, we can iterate from UIApplication window to rootViewController and subsequent child until we get instance of UITabBarController.
  2. Every time View State change SwiftUI view updates, It also refreshes tab view resulting resetting UIKit’s Badge. So we will also need to set a KVO on TabViewItem so that we can override this reset.


Xcode 12.4— iOS 14

Image for post
Image for post
  1. Creating a wave
  2. Embedding wave view to container image of shape to give fill animation
  3. Animating the wave

We are going to create a wave struct inherited from Shape. it will have percentage as a state to define how much container is filled. and the angle which we will use to make wave animation.

struct Wave: Shape {
var offset: Angle
var percent: Double

We also need to define AnimatableData type so that shape knows what type of data going to animate.

var animatableData: Double {
get { offset.degrees }
set { offset = Angle(degrees: newValue) }


Paged Scroll with Scrollable Tab — Xcode 12.4 viOS14

Image for post
Image for post

We are going go divide the problem in two parts.

  1. Create a Paged view — page changes on swipe.
  2. Crate a HStack with scroll view to contain page name.

To crate a page view we are going to use TabView with PageTabViewStyle. We are going to keep track of visible tab to a variable so that we can sync action of page to scrollable tab and vice versa.

We will need ScrollViewReader to scroll view if the selected tap is out of visible window.

Adding Bottom line:

For this we are going to leverage this stack overflow answer…

iOS 14 — Xcode 12.3

Image for post
Image for post

In this tutorial we are going to implement a onDrag and onDrop to a grid. OnDrag and OnDrop can be used reorder grid with used case in managing playlist booklist etc.


  1. Setup Mock data:
struct Grid: Identifiable {        
var id = UUID().uuidString
var gridText: String
class GridViewModel: ObservableObject {
@Published var gridItems =
[Grid(gridText: "Grid 1"),
Grid(gridText: "grid 2"),
Grid(gridText: "grid 3"),
Grid(gridText: "grid 4"),
Grid(gridText: "grid 5"),
Grid(gridText: "grid 6"),
Grid(gridText: "grid 7"),
Grid(gridText: "grid 8"),
Grid(gridText: "grid 9"),
Grid(gridText: "grid 10"),
Grid(gridText: "grid 11")]
@Published var currentGrid: Grid? //to keep track of dragged element


How to use scenePhase to detect scene state? — iOS 14 — XCode 12

Image for post
Image for post
Different ways to get scene phase and App phase

Most of the apps have use case to detect app state like background, foreground etc. With iOS 14, The app delegate and scene delegates are not part of code template. To manage scene state apple introduced a new environment variable called scene phase. But before we go to implement scene phase it is important to know different between scene state and App state.

As new SwiftUI supports Mac, iPhone, and iPad app. every separate window considered as new scene. And scene phase determine the state of that scene not the app.

Prafulla Singh

iOS Developer | Swift | Flutter

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store