Simple Apple Framework Site in SwiftUI

In this post we will continue our SwiftUI journey which started in the earlier post. Here, we will create a a bit more advanced in SwiftUI project.

This post have been inspired by the awesome SwiftUI Fundamentals video by Sean Allen.

So, first start XCode and click on File -> New and Project.

Next, give the product a name which is Apple-Frameworks in our case. Also, we will choose the Interface as SwiftUI.

Next, we will save the project on the Desktop.

Our project will be opened with the Content View showing the project.

Now, we will create a new file by pressing Cmd + N and then selecting th Swift File and clicking on Next button.

In the next screen, we will name this new file Framework.swift and click on the Create button.

Next, we will add a struct called Framework in the file, with some fields.

Next, we will have a sampleFramework containing a single item. And also and array called frameworks containing many elements. All the data can be taken from the github repo at the end of this post.

We will also add the related icons in the Assets.xcassets folder. These images can again be taken from the github repo at the end of this post.

Back in the ContentView.swift file we will add a struct called FrameWorkTitleView which will take the name and imageName. Here, we are showing the image and text in a VStack with different properties.

We are also calling this struct from inside the body.

We will create a columns array and make three columns with GridItem. Next, from inside the body we will add FrameWorkTitleView within a LazyVGrid.

We will go back to our Framework.swift file and add an id using UUID in it.

Now, back in the ContentView.swift file, we will use ForEach and call the MockData.frameworks. Here, we are looping and showing each item by passing name and image in it.

Although we were seeing all the items, but we will update our code a bit to use the framework. Here, we have also made the mode as dark.

Next, we will create a NavigationView and within it a ScrollView, so that we can scroll through the items. We have also added a title and given padding.

Next, we will create a new file but a SwiftUI View file now.

We will name this file FrameworkDetailView.swift

Here, we will call the FrameWorkTitleView and also load the MockData with the single item of sampleFramework.

Next, we will add some styles with Text and a button. We are showing here the description, which we got from the sampleFramework data.

Now, we will create another SwiftUI View file.

This new file will be called AppleButton.swift and we will add a nice red button in it. Here, we will pass the title in it.

Now from the FrameworkDetailView.swift file, we will remove the button code and pass the Learn More text to the new AppleButton file. We have also made the mode as Dark Mode from the preview.

Now we will add the Close button in the FrameworkDetailView.swift file. Here, we have a HStack and show the xmark.

Next, we will create another Swift File by pressing Cmd + N.

This new file will be called FrameworkView.swift and here, we will have a class with a variable called selectedFramework.

Next, we will use the StateObject in the ContentView.swift file. Here, we will add a tap gesture and here we will pass the selectedFramework as framework.

Back in the FrameworkView.swift file we will make the didSet and make isShowingDetailView as true. It is initially as false.

Now, we will go back to the ContentView.swift and add a sheet which will take the isShowingDetailView. Here, in the FrameworkDetailView we are passing the selectedFramework.

Now, in the FrameworkDetailView.swift we will first bind the isShowingDetailView. After that we will make the isShowingDetailView as false on click of the button.

We also need to add it in the PreviewProvider.

Back in the ContentView.swift file, we will also pass the isShowingDetailView.

We will finally create a new Swift File.

The new Swift File will be named SafariView.swift and it is used to open the url passed to it in a new view.

Now, in FrameworkDetailView.swift file we will have the state variable of isShowingSafariView, initially as false. It will be true on press of the button. And it will pass the url from the framework. We have also given an optional url.

Now, our complete app is working. You can find the github for the same here.