article

Showing posts with label SwiftUI-iOS-Xcode. Show all posts
Showing posts with label SwiftUI-iOS-Xcode. Show all posts

Sunday, January 9, 2022

SwiftUI Login Register - Firebase Auth and Firestore Database

SwiftUI Login Register - Firebase Auth and Firestore Database

ContentView.swift
//
//  ContentView.swift
//  DevSwiftUI
//
//  Created by Cairocoders
//

import SwiftUI
import Firebase
import FirebaseStorage

struct ContentView: View {
    
    @State var isLoginMode = false
    @State var email = ""
    @State var password = ""
    @State var fname = ""
    @State var lname = ""
    @State var StatusMessage = ""
    
    @State var shouldShowImagePicker = false
    @State var image: UIImage?
    
    var body: some View {
        NavigationView {
            ScrollView {
 
                VStack(spacing: 16) {
                    Picker(selection: $isLoginMode, label: Text("Picker here")) {
                        Text("Login")
                            .tag(true)
                        Text("Create Account")
                            .tag(false)
                    }.pickerStyle(SegmentedPickerStyle())
                    
                    if !isLoginMode {
                        Button {
                            shouldShowImagePicker.toggle()
                        } label: {
                            VStack {
                                Image(systemName: "person.fill")
                                    .font(.system(size: 64))
                                    .padding()
                                    .foregroundColor(Color(.label))
                            }
                            .overlay(RoundedRectangle(cornerRadius: 64)
                                        .stroke(Color.black, lineWidth: 3)
                            )
                        }
                    }
                    if !isLoginMode {
                        Group {
                            TextField("First Name", text: $fname)
                            TextField("Last Name", text: $lname)
                            TextField("Email", text: $email)
                                .keyboardType(.emailAddress)
                                .autocapitalization(.none)
                            SecureField("Password", text: $password)
                        }
                        .padding()
                        .background(Color.white)
                        .cornerRadius(10)
                        
                        Button {
                            handleAction()
                        } label: {
                            HStack {
                                Spacer()
                                Text("Create Account")
                                    .foregroundColor(.white)
                                    .padding(.vertical, 10)
                                    .font(.system(size: 18, weight: .semibold))
                                Spacer()
                            }.background(Color.green)
     
                        }.cornerRadius(10)
                    }else {
                        Image("Login")
                            .resizable()
                            .scaledToFill()
                            .frame(width: 128, height: 128)
                            .cornerRadius(64)
                        
                        Group {
                            TextField("Email", text: $email)
                                .keyboardType(.emailAddress)
                                .autocapitalization(.none)
                            SecureField("Password", text: $password)
                        }
                        .padding()
                        .background(Color.white)
                        .cornerRadius(10)
                        
                        Button {
                            loginUser()
                        } label: {
                            HStack {
                                Spacer()
                                Text("Login")
                                    .foregroundColor(.white)
                                    .padding(.vertical, 10)
                                    .font(.system(size: 18, weight: .semibold))
                                Spacer()
                            }.background(Color.green)
     
                        }.cornerRadius(10)
                    }
                    
                    Text(self.StatusMessage)
                        .foregroundColor(Color.white)
                }
                .padding()
                
            } //End ScrollView
            .navigationViewStyle(StackNavigationViewStyle())
            .background(
                        LinearGradient(gradient: Gradient(colors: [.blue, .gray]), startPoint: .top, endPoint: .bottom)
                            .edgesIgnoringSafeArea(.all))
            
        }// End Navigation
    }
    
    private func loginUser() {
        Auth.auth().signIn(withEmail: email, password: password) { result, err in
            if let err = err {
                print("Failed to login user:", err)
                self.StatusMessage = "Failed to login user: \(err)"
                return
            }
 
            print("Successfully logged in as user: \(result?.user.uid ?? "")")
 
            self.StatusMessage = "Successfully logged in as user: \(result?.user.uid ?? "")"
        }
    }
    
    private func handleAction() {
        createNewAccount()
    }
    
    private func createNewAccount() {
        Auth.auth().createUser(withEmail: email, password: password) { result, err in
            if let err = err {
                print("Failed to create user:", err)
                self.StatusMessage = "Failed to create user: \(err)"
                return
            }
 
            print("Successfully created user: \(result?.user.uid ?? "")")
 
            self.StatusMessage = "Successfully created user: \(result?.user.uid ?? "")"
 
            self.storeUserInformation()
        }
    }
    
    private func storeUserInformation() {
        guard let uid = Auth.auth().currentUser?.uid else { return }
        let userData = ["fname": self.fname, "lname": self.lname, "email": self.email, "uid": uid]
        Firestore.firestore().collection("users")
            .document(uid).setData(userData) { err in
                if let err = err {
                    print(err)
                    self.StatusMessage = "\(err)"
                    return
                }

                print("Success")
            }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}
DevSwiftUIApp.swift
//
//  DevSwiftUIApp.swift
//  DevSwiftUI
//
//  Created by Cairocoders
//

import SwiftUI
import Firebase

@main
struct DevSwiftUIApp: App {
    
    @UIApplicationDelegateAdaptor(AppDelegate.self) var delegate
     
    var body: some Scene {
        WindowGroup {
            ContentView()
        }
    }
}
 
class AppDelegate: NSObject,UIApplicationDelegate{
     
    func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey : Any]? = nil) -> Bool {
         
        FirebaseApp.configure()
        return true
    }
}

Wednesday, January 5, 2022

SwiftUI Netflix UI Simple Design

SwiftUI Netflix UI Simple Design

ContentView.swift
 
//
//  ContentView.swift
//  Test
//
//  Created by Cairocoders
//

import SwiftUI

struct ContentView: View {
    var body: some View {

        NavigationView{
                
            Home().navigationBarTitle("")
            .navigationBarHidden(true)
            .navigationBarBackButtonHidden(true)
            
        }.preferredColorScheme(.dark)

    }
}



struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}



struct Home : View {
    
    @State var txt = ""
    @State var show = false
    
    var body : some View{
        
        VStack(alignment: .leading, spacing: 20){
            
            HStack(spacing: 10){
                
                Button(action: {
                    
                    
                }) {
                    
                    Image("menu").renderingMode(.original)
                }
                
                Image("logo")
                
                Spacer()
                
                Button(action: {
                    
                    
                }) {
                    
                    Image("Notifications").renderingMode(.original)
                }
                
            }
            
            HStack(spacing: 15){
                
                Image(systemName: "magnifyingglass").font(.body)
                
                TextField("Search For Movies,Shows", text: $txt)
                
            }.padding()
                .background(Color.gray)
            
            ScrollView(.vertical, showsIndicators: false) {
                
                VStack(alignment: .leading, spacing: 15) {
                    
                    Text("Movies").font(.title)
                     
                     ZStack{
                         
                        NavigationLink(destination: Detail(show: $show), isActive: $show) {
                            
                            Text("")
                        }
                        
                        Image("top").resizable().onTapGesture {
                            
                            self.show.toggle()
                        }
                         
                         VStack{
                             
                             Spacer()
                             
                             HStack{
                             
                                 VStack(alignment: .leading, spacing: 10){
                                     
                                     Text("Journey 2: The Mysterious Island").font(.body)
                                     Text("Action Movie").font(.caption)
                                 }
                                 
                                 Spacer()
                                 
                                 Button(action: {
                                     
                                 }) {
                                     
                                     Image("play").renderingMode(.original)
                                 }
                                 
                             }
                             
                         }.padding()
                         
                     }.frame(height: 190)
                     
                     HStack{
                         
                         Spacer()
                         
                         Button(action: {
                             
                         }) {
                             
                             Text("View All")
                             
                         }.foregroundColor(Color.white)
                     }
                    
                    Text("Continue Watching")
                    
                    middleView()
                    BottomView()
                    
                }
 
            }.padding(.bottom, 25)
                

            
        }.padding(.horizontal)
        .edgesIgnoringSafeArea(.bottom)
        .preferredColorScheme(.dark)
    }
}

struct middleView : View {
    
    var body : some View{
        
        VStack(spacing: 15){
            
            ScrollView(.horizontal, showsIndicators: false) {
                
                HStack(spacing: 15){
                    
                    ForEach(datas){i in
                        
                        VStack(alignment: .leading,spacing: 0){
                            
                            Image(i.image)
                            
                            HStack{
                                
                                Spacer()
                                
                                Button(action: {
                                    
                                }) {
                                    
                                    Image("play").renderingMode(.original).resizable().frame(width: 25, height: 25)
                                    
                                }.padding(.top, -12)
                            }
                            
                            VStack(alignment: .leading){
                                
                                Text(i.name)
                                
                                ZStack{
                                    
                                    Capsule().fill(Color.gray)
                                    
                                    HStack{
                                    
                                        Capsule().fill(Color.green).frame(width: i.percentage)
                                        
                                        Spacer()
                                        
                                    }
                                    
                                }.frame(height: 5)
                                
                            }.padding(.horizontal,10)
                            .padding(.bottom, 10)


                        }.background(Color.gray)
                        .padding(.bottom)
                    }
                }
            }
        }
    }
}


