David Koenig's Blog

Neophormic Design - SwiftUI

05/10/2020

In this small example App I am making use of the Neophormic design. We have a list with quotes and a button which shows an alert.

It is only an example, which helps you to get started with the design.

In the Xcode Project we have only one file we edited:

In the ContentView.swift File, we have to init() {…} the changes of the appearance from UITableView and UITableViewCell. Also a @State variable for the alerts, which gives back a Boolean. A String array of quotes is also added!

import SwiftUI struct ContentView: View { init(){ UITableView.appearance().backgroundColor = .clear UITableViewCell.appearance().backgroundColor = .clear UITableView.appearance().separatorColor = .clear } @State var showsAlert = false var arrayQuotes = ["Love For All, Hatred For None. – Khalifatul Masih III", "Change the world by being yourself. – Amy Poehler", "Every moment is a fresh beginning. – T.S Eliot", "Never regret anything that made you smile. – Mark Twain", "Die with memories, not dreams. – Unknown", "Aspire to inspire before we expire. – Unknown", "Everything you can imagine is real. – Pablo Picasso", "Simplicity is the ultimate sophistication. – Leonardo da Vinci", "Whatever you do, do it well. – Walt Disney", "What we think, we become. – Buddha", "All limitations are self-imposed. – Oliver Wendell Holmes", "Tough times never last but tough people do. – Robert H. Schiuller", "Problems are not stop signs, they are guidelines. – Robert H. Schiuller", "One day the people that don't even believe in you will tell everyone how they met you. – Johnny Depp", "If I'm gonna tell a real story, I'm gonna start with my name. – Kendrick Lamar", "If you tell the truth you don't have to remember anything. – Mark Twain", "Have enough courage to start and enough heart to finish. – Jessica N. S. Yourko", "Hate comes from intimidation, love comes from appreciation. – Tyga", "I could agree with you but then we'd both be wrong. – Harvey Specter", "Oh, the things you can find, if you don't stay behind. – Dr. Seuss"] ...

The Rest of the Content View shows us the body with the User Interface Changes. Please feel free to play around with the shadows colors etc.!

... var body: some View { ZStack { Color(red: 224/255, green: 229/255, blue: 236/255) VStack { List(arrayQuotes, id: \.self) { quote in ZStack { RoundedRectangle(cornerRadius: 20, style: .continuous) .fill(Color(red: 224/255, green: 229/255, blue: 236/255)) .shadow(color: Color.white, radius: 8, x: -8, y: -8) .shadow(color: Color(red: 163/255, green: 177/255, blue:198/255), radius: 8, x: 9, y: 9) HStack() { Text(quote).font(.headline).padding().foregroundColor(.black) } }.padding(.top, 15) }.padding(.top, 55) HStack { Button(action: { self.showsAlert.toggle() }) { Image(systemName: "message.circle") .resizable() .foregroundColor(.green) .frame(width: 60, height: 60) .shadow(color: Color.white, radius: 8, x: -8, y: -8) .shadow(color: Color(red: 163/255, green: 177/255, blue:198/255), radius: 8, x: 9, y: 9) .padding() .background(Color(red: 224/255, green: 229/255, blue: 236/255)) .cornerRadius(50) }.shadow(color: Color.white, radius: 8, x: -8, y: -8) .shadow(color: Color(red: 163/255, green: 177/255, blue:198/255), radius: 8, x: 9, y: 9) .padding() .alert(isPresented: $showsAlert) { Alert(title: Text("Go your way!"), message: Text("Please find your way!"), dismissButton: .default(Text("Okay"))) } } } }.edgesIgnoringSafeArea(.all) } } struct ContentView_Previews: PreviewProvider { static var previews: some View { ContentView() } }

You can download the project at Github:

https://github.com/DKoenig82/neophormic_app_swiftui
    
David Koenig