Skip to content

Instantly share code, notes, and snippets.

@omaarr90
Created June 16, 2021 21:55
Show Gist options
  • Save omaarr90/723caf1aed00588618f960702fda5736 to your computer and use it in GitHub Desktop.
Save omaarr90/723caf1aed00588618f960702fda5736 to your computer and use it in GitHub Desktop.
A Call UI replication similar to the one found on WhatsApp
//
// ContentView.swift
// CallsUI
//
// Created by Omar Alshammari on 06/11/1442 AH.
//
import SwiftUI
struct ContentView: View {
var body: some View {
NavigationView {
ZStack {
AngularGradient(gradient: Gradient(colors: [.red, .yellow, .green, .blue, .purple, .red]), center: .bottom)
.ignoresSafeArea(.all)
VStack(spacing: 20) {
VStack(spacing: 8) {
Text("Omar Alshammari")
.foregroundColor(.white)
.font(.largeTitle.bold())
Text("Calling +966542652273")
.font(.subheadline)
.foregroundColor(.secondary)
}
Spacer()
Image(systemName: "person.fill")
.font(.system(size: 120))
.foregroundColor(.white)
.padding()
.background(.gray)
.clipShape(Circle())
Spacer()
VStack(spacing: 20) {
HStack(spacing: 24) {
VStack {
Button(action: {
print("Edit button was tapped")
}) {
Image(systemName: "speaker.wave.3.fill")
}
.padding()
.background(.thinMaterial)
.clipShape(Circle())
Text("speaker")
.fixedSize(horizontal: true, vertical: false)
.font(.caption)
}
.foregroundColor(.white)
VStack {
Button(action: {
print("Edit button was tapped")
}) {
Image(systemName: "camera.fill")
}
.padding()
.background(.thinMaterial)
.clipShape(Circle())
Text("video call")
.fixedSize(horizontal: true, vertical: false)
.font(.caption)
}
.foregroundColor(.white)
VStack {
Button(action: {
print("Edit button was tapped")
}) {
Image(systemName: "mic.slash.fill")
}
.padding()
.background(.thinMaterial)
.clipShape(Circle())
Text("mute")
.fixedSize(horizontal: true, vertical: false)
.font(.caption)
}
.foregroundColor(.white)
}
Button(action: {
print("Edit button was tapped")
}) {
Image(systemName: "phone.down.fill")
}
.foregroundColor(.white)
.padding(24)
.background(Color.red)
.background(.thinMaterial)
.clipShape(Circle())
}
.padding()
}
}
.navigationBarTitleDisplayMode(.inline)
}
.colorScheme(.dark)
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
@omaarr90
Copy link
Author

It will produce this UI

Simulator Screen Shot - iPhone 11 - 2021-06-17 at 00 56 24

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment