Author Archive Tobias Stephan

Link to the Regex-Generator

I myself was looking for such a generator, because that is quite a fiddle. With this generator you can easily convert a string into a regex. This is a great basis to adjust the generated regex pattern. For this I use one of the numerous regex testers. There are enough of those.

Here you go. Here you have a ready sample for a Swift UI hamburger menu. You can easily hide the menu with a slide or tap on the hamburger symbol. Simply create a new SwiftUI project as a single app with the default settings. Simply copy and paste everything and play around with the project.

//
//  ContentView.swift
//  SlideMenuSwiftSample
//
//  Created by T. Stephan on 03.05.20.
//  Copyright © 2020 eCommerce - Tobias Stephan. All rights reserved.
//

import SwiftUI

struct ContentView: View {
    @State var showHamburgerMenu = false
    
    
    var body: some View {
        
        
        let drag = DragGesture()
            .onEnded {
                if $0.translation.width < -100 {
                    withAnimation {
                        self.showHamburgerMenu = false
                    }
                }
        }
        
        return NavigationView {
            GeometryReader { geometry in
                ZStack(alignment: .leading) {
                    MainView(showHamburgerMenu: self.$showHamburgerMenu)
                        .frame(width: geometry.size.width, height: geometry.size.height)
                        .offset(x: self.showHamburgerMenu ? geometry.size.width/2 : 0)
                        .disabled(self.showHamburgerMenu ? true : false)
                    
                    if self.showHamburgerMenu {
                        MenuView()
                            .frame(width: geometry.size.width/2)
                            .transition(.move(edge: .leading))
                    }
                }
                .gesture(drag)
                
            }
            .navigationBarTitle("Side Menu", displayMode: .inline)
            .navigationBarItems(leading: (
                Button(action: {
                    withAnimation {
                        self.showHamburgerMenu.toggle()
                    }
                }) {
                    Image(systemName: "line.horizontal.3")
                        .imageScale(.large)
                }
            ))
        }
        
    }
}

struct MainView: View {
    @Binding var showHamburgerMenu: Bool
    
    var body: some View {
        Button(action: {
            withAnimation {
                self.showHamburgerMenu = true
            }
        }) {
            Text("Show Menu")
        }
    }
}

struct MenuView: View {
    var body: some View {
        VStack(alignment: .leading) {
            HStack {
                Image(systemName: "person")
                    .foregroundColor(.gray)
                    .imageScale(.large)
                NavigationLink(destination: ProfileView()) {
                    Text("Profile")
                        .foregroundColor(.gray)
                        .font(.headline)
                }
            }
            .padding(.top, 100)
            HStack {
                Image(systemName: "envelope")
                    .foregroundColor(.gray)
                    .imageScale(.large)
                NavigationLink(destination: MessagesView()) {
                    Text("Messages")
                        .foregroundColor(.gray)
                        .font(.headline)
                }
            }
            .padding(.top, 30)
            HStack {
                Image(systemName: "gear")
                    .foregroundColor(.gray)
                    .imageScale(.large)
                NavigationLink(destination: SettingsView()) {
                    Text("Settings")
                        .foregroundColor(.gray)
                        .font(.headline)
                }
            }
            .padding(.top, 30)
            Spacer()
        }
        .padding()
        .frame(maxWidth: .infinity, alignment: .leading)
        .background(Color(red: 32/255, green: 32/255, blue: 32/255))
        .edgesIgnoringSafeArea(.all)
    }
}

struct SettingsView: View {
    var body: some View {
        VStack{
            Text("Settings Subview")
        }
    }
}
struct MessagesView: View {
    var body: some View {
        VStack{
            Text("Messages Subview")
        }
    }
}
struct ProfileView: View {
    var body: some View {
        VStack{
            Text("Profile Subview")
        }
    }
}

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

This is the first time I have used the Picker under SwiftUI. Simple insight – the OS decides which appearance your picker takes on. Of course you can decide that yourself. Now I had the strange behaviour that when I selected an entry of 5 pickers, all pickers were run through. My pickers are in a form. In this form a NavigationView. Solution of the problem was the Section. This example is not suitable for copy-paste because you are missing the data source. This is for illustration purposes only.

import SwiftUI

struct ContentView: View {
    @State public var selectedCrossSection = 0
    @State private var selectedColor = 0
    @State private var selectedLength = 0
    @State private var selectedEyelet1 = 0
    @State private var selectedEyelet2 = 0

    var selCrossSectionStr = ""

    @ObservedObject var oListDatasource = ListDataSource()
    var body: some View {

        NavigationView{

            VStack (spacing: 10) {
                Form {
                    Section {
                        Picker(selection: self.$selectedCrossSection, label: Text("Querschnitt")) {

                            ForEach(self.oListDatasource.CrossSections, id: \.self) { item in
                                Text(item.CrossSection).tag(item.rowIndex)
                            }
                        }
                            //.pickerStyle(SegmentedPickerStyle()).foregroundColor(Color.orange)

                            .font(Font.custom("ArialMT", size: 12))
                            .onReceive([self.selectedCrossSection].publisher.first()) { (value) in
                                print(self.oListDatasource.CrossSections[self.selectedCrossSection].CrossSection)

                        }
                    }
                    Section {
                        Picker(selection: self.$selectedColor, label: Text("Farbe")) {

                            ForEach(self.oListDatasource.Colors) { item in
                                Text(item.Color).tag(item.rowIndex)
                            }
                        }
                            //.pickerStyle(SegmentedPickerStyle()).foregroundColor(Color.orange)
                            .font(Font.custom("ArialMT", size: 12))
                    }

                    Section {
                        Picker(selection: self.$selectedLength, label: Text("Länge")) {

                            ForEach(self.oListDatasource.Lengths) { item in
                                Text(item.Length).tag(item.rowIndex)
                            }
                        }
                        .font(Font.custom("ArialMT", size: 12))
                    }

                Section {
                    Picker(selection: $selectedEyelet1, label: Text("Öse 1")) {

                        ForEach(oListDatasource.Eyelets) { item in
                            Text(item.Eyelet).tag(item.rowIndex)
                        }
                    }
                    .font(Font.custom("ArialMT", size: 12))
                }
                Section {
                    Picker(selection: $selectedEyelet2, label: Text("Öse 2")) {

                        ForEach(oListDatasource.Eyelets) { item in
                            Text(item.Eyelet).tag(item.rowIndex)
                        }
                    }
                    .font(Font.custom("ArialMT", size: 12))
                }
                }

            NavigationLink(destination: ListItems(selectedCrossSection: selectedCrossSection)) {
                Text("Liste").frame(width: 100)

            }
            }

            .navigationBarTitle("Kabelshop")

        }

    }
}

Styles:

• Navigation view style.
• Wheel picker.
• Segmented picker.
• Date picker style.