SwiftUI Home Design & Styling || Create Design SwiftUI🍦
SwiftUI has revolutionized the way we design and style our iOS applications, providing a declarative syntax for creating user interfaces. In this article, we’ll explore the implementation of a home design and styling for an Ice Cream app using SwiftUI. The Ice Cream app, developed by Naufal Adli, serves as our canvas for exploring SwiftUI design principles. The app features a delightful user interface for browsing and purchasing various ice cream flavors.
App Structure
Let’s dissect the app’s structure, starting with the IceCreamApp files.
IceCreamApp.swift:
//
// IceCreamApp.swift
// IceCream
//
// Created by Naufal Adli on 06/02/24.
//
import SwiftUI
@main
struct IceCreamApp: App {
var body: some Scene {
WindowGroup {
ContentView()
}
}
}The IceCreamApp struct initializes the app and sets the ContentView as the main window group.
ContentView.swift:
//
// ContentView.swift
// IceCream
//
// Created by Naufal Adli on 06/02/24.
//
import SwiftUI
struct ContentView: View {
@State var search = ""
var body: some View {
VStack {
HStack{
Button(action: {}, label: {
ZStack{
Circle()
.foregroundColor(Color.pink)
.frame(width: 35 , height: 35)
Image(systemName: "arrow.left")
.foregroundColor(.white)
}
.padding(10)
})
Spacer(minLength: 0)
Button(action: {}, label: {
ZStack{
Circle()
.foregroundColor(Color.black)
.frame(width: 35 , height: 35)
Image(systemName: "cart")
.foregroundColor(.white)
}
})
Button(action: {}, label: {
ZStack{
Circle()
.foregroundColor(Color.black)
.frame(width: 35 , height: 35)
Image(systemName: "person.crop.circle.fill")
.font(.title)
.foregroundColor(.white)
}
.padding(10)
})
}
HStack{
VStack{
Text("Ice Cream")
.font(.largeTitle)
.fontWeight(.bold)
Text("Taste make it a beloved threat worldwide")
.foregroundColor(.gray)
HStack{
Image(systemName: "magnifyingglass")
.foregroundColor(.gray)
TextField("What would you like to try?", text: $search)
}
.padding(.vertical)
.padding(.horizontal)
.background(Color(.systemGray5))
.clipShape(Capsule())
.padding(10)
.frame(height: 60)
NavigationView{
List{
ForEach(product){ item in
ProductRowView(product: item)
.listRowInsets(.init(top: 0, leading: 0, bottom: 8, trailing: 0))
.listRowBackground(RoundedRectangle(cornerRadius: 1).foregroundColor(.white))
.listRowSeparator(.hidden)
}
.listRowSeparator(.hidden)
}
}
}
}
}
}
}The ContentView struct defines the main structure of the app, including navigation, a search bar, and a list of ice cream products.
ProductModel:
The Product struct defines the data model for each product, including its name, asset, price, and image. The sample data is then populated in the product array, allowing for dynamic content in the app.
//
// ProductModel.swift
// IceCream
//
// Created by Naufal Adli on 06/02/24.
//
import SwiftUI
import Foundation
struct Product: Identifiable{
var id = UUID().uuidString
var name : String
var asset : String
var price : String
var image : String
}
var product = [ Product(name: "Chocolate IceCream", asset: "1", price: "100", image: "choco"), Product(name: "Valila IceCream", asset: "2", price: "80", image: "vanila"), Product(name: "Combo IceCream", asset: "3", price: "50", image: "cone"), Product(name: "Valila IceCream", asset: "2", price: "80", image: "vanila"), Product(name: "Chocolate IceCream", asset: "1", price: "100", image: "choco")]ProductRowView:
for detail the product list is presented using a SwiftUI List within a NavigationView. Each product row is styled with a rounded rectangle background, shadow, and corner radius. The use of VStack and HStack within the rows ensures a structured and attractive layout.
//
// ProductRowView.swift
// IceCream
//
// Created by Naufal Adli on 06/02/24.
//
import SwiftUI
struct ProductRowView: View {
let product: Product
let imageSize: CGFloat = 50
var body: some View {
HStack{
ZStack{
Color("C1").frame(width: 100,height: 100)
Image(product.image)
.resizable()
.frame(width: imageSize,height: imageSize)
.clipped()
}
VStack{
Text(product.name)
.font(.headline)
.foregroundColor(.black)
.frame(minWidth: 0,maxWidth: .infinity, alignment: .leading)
Text("$" + product.price)
.foregroundColor(.black)
.frame(minWidth: 0,maxWidth: .infinity, alignment: .leading)
}
Button(action: {}, label: {
ZStack{
Circle()
.foregroundColor(.black)
.frame(width: 35,height: 35)
Image(systemName: "cart")
.font(.title3)
.foregroundColor(.white)
}.padding(10)
})
}
.frame(minWidth: 0,maxWidth: .infinity, alignment: .leading)
.padding(10)
.background(.white)
.cornerRadius(10)
.shadow(color: Color(.systemGray6), radius: 10)
}
}Each product row is enclosed in a white. rounded rectangle with a subtle shadow, enhancing the overall visual appeal.
Resources
If you’d like to take a look at the project’s full code, you can find it here:
https://github.com/naufaladli0406/IceCreamApp
SwiftUI’s simplicity and power shine through in the Ice Cream app’s design and styling. By combining functionality with elegant visual elements, Naufal Adli demonstrates how SwiftUI can be leveraged to create a delightful user experience. 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❤️.
