ERIC KIM ₿

Image Sorting App

Certainly! You can develop the image sorting app directly on your iPad using the Swift Playgrounds app, which now supports creating full-fledged iOS apps. Below is a step-by-step guide to help you build the app on your iPad using Swift Playgrounds.

Table of Contents

  1. Setting Up Swift Playgrounds on iPad
  2. Creating a New App Project
  3. Requesting Photo Library Access
  4. Fetching and Displaying Images
  5. Implementing Sorting Functionality
  6. Testing the App
  7. Conclusion

1. Setting Up Swift Playgrounds on iPad

a. Install Swift Playgrounds

  • Download the Swift Playgrounds app from the App Store if you haven’t already.
  • Ensure your iPad is updated to iPadOS 15 or later to support app development features.

b. Enable App Projects

  • Open Swift Playgrounds.
  • Go to Settings within the app.
  • Enable the option for “Enable App Projects” if it’s not already enabled.

2. Creating a New App Project

a. Start a New Project

  • Open Swift Playgrounds.
  • Tap on the “+” icon to create a new playground.
  • Select “App” from the templates.

b. Project Structure

Your new app project will include:

  • ContentView.swift: The main view of your app.
  • MyApp.swift: The entry point of your app.
  • Assets.xcassets: Where you can manage your app’s assets.

Since Swift Playgrounds uses SwiftUI instead of Storyboards, we’ll adapt our app accordingly.

3. Requesting Photo Library Access

To access the user’s photos, you need to request permission and import the necessary frameworks.

a. Import Required Frameworks

In ContentView.swift, import the Photos framework:

import SwiftUI
import Photos

b. Update Info.plist

Swift Playgrounds allows you to edit your app’s Info.plist.

  • Tap on the Project Navigator icon (looks like a folder) to view your project files.
  • Locate and tap on “Info.plist”.
  • Add a new key:
  • Key: Privacy - Photo Library Usage Description (NSPhotoLibraryUsageDescription)
  • Value: "This app requires access to your photo library to display and sort your images."

c. Request Authorization

Create a ViewModel to handle data fetching and permissions.

class PhotosViewModel: ObservableObject {
    @Published var assetsArray: [PHAsset] = []

    init() {
        checkPhotoLibraryPermission()
    }

    func checkPhotoLibraryPermission() {
        let status = PHPhotoLibrary.authorizationStatus(for: .readWrite)
        switch status {
        case .authorized, .limited:
            fetchPhotos()
        case .denied, .restricted:
            print("Access denied or restricted")
        case .notDetermined:
            PHPhotoLibrary.requestAuthorization(for: .readWrite) { status in
                if status == .authorized || status == .limited {
                    self.fetchPhotos()
                } else {
                    print("Access denied")
                }
            }
        @unknown default:
            fatalError("Unknown authorization status")
        }
    }

    func fetchPhotos() {
        let allPhotosOptions = PHFetchOptions()
        allPhotosOptions.sortDescriptors = [NSSortDescriptor(key: "creationDate", ascending: true)]
        let allPhotos = PHAsset.fetchAssets(with: allPhotosOptions)

        allPhotos.enumerateObjects { (asset, _, _) in
            self.assetsArray.append(asset)
        }
    }
}

4. Fetching and Displaying Images

a. Create the Content View

In ContentView.swift, set up your main view to display images.

struct ContentView: View {
    @StateObject var viewModel = PhotosViewModel()
    @State private var selectedSortOption = 0
    let sortOptions = ["Date", "Name", "Size"]

    var body: some View {
        NavigationView {
            VStack {
                Picker("Sort Options", selection: $selectedSortOption) {
                    ForEach(0..<sortOptions.count) { index in
                        Text(self.sortOptions[index]).tag(index)
                    }
                }
                .pickerStyle(SegmentedPickerStyle())
                .padding()
                .onChange(of: selectedSortOption, perform: { value in
                    switch value {
                    case 0:
                        viewModel.sortByDate()
                    case 1:
                        viewModel.sortByName()
                    case 2:
                        viewModel.sortBySize()
                    default:
                        break
                    }
                })

                ScrollView {
                    LazyVGrid(columns: [GridItem(.adaptive(minimum: 100))]) {
                        ForEach(viewModel.assetsArray, id: \.self) { asset in
                            PhotoThumbnail(asset: asset)
                        }
                    }
                }
            }
            .navigationTitle("Image Sorter")
        }
    }
}

b. Create a Photo Thumbnail View

struct PhotoThumbnail: View {
    var asset: PHAsset
    @State private var image: UIImage? = nil

