Learning Time : 50min

My Github : Source Code

My Note index link

KeyWords

• basic ui
• onTapGesture()
• PHPickerViewController
• onChange()
• CIFilter.sepiaTone()

Building our basic UI

1. A NavigationView so we can show our app’s name at the top.
2. A large gray box saying “Tap to select a picture”, over which we’ll place their imported picture.
3. An “Intensity” slider that will affect how strongly we apply our Core Image filters, stored as a value from 0.0 to 1.0.
4. A “Save” button to write out the modified image to the user’s photo library.

struct ContentView: View {
    @State private var image: Image?
    @State private var filterIntensity = 0.5

    var body: some View {
        NavigationView {
            VStack {
                ZStack {
                    Rectangle()
                        .fill(.secondary)
                    Text("Tap to select a picture")
                        .font(.headline)
                        .foregroundColor(.white)
                    
                    image?
                        .resizable()
                        .scaledToFit()
                }
                .onTapGesture {
                    // Add code to select an image
                }
                
                HStack {
                    Text("Intensity")
                    
                    Slider(value: $filterIntensity)
                }
                .padding(.vertical)
                
                HStack {
                    Button("Change filter") {
                        
                    }
                    
                    Spacer()
                    
                    Button("Save", action: save)
                }
            }
            .padding([.horizontal, .bottom])
            .navigationTitle("Instafilter")
        }
    }
    
    func save() {
        
    }
}