SimpleDesign_SwiftUI.swift

SimpleDesign_SwiftUI.swift

import SwiftUI

struct ContentView: View {

    var body: some View {
        VStack {
            Color.yellow
                .frame(maxWidth: .infinity, maxHeight: .infinity)
            VStack {
                HStack {

                    Button(action: {
                        // something
                    }) {
                        Text("Trim")
                            .frame(width: 50, height: 50, alignment: .center)
                    }

                    Button(action: {
                        // something
                    }) {
                        Image(systemName: "camera.circle.fill")
                            .renderingMode(.original)
                            .resizable()
                            .frame(width: 50, height: 50, alignment: .center)
                    }
                    .background(Color.white)
                    
                    Button(action: {
                        // something
                    }) {
                        Text("OCR")
                            .frame(width: 50, height: 50, alignment: .center)
                    }
                }

                .frame(maxWidth: .infinity)
                .padding()
            }
        }
    }
}

iPod

Example

https://twitter.com/dbank0208/status/1371051789030543364?s=20

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack {
            Color.yellow
                .frame(maxWidth: /*@START_MENU_TOKEN@*/.infinity/*@END_MENU_TOKEN@*/, maxHeight: /*@START_MENU_TOKEN@*/.infinity/*@END_MENU_TOKEN@*/, alignment: /*@START_MENU_TOKEN@*/.center/*@END_MENU_TOKEN@*/)

            MultipleButtonsView(index: 3, text: ["Trim","","OCR"])
                .padding()

        }
    }
}

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

struct MultipleButtonsView: View {

    private var index: Int
    private var text: [String]

    init(index: Int, text: [String]) {
        self.index = index
        self.text = text
    }

    var body: some View {
        HStack {
            ForEach(0..<index) { i in
                Button(action: {
                    print(i)
                }) {
                    if self.text[i] == "" {
                        Image(systemName: "camera.circle.fill")
                            .renderingMode(.original)
                            .resizable()
                            .frame(width: 50, height: 50, alignment: .center)
                    } else {
                        Text(self.text[i])
                            .frame(width: 50, height: 50, alignment: .center)
                    }
                }
            }
        }
    }
}

same design
.padding(.top)
.padding(.top)

import SwiftUI

struct ContentView: View {
    
    private let viewItem = [
        ViewItem(title: "Trim", image: nil, id:0),
        ViewItem(title: "", image: Image(systemName: "camera.circle.fill"), id:1),
        ViewItem(title: "OCR", image: nil, id:2)
    ]
    
    var body: some View {
        VStack {
            Color.yellow
                .frame(maxWidth: /*@START_MENU_TOKEN@*/.infinity/*@END_MENU_TOKEN@*/, maxHeight: /*@START_MENU_TOKEN@*/.infinity/*@END_MENU_TOKEN@*/, alignment: /*@START_MENU_TOKEN@*/.center/*@END_MENU_TOKEN@*/)
                .padding(.top)
                .padding(.top)

            MultipleButtonsView(viewItem) { v in
                ViewItemList(viewItem: v)
            }
            .padding()
        }
    }
}

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


struct ViewItem: Identifiable {

    var title: String
    var image: Image?
    var id: Int

    init (title: String,
          image: Image?,
          id: Int) {
        
        self.title = title
        self.image = image ?? Image.init("")
        self.id = id
    }
}

struct MultipleButtonsView<Data, Content>: View where Data: RandomAccessCollection, Content: View, Data.Element: Identifiable {
    
    private let data: [Data.Element]
    private let content: (Data.Element) -> Content

    init(_ data: Data,
         content: @escaping(Data.Element) -> Content) {
    
        self.data = data.map { $0 }
        self.content = content
    }

    var body: some View {
        HStack {
            ForEach(self.data[0...self.data.count-1].indices, id: \.self) { index in
                self.content(self.data[index])
            }
        }
    }
}

struct ViewItemList: View {

    private var viewItem: ViewItem
    
    init (viewItem: ViewItem) {
        self.viewItem = viewItem
    }

    var body: some View {
        VStack {
            Button(action: {
                // something
            }) {
                if viewItem.title == "" {
                    viewItem.image?
                        .renderingMode(.original)
                        .resizable()
                        .frame(width: 50, height: 50, alignment: .center)
                } else {
                    Text(viewItem.title)
                        .frame(width: 50, height: 50, alignment: .center)
                }
            }
        }
    }
}