    var body: some View {
        Group {
            if let img = image {
                Image(uiImage: img)
                    .resizable()
                    .aspectRatio(contentMode: .fill)
                    .frame(width: 100, height: 100)
                    .clipped()
            } else {
                Rectangle()
                    .foregroundColor(.gray)
                    .frame(width: 100, height: 100)
            }
        }
        .onAppear {
            fetchImage()
        }
    }

    func fetchImage() {
        let manager = PHImageManager.default()
        let options = PHImageRequestOptions()
        options.isNetworkAccessAllowed = true
        options.deliveryMode = .highQualityFormat

        manager.requestImage(for: asset, targetSize: CGSize(width: 100, height: 100), contentMode: .aspectFill, options: options) { (result, info) in
            self.image = result
        }
    }
}

5. Implementing Sorting Functionality

a. Update the ViewModel with Sorting Methods

Add sorting methods to PhotosViewModel:

extension PhotosViewModel {
    func sortByDate() {
        assetsArray.sort { ($0.creationDate ?? Date()) < ($1.creationDate ?? Date()) }
    }

    func sortByName() {
        assetsArray.sort { ($0.value(forKey: "filename") as? String ?? "") < ($1.value(forKey: "filename") as? String ?? "") }
    }

    func sortBySize() {
        assetsArray.sort {
            let size0 = ($0.value(forKey: "fileSize") as? Int) ?? 0
            let size1 = ($1.value(forKey: "fileSize") as? Int) ?? 0
            return size0 < size1
        }
    }
}

Note: Since PHAsset does not provide direct access to the fileSize, you might need to use PHAssetResource. Update sortBySize accordingly:

func sortBySize() {
    assetsArray.sort {
        let resources0 = PHAssetResource.assetResources(for: $0)
        let size0 = resources0.first?.value(forKey: "fileSize") as? Int64 ?? 0

        let resources1 = PHAssetResource.assetResources(for: $1)
        let size1 = resources1.first?.value(forKey: "fileSize") as? Int64 ?? 0

        return size0 < size1
    }
}

b. Ensure KVO Compliance

Since we’re using value(forKey:), make sure to import Objective-C bridging if necessary:

import ObjectiveC

6. Testing the App

  • Run the app within Swift Playgrounds.
  • Grant permission to access photos when prompted.
  • Interact with the segmented control to sort images.
  • Scroll through the grid to see images sorted accordingly.

Notes on Testing

  • Simulators: Swift Playgrounds on iPad runs directly on your device, so you can access your actual photo library.
  • Performance: Loading a large number of photos may affect performance. Consider optimizing image requests.

7. Conclusion

You’ve successfully created an image sorting app on your iPad using Swift Playgrounds! This app allows you to access the photo library, display images in a grid, and sort them by date, name, or size.

Next Steps

  • Enhance the UI: Customize the image grid, add animations, or implement a detailed view when an image is tapped.
  • Error Handling: Provide user feedback if photo access is denied or if there are no photos to display.
  • Additional Features: Implement search functionality, filter images by type, or add the ability to delete or share images.

Feel free to ask if you have any questions or need further assistance!

Sure! Let’s create an image sorting app for iOS using Swift. This app will access the user’s photo library, display the images, and allow sorting based on different criteria like date, name, or file size.

Below is a step-by-step guide to help you build the app.

Table of Contents

  1. Project Setup
  2. Request Photo Library Access
  3. Fetch and Display Images
  4. Implement Sorting Functionality
  5. Complete Code Example
  6. Testing the App
  7. Conclusion

1. Project Setup

a. Create a New Xcode Project

  • Open Xcode and select “Create a new Xcode project.”
  • Choose “App” under iOS.
  • Name your project (e.g., ImageSorterApp) and set Interface to Storyboard or SwiftUI (we’ll use Storyboard for this example).
  • Select Swift as the programming language.

b. Configure Project Settings

  • Navigate to Project Settings > Signing & Capabilities.
  • Ensure that Automatically manage signing is checked.
  • Add the Photos capability by clicking on “+ Capability” and selecting Photos Library.

2. Request Photo Library Access

To access the user’s photos, you need to request permission.

a. Update Info.plist

  • Open Info.plist.
  • Add a new key: Privacy - Photo Library Usage Description (or NSPhotoLibraryUsageDescription).
  • Provide a description, e.g., “This app requires access to your photo library to display and sort your images.”

b. Request Authorization

In your ViewController.swift:

import UIKit
import Photos

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        checkPhotoLibraryPermission()
    }

    func checkPhotoLibraryPermission() {
        let status = PHPhotoLibrary.authorizationStatus()
        switch status {
        case .authorized:
            // Access already granted
            fetchPhotos()
        case .denied, .restricted :
            // Access denied or restricted
            print("Access denied or restricted")
        case .notDetermined:
            // Request access
            PHPhotoLibrary.requestAuthorization { status in
                if status == .authorized {
                    self.fetchPhotos()
                } else {
                    print("Access denied")
                }
            }
        case .limited:
            // Limited access granted
            fetchPhotos()
        @unknown default:
            fatalError("Unknown authorization status")
        }
    }
}

