Setting up a multi-platform SwiftUI project

16

Apr. 21

454

VIEWS

What is SwiftUI?

  1. Before SwiftUI, we were designing iOS applications User Interface into storyboards. Storyboards are an imperative user interface. From June 2020, Apple released SwiftUI for design applications in the most effective way. SwiftUI is a declarative user interface.
  2. SwiftUI used to create a cross-platform user interface that works across iOS, macOS, tvOS, and even watchOS. This means you can now learn one language and one layout framework, and deploy that code anywhere. Also, SwiftUI automatically supports dynamic type, dark mode, localization.
  3. SwiftUI is available from Xcode 11 and iOS 13.0.

Why we need to set up

Let’s continue to create a project for multi-platform SwiftUI.

  1. Open Xcode -> Select Multiplatforms -> Apps -> Enter project name and create project

  1. Once you setup above, you should see the following targets have automatically been set up for you along with three top-level directories called Shared, iOS and macOS:

  1. By default, Apple provides iOS and macOS support into multi-platform applications. We can add watchOS, tvOS.
  2. First, We will add watchOS support. To do this click on the ‘+’ symbol at the bottom of the targets list (see above screenshot). Select the “watchOS” tab and then the “Watch App” target:

  1. Once this has been added you will see new directories and targets that relate to watchOS. The “WatchKit Extension” target/directory is where the majority of our changes will take place.
  2. Now, We will add tvOS support. To do this click on the ‘+’ symbol at the bottom of the targets list (see above screenshot). Select the “tvOS” tab and then the “Watch App” target:

  1. Now, expand the “Shared” directory to see the files that have been automatically added. The main ones of interest are:

-SwiftUIMultiplatformApp.swift
-ContentView.swift

  1. Xcode knows which files to include and build for which platforms. To see this in action change the ContentView for each platform.

-Shared -> Text(“Hello, iOS/macOS!”)
-SwiftUIMultiplatform (watchOS) WatchKit Extension -> Text(“Hello,             watchOS!”)
-SwiftUIMultiPlatform (tvOS) -> Text(“Hello, tvOS!”)

  1. It would be nicer if we could share files that are identical across the platforms and only maintain multiple versions of the files that differ.
  2. To begin we will attempt to create a common entry point to the app that works for all platforms. Right now, we have multiple entry points.
  3. To achieve one entry point for the application

-Delete all except the Shared/ version of the file.
-Select the Shared/SwiftUIMultiplatformApp.swift file and add it to the tvOS and watchOS targets.

  1. Select the Shared/MultiPlatformSwiftuiApp.swift file and add it to the tvOS and watchOS targets just like below:

  1. The structure of the app is now:

-SwiftUIMultiplatformApp (shared)
-ContentView (shared)

  1. Select the preview device and you will see output into it:

  1. Shared Files and Platform Specific Files

In a real app, we will come across cases where things can be displayed identically across all platforms and cases where we need to be platform-specific. This means we would ideally like a mixture of the two things.
To achieve this add a file called PlatformText.swift to each platform directory. Ensure it is added to the correct directory and target each time you add the file. For example, here we are adding to the iOS directory and the iOS target:

Do the same for macOS, tvOS and watchOS.

  1. Below showing the Platform. swift file for iOS. You can create these files individually for different platforms.
import SwiftUI

struct PlatformText: View {
var body: some View {
Text("Hello, iOS!")
}
}

struct PlatformText_Previews: PreviewProvider {
static var previews: some View {
PlatformText()
}
}

  1. We can now use this PlatformText struct by replacing the contents of our shared ContentView with:
import SwiftUI

struct ContentView: View {
var body: some View {
PlatformText()
}
}

struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
  1. Now select the Shared/ContentView.swift file and change Schemes to preview the file for each platform. Note that the text shown is now platform-dependent even though we are previewing a shared file:

  1. You can define statements based on platforms. Replace the above ContentView.swift file code with the below code:
import SwiftUI

struct ContentView: View {
var body: some View {
let platformText = PlatformText()
#if os(tvOS)
platformText
.foregroundColor(.green)
#else
platformText
#endif
}
}

struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}

The process mentioned above is a very basic demonstration of how SwiftUI can be used to share code between Apple platforms. Platform scoped files are very easy to set up, easily identifiable by directory structure and play very nicely with Xcode’s live previews. They are therefore an essential mechanism for sharing code between different platforms.

To explore more about setting up a multi-platform SwiftUI project, you can get in touch with our dedicated team of iOS developers.

Author

Lets Nurture
Posted by Lets Nurture

Blog A directory of wonderful things

6 Business Models That Online Marketplaces Use to Earn Money

As the ongoing pandemic continues to push consumers to shop online and get delivery directly to their homes in a bid to stay safe from the spread of Covid-19, online …

Store sensitive data using KeyChain

There is always some sensitive data that our App holds for instance, Passwords, Touch Id, Certificates, Tokens or Biometric information. In general, React Native does not come bundled with any …

How to Tackle & Manage SKUs as an Ecommerce Business in 2021

If you are just starting to build up your eCommerce business, you may have started thinking about the size of your inventory but not necessarily, how you are going to …

How to setup Contact form 7 plugin In WordPress

Contact Form 7 is the most popular and oldest WordPress contact form plugin. It is easy to integrate and equally easy to deploy. For setup contact form 7 follow the …

Steps to Create Apple Enterprise Developer Account

The Apple Developer Enterprise Program allows large organizations to develop and deploy proprietary, internal-use apps to their employees. This program is for specific use cases that require private distribution directly …

React Native: First Demo

Let us start to build our first React Native application on Windows as a development operating system and Android as a target operating system. If you are looking to set …

AdMob Mediation in Android

We all know about Admob Ads very well. Here, I would like to explain what mediation features and how it will be useful for developers. Let’s take a simple one …

How to Setup Twilio Package for SMS in Laravel

In your application workflow, you may need to pass important information to your users. Most services require your users to have an internet connection and unfortunately, this isn’t always the …

Kotlin Coroutines in Android

Multithreading is a well known programming concept which all developers might have come across. The concept of multithreading is a vast subject and includes complex mechanisms in it, but in …

Google in app purchase in android app

Before we start with app purchase, Let’s get a basic idea of what type of digital content we are selling to users. Google’s Billing system gives us mainly two types …

COVID lockdown has brought the digital future forward

The Novel Coronavirus epidemic that has spread its tentacles worldwide almost brought business and the economy to its knees. With no way of attending office, how are employees supposed to …

The Impact of COVID 19 on Restaurant & Hospitality Industry

Coronavirus has literally crippled the economies of different countries catastrophically and has forced many industries to put down their shutters for long. Some have closed down temporarily abiding by the …

AI for Pneumonia Detection

The risk of pneumonia is enormous for many, especially in the nations where billions face energy poverty and rely on polluting forms of energy. “The WHO estimates that over 4 …

AI for Food Detection

“Four simple ways to fight diabetes/Obesity: Go for regular medical check-ups; Exercise more; Watch your diet, and Cut down on soft drinks.” – Singapore PM Lee Hsien Loong (Nvidia Research …

Django vs Laravel vs Node js

Web Frameworks are basically software packages that ease the complexity of web development. They come with many inbuilt features that are common in web development, thus minimizing the development time, …

Tech in Prenatal Care-Empowering rural women with a mobile first avenue for information

In the era of wireless technology, where there are more mobile phones than people, mobile applications play an important role for rural women to improve their maternal health. Technology is …

Survival of the Fittest is now the Survival of the Agilest

A joint study by Forbes magazine and Scrum Alliance has found that Agile practices are gaining a lot more popularity among SME businesses and across sizes that and include startups, …

How agile will transform the organization framework?

Innovation is no longer just about new technology, it is about new models of organization. The high tech breakthroughs that do count today are not only about speed and performance …

How do Chatbots benefit Businesses and Marketers? What do your consumers expect from the bots?

According to compounded annual growth rate (CAGR), global chatbot market is projected to account for $1.23 billion by 2025. Tools designed to simplify the interaction between humans and computers have …

UAE Drone Monitoring: Constructions Sites in Abu Dhabi

While drones or unmanned aerial vehicles are nothing new to the mainstream media, they have come a long way in both their technical specifications and their capabilities. Modern drones are …

CONTACT US

Have an !dea or need help with your current business?

loading...
We use cookies to give you tailored experiences on our website.
Okay