struct BottomView : View {
    
    var body : some View{
        
        VStack(alignment: .leading,spacing: 15){
            
            Text("Explore By Genres")
            
            HStack{
                
                Button(action: {
                    
                }) {
                    
                    Text("Action").padding()
                    
                }.foregroundColor(.white)
                .background(Color.red)
                .cornerRadius(10)
                
                Spacer(minLength: 10)
                
                Button(action: {
                    
                }) {
                    
                    Text("Adventure").padding()
                    
                }.foregroundColor(.white)
                .background(Color.red)
                .cornerRadius(10)
                
                Spacer(minLength: 10)
                
                Button(action: {
                    
                }) {
                    
                    Text("Comedy").padding()
                    
                }.foregroundColor(.white)
                .background(Color.red)
                .cornerRadius(10)
                
            }
            
            Text("Trending")
            
            ScrollView(.horizontal, showsIndicators: false) {
                
                HStack(spacing: 15){
                    
                    ForEach(bottom,id: \.self){i in
                        
                        Image(i)
                    }
                }
            }
        }
    }
}
Detail.swift
 
//
//  Detail.swift
//  Test
//
//  Created by Cairocoders
//

import SwiftUI

struct Detail : View {
    
    @Binding var show : Bool
    
    var body : some View{
        
        VStack(spacing: 15){
            HStack(spacing: 15){
                
                Button(action: {
                    self.show.toggle()
                }) {
                    Image(systemName: "arrow.left").foregroundColor(Color.white)
                }
                
                Spacer()
                
                Button(action: {
                    actionSheet()
                }) {
                    Image("share").renderingMode(.original)
                }
                
                Button(action: {
                }) {
                    Image(systemName: "info.circle").foregroundColor(Color.white)
                }
                
            }.padding()
            
            ZStack{
                Image("detail").resizable()
                VStack(alignment: .leading,spacing: 12){
                    
                    Spacer()
                    
                    Text("ACTION")
                    Text("Journey 2: The Mysterious Island").font(.title)
                    
                    HStack(spacing: 10){
                        Text("98% Match")
                        Text("2012")
                        Image("hd")
                        
                        Spacer()
                    }
                    
                }.padding()
                
            }.frame(height: UIScreen.main.bounds.height / 2)
            .navigationBarTitle("")
            .navigationBarHidden(true)
            .navigationBarBackButtonHidden(true)
            
            ScrollView(.vertical, showsIndicators: false) {
                VStack(alignment: .leading, spacing: 15){
                    HStack{
                        Button(action: {
                            
                        }) {
                            HStack(spacing: 10){
                                Image(systemName: "play.fill")
                                Text("Play")
                            }.padding()
                        }.foregroundColor(.white)
                        .background(Color.red)
                        .cornerRadius(10)
                        
                        Button(action: {
                        }) {
                            HStack(spacing: 10){
                                Image(systemName: "plus")
                                Text("ADD TO LIST")
                            }.padding()
                            
                        }.foregroundColor(.white)
                        .background(Color.gray)
                        .cornerRadius(10)
                        
                        Spacer()
                    }
                    
                    HStack{
                        VStack(alignment: .leading, spacing: 10){
                            Text("Journey 2: The Mysterious Island")
                            Text("Sean Anderson partners with his mom's husband on a mission to find his grandfather, who is thought to be missing on a mythical island.").foregroundColor(.gray)
                        }
                    }.padding(.top, 15)
                    
                    Divider().padding(.vertical, 12)
                    
                    ForEach(popular){i in
                        VStack(alignment: .leading,spacing: 15){
                            HStack{
                                Image(i.image)
                                    .resizable().aspectRatio(contentMode: .fill)
                                VStack(alignment: .leading, spacing: 10){
                                    Text(i.name)
                                    Text(i.time)
                                }
                                
                                Spacer()
                                
                                Button(action: {
                                }) {
                                    Image(systemName: "arrow.down")
                                }
                            }
                            Text(i.desc)
                        }
                        
                    }.padding(.bottom, 15)
                }
            }.padding(.top, 15)
            .padding(.horizontal, 15)
            
        }.edgesIgnoringSafeArea(.bottom)
    }
    
    func actionSheet() {
        guard let urlShare = URL(string: "https://developer.apple.com/xcode/swiftui/") else { return }
           let activityVC = UIActivityViewController(activityItems: [urlShare], applicationActivities: nil)
           UIApplication.shared.windows.first?.rootViewController?.present(activityVC, animated: true, completion: nil)
    }
}

struct Detail_Previews: PreviewProvider {
    @State static var show = false
    static var previews: some View {
        Detail(show: $show)
    }
}
Model.swift
 
//
//  Model.swift
//  Test
//
//  Created by Cairocoders
//

import SwiftUI

struct type : Identifiable {
    
    var id : Int
    var name : String
    var image : String
    var percentage : CGFloat
}

var datas = [
    type(id: 0, name: "The Amazing Spider-Man", image: "1",percentage : 45),
    type(id: 1, name: "Fast and Furious Presents", image: "2",percentage: 90),
    type(id: 2, name: "Green Snake", image: "3",percentage: 53)
]

var bottom = ["b1","b2"]

struct polularlist : Identifiable {
    
    var id : Int
    var name : String
    var time : String
    var image : String
    var desc : String
}

var popular = [polularlist(id: 0, name: "Green Snake", time: "51 min", image: "3", desc: "While trying to free her sister from Fahai's clutches, Xio Qing winds up in a dystopian city and meets a mysterious man who can't recall his past life."),
               polularlist(id: 1, name: "How to Train Your Dragon 2", time: "44 min", image: "4", desc: "Five years have passed since Hiccup and Toothless united the dragons and Vikings of Berk. Now, they spend their time charting the island's unmapped territories. During one of their adventures, the pair discover a secret cave that houses hundreds of wild dragons"),
               polularlist(id: 2, name: "Aquaman", time: "63 min", image: "5", desc: "Once home to the most advanced civilization on Earth, the city of Atlantis is now an underwater kingdom ruled by the power-hungry King Orm. With a vast army at his disposal, Orm plans to conquer the remaining oceanic people -- and then the surface world.")]

Tuesday, January 4, 2022

SwiftUI Share Sheet

SwiftUI Share Sheet

ContentView.swift
 
//
//  ContentView.swift
//  swiftuidev15ios
//
//  Created by Cairocoders on 11/8/21.
//

import SwiftUI

struct ContentView: View {
    
    var body: some View {
        VStack(spacing: 15){
            
            HStack(spacing: 15){
                
                Button(action: {

                }) {
                    Image(systemName: "arrow.left").foregroundColor(Color.white)
                }
                
                Spacer()
                
                Button(action: {
                    share()
                }) {
                    Image("share").renderingMode(.original)
                }
                
                Button(action: {
                    
                }) {
                    Image(systemName: "info.circle").foregroundColor(Color.white)
                }
                
            }.padding()
            
            ZStack{
                Image("detail").resizable()
            }.frame(height: UIScreen.main.bounds.height / 2)
            .navigationBarTitle("")
            .navigationBarHidden(true)
            .navigationBarBackButtonHidden(true)
            
            ScrollView(.vertical, showsIndicators: false) {
                VStack(alignment: .leading, spacing: 15){
                    HStack{
                        Text("Details")
                    }
                }
                
            }.padding(.top, 15)
            .padding(.horizontal, 15)
            Spacer()
            
        }.preferredColorScheme(.dark)
    }
    