3. Fetch and Display Images

a. Fetch Photos from Library

Add the following method to fetch images:

var allPhotos: PHFetchResult<PHAsset>!

func fetchPhotos() {
    let allPhotosOptions = PHFetchOptions()
    allPhotosOptions.sortDescriptors = [NSSortDescriptor(key: "creationDate", ascending: true)]
    allPhotos = PHAsset.fetchAssets(with: allPhotosOptions)

    DispatchQueue.main.async {
        self.collectionView.reloadData()
    }
}

b. Set Up Collection View

  • Drag a UICollectionView onto your main storyboard scene.
  • Create an outlet in ViewController.swift:
@IBOutlet weak var collectionView: UICollectionView!
  • Conform to UICollectionViewDataSource and UICollectionViewDelegate:
class ViewController: UIViewController, UICollectionViewDataSource, UICollectionViewDelegate {
    // ... existing code ...
}
  • Implement the required data source methods:
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
    return allPhotos?.count ?? 0
}

func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
    let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "PhotoCell", for: indexPath) as! PhotoCell
    let asset = allPhotos.object(at: indexPath.item)

    let manager = PHImageManager.default()
    let options = PHImageRequestOptions()
    options.isNetworkAccessAllowed = true
    options.deliveryMode = .highQualityFormat

    manager.requestImage(for: asset, targetSize: cell.imageView.frame.size, contentMode: .aspectFill, options: options) { (result, info) in
        cell.imageView.image = result
    }
    return cell
}

c. Create a Custom Cell

  • Create a new UICollectionViewCell subclass called PhotoCell.
  • Design the cell in the storyboard:
  • Set the cell’s identifier to “PhotoCell”.
  • Add an UIImageView to the cell.
  • Create an outlet in PhotoCell.swift: @IBOutlet weak var imageView: UIImageView!

4. Implement Sorting Functionality

Allow users to sort images based on different criteria.

a. Add a Segmented Control

  • Drag a UISegmentedControl onto your storyboard above the collection view.
  • Add segments for sorting options (e.g., “Date”, “Name”, “Size”).
  • Create an action for value changes:
@IBAction func sortOptionChanged(_ sender: UISegmentedControl) {
    switch sender.selectedSegmentIndex {
    case 0:
        sortByDate()
    case 1:
        sortByName()
    case 2:
        sortBySize()
    default:
        break
    }
}

b. Implement Sorting Methods

Sort by Date

func sortByDate() {
    let options = PHFetchOptions()
    options.sortDescriptors = [NSSortDescriptor(key: "creationDate", ascending: true)]
    allPhotos = PHAsset.fetchAssets(with: options)
    collectionView.reloadData()
}

Sort by Name

Note: PHAsset does not have a “name” property accessible directly. For the sake of example, we’ll simulate this.

func sortByName() {
    let options = PHFetchOptions()
    options.sortDescriptors = [NSSortDescriptor(key: "filename", ascending: true)]
    allPhotos = PHAsset.fetchAssets(with: options)
    collectionView.reloadData()
}

Sort by Size

Sorting by size requires fetching the file size of each asset.

func sortBySize() {
    var assetsWithSize: [(asset: PHAsset, size: Int)] = []
    let options = PHFetchOptions()
    allPhotos = PHAsset.fetchAssets(with: options)

    let imageManager = PHImageManager.default()
    let requestOptions = PHImageRequestOptions()
    requestOptions.isSynchronous = true

    allPhotos.enumerateObjects { (asset, _, _) in
        let resources = PHAssetResource.assetResources(for: asset)
        if let resource = resources.first, let fileSize = resource.value(forKey: "fileSize") as? Int {
            assetsWithSize.append((asset, fileSize))
        }
    }

    // Sort the array by file size
    assetsWithSize.sort { $0.size < $1.size }

    // Extract sorted assets
    let sortedAssets = assetsWithSize.map { $0.asset }
    allPhotos = PHFetchResult<PHAsset>()
    allPhotos = PHFetchResult<PHAsset>(assets: sortedAssets)

    collectionView.reloadData()
}

Note: The PHFetchResult<PHAsset>(assets:) initializer is not available, so you might need to store assets in an array instead of PHFetchResult.

c. Adjust Data Source Methods

Modify your data source methods to use an array of assets:

var assetsArray: [PHAsset] = []

