Quick Guide: Learn SwiftUI with Naufal & Source Code
Introduction
SwiftUI has emerged as a powerful framework for building modern and intuitive user interfaces across Apple devices. In this quick guide, we’ll embark on a learning journey with Naufal Adli as we delve into SwiftUI to create a course catalog app. We’ll not only explore the basics of SwiftUI but also provide you with the complete source code to help you kickstart your SwiftUI development journey.
Building the Foundation:
Defining Courses We start by creating a foundation for our course catalog app. Naufal has provided us with a Swift code snippet that defines a Course structure with essential properties such as name, number of courses, and asset information.
import SwiftUI
struct Course: Identifiable {
var id = UUID().uuidString
var name: String
var numCourse: Int
var asset: String
}
var courses = [
Course(name: "Coding", numCourse: 12, asset: "coding"),
Course(name: "Trading", numCourse: 12, asset: "trading"),
Course(name: "Cooking", numCourse: 12, asset: "cooking"),
Course(name: "Marketing", numCourse: 12, asset: "marketing"),
Course(name: "UI/UX", numCourse: 12, asset: "ux"),
Course(name: "Writing", numCourse: 12, asset: "digital")
]Crafting the Course Card View
Next, we move on to building the visual representation of our courses with the CourseCardView. This SwiftUI view encapsulates the design for each course card, showcasing course details and utilizing SwiftUI features for a clean and engaging layout.
struct CourseCardView: View {
var course: Course
var body: some View {
VStack {
VStack {
Image(course.asset)
.resizable()
.frame(width: 130,height: 100)
.padding(.top, 10)
.padding(.leading, 10)
.background(Color(course.asset))
.cornerRadius(10)
HStack {
VStack(alignment: .leading, spacing: 12, content: {
Text(course.name)
.font(.title3)
Text("\(course.numCourse) Courses")
})
.foregroundColor(.black)
Spacer(minLength: 0)
}
.padding()
}
.padding(.top, 5)
.background(Color.white)
.cornerRadius(15)
Spacer(minLength: 0)
}
}
}Creating Additional Views Naufal introduces several views like Email, Folder, and Settings as part of the app's structure.
struct Email: View {
var body: some View {
VStack {
Text("Email")
}
}
}
struct Folder: View {
var body: some View {
VStack {
Text("Folder")
}
}
}
struct Settings: View {
var body: some View {
VStack {
Text("Settings")
}
}
}Navigating Through Details:
Creating DetailView Now, let’s explore how to navigate to detailed information about each course. The DetailView SwiftUI view is designed to display in-depth details of a specific course, providing a clean user interface with additional functionalities.
struct DetailView: View {
var course: Course
var body: some View {
VStack {
Text(course.name)
.font(.title2)
.fontWeight(.bold)
}
.navigationTitle(course.name)
.navigationBarTitleDisplayMode(.inline)
.navigationBarItems(trailing: Button(action: {}, label: {
Image(systemName: "menubar.rectangle")
.font(.system(size: 22))
.foregroundColor(.gray)
}))
}
}Custom TabView: Seamless Navigation To enhance the user experience, we implement a custom TabView named CustomTabView. This SwiftUI view allows seamless navigation between different sections of the app, such as the home screen, email, folder, and settings.
struct TabButton: View {
var image: String
@Binding var selectedTab: String
var body: some View {
Button(action: {
selectedTab = image
}, label: {
Image(systemName: image)
.font(.system(size: 22))
.foregroundColor(selectedTab == image ? Color(UIColor.systemBlue) : Color.black.opacity(0.4))
.padding()
})
}
}Home Screen
A Gateway to Learning Our home screen, represented by the Home SwiftUI view, serves as the entry point for users. It offers a personalized greeting, a profile button, and a scrollable course catalog showcasing various categories.
//
// Home.swift
// CourseAppUI
//
// Created by recherst on 2021/10/13.
//
import SwiftUI
struct ContentView: View {
var body: some View {
NavigationView {
CustomTabView()
.navigationTitle("")
.navigationBarHidden(true)
}
}
}
struct Home: View {
@State var text = ""
var edge = UIApplication.shared.windows.first?.safeAreaInsets
var body: some View {
VStack {
HStack {
VStack(alignment: .leading, spacing: 10, content: {
Text("Hello Naufal Adli")
.font(.title)
.fontWeight(.bold)
Text("Let's upgrade your skill!")
})
.foregroundColor(.black)
Spacer(minLength: 0)
Button(action: {}, label: {
Image("profile")
.resizable()
.renderingMode(.original)
.frame(width: 50, height: 50)
.background(Color.purple)
.cornerRadius(10)
})
}
.padding()
ScrollView(.vertical, showsIndicators: false, content: {
VStack {
HStack(spacing: 15) {
Image(systemName: "magnifyingglass")
.foregroundColor(.gray)
TextField("Search Posts", text: $text)
}
.padding(.vertical, 12)
.padding(.horizontal)
.background(Color.white)
.clipShape(Capsule())
HStack {
Text("Categories")
.font(.title2)
.fontWeight(.bold)
Spacer(minLength: 0)
Button(action: {}, label: {
Text("View All")
})
}
.foregroundColor(.black)
.padding(.top, 25)
LazyVGrid(columns: Array(repeating: GridItem(.flexible(), spacing: 20), count: 2), spacing: 20, content: {
ForEach(courses) { course in
NavigationLink(
destination: DetailView(course: course),
label: {
CourseCardView(course: course)
})
}
})
.padding(.top)
}
.padding()
.padding(.bottom, edge!.bottom + 70)
})
}
}
}Naufal Adli expertise and the provided source code serve as valuable resources to accelerate your SwiftUI learning journey. Dive into the code, experiment, and unleash your creativity to build even more exciting SwiftUI applications.
Resources
If you’d like to take a look at the project’s full code, you can find it here:
https://github.com/naufaladli0406/NaufalCourseUI-Part1
Thanks for reading! Stay tuned for more SwiftUI articles by Muhammad Naufal Adli which will be coming soon and dont forget to clap. this artikel make Hand-crafted & Made with❤️.