    func share() {
        guard let urlShare = URL(string: "https://developer.apple.com/xcode/swiftui/") else { return }
        let activityVC = UIActivityViewController(activityItems: [urlShare], applicationActivities: nil)
           UIApplication.shared.windows.first?.rootViewController?.present(activityVC, animated: true, completion: nil)
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

Wednesday, December 15, 2021

SwiftUI Firebase Register with Image Picker - Firebase Auth and Firebase Storage

SwiftUI Firebase Register with Image Picker - Firebase Auth and Firebase Storage

https://console.firebase.google.com/

ContentView.swift
 
//
//  ContentView.swift
//  DevSwiftUI
//
//  Created by Cairocoders
//

import SwiftUI
import Firebase
import FirebaseStorage

struct ContentView: View {

    @State var email = ""
    @State var password = ""
    @State var StatusMessage = ""
    
    @State var shouldShowImagePicker = false
    @State var image: UIImage?
    
    var body: some View {
        NavigationView {
            ScrollView {

                VStack(spacing: 16) {
                    Text("Create Account")
                    
                    Button {
                        shouldShowImagePicker.toggle()
                    } label: {
                        VStack {
                            if let image = self.image {
                                Image(uiImage: image)
                                    .resizable()
                                    .scaledToFill()
                                    .frame(width: 128, height: 128)
                                    .cornerRadius(64)
                            } else {
                                Image(systemName: "person.fill")
                                    .font(.system(size: 64))
                                    .padding()
                                    .foregroundColor(Color(.label))
                            }
                        }
                        .overlay(RoundedRectangle(cornerRadius: 64)
                                    .stroke(Color.black, lineWidth: 3)
                        )
                    }

                    Group {
                        TextField("Email", text: $email)
                            .keyboardType(.emailAddress)
                            .autocapitalization(.none)
                        SecureField("Password", text: $password)
                    }
                    .padding(12)
                    .background(Color.white)
                    .cornerRadius(10)
                    
                    Button {
                        handleAction()
                    } label: {
                        HStack {
                            Spacer()
                            Text("Create Account")
                                .foregroundColor(.white)
                                .padding(.vertical, 10)
                                .font(.system(size: 14, weight: .semibold))
                            Spacer()
                        }.background(Color.blue)

                    }.cornerRadius(10)
                    
                    Text(self.StatusMessage)
                        
                }
                .padding()

            }
            .navigationViewStyle(StackNavigationViewStyle())
            .fullScreenCover(isPresented: $shouldShowImagePicker, onDismiss: nil) {
                ImagePicker(image: $image)
                    .ignoresSafeArea()
            }
            .background(
                        LinearGradient(gradient: Gradient(colors: [.orange, .gray]), startPoint: .top, endPoint: .bottom)
                            .edgesIgnoringSafeArea(.all))
        }
    }
    private func handleAction() {
        createNewAccount()
    }

    private func createNewAccount() {
        Auth.auth().createUser(withEmail: email, password: password) { result, err in
            if let err = err {
                print("Failed to create user:", err)
                self.StatusMessage = "Failed to create user: \(err)"
                return
            }

            print("Successfully created user: \(result?.user.uid ?? "")")

            self.StatusMessage = "Successfully created user: \(result?.user.uid ?? "")"
            
            self.persistImageToStorage()
        }
    }
    
    private func persistImageToStorage() {
        guard let uid = Auth.auth().currentUser?.uid else { return }
        let ref = Storage.storage().reference(withPath: uid)
        guard let imageData = self.image?.jpegData(compressionQuality: 0.5) else { return }
        ref.putData(imageData, metadata: nil) { metadata, err in
            if let err = err {
                self.StatusMessage = "Failed to push image to Storage: \(err)"
                return
            }

            ref.downloadURL { url, err in
                if let err = err {
                    self.StatusMessage = "Failed to retrieve downloadURL: \(err)"
                    return
                }

                self.StatusMessage = "Successfully stored image with url: \(url?.absoluteString ?? "")"
                print(url?.absoluteString)
            }
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}
ImagePicker.swift
 
//
//  ImagePicker.swift
//  DevSwiftUI
//
//  Created by Cairocoders
//

import SwiftUI

struct ImagePicker: UIViewControllerRepresentable {

    @Binding var image: UIImage?

    private let controller = UIImagePickerController()

    func makeCoordinator() -> Coordinator {
        return Coordinator(parent: self)
    }

    class Coordinator: NSObject, UIImagePickerControllerDelegate, UINavigationControllerDelegate {

        let parent: ImagePicker

        init(parent: ImagePicker) {
            self.parent = parent
        }

        func imagePickerController(_ picker: UIImagePickerController, didFinishPickingMediaWithInfo info: [UIImagePickerController.InfoKey : Any]) {
            parent.image = info[.originalImage] as? UIImage
            picker.dismiss(animated: true)
        }

        func imagePickerControllerDidCancel(_ picker: UIImagePickerController) {
            picker.dismiss(animated: true)
        }

    }

    func makeUIViewController(context: Context) -> some UIViewController {
        controller.delegate = context.coordinator
        return controller
    }

    func updateUIViewController(_ uiViewController: UIViewControllerType, context: Context) {

    }

}
DevSwiftUIApp.swift
 
//
//  DevSwiftUIApp.swift
//  DevSwiftUI
//
//  Created by Cairocoders
//

import SwiftUI
import Firebase

@main
struct DevSwiftUIApp: App {
       
    @UIApplicationDelegateAdaptor(AppDelegate.self) var delegate
      
    var body: some Scene {
        WindowGroup {
            ContentView()
        }
    }
}
  
class AppDelegate: NSObject,UIApplicationDelegate{
        
    func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey : Any]? = nil) -> Bool {
            
        FirebaseApp.configure()
        return true
    }
}

SwiftUI Photo Library Image Picker

SwiftUI Photo Library Image Picker

ContentView.swift
 
//
//  ContentView.swift
//  Test
//
//  Created by Cairocoders
//

import SwiftUI

struct ContentView: View {
    
    @State var shouldShowImagePicker = false
    @State var image: UIImage?
    
    var body: some View {
        NavigationView {
            VStack {
                VStack {
                    ZStack(alignment: .top) {
                        Rectangle()
                            .foregroundColor(Color.green)
                            .edgesIgnoringSafeArea(.top)
                            .frame(height: 100)
                        
                        Button {
                            shouldShowImagePicker.toggle()
                        } label: {
                            VStack {
                                if let image = self.image {
                                    Image(uiImage: image)
                                        .resizable()
                                        .scaledToFill()
                                        .frame(width: 143, height: 143)
                                        .cornerRadius(80)
                                } else {
                                    Image(systemName: "person.fill")
                                        .font(.system(size: 80))
                                        .padding()
                                        .foregroundColor(Color(.label))
                                }
                            }
                            .overlay(RoundedRectangle(cornerRadius: 80)
                                        .stroke(Color.black, lineWidth: 3)
                            )
                        }
                    }//end Zstack
                }
                
                VStack(spacing: 15) {
                    VStack(spacing: 5) {
                        Text("Cairocoders")
                            .bold()
                            .font(.title)
                        Text("Coders")
                            .font(.body)
                            .foregroundColor(.secondary)
                    }.padding()
                    Text("SwiftUI Image Picker")
                        .multilineTextAlignment(.center)
                        .padding()
                    Spacer()
                }
                Spacer()
            }
        }
        .navigationViewStyle(StackNavigationViewStyle())
        .fullScreenCover(isPresented: $shouldShowImagePicker, onDismiss: nil) {
            ImagePicker(image: $image)
                .ignoresSafeArea()
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

struct ImagePicker: UIViewControllerRepresentable {

    @Binding var image: UIImage?

    private let controller = UIImagePickerController()

    func makeCoordinator() -> Coordinator {
        return Coordinator(parent: self)
    }

    class Coordinator: NSObject, UIImagePickerControllerDelegate, UINavigationControllerDelegate {

        let parent: ImagePicker

        init(parent: ImagePicker) {
            self.parent = parent
        }

        func imagePickerController(_ picker: UIImagePickerController, didFinishPickingMediaWithInfo info: [UIImagePickerController.InfoKey : Any]) {
            parent.image = info[.originalImage] as? UIImage
            picker.dismiss(animated: true)
        }

        func imagePickerControllerDidCancel(_ picker: UIImagePickerController) {
            picker.dismiss(animated: true)
        }

    }

    func makeUIViewController(context: Context) -> some UIViewController {
        controller.delegate = context.coordinator
        return controller
    }

    func updateUIViewController(_ uiViewController: UIViewControllerType, context: Context) {

    }

}

SwiftUI Firebase Login Register - Firebase Auth

SwiftUI Firebase Login Register - Firebase Auth

https://console.firebase.google.com/

ContentView.swift
 
//
//  ContentView.swift
//  DevSwiftUI
//
//  Created by Cairocoders
//

import SwiftUI
import Firebase

struct ContentView: View {

    @State var isLoginMode = false
    @State var email = ""
    @State var password = ""

    var body: some View {
        NavigationView {
            ScrollView {

                VStack(spacing: 16) {
                    Picker(selection: $isLoginMode, label: Text("Picker here")) {
                        Text("Login")
                            .tag(true)
                        Text("Create Account")
                            .tag(false)
                    }.pickerStyle(SegmentedPickerStyle())

                    if !isLoginMode {
                        Button {

                        } label: {
                            Image(systemName: "person.fill")
                                .font(.system(size: 64))
                                .padding()
                        }
                    }

                    Group {
                        TextField("Email", text: $email)
                            .keyboardType(.emailAddress)
                            .autocapitalization(.none)
                        SecureField("Password", text: $password)
                    }
                    .padding(12)
                    .background(Color.white)
                    .cornerRadius(10)
                    
                    Button {
                        handleAction()
                    } label: {
                        HStack {
                            Spacer()
                            Text(isLoginMode ? "Log In" : "Create Account")
                                .foregroundColor(.white)
                                .padding(.vertical, 10)
                                .font(.system(size: 14, weight: .semibold))
                            Spacer()
                        }.background(Color.blue)

                    }.cornerRadius(10)
                    
                    Text(self.loginStatusMessage)
                        
                }
                .padding()

            }
            .navigationTitle(isLoginMode ? "Log In" : "Create Account")
            .background(
                        LinearGradient(gradient: Gradient(colors: [.yellow, .green]), startPoint: .top, endPoint: .bottom)
                            .edgesIgnoringSafeArea(.all))
        }
    }
    private func handleAction() {
        if isLoginMode {
            loginUser()
        } else {
            createNewAccount()
        }
    }

    private func loginUser() {
        Auth.auth().signIn(withEmail: email, password: password) { result, err in
            if let err = err {
                print("Failed to login user:", err)
                self.loginStatusMessage = "Failed to login user: \(err)"
                return
            }

            print("Successfully logged in as user: \(result?.user.uid ?? "")")

            self.loginStatusMessage = "Successfully logged in as user: \(result?.user.uid ?? "")"
        }
    }

    @State var loginStatusMessage = ""

    private func createNewAccount() {
        Auth.auth().createUser(withEmail: email, password: password) { result, err in
            if let err = err {
                print("Failed to create user:", err)
                self.loginStatusMessage = "Failed to create user: \(err)"
                return
            }

            print("Successfully created user: \(result?.user.uid ?? "")")

            self.loginStatusMessage = "Successfully created user: \(result?.user.uid ?? "")"
        }
    }
    
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}
DevSwiftUIApp.swift
 
//
//  DevSwiftUIApp.swift
//  DevSwiftUI
//
//  Created by Cairocoders
//

import SwiftUI
import Firebase

@main
struct DevSwiftUIApp: App {
       
    @UIApplicationDelegateAdaptor(AppDelegate.self) var delegate
      
    var body: some Scene {
        WindowGroup {
            ContentView()
        }
    }
}
  
class AppDelegate: NSObject,UIApplicationDelegate{
        
    func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey : Any]? = nil) -> Bool {
            
        FirebaseApp.configure()
        return true
    }
}

Friday, December 10, 2021

SwiftUI Searchable

SwiftUI Searchable

ContentView.swift
 
//
//  ContentView.swift
//  swiftuidev15ios
//
//  Created by Cairocoders
//

import SwiftUI

struct ContentView: View {

    @State var search = ""
    
    var body: some View {
        NavigationView {
            List {
                ForEach(datarecipe.filter{(self.search.isEmpty ? true : $0.name.localizedCaseInsensitiveContains(self.search))}, id: \.id) { info in
                    Text(info.name)
                        .font(.title)
                        .fontWeight(.bold)
                    
                    Image(info.image)
                        .renderingMode(.original)
                        .resizable()
                        .frame(height: 200)
                        .cornerRadius(10)
                }
            }.navigationTitle("Searchable")
                .searchable(text: self.$search)
            {
                ForEach(datarecipe, id:\.id) { info in
                    HStack {
                        Text(info.name)
                            .searchCompletion(info.name)
                    }
                }
            }
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}
Model.swift
 
//
//  Model.swift
//  swiftuidev15ios
//
//  Created by Cairocoders
//

import Foundation
 
struct Recipe : Identifiable {
     
    var id : Int
    var name : String
    var image : String
}
 
var datarecipe = [
 
    Recipe(id: 0, name: "Bistek Tagalog", image: "1"),
    Recipe(id: 1, name: "Boogie flight", image: "2"),
    Recipe(id: 2, name: "Sinigang Na Baboy", image: "3"),
    Recipe(id: 3, name: "Ginisang Togue", image: "4"),
    Recipe(id: 4, name: "Ginisang Munggo (Monggo)", image: "5"),
    Recipe(id: 5, name: "Pork Estofado (Sweet Pork Stew)", image: "6"),
    Recipe(id: 6, name: "Pata Tim", image: "7"),
    Recipe(id: 7, name: "Pancit Palabok", image: "8"),
]

Monday, December 6, 2021

SwiftUI Simple Alert and Confirmation Dialog

SwiftUI Simple Alert and Confirmation Dialog

ContentView.swift
 
//
//  ContentView.swift
//  Test
//
//  Created by Cairocoders
//

import SwiftUI

struct ContentView: View {
    
    @State var deleteConfirm = false
    @State private var showingOptions = false
    @State private var selection = "None"
    
    var body: some View {
        VStack {
            Button {
                self.deleteConfirm.toggle()
            } label: {
                Label("Delete", systemImage: "trash.fill")
            }
            .buttonStyle(.bordered)
            .tint(.red)
            .controlSize(.regular)
            //.alert("Are you Sure you want to delete?", isPresented: self.$deleteConfirm) {
            //    Button("Delete", role: .destructive) {
            //        print("Deleted")
            //    }
            //}
            .confirmationDialog("Are you Sure you want to delete?", isPresented: self.$deleteConfirm, titleVisibility: .visible) {
                Button("Delete", role: .destructive) {
                    print("Deleted")
                }
            }
            
            Text(selection)

            Button("Confirm paint color") {
                showingOptions = true
            }
            .buttonStyle(.bordered)
            .tint(.red)
            .controlSize(.regular)
            
            .confirmationDialog("Select a color", isPresented: $showingOptions, titleVisibility: .visible) {
                Button("Red") {
                    selection = "Red"
                }

                Button("Green") {
                    selection = "Green"
                }

                Button("Blue") {
                    selection = "Blue"
                }
            }
            

        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

Friday, December 3, 2021

SwiftUI Welcome Page and Sign In Page UI Design

SwiftUI Welcome Page and Sign In Page UI Design

ContentView.swift
 
//
//  ContentView.swift
//  SwiftUITest
//
//  Created by Cairocoders
//

import SwiftUI

struct ContentView: View {
    var body: some View {
        NavigationView {
            ZStack {
                Color("BgColor").edgesIgnoringSafeArea(.all)
                VStack {
                    Spacer()
                    Image("home")
                    Spacer()
                    PrimaryButton(title: "Get Started")
                    
                    NavigationLink(
                        destination: SignInView().navigationBarHidden(true),
                        label: {
                            Text("Sign In")
                                .font(.title3)
                                .fontWeight(.bold)
                                .foregroundColor(Color("PrimaryColor"))
                                .padding()
                                .frame(maxWidth: .infinity)
                                .background(Color.white)
                                .cornerRadius(50.0)
                                .shadow(color: Color.black.opacity(0.08), radius: 60, x: 0.0, y: 16)
                                .padding(.vertical)
                        })
                        .navigationBarHidden(true)
                    
                    HStack {
                        Text("New around here? ")
                        Text("Sign in")
                            .foregroundColor(Color("PrimaryColor"))
                    }
                }
                .padding()
            }
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

struct PrimaryButton: View {
    var title: String
    var body: some View {
        Text(title)
            .font(.title3)
            .fontWeight(.bold)
            .foregroundColor(.white)
            .frame(maxWidth: .infinity)
            .padding()
            .background(Color("PrimaryColor"))
            .cornerRadius(50)
    }
}
SignInView.swift
 
//
//  SignInView.swift
//  SwiftUITest
//
//  Created by Cairocoders
//

import SwiftUI

struct SignInView: View {
    @State private var email: String = "" // by default it's empty
    var body: some View {
        ZStack {
            Color("BgColor").edgesIgnoringSafeArea(.all)
            VStack {
                Spacer()
                
                VStack {
                    Text("Sign In")
                        .font(.largeTitle)
                        .fontWeight(.bold)
                        .padding(.bottom, 30)
                    
                    SocalLoginButton(image: Image(uiImage: #imageLiteral(resourceName: "apple")), text: Text("Sign in with Apple"))
                    
                    SocalLoginButton(image: Image(uiImage: #imageLiteral(resourceName: "google")), text: Text("Sign in with Google").foregroundColor(Color("PrimaryColor")))
                        .padding(.vertical)
                    
                    Text("or get a link emailed to you")
                        .foregroundColor(Color.black.opacity(0.4))
                    
                    TextField("Work email address", text: $email)
                        .font(.title3)
                        .padding()
                        .frame(maxWidth: .infinity)
                        .background(Color.white)
                        .cornerRadius(50.0)
                        .shadow(color: Color.black.opacity(0.08), radius: 60, x: /*@START_MENU_TOKEN@*/0.0/*@END_MENU_TOKEN@*/, y: 16)
                        .padding(.vertical)
                    
                    PrimaryButton(title: "Email me a signup link")
                    
                }
                
                Spacer()
                Divider()
                Spacer()
                Text("You are completely safe.")
                Text("Read our Terms & Conditions.")
                    .foregroundColor(Color("PrimaryColor"))
                Spacer()
                
            }
            .padding()
        }
    }
}

struct SignInView_Previews: PreviewProvider {
    static var previews: some View {
        SignInView()
    }
}

struct SocalLoginButton: View {
    var image: Image
    var text: Text
    
    var body: some View {
        HStack {
            image
                .padding(.horizontal)
            Spacer()
            text
                .font(.title2)
            Spacer()
        }
        .padding()
        .frame(maxWidth: .infinity)
        .background(Color.white)
        .cornerRadius(50.0)
        .shadow(color: Color.black.opacity(0.08), radius: 60, x: /*@START_MENU_TOKEN@*/0.0/*@END_MENU_TOKEN@*/, y: 16)
    }
}

Thursday, December 2, 2021

SwiftUI Furniture Shop App UI

SwiftUI Furniture Shop App UI

ContentView.swift
 
//
//  ContentView.swift
//  SwiftUITest
//
//  Created by Cairocoders
//

import SwiftUI

struct ContentView: View {
    @State private var search: String = ""
    @State private var selectedIndex: Int = 1
    
    private let categories = ["All", "Chair", "Sofa", "Sofabeds", "Mattresses", "Table"]
    var body: some View {
        NavigationView {
            ZStack {
                Color("Bg")
                    .ignoresSafeArea()
                
                ScrollView (showsIndicators: false) {
                    VStack (alignment: .leading) {
                        
                        AppBarView()
                        
                        TagLineView()
                            .padding()
                        
                        SearchAndScanView(search: $search)
                        
                        ScrollView (.horizontal, showsIndicators: false) {
                            HStack {
                                ForEach(0 ..< categories.count) { i in
                                    Button(action: {selectedIndex = i}) {
                                        CategoryView(isActive: selectedIndex == i, text: categories[i])
                                    }
                                }
                            }
                            .padding()
                        }
                        
                        Text("Popular")
                            .font(.system(size: 24))
                            .padding(.horizontal)
                        
                        ScrollView (.horizontal, showsIndicators: false) {
                            HStack (spacing: 0) {
                                ForEach(popular) { i in
                                    NavigationLink(
                                        destination: DetailScreen(viewmodel: i),
                                        label: {
                                            ProductCardView(image: Image(i.imageName), size: 210, title: i.title, rating: i.rating)
                                        })
                                        .navigationBarHidden(true)
                                        .foregroundColor(.black)
                                }
                                .padding(.leading)
                            }
                        }
                        .padding(.bottom)
                        
                        Text("Best")
                            .font(.system(size: 24))
                            .padding(.horizontal)
                        
                        ScrollView (.horizontal, showsIndicators: false) {
                            HStack (spacing: 0) {
                                ForEach(best) { i in
                                    ProductCardView(image: Image(i.imageName), size: 180, title: i.title, rating: i.rating)
                                }
                                .padding(.leading)
                            }
                        }
                        
                    }
                }
                
                VStack {
                    Spacer()
                    BottomNavBarView()
                }
            }
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}


struct BottomNavBarView: View {
    var body: some View {
        HStack {
            BottomNavBarItem(image: Image(systemName: "house"), action: {})
            BottomNavBarItem(image: Image(systemName: "suit.heart"), action: {})
            BottomNavBarItem(image: Image(systemName: "cart"), action: {})
            BottomNavBarItem(image: Image(systemName: "person"), action: {})
        }
        .padding()
        .background(Color("Primary")).foregroundColor(Color.white)
        .clipShape(Capsule())
        .padding(.horizontal)
        .shadow(color: Color.blue.opacity(0.15), radius: 8, x: 2, y: 6)
    }
}

struct BottomNavBarItem: View {
    let image: Image
    let action: () -> Void
    var body: some View {
        Button(action: action) {
            image
                .frame(maxWidth: .infinity)
        }
    }
}
AppBarView.swift
 
//
//  AppBarView.swift
//  SwiftUITest
//
//  Created by Cairocoders
//

import SwiftUI

struct AppBarView: View {
    var body: some View {
        HStack {
            Button(action: {}) {
                Image(systemName: "slider.horizontal.3")
                    .padding()
                    .background(Color.white)
                    .cornerRadius(10.0)
            }
            
            Spacer()
            
            Button(action: {}) {
                Image(uiImage: #imageLiteral(resourceName: "photo1"))
                    .resizable()
                    .frame(width: 42, height: 42)
                    .cornerRadius(10.0)
            }
        }
        .padding(.horizontal)
    }
}

struct AppBarView_Previews: PreviewProvider {
    static var previews: some View {
        AppBarView()
    }
}
TagLineView.swift
 
//
//  TagLineView.swift
//  SwiftUITest
//
//  Created by Cairocoders
//

import SwiftUI

struct TagLineView: View {
    var body: some View {
        Text("Shop \nBest ")
            .font(.system(size: 28))
            .foregroundColor(Color("Primary"))
            + Text("Furniture!")
            .font(.system(size: 28))
            .fontWeight(.bold)
            .foregroundColor(Color("Primary"))
    }
}

struct TagLineView_Previews: PreviewProvider {
    static var previews: some View {
        TagLineView()
    }
}
SearchAndScanView.swift
 
//
//  SearchAndScanView.swift
//  SwiftUITest
//
//  Created by Cairocoders
//

import SwiftUI

struct SearchAndScanView: View {
    @Binding var search: String
    var body: some View {
        HStack {
            HStack {
                Image(systemName: "magnifyingglass")
                    .padding(.trailing, 8)
                TextField("Search Furniture", text: $search)
            }
            .padding(.all, 20)
            .background(Color.white)
            .cornerRadius(10.0)
            .padding(.trailing, 8)
            
            Button(action: {}) {
                Image(systemName: "text.magnifyingglass")
                    .padding().foregroundColor(Color.white)
                    .background(Color("Primary"))
                    .cornerRadius(10.0)
            }
        }
        .padding(.horizontal)
    }
}

struct SearchAndScanView_Previews: PreviewProvider {
    @State static var search: String = ""
    static var previews: some View {
        SearchAndScanView(search: $search)
    }
}
CategoryView.swift
 
//
//  CategoryView.swift
//  SwiftUITest
//
//  Created by Cairocoders
//

import SwiftUI

struct CategoryView: View {
    let isActive: Bool
    let text: String
    var body: some View {
        VStack (alignment: .leading, spacing: 0) {
            Text(text)
                .font(.system(size: 18))
                .fontWeight(.medium)
                .foregroundColor(isActive ? Color("Primary") : Color.black.opacity(0.5))
            if (isActive) { Color("Primary")
                .frame(width: 15, height: 2)
                .clipShape(Capsule())
            }
        }
        .padding(.trailing)
    }
}
ProductCardView.swift
 
//
//  ProductCardView.swift
//  SwiftUITest
//
//  Created by Cairocoders
//

import SwiftUI

struct ProductCardView: View {
    let image: Image
    let size: CGFloat
    let title: String
    let rating: Int
    var body: some View {
        VStack {
            image
                .resizable()
                .frame(width: size, height: 200 * (size/210))
                .cornerRadius(20.0)
            Text(title).font(.title3).fontWeight(.bold)
            
            HStack (spacing: 2) {
                ForEach(0..<rating) { rating in
                    Image(systemName: "star.fill")
                        .resizable()
                        .frame(width: 20, height: 20)
                        .foregroundColor(.yellow)
                }
                Spacer()
                Text("$1299")
                    .font(.title3)
                    .fontWeight(.bold)
            }
        }
        .frame(width: size)
        .padding()
        .background(Color.white)
        .cornerRadius(20.0)
        
    }
}
DetailScreen.swift
 
//
//  DetailScreen.swift
//  SwiftUITest
//
//  Created by Cairocoders
//

import SwiftUI

struct DetailScreen: View {
    
    let viewmodel: Furniture
    
    @Environment(\.presentationMode) var presentationMode: Binding<PresentationMode>
    var body: some View {
        ZStack {
            Color("Bg")
            ScrollView  {
                //Product Image
                Image(viewmodel.imageName)
                        .resizable()
                        .aspectRatio(1,contentMode: .fit)
                        .edgesIgnoringSafeArea(.top)
                
                DescriptionView(title: viewmodel.title, rating: viewmodel.rating)
                
            }
            .edgesIgnoringSafeArea(.top)
            
            HStack {
                Text("$1299")
                    .font(.title)
                    .foregroundColor(.white)
                Spacer()
                
                Text("Add to Cart")
                    .font(.title3)
                    .fontWeight(.semibold)
                    .foregroundColor(Color("Primary"))
                    .padding()
                    .padding(.horizontal, 8)
                    .background(Color.white)
                    .cornerRadius(10.0)
                
            }
            .padding()
            .padding(.horizontal)
            .background(Color("Primary"))
            .cornerRadius(60.0, corners: .topLeft)
            .frame(maxHeight: .infinity, alignment: .bottom)
            .edgesIgnoringSafeArea(.bottom)
        }
        .navigationBarBackButtonHidden(true)
        .navigationBarItems(leading: BackButton(action: {presentationMode.wrappedValue.dismiss()}), trailing: Image(systemName: "lineweight"))
    }
}


struct RoundedCorner: Shape {

    var radius: CGFloat = .infinity
    var corners: UIRectCorner = .allCorners

    func path(in rect: CGRect) -> Path {
        let path = UIBezierPath(roundedRect: rect, byRoundingCorners: corners, cornerRadii: CGSize(width: radius, height: radius))
        return Path(path.cgPath)
    }
}

extension View {
    func cornerRadius(_ radius: CGFloat, corners: UIRectCorner) -> some View {
        clipShape( RoundedCorner(radius: radius, corners: corners) )
    }
}

struct DetailScreen_Previews: PreviewProvider {
    static var previews: some View {
        DetailScreen(viewmodel: Furniture(id: 1, title: "Sofas", imageName: "1", rating: 5))
    }
}


struct ColorDotView: View {
    let color: Color
    var body: some View {
        color
            .frame(width: 24, height: 24)
            .clipShape(Circle())
    }
}

struct DescriptionView: View {
    let title : String
    let rating : Int
    
    @State var selected = -1
    @State var message = false
    @State private var count = 0
    
    var body: some View {
        VStack (alignment: .leading) {
            //                Title
            Text(title)
                .font(.title)
                .fontWeight(.bold)
            //                Rating
            HStack (spacing: 4) {
                ForEach(0..<5) { rate in
                    Image(systemName: "star.fill")
                        .resizable()
                        .frame(width: 25, height: 25)
                        .foregroundColor(self.selected >= rate ? .yellow : .gray)
                        .onTapGesture {
                            self.selected = rate
                            self.message.toggle()
                        }
                }
                Text("(\(rating))")
                    .opacity(0.5)
                    .padding(.leading, 8)
                Spacer()
            }
            .alert(isPresented: $message) {
               Alert(title: Text("Rating Submit"), message: Text("You Rated \(self.selected + 1) out of 5 Star Rating"), dismissButton: .none)
            }
            
            Text("Description")
                .fontWeight(.medium)
                .padding(.vertical, 8)
            Text("A Mid-Century Modern Modern dining chair with arm rest inspired by Eiffel chair made from polycarbonate plastic and has metal legs.")
                .lineSpacing(8.0)
                .opacity(0.6)
            
            //                Info
            HStack (alignment: .top) {
                VStack (alignment: .leading) {
                    Text("Size")
                        .font(.system(size: 16))
                        .fontWeight(.semibold)
                    Text("W53xD46.5xH83.5 cm")
                        .opacity(0.6)
                }
            }
            .padding(.vertical)
            
            //                Colors and Counter
            HStack {
                VStack (alignment: .leading) {
                    Text("Colors")
                        .fontWeight(.semibold)
                    HStack {
                        ColorDotView(color: Color.red)
                        ColorDotView(color: Color.orange)
                        ColorDotView(color: Color.green)
                    }
                }
                .frame(maxWidth: .infinity, alignment: .leading)
                
                HStack {
                    //                        Minus Button
                    Button(action: {
                        stepCountminus()
                    }) {
                        Image(systemName: "minus")
                            .padding(.all, 8)
                        
                    }
                    .frame(width: 30, height: 30)
                    .overlay(RoundedCorner(radius: 50).stroke())
                    .foregroundColor(.black)
                    
                    Text("\(self.count)")
                        .font(.title2)
                        .fontWeight(.semibold)
                        .padding(.horizontal, 8)
                    
                    //                        Plus Button
                    Button(action: {
                        stepCount()
                    }) {
                        Image(systemName: "plus")
                            .foregroundColor(.white)
                            .padding(.all, 8)
                            .background(Color("Primary"))
                            .clipShape(Circle())
                    }
                }
                
            }
        }
        .padding()
        .padding(.top)
        .background(Color("Bg"))
        .cornerRadius(30, corners: [.topLeft, .topRight])
        .offset(x: 0, y: -30.0)
    }
    
    func stepCount() {
        count += 1
    }
    func stepCountminus() {
        count -= 1
    }
}


struct BackButton: View {
    let action: () -> Void
    var body: some View {
        Button(action: action) {
            Image(systemName: "chevron.backward")
                .foregroundColor(.black)
                .padding(.all, 12)
                .background(Color.white)
                .cornerRadius(8.0)
        }
    }
}
Model.swift
 
//
//  Model.swift
//  SwiftUITest
//
//  Created by Cairocoders
//

import SwiftUI
 
struct Furniture : Identifiable {
    var id : Int
    var title : String
    var imageName : String
    var rating: Int
}
 
var popular = [Furniture(id: 0, title: "Pea Swivel Accent Chair", imageName: "1", rating: 4),
                   Furniture(id: 1, title: "Adelie Accent Chair", imageName: "2", rating: 3),
                   Furniture(id: 2, title: "Asha II Accent Chair", imageName: "3", rating: 5),
                   Furniture(id: 3, title: "Jenpeg Center Table", imageName: "4", rating: 4)]

var best = [Furniture(id: 0, title: "Cologne Sofabed", imageName: "5", rating: 3),
                   Furniture(id: 1, title: "Cleve Sofabed", imageName: "6", rating: 4),
                   Furniture(id: 2, title: "Cleve Sofabed", imageName: "7", rating: 5),
                   Furniture(id: 3, title: "Ivy Dining Chair", imageName: "4", rating: 2)]

Thursday, November 25, 2021

SwiftUI Simple Food Delivery App UI Design

SwiftUI Simple Food Delivery App UI Design

ContentView.swift
 
//
//  ContentView.swift
//  Swiftuitest
//
//  Created by Cairocoders
//

import SwiftUI

struct ContentView: View {
    
    var body: some View {
        VStack {
            ZStack (alignment: .leading) {
                VStack (alignment: .leading) {
                    HStack {
                        Image(systemName: "line.3.horizontal")
                            .resizable()
                            .frame(width: 24, height: 24)
                        
                        Spacer()
                        
                        Image(systemName: "magnifyingglass").resizable()
                            .frame(width: 24, height: 24)
                            .padding()
                            .foregroundColor(.white)
                            .background(Color.secondary)
                            .clipShape(Circle())
                            .shadow(radius: 8)
                    }
                    Text("Food Bazzar").font(.title).foregroundColor(.secondary)
                    Text("15 Results").font(.title).foregroundColor(.primary)
                    
                    ScrollView(.vertical, showsIndicators: false) {
                        HStack (spacing: 20) {
                            FoodItem()
                            FoodItem()
                        }
                        HStack (spacing: 20) {
                            FoodItem()
                            FoodItem()
                        }
                        HStack (spacing: 20) {
                            FoodItem()
                            FoodItem()
                        }
                    }
                }

            }.padding().edgesIgnoringSafeArea(.bottom)
            
            Button(action: {}) {
                Image(systemName: "cart").resizable().frame(width: 12, height: 12).padding().background(Color.yellow).clipShape(Circle()).padding()
                Text("4 items").foregroundColor(.white).padding(.horizontal)
            }.background(Color.black.opacity(0.8)).clipShape(Capsule())
                .shadow(color: Color.black.opacity(0.2), radius: 2, x: 0, y: 20)
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}
FoodItem.swift
 
//
//  FoodItem.swift
//  Swiftuitest
//
//  Created by Cairocoders
//

import SwiftUI

struct FoodItem: View {
    var body: some View {
        VStack (alignment: .leading) {
            HStack {
                Image(systemName: "flame.fill").resizable().frame(width: 16, height: 16).foregroundColor(.red)
                Text("Very Hot").font(.footnote).foregroundColor(.primary)
            }
            Image("pic").resizable().aspectRatio(contentMode: .fill).frame(width: 100, height: 100)
            
            Text("Classic").font(.headline)
            Text("Platter").foregroundColor(.secondary).font(.subheadline).padding(.bottom, 12)
            Text("$25.99").font(.title)
        }
        .frame(width: 160, height: 250).background(Color.secondary.opacity(0.3)).cornerRadius(12)
    }
}

struct FoodItem_Previews: PreviewProvider {
    static var previews: some View {
        FoodItem()
    }
}

SwiftUI Landing Page

SwiftUI Landing Page

ContentView.swift
 
//
//  ContentView.swift
//  Swiftuitest
//
//  Created by Cairocoders
//

import SwiftUI

struct ContentView: View {
    
    var body: some View {
        ZStack {
            Image("onboarding").resizable().aspectRatio(contentMode: .fill).edgesIgnoringSafeArea(.all)
            
            Rectangle()
                .foregroundColor(.clear)
                .background(LinearGradient(gradient: Gradient(colors: [.clear, .black]), startPoint: .bottom, endPoint: .top))
                .edgesIgnoringSafeArea(.all)
            
            VStack (spacing :29) {
                Text("GigaPro").font(.title).fontWeight(.heavy)
                Spacer()
                VStack {
                    Text("Good App").font(.system(size: 40, design: .monospaced)).fontWeight(.heavy)
                    Text("Make Live Better").font(.system(size: 30, design: .monospaced)).fontWeight(.heavy)
                }.padding(.vertical, 20)
                
                Text("Check out the trendy App")
                    .lineLimit(2)
                    .multilineTextAlignment(.center)
                
                Button(action: {}) {
                    Text("Join Now").padding()
                }.frame(width:300).background(Color.orange)
            }.frame(width: UIScreen.main.bounds.width - 40)
                .foregroundColor(.white)
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

Wednesday, November 24, 2021

SwiftUI Horizontal Carousel Parallax Animation

SwiftUI Horizontal Carousel Parallax Animation

ContentView.swift
 
//
//  ContentView.swift
//  Swiftuitest
//
//  Created by Cairocoders
//

import SwiftUI

struct ContentView: View {
    
    var body: some View {
        NavigationView {
            ScrollView {
                MoviesCarousel(categoryName: "Top Movies")
            }.navigationBarTitle("Browse", displayMode: .large)
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}
MoviesCarousel.swift
 
//
//  MoviesCarousel.swift
//  Swiftuitest
//
//  Created by Cairocoders
//

import SwiftUI

struct MoviesCarousel: View {
    
    let categoryName: String
    
    var body: some View {
        VStack {
            HStack {
                Text(categoryName)
                    .font(.system(size: 14, weight: .heavy))
                    .padding(.vertical, 6)
                    .padding(.horizontal, 12)
                    .background(Color.green)
                    .foregroundColor(.white)
                    .cornerRadius(2)
                Spacer()
            }.padding(.horizontal)
            .padding(.top)
            
            ScrollView(.horizontal, showsIndicators: false) {
                HStack(alignment: .top, spacing: 16) {
                    ForEach(latestmovie) { num in
                        GeometryReader { proxy in
                            let scale = getScale(proxy: proxy)
                            NavigationLink(
                                destination: MovieDetailsView(movie: num),
                                label: {
                                    VStack(spacing: 8) {
                                        Image(num.imageName)
                                            .resizable()
                                            .scaledToFill()
                                            .frame(width: 180)
                                            .clipped()
                                            .cornerRadius(8)
                                            .overlay(
                                                RoundedRectangle(cornerRadius: 8)
                                                    .stroke(Color(white: 0.4))
                                            )
                                            .shadow(radius: 3)
                                        Text(num.title)
                                            .font(.system(size: 16, weight: .semibold))
                                            .multilineTextAlignment(.center)
                                            .foregroundColor(.black)
                                        HStack(spacing: 0) {
                                            ForEach(0..<5) { num in
                                                Image(systemName: "star.fill")
                                                    .foregroundColor(.orange)
                                                    .font(.system(size: 14))
                                            }
                                        }.padding(.top, -4)
                                    }
                                })
                            
                                .scaleEffect(.init(width: scale, height: scale))
                                //.animation(.spring(), value: 1)
                                .animation(.easeOut(duration: 1))
                                
                                .padding(.vertical)
                        } //End Geometry
                        .frame(width: 125, height: 400)
                        .padding(.horizontal, 32)
                        .padding(.vertical, 32)
                    } //End ForEach
                    Spacer()
                        .frame(width: 16)
                } //End HStack
            }// End ScrollView
        }//End VStack
    }
    
    func getScale(proxy: GeometryProxy) -> CGFloat {
        let midPoint: CGFloat = 125
        
        let viewFrame = proxy.frame(in: CoordinateSpace.global)
        
        var scale: CGFloat = 1.0
        let deltaXAnimationThreshold: CGFloat = 125
        
        let diffFromCenter = abs(midPoint - viewFrame.origin.x - deltaXAnimationThreshold / 2)
        if diffFromCenter < deltaXAnimationThreshold {
            scale = 1 + (deltaXAnimationThreshold - diffFromCenter) / 500
        }
        
        return scale
    }
}


struct MoviesCarousel_Previews: PreviewProvider {
    static var previews: some View {
        MoviesCarousel(categoryName: "Top Movie")
    }
}
MovieDetailsView.swift
 
//
//  MovieDetailsView.swift
//  Swiftuitest
//
//  Created by Cairocoders
//

import SwiftUI

struct MovieDetailsView: View {
    
    let movie: Movie
    
    var body: some View {
        Image(movie.imageName)
            .resizable()
            .scaledToFill()
            .navigationTitle(movie.title)
    }
}

struct MovieDetailsView_Previews: PreviewProvider {
    static var previews: some View {
        MovieDetailsView(movie: Movie(id: 1, title: "Avengers", imageName: "1"))
    }
}
Model.swift
 
//
//  Model.swift
//  Swiftuitest
//
//  Created by Cairocoders
//

import SwiftUI

struct Movie : Identifiable {
    var id : Int
    var title : String
    var imageName : String
}

var latestmovie = [Movie(id: 0, title: "The Avengers", imageName: "1"),
             Movie(id: 1, title: "Onward", imageName: "2"),
             Movie(id: 2, title: "Soul", imageName: "3"),
             Movie(id: 3, title: "Cruella", imageName: "4"),
             Movie(id: 4, title: "Jungle Cruise", imageName: "5"),
             Movie(id: 5, title: "The Call of the wild", imageName: "6"),
             Movie(id: 6, title: "Joker", imageName: "7"),
             Movie(id: 7, title: "Mulan", imageName: "8"),
             Movie(id: 8, title: "Mortal Kombat", imageName: "9")]

Monday, November 22, 2021

SwiftUI AsyncImage Loading Fetching Data with Asnc and Await

SwiftUI AsyncImage Loading Fetching Data with Asnc and Await

json file : https://dl.dropboxusercontent.com/s/ypknurke7e3062x/swiftuasyncimage.json?dl=0

ContentView.swift
 
//
//  ContentView.swift
//  swiftuidev15ios
//
//  Created by Cairocoders
//

import SwiftUI

struct ContentView: View {

    @ObservedObject var vmodel = ViewModel()

    var body: some View {
        NavigationView {
            ScrollView {
                if vmodel.isFetching {
                    ProgressView()
                }

                VStack {
                    ForEach(vmodel.courses) { asycimage in
                        let url = URL(string: asycimage.imageUrl)
                        AsyncImage(url: url) { image in
                            image.resizable()
                                .scaledToFill()
                        } placeholder: {
                            ProgressView()
                        }

                        Text(asycimage.name)
                    }
                }

            }
            .navigationTitle("AsyncImage Loading")
            .task {
                await vmodel.fetchData()
            }
            .navigationBarItems(trailing: refreshButton)
        }

    }

    private var refreshButton: some View {
        Button {
            Task.init {
                vmodel.courses.removeAll()
                await vmodel.fetchData()
            }

        } label: {
            Text("Refresh")
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}
ViewModel.swift
 
//
//  ViewModel.swift
//  swiftuidev15ios
//
//  Created by Cairocoders
//

import SwiftUI

class ViewModel: ObservableObject {

    @Published var isFetching = false
    @Published var courses = [Course]()

    @Published var errorMessage = ""

    @MainActor
    func fetchData() async {
        let urlString = "https://dl.dropboxusercontent.com/s/ypknurke7e3062x/swiftuasyncimage.json?dl=0"

        guard let url = URL(string: urlString) else { return }

        do {
            isFetching = true
            let (data, response) = try await URLSession.shared.data(from: url)

            if let resp = response as? HTTPURLResponse, resp.statusCode >= 300 {
                self.errorMessage = "Failed to hit endpoint with bad status code"
            }

            self.courses = try JSONDecoder().decode([Course].self, from: data)
            isFetching = false
        } catch {
            isFetching = false
            print("Failed to reach endpoint: \(error)")
        }
    }

}

struct Course: Decodable, Identifiable {
    let id: Int
    let name, link, imageUrl: String
}

Sunday, November 21, 2021

SwiftUI Multiline TextField

SwiftUI Multiline TextField

ContentView.swift
//
//  ContentView.swift
//  Swiftuitest
//
//  Created by Cairocoders
//

import SwiftUI

struct ContentView: View {
    
    @State var txt = ""
    
    var body: some View {
        VStack{
            HStack{
                Button(action: {
                   
                }) {
                    Text("Cancel")
                }
                 
                Spacer()
                 
                Button(action: {

                }) {
                    Text("Submit").padding()
                }.background(Color.orange)
                .foregroundColor(.white)
                .clipShape(Capsule())
            }
            multilineTextField(txt: $txt)
                .background(Color.orange)
                .cornerRadius(10)
        }.padding()
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

struct multilineTextField : UIViewRepresentable {
   
   
  @Binding var txt : String
   
  func makeCoordinator() -> multilineTextField.Coordinator {
      return multilineTextField.Coordinator(parent1 : self)
  }
  func makeUIView(context: UIViewRepresentableContext) -> UITextView {
      let text = UITextView()
      text.isEditable = true
      text.isUserInteractionEnabled = true
      text.text = "Type Something"
      text.textColor = .white
      text.font = .systemFont(ofSize: 20)
      text.delegate = context.coordinator
      text.backgroundColor = .clear
      return text
  }
   
  func updateUIView(_ uiView: UITextView, context: UIViewRepresentableContext) {
       
  }
   
  class Coordinator : NSObject,UITextViewDelegate{
      var parent : multilineTextField
      init(parent1 : multilineTextField) {
          parent = parent1
      }
      func textViewDidBeginEditing(_ textView: UITextView) {
          textView.text = ""
          textView.textColor = .black
      }
      func textViewDidChange(_ textView: UITextView) {
          self.parent.txt = textView.text
      }
  }
}

Wednesday, November 17, 2021

SwiftUI Movie Booking Design App UI

SwiftUI Movie Booking Design App UI

ContentView.swift
 
//
//  ContentView.swift
//  Swiftuitest
//
//  Created by Cairocoders
//

import SwiftUI

struct ContentView: View {
      
    @State var show = false
    
    var body: some View {
        VStack {
          Home()
          SearchView()
            
          HStack {
            Text("All Movies")
                
            Spacer()
                
            Button(action: {
                    
            }) {
                HStack(spacing: 10) {
                    Text("Filter")
                    Image(systemName: "text.justify.right")
                }
            }.foregroundColor(.black)
          }.padding(.bottom, 15)
            
          Cards()
            
        }.padding()
    }
}


struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}
Home
 
//
//  Home.swift
//  Swiftuitest
//
//  Created by Cairocoders
//

import SwiftUI

struct Home: View {
    
    @State private var selection = 1
    
    var body: some View {
        VStack(spacing: 15) {
            HStack {
                VStack(alignment: .leading, spacing: 15) {
                    Text("Browse").font(.largeTitle)
                    
                    Button(action: {
                        
                    }) {
                        HStack(spacing: 8) {
                            Picker(selection: $selection, label: Text("Movie In")) {
                                Text("Movies in Cinema 1").tag(1)
                                Text("Movies in Cinema 2").tag(2)
                            }
                            Image(systemName: "chevron.down").font(.body)
                        }
                    }
                    .foregroundColor(.black)
                }
                
                Spacer()
                
                Button(action: {
                    
                }) {
                    Image(systemName: "slider.horizontal.3")
                }
                
            }
        }.padding(.top, 15)
    }
}

struct Home_Previews: PreviewProvider {
    static var previews: some View {
        Home()
    }
}
SearchView.swift
 
//
//  SearchView.swift
//  Swiftuitest
//
//  Created by Cairocoders
//

import SwiftUI

struct SearchView: View {
    @State var txt = ""
    
    var body: some View {
        
        HStack(spacing: 15) {
            Image(systemName: "magnifyingglass").font(.body)
            TextField("Search Movies", text: $txt)
        }
        .padding()
        .foregroundColor(.black)
        .background(Color("Color"))
        .cornerRadius(20)
        //.padding(.vertical, 15)
    }
}

struct SearchView_Previews: PreviewProvider {
    static var previews: some View {
        SearchView()
    }
}
Cards.swift
 
//
//  Cards.swift
//  Swiftuitest
//
//  Created by Cairocoders
//

import SwiftUI

struct Cards: View {
    
    @State var show = false
    
    var body: some View {
        ScrollView(.vertical, showsIndicators: false) {
            VStack(spacing:15) {
                ForEach(datamodel) {rs in
                  
                    ScrollView(.horizontal,showsIndicators: false) {
                        
                        HStack(spacing : 15) {
                            
                            ForEach(rs.row) { i in
                                VStack(alignment: .leading, spacing: 12) {
                                    Image(i.image).renderingMode(.original).resizable().cornerRadius(15)
                                        .onTapGesture {
                                            self.show.toggle()
                                        }
                                    Text(i.name).font(.caption).lineLimit(1)
                                    Text(i.time).font(.caption)
                                }
                                .foregroundColor(Color.black.opacity(0.5))
                                .frame(width: UIScreen.main.bounds.width / 2 - 25, height: 240)
                            }

                        }
                    }
                }
            }
        }
        .padding(.horizontal, 10)
        .sheet(isPresented: $show) {
            Details()
        }
    }
}

struct Cards_Previews: PreviewProvider {
    static var previews: some View {
        Cards()
    }
}
Details.swift
 
//
//  Details.swift
//  Swiftuitest
//
//  Created by Cairocoders
//

import SwiftUI

struct Details: View {
    
    @State var selected = ""
    @State var timeselection = ""
    
    var body: some View {
        VStack {
            Image("1").resizable().aspectRatio(1, contentMode: .fill).frame(height:250)
            
            VStack {
                VStack(spacing: 15) {
                    Text("Avengers").foregroundColor(.black)
                    
                    HStack(spacing: 15) {
                        
                        HStack {
                            Image(systemName: "star.fill").font(.caption)
                            Text("4.52")
                        }
                          
                        HStack {
                            Image(systemName: "clock").font(.caption)
                            Text("45 Min")
                        }
                        
                        HStack {
                            Image(systemName: "film").font(.caption)
                            Text("Imax")
                        }
                    }
                    
                    Divider().padding(.vertical, 15)
                    VStack(alignment: .leading) {
                        Text("StoryLine")
                            .background(Color.gray)
                            .foregroundColor(.white)
                            .padding(.bottom, 10)
                        Text("Earth's mightiest heroes must come together and learn to fight as a team if they are going to stop the mischievous Loki and his alien army from enslaving humanity.").font(.caption)
                    }
                }
                .padding()
                .background(Color("Color"))
                .foregroundColor(Color.black.opacity(0.5))
                .cornerRadius(25)
                
                VStack(alignment: .leading) {
                    Text("Date")
                    HStack(spacing: 5) {
                        ForEach(dates) { i in
                            
                            Button(action: {
                                self.selected = i.date
                            }) {
                                VStack(spacing :5) {
                                    Text(i.date)
                                        .font(.system(size: 30, weight: .bold))
                                    Text(i.day)
                                }.padding()
                            }
                            .foregroundColor(Color.white)
                            .background(self.selected == i.date ? Color.blue : Color.gray)
                            .cornerRadius(10)
                        }
                    }
                    .padding(.vertical, 10)
                    
                    Text("Time")
                    HStack(spacing: 5) {
                        ForEach(times) { t in
                            
                            Button(action: {
                                self.timeselection = t.time
                            }) {
                                VStack(spacing :5) {
                                    Text(t.time)
                                }.padding()
                            }
                            .foregroundColor(Color.white)
                            .background(self.timeselection == t.time ? Color.blue : Color.gray)
                            .cornerRadius(10)
                        }
                    }
                    .padding(.vertical, 10)
                }
                

                
                HStack(spacing: 15) {
                    Text("$45")
                    
                    Button(action : {
                        
                    }) {
                        Text("Book Now").padding(.vertical, 15).padding(.horizontal, 15)
                    }
                    .foregroundColor(.white)
                    .background(Color.orange)
                    .clipShape(Capsule())
                }.padding(.top, 15)
                
                Spacer()
            }
            .padding(.horizontal, 25)
            .padding(.top, -35)
        }
    }
}

struct Details_Previews: PreviewProvider {
    static var previews: some View {
        Details()
    }
}
Model.swift
 
//
//  Model.swift
//  Swiftuitest
//
//  Created by Cairocoders
//

import SwiftUI

struct type : Identifiable {
    var id : Int
    var row : [row]
}

struct row : Identifiable {
    var id : Int
    var name : String
    var time : String
    var image : String
}

struct datetype : Identifiable {
    var id : Int
    var date : String
    var day : String
}

var datamodel = [type(id: 0, row: [
    row(id: 0, name: "Avengers", time: "1h 12m", image: "1"),
    row(id: 1, name: "Onward", time: "1h 42m", image: "2"),
    row(id: 2, name: "Soul", time: "1h 40m", image: "3"),
]),
type(id: 1, row: [
    row(id: 0, name: "Cruella", time: "1h 12m", image: "4"),
    row(id: 1, name: "Jungle Cruise", time: "1h 42m", image: "5"),
    row(id: 2, name: "The Call of the Wild", time: "1h 40m", image: "6"),
]),
type(id: 2, row: [
    row(id: 0, name: "Joker", time: "1h 12m", image: "7"),
    row(id: 1, name: "Mulan", time: "1h 42m", image: "8"),
    row(id: 2, name: "Mortal Komba", time: "1h 40m", image: "9"),
])]

var dates = [datetype(id: 0, date: "15", day: "01/20"),
             datetype(id: 1, date: "16", day: "01/20"),
             datetype(id: 2, date: "17", day: "01/20"),
             datetype(id: 3, date: "18", day: "01/20")]

struct timetype : Identifiable {
    var id : Int
    var time : String
}

var times = [timetype(id: 0, time: "0:00"),
            timetype(id: 1, time: "1:00"),
            timetype(id: 2, time: "2:00"),
            timetype(id: 3, time: "3:00")]

Related Post