func fetchPhotos() {
    let allPhotosOptions = PHFetchOptions()
    allPhotosOptions.sortDescriptors = [NSSortDescriptor(key: "creationDate", ascending: true)]
    let allPhotos = PHAsset.fetchAssets(with: allPhotosOptions)

    allPhotos.enumerateObjects { (asset, _, _) in
        self.assetsArray.append(asset)
    }

    DispatchQueue.main.async {
        self.collectionView.reloadData()
    }
}

// Update data source methods
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
    return assetsArray.count
}

func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
    // ... existing code ...
    let asset = assetsArray[indexPath.item]
    // ... existing code ...
}

Adjust your sorting methods to sort assetsArray directly.

5. Complete Code Example

Here’s the adjusted ViewController.swift:

import UIKit
import Photos

class ViewController: UIViewController, UICollectionViewDataSource, UICollectionViewDelegate {

    @IBOutlet weak var collectionView: UICollectionView!
    @IBOutlet weak var segmentedControl: UISegmentedControl!

    var assetsArray: [PHAsset] = []

    override func viewDidLoad() {
        super.viewDidLoad()
        checkPhotoLibraryPermission()
        collectionView.dataSource = self
        collectionView.delegate = self
    }

    func checkPhotoLibraryPermission() {
        let status = PHPhotoLibrary.authorizationStatus()
        switch status {
        case .authorized:
            fetchPhotos()
        case .denied, .restricted :
            print("Access denied or restricted")
        case .notDetermined:
            PHPhotoLibrary.requestAuthorization { status in
                if status == .authorized {
                    self.fetchPhotos()
                } else {
                    print("Access denied")
                }
            }
        case .limited:
            fetchPhotos()
        @unknown default:
            fatalError("Unknown authorization status")
        }
    }

    func fetchPhotos() {
        assetsArray = []
        let allPhotosOptions = PHFetchOptions()
        allPhotosOptions.sortDescriptors = [NSSortDescriptor(key: "creationDate", ascending: true)]
        let allPhotos = PHAsset.fetchAssets(with: allPhotosOptions)

        allPhotos.enumerateObjects { (asset, _, _) in
            self.assetsArray.append(asset)
        }

        DispatchQueue.main.async {
            self.collectionView.reloadData()
        }
    }

    // MARK: - UICollectionViewDataSource methods

    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return assetsArray.count
    }

    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        // Dequeue cell and configure it
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "PhotoCell", for: indexPath) as! PhotoCell
        let asset = assetsArray[indexPath.item]

        let manager = PHImageManager.default()
        let options = PHImageRequestOptions()
        options.isNetworkAccessAllowed = true
        options.deliveryMode = .highQualityFormat

        manager.requestImage(for: asset, targetSize: cell.imageView.frame.size, contentMode: .aspectFill, options: options) { (result, info) in
            cell.imageView.image = result
        }
        return cell
    }

    // MARK: - Sorting Methods

    @IBAction func sortOptionChanged(_ sender: UISegmentedControl) {
        switch sender.selectedSegmentIndex {
        case 0:
            sortByDate()
        case 1:
            sortByName()
        case 2:
            sortBySize()
        default:
            break
        }
    }

    func sortByDate() {
        assetsArray.sort { ($0.creationDate ?? Date()) < ($1.creationDate ?? Date()) }
        collectionView.reloadData()
    }

    func sortByName() {
        assetsArray.sort { ($0.value(forKey: "filename") as? String ?? "") < ($1.value(forKey: "filename") as? String ?? "") }
        collectionView.reloadData()
    }

    func sortBySize() {
        let imageManager = PHImageManager.default()
        let requestOptions = PHImageRequestOptions()
        requestOptions.isSynchronous = true

        assetsArray.sort {
            let resources0 = PHAssetResource.assetResources(for: $0)
            let size0 = resources0.first?.value(forKey: "fileSize") as? Int ?? 0
            let resources1 = PHAssetResource.assetResources(for: $1)
            let size1 = resources1.first?.value(forKey: "fileSize") as? Int ?? 0
            return size0 < size1
        }
        collectionView.reloadData()
    }
}

6. Testing the App

  • Run the app on a real device or simulator with photos.
  • Grant permission when prompted.
  • Interact with the segmented control to sort images.
  • Scroll through the collection view to see images sorted accordingly.

7. Conclusion

You’ve now created a basic image sorting app for iOS using Swift. This app accesses the user’s photo library, displays images in a collection view, and allows sorting by date, name, or size.

Next Steps

  • Enhance UI/UX: Customize the appearance of the collection view and cells.
  • Add More Sorting Options: Implement sorting by media type or location.
  • Implement Search: Allow users to search for images.
  • Handle Permissions Gracefully: Provide better feedback if access is denied.

Feel free to ask if you have any questions or need further assistance!

More posts