[swift] PKHUD에서의 이미지 뷰어 기능 구현 방법

20 Nov 2023

swift

PKHUD는 iOS 앱에서 사용할 수 있는 간단하고 사용하기 쉬운 HUD(Head-Up Display) 라이브러리입니다. 이 라이브러리를 사용하여 이미지 뷰어 기능을 구현하는 방법을 알아보겠습니다.

Step 1: PKHUD 설치

먼저, PKHUD 라이브러리를 설치해야 합니다. Cocoapods를 사용한다면 Podfile에 다음과 같이 추가합니다.

pod 'PKHUD'

설치를 마친 후, 프로젝트를 열고 import PKHUD를 추가합니다.

Step 2: 이미지 뷰어 뷰 컨트롤러 생성

이미지 뷰어의 뷰 컨트롤러를 생성합니다. 이는 이미지를 보여줄 View Controller입니다. 예를 들어, ImageViewController라는 클래스를 생성합니다.

import UIKit

class ImageViewController: UIViewController {
    // 이미지를 보여줄 UIImageView
    private var imageView: UIImageView!
    
    // 이미지를 전달받을 변수
    var image: UIImage?
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        // 이미지 뷰 생성
        imageView = UIImageView(frame: view.bounds)
        imageView.contentMode = .scaleAspectFit
        imageView.image = image
        
        // 이미지 뷰를 뷰 컨트롤러에 추가
        view.addSubview(imageView)
    }
}

Step 3: PKHUD에서 이미지 뷰어 호출

이제 PKHUD를 사용하여 이미지 뷰어를 호출하는 방법을 알아보겠습니다. PKHUD는 다양한 스타일의 HUD를 제공합니다. 여기서는 .labeledProgressView 스타일을 사용하여 이미지가 로딩 중임을 보여주는 HUD를 표시하고, HUD를 클릭하면 이미지 뷰어로 전환되도록 구현하겠습니다.

import PKHUD

// 이미지 뷰어 호출
func showImageViewer(image: UIImage) {
    // PKHUD에 해당 이미지를 설정하여 HUD 표시
    HUD.flash(.labeledProgressView("Loading", subtitle: nil), onView: self.view)
    
    // HUD를 클릭하면 이미지 뷰어 호출
    PKHUD.sharedHUD.userInteractionOnUnderlyingViewsEnabled = true
    PKHUD.sharedHUD.contentView.isUserInteractionEnabled = true
    PKHUD.sharedHUD.contentView.addGestureRecognizer(UITapGestureRecognizer(target: self, action: #selector(displayImageViewer)))
}

// 이미지 뷰어 표시
@objc func displayImageViewer() {
    // 이미지 뷰어 뷰 컨트롤러 생성
    let imageVC = ImageViewController()
    imageVC.image = // 이미지 전달
    
    // 현재 뷰 컨트롤러에서 이미지 뷰어 뷰 컨트롤러로 전환
    self.present(imageVC, animated: true, completion: nil)
}

위의 코드는 showImageViewer 함수에서 PKHUD를 사용하여 HUD를 표시하고, displayImageViewer 함수에서 HUD를 클릭했을 때 이미지 뷰어로 전환됩니다.

이제 PKHUD를 사용하여 이미지 뷰어를 간단하게 구현할 수 있습니다. PKHUD의 다양한 스타일을 활용하여 원하는 UI를 구성할 수 있으니 참고해보세요.

Step 1: PKHUD 설치

Step 2: 이미지 뷰어 뷰 컨트롤러 생성

Step 3: PKHUD에서 이미지 뷰어 호출

참고 자료