Neumorphismic icon indicating copy to clipboard operation
Neumorphismic copied to clipboard

Neumorphismic

Neumorphism is next design theory. This library make easy to made SwiftUI app with Neumorphism.

Demo view Settings view

Requirements

  • Xcode 11.0 or later
  • iOS 13 or tvOS 13 or macOS 10.15 or watchOS 6.0 or later
  • Swift 5.1

Installation

Swift Package Manager

Open your Xcode project, select File -> Swift Packages -> Add Package Dependency.... and type this depository's URL.

How to use

Simple way

let contentView = ContentView()
    .environment(\.nmBaseColor, Color(hex: "C1D2EB")
struct ContentView: View {

    @Environment(\.nmBaseColor) var baseColor: Color
    
    var body: some View {
        ZStack {
            baseColor
                .edgesIgnoringSafeArea(.all)
            
            Circle()
                .fill(baseColor)
                .frame(width: 300, height: 200)
                .modifier(NMConvexModifier())
        }
    }
}

There is detail of usage in Demo_iOS.

FloatingTabView

You can use Neumorphismic TabView.

enum Tab: String, Hashable, CaseIterable {
    
    case demo = "Demo"
    case settings = "Settings"
    
    func image() -> Image {
        switch self {
        case .demo:     return Image(systemName: "house")
        case .settings: return Image(systemName: "gear")
        }
    }
    
    func view() -> some View {
        VStack {
            if self == .demo {
                DemosView()
            } else {
                SettingsView()
            }
        }
    }
}
struct ContentView: View {
    
    @State var selection: Tab = .demo
    
    var body: some View {
        NMFloatingTabView(
            selection: $selection,
            labelText: { tab in tab.rawValue },
            labelImage: { tab in tab.image() }
        ) { tab in
            tab.view()
        }
        .environment(\.nmBaseColor, Color(hex: "C1D2EB"))
    }
}

HighlightableButton

If you want to change appearance when button highlighted, you can use it.

struct ContentView: View {
    @State var isSelected = false
    var body: some View {
        NMHighlightableButton(action: {
            self.isSelected.toggle()
        }) { isH in
            Image(systemName: self.isSelected ? "house.fill" : "house")
                .resizable()
                .aspectRatio(contentMode: .fit)
                .foregroundColor(.blue)
                .opacity(isH ? 0.6 : 1)
                .frame(width: isH ? 80 : 100,
                       height: isH ? 80 : 100)
        }
    }
}