Swift UIKIT Style iPhone App Development: Adding Play Status Images to an Audio App

Hello. In this blog post, we will explore how to develop an iPhone app using the Swift language with UIKit. We will particularly focus on how to add images based on playback status to an audio app. Through this tutorial, you will learn how to visually represent the audio playback status.

1. Overview of UIKit

UIKit is Apple’s UI framework used for developing apps for iPhone and iPad. It provides various UI components (buttons, labels, image views, etc.) to help easily build user interfaces. With UIKit, we can create applications that interact with users.

2. The Need for Audio Apps

Audio apps provide functionalities to manage and play various audio content. Audio apps, which exist in forms such as music streaming services, audiobook apps, and podcasts, require various features to provide a better experience to users. One of these features is visual representation based on playback status.

3. Setting Up the Project

3.1 Creating an Xcode Project

First, open Xcode and create a new project. In the template selection screen, select ‘App’, fill in the basic settings, and create the project.

3.2 Choosing SwiftUI or UIKit

Since we will be using UIKit for this project, please select the ‘Storyboard’ option. We will modify the ViewController through UIKit.

4. Designing the User Interface

4.1 Constructing the UI in the Storyboard

Open the storyboard and let’s construct a simple UI. The following components are needed:

• UILabel: Displays the title of the currently playing track.
• UIImageView: Displays an image that changes based on playback status.
• UIButton: Handles play and stop functionalities.

Place the UI components on the storyboard and set the necessary constraints.

4.2 Defining IBOutlet and IBAction

Go to ViewController.swift and add the IBOutlet and IBAction as below.

import UIKit

class ViewController: UIViewController {
    @IBOutlet weak var albumArtImageView: UIImageView!
    @IBOutlet weak var songTitleLabel: UILabel!
    @IBOutlet weak var playButton: UIButton!
    
    var isPlaying: Bool = false

    override func viewDidLoad() {
        super.viewDidLoad()
        updateUI()
    }
    
    @IBAction func playButtonTapped(_ sender: UIButton) {
        isPlaying.toggle()
        updateUI()
    }
    
    func updateUI() {
        let title = isPlaying ? "Playing" : "Paused"
        songTitleLabel.text = title
        let image = isPlaying ? UIImage(named: "playing") : UIImage(named: "paused")
        albumArtImageView.image = image
        playButton.setTitle(isPlaying ? "Pause" : "Play", for: .normal)
    }
}

In the above code, we implemented the functionality to toggle the playback status when the UIButton is pressed and update the UI. The ‘playing’ and ‘paused’ images should be included and added to the project’s Assets.xcassets.

5. Implementing Audio Playback

5.1 Adding the AVFoundation Framework

To enable audio playback, you need to add the AVFoundation framework to the project. You can add AVFoundation by selecting ‘File’ > ‘Add Packages…’ in Xcode. Then, you need to add the following code to ViewController.swift.

import AVFoundation

class ViewController: UIViewController {
    var audioPlayer: AVAudioPlayer?

    func playAudio() {
        guard let url = Bundle.main.url(forResource: "track", withExtension: "mp3") else { return }
        do {
            audioPlayer = try AVAudioPlayer(contentsOf: url)
            audioPlayer?.play()
        } catch {
            print("Failed to play audio: \(error)")
        }
    }

    @IBAction func playButtonTapped(_ sender: UIButton) {
        isPlaying.toggle()
        updateUI()
        
        if isPlaying {
            playAudio()
        } else {
            audioPlayer?.pause()
        }
    }
}

In the playAudio() function, we implemented the functionality to load and play the audio file. When the button is pressed, it plays or pauses the audio based on the playback status.

6. Testing and Debugging the App

Now that all functionalities are implemented, try running the app in Xcode’s simulator. Every time you click the play button, the status image changes, and the audio plays. If any issues arise, check the console for error messages and debug.

7. Optimization and Deployment

Once testing is complete, you should optimize the app’s performance and prepare for deployment to the App Store. To optimize performance, consider memory usage, audio quality, and image loading speed.

Conclusion

In this blog post, we have thoroughly explored how to develop an audio app using Swift and UIKit, and how to add images based on playback status. Through this process, you have laid the foundation to create your own audio app using UIKit and AVFoundation.

Continue to explore adding more features and improving user experience. Thank you!