article

Wednesday, June 23, 2021

SwiftUI fullscreen image background using GeometryReader and ZStack

SwiftUI fullscreen image background using GeometryReader and ZStack ContentView.swift
 
//
//  ContentView.swift
//  Test
//
//  Created by Cairocoders
//

import SwiftUI

struct ContentView: View {
    
    @State var progressValue: Float = 0.0
    
    var body: some View {
        GeometryReader { geometry in
            ZStack {
                Image("bg")
                    .resizable()
                    .aspectRatio(geometry.size, contentMode: .fill)
                    .edgesIgnoringSafeArea(.all)

                VStack(spacing: 25){
                    
                    Image("trophy")
                        .resizable()
                        .aspectRatio(contentMode: .fit)
                        .frame(width: 250, height: 250)
                    
                    Text("Well Done !!!")
                        .font(.title)
                        .fontWeight(.heavy)
                        .foregroundColor(.black)
                    
                    // Score And Back To Home Button...
                    
                    HStack(spacing: 15){
                        
                        Image(systemName: "checkmark")
                            .font(.largeTitle)
                            .foregroundColor(.green)
                        
                        Text("23")
                            .font(.largeTitle)
                            .foregroundColor(.black)
                        
                        Image(systemName: "xmark")
                            .font(.largeTitle)
                            .foregroundColor(.red)
                            .padding(.leading)
                        
                        Text("12")
                            .font(.largeTitle)
                            .foregroundColor(.black)
                    }
                    
                    Button(action: {
                    }, label: {
                        HStack {
                            Image(systemName: "house.circle")
                                .font(.largeTitle)
                            Text("Goto Home")
                                .fontWeight(.heavy)
                                .foregroundColor(.white)
                                .padding(.vertical)
                                .frame(width: UIScreen.main.bounds.width - 150)
                        }
                        .background(Color.blue)
                        .foregroundColor(.white)
                        .cornerRadius(15)
                    })
                }
            }
        }
    }
}


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

Related Post