Building Cross-Platform Apps With SwiftUI
By: Can Balkaya
Tags: Swift, Programming, iOS, Swiftui, Mobile

Coding Time

Our application will be a very simple article listing app. We’re going to make a really simple application. Maybe I can develop this application further in the articles I’ll write about universal apps in the future.

Final app

Creating a new Xcode project

First of all, let’s create a new Xcode project. We need to create this project as a multiplatform app.

Of course, you can give the project any name you want. After that, the only thing left is to start making your project.

My advice to you while developing a project is to divide your files into folders. While doing this project, you can use folders in the same way I use them.

Building the data model

There will be only one data model in our project. As our application is an article-display application, as you can understand, an article has a data model. This model has four properties: id , title , description , type .

The reason we use ‘Identifiable’ is that we’ll use this structure inside a ‘List’ object

Of course, we need objects created with the Article model. We’ll create this data by writing it directly.

Now that our data model and the data sets are ready, let’s create the interface elements to display this data.

Building views

First, let’s create an ArticleView object that shows the properties of a single Article object.

Now to show these ArticleView elements together, create a new View object. It’s called ArticlesListView .

We won’t create the List object directly in the body because when the application is opened on a Mac device, it’s better to set the size accordingly. As you can see below, we adjusted the size of the Mac app with the frame method.

Now it’s time for the important part: SideBar and TabBar . TabBar and SideBar elements are extremely important for the structure of our application. Usually we divide our applications with these elements. In this app, the TabBar element will also be used for the iPhone version, and the SideBar element will be used for the iPad and Mac devices.

Let’s start with the TabBar element. The only thing we do in this element is arrange our main screens. We use the tag method to position the screens truly.

Let’s move onto the SideBar element. We have a basic View element in the SideBar element, similar to the TabBar element: List . We’ll use the NavigationLink object to orient in the List object.

Develop the code as follows to ensure the correct positioning of the NavigationLink elements.

Important: You have to locate the files of the SideBar and TabBar elements as done below — otherwise, problems will occur.

If your files can’t communicate with each other, you may need to edit your Target Memberships. Our project is very small, so you can have the two existing targets open in each file.

Finally, it’s time to edit the ContentView . Here we need to run different elements depending on which device the app is running on. For this, we’ll use tools like #if , which we also used earlier, and then we’ll use the horizontalSizeClass property. Thanks to horizontalSizeClass , we can detect whether the device running the application is an iPad or an iPhone.

Thus, our application is officially completed!