Colin's Blog
[swift] 이미지 슬라이드쇼에서 이미지 흑백/컬러 변경하기

이미지 슬라이드쇼에는 이미지를 흑백으로 변경하거나 원래 컬러로 복원하는 기능을 추가할 수 있습니다. 사용자가 이미지를 클릭하면 이미지의 효과를 변경할 수 있도록 해 보겠습니다.

1. 이미지 효과 변경을 위한 뷰 작성

처음으로 슬라이드에 사용되는 이미지를 표시할 뷰를 작성해야 합니다. 이 뷰에는 이미지를 효과적으로 표시하고 터치로 이미지 효과를 변경할 수 있는 기능이 있어야 합니다.

import UIKit

class ImageSliderView: UIImageView {
    private var isGrayscale = false
    
    override func awakeFromNib() {
        super.awakeFromNib()
        
        let tapGesture = UITapGestureRecognizer(target: self, action: #selector(handleTap(_:)))
        self.addGestureRecognizer(tapGesture)
        
        self.isUserInteractionEnabled = true
        self.contentMode = .scaleAspectFit
    }
    
    @objc func handleTap(_ gesture: UITapGestureRecognizer) {
        isGrayscale = !isGrayscale
        
        if isGrayscale {
            self.image = self.image?.covertedToGrayScale()
        } else {
            self.image = self.image?.convertToOriginalColor()
        }
    }
}

extension UIImage {
    func covertedToGrayScale() -> UIImage? {
        let imageRect = CGRect(x: 0, y: 0, width: self.size.width, height: self.size.height)
        let colorSpace = CGColorSpaceCreateDeviceGray()
        
        let context = CGContext(data: nil, width: Int(self.size.width), height: Int(self.size.height), bitsPerComponent: 8, bytesPerRow: 0, space: colorSpace, bitmapInfo: CGImageAlphaInfo.none.rawValue)
        context?.draw(self.cgImage!, in: imageRect)
        
        let grayImage = context?.makeImage().flatMap { UIImage(cgImage: $0) }
        
        return grayImage
    }
    
    func convertToOriginalColor() -> UIImage? {
        UIGraphicsBeginImageContextWithOptions(self.size, false, self.scale)
        self.draw(in: CGRect(origin: .zero, size: self.size))
        let colorImage = UIGraphicsGetImageFromCurrentImageContext()
        UIGraphicsEndImageContext()
        
        return colorImage
    }
}

2. 이미지 슬라이드쇼에 ImageSliderView 추가

이미지 슬라이드쇼에 이전 단계에서 작성한 ImageSliderView를 추가해야 합니다. 슬라이드쇼에는 여러 이미지가 있을 수 있으므로, ImageSliderView를 반복해서 생성해서 슬라이드쇼에 추가합니다.

import UIKit

class ImageSliderViewController: UIViewController {
    private var imageSliderViews: [ImageSliderView] = []
    private var currentImageIndex = 0
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        // 슬라이드쇼에 사용될 이미지들
        let images: [UIImage] = [
            UIImage(named: "image1")!,
            UIImage(named: "image2")!,
            UIImage(named: "image3")!
        ]
        
        // 슬라이드쇼에 ImageSliderView 추가
        for image in images {
            let imageSliderView = ImageSliderView(image: image)
            imageSliderViews.append(imageSliderView)
        }
        
        // 첫 번째 이미지 표시
        showImage(at: currentImageIndex)
    }
    
    private func showImage(at index: Int) {
        // 이미지 슬라이드쇼에서 현재 이미지를 표시하기 위해 이전에 보여졌던 이미지를 제거
        for view in self.view.subviews where view is ImageSliderView {
            view.removeFromSuperview()
        }
        
        // 현재 이미지를 슬라이드쇼의 가운데에 표시
        let imageSliderView = imageSliderViews[index]
        imageSliderView.center = self.view.center
        self.view.addSubview(imageSliderView)
    }
}

3. 실행하여 흑백/컬러 변경 확인

이제 앱을 실행하고 이미지 슬라이드쇼를 터치하여 이미지의 효과를 변경할 수 있습니다. 이미지를 터치할 때마다 이미지가 흑백 또는 컬러로 변경되는 것을 확인할 수 있습니다.

import UIKit

class ViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
        
        let imageSliderViewController = ImageSliderViewController()
        self.addChildViewController(imageSliderViewController)
        self.view.addSubview(imageSliderViewController.view)
        imageSliderViewController.didMove(toParentViewController: self)
    }
}

이제 ViewController를 실행하면 이미지 슬라이드쇼에서 이미지를 터치하여 흑백 또는 컬러로 변경할 수 있습니다.

이미지 흑백/컬러 변경을 위한 코드 예를 참고해 주세요. 이 코드는 안내 용도로 작성된 것이므로 실제 앱에서 사용할 때에는 필요한 기능을 추가하거나 수정할 수 있습니다.

참고문서:

© 2018 Colin. All rights reserved.