Menu Close

Neophormic – SwiftUI

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:

ContentView.swift

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

Leave a Reply

Your email address will not be published. Required fields are marked *