Learn how to create a detail view layout in SwiftUI framework with Xcode - Part 6
🟢 LIMITED TIME OFFER - SAVE 37%
Practical iOS and macOS app development tutorials with SwiftUI in 4K
https://credo.academy
Up to this point, we have finished developing an Onboarding screen and a Second screen with the SwiftUI framework. The iOS list of fruits app looks amazing but there is no additional functionality attached to it. Now it’s time to add a working navigation link to each list row, so when users tap on them, they will be navigated to a detailed view in the Xcode editor.
CHAPTERS
00:00 Introduction
00:50 Create a new SwiftUI file for the detail view
01:29 Create a new variable
01:55 Fix the preview error
02:50 Create a new Navigation Link
04:06 Test the iOS 14 application with the Live Preview
05:30 Working on the Detail View screen
06:16 Add a new Navigation View and a Scroll View to the screen
06:44 Add a new Text view for the title
08:00 Demonstrate the app with an iPhone and iPad simulator
09:01 Adding some comments for the main sections
09:35 Develop a Title view
10:16 Create a new Headline view with Swift programming language
10:42 Create a new Subheading view
11:46 Create a new Description view
12:25 Create a new Header view
12:44 Create a new SwiftUI file
13:10 Add a new property for the fruits
14:02 Work on the header view
15:04 Add a new image view for the header view
16:07 Learn how animation works in SwiftUI
16:45 Add a new on-appear modifier to the header
17:32 Add a new scale effect modifier to the image
18:14 Add the Header view into the Detail view
19:10 Add a new navigation title to the main view
20:11 Create a new SwiftUI view for the Link view
21:39 Add a new Group Box view to the link view
22:21 Add a new Link to the view
23:36 Finish up the Link view
24:38 Insert the Link view into the Detail view
24:53 Start Xcode's Live Preview
26:06 Test the iOS app in Xcode's Simulator
27:12 Conclusion
There are many topics to cover in this two-part class, and that will take some time. By the end of this class, we will finish developing the majority of this new screen, so without further ado, let’s start coding.
Now, it’s time for the final test for this class. Let’s build and run the project in the Simulator or on your test device running iOS 14. After exiting the Onboarding screen, we can enter the second screen with the list of fruits.
Tap one of the rows inside this list, and let’s see the detailed view. And? Here it goes. It’s full of interesting information about the fruits. And as you can notice, each fruit has got its own title and subheader color.
Isn’t that cool, is it? The design of this Fructus app is juicy and colorful. I hope that you enjoy developing it. What about testing the link component?
Tap on the link in the new Group Box UI element and let’s see what’s happening. As you may expect, the default Safari window launches with it immediately open the Wikipedia website address.
Awesome job! As you can notice, we can even jump back to the Fructus app in no time using the system back button. Isn’t that great, is it? Now I would like to thank you for finishing up this long lecture.
In the second part of this lecture, we will develop the missing information box with the nutrients.
#SwiftUI #Xcode #iOSDevelopment
