iOS Photo Filter App - Lecture Notes

Overview

• Today's lecture is about building an iOS app to apply filters to photos, similar to Instagram.
• App Name: Fiftygram
• Tools: Xcode, Swift

Setting Up the Project

1. Open Xcode:
   • Create a new single view app project.
   • Name: Fiftygram
   • Language: Swift
2. View Layer: Storyboard Setup:
   • Add a title bar with a button to select a photo.
   • Use ImageView to display selected images.
   • Add buttons to apply filters to the image.

UI Components

1. **Embed Navigation Controller: **
   • Add a title to the navigation bar.
2. Add Bar Button Item:
   • Title: "Choose Photo"
3. Add Image View:
   • Aspect Fit for image scaling
4. Add Buttons for Filters:
   • First filter button named "Sepia"

Code Implementation

• Deleting initial viewDidLoad boilerplate code.
• **IBActions and IBOutlets: **
  • Create IBAction for choosing photo.
  • Connect the photo selection button to Choose Photo action.
  • Create IBOutlet for ImageView.
  • Connect ImageView to code with an IBOutlet.

UIImagePickerController for Photo Selection

• **Setup & Delegation: **
  • Create UIImagePickerController to access the photo library.
  • Set picker.delegate = self.
  • Ensure class conforms to UIImagePickerControllerDelegate and UINavigationControllerDelegate.
• Present Photo Library:
  • Call navigationController.present(picker, animated: true, completion: nil) when the choose photo button is clicked.
• Handle Photo Selection:
  • Implement method imagePickerController(didFinishPickingMediaWithInfo:) to get selected image and display it in the ImageView.
  • Manually dismiss picker with navigationController.dismiss(animated: true, completion: nil).

Applying Filters

• **Adding Actions for Filters: **
  • Create IBActions for filter buttons (e.g., applySepia action).
  • Hook up buttons to the respective actions.
• Applying Sepia Filter:
  • Use Core Image (CIFilter) to apply sepia filter.
  • Convert between different image types (UIImage, CIImage, CGImage) as needed.
  • Update ImageView with the filtered image.

Implementing Additional Filters

1. Add Buttons:
   • Add buttons for additional filters: Noir and Vintage.
2. **Create Actions: **
   • applyNoir and applyVintage actions similar to applySepia.
3. Core Image Process:
   • For each filter, create an appropriate CIFilter and apply it to the selected image.

Result

• **Final Steps: **
  • Test app to ensure filters are applied correctly.
  • Handle edge cases where no photo is selected by ensuring Original image state is managed properly.
• **Additional Notes: **
  • Consider unwrapping optionals safely using guard let or if let.
  • Refer to iOS API documentation for more filter options and Core Image functionalities.

Conclusion

• Recap of creating an Instagram-like app that loads photos from the library and applies various filters using iOS Core Image framework.
• Brief mention of the next video's topic: Saving data on the device.