[iOS/Swift] UIView to UIImage without Display

요즘 IT 동아리 프로그라피에서 사이드 프로젝트를 하는 중이다. 

프로필 이미지를 만들어서 보여주는 프로젝트인데, 1:1 정방향의 프로필과 3:4 세로형의 프로필 사진 구현을 보여주면서 고민이 생겼다. 디자인 상 이미지 밑의 버튼이 겹치지 않기 위해 3:4 세로형의 height를 미리 구현한 뒤 이미지로 만들어 저장하고 보여줄 때는 가로 넓이를 세로 길이에 맞추어 줄이는 형식으로 구현해야 했다.

1:1 이미지

3:4 이미지

물론, 이렇게 보이는 것과는 다르게 이미지로 저장하기를 누르면 3:4의 경우 옆의 회색 없이 카드 이미지만 저장되어야 했다. 때문에 view 계층의 제일 밑에서 CardView를 그리고, 해당 UIView를 UIImage로 저장하여 불러왔다. 그런데 이때 시점의 차이 때문에 UIImage가 뜨지 않았다. 

고민하다 처음에는 3:4일 때 폰트 크기를 줄이는 방법을 사용했다. 그러나 그렇게 하니 1:1일때와 3:4일때 묘하게 폰트 크기가 차이가 있었고 이를 맞추기가 쉽지 않았다. 

그러다가 시점의 차이에서 영감을 얻어 viewDidLayoutSubviews를 사용하였다.

override func viewDidLayoutSubviews() {
    super.viewDidLayoutSubviews()
    if squareImage == nil {
    	loadCardImages()
    }
}

private func loadCardImages() {
//1:1과 3:4 UIView에서 이미지 생성
    squareImage = squareProfileView.asImage()
    rectangleImage = rectangleProfileView.asImage()

//이미지만 있으면 되니 UIView는 계층에서 내림
    squareProfileView.removeFromSuperview()
    rectangleProfileView.removeFromSuperview()
    
//보여질 프로필 페이지의 이미지를 생성한 1:1 이미지로 바꿈
    profileImageView.image = squareImage
    
//생성한 2개의 이미지를 filemanager에 저장 -> 추후 카카오톡 공유하기 기능 때문에
    ImageManager.saveImageToDirectory(identifier: .squareCard, image: squareImage)
    ImageManager.saveImageToDirectory(identifier: .rectangleCard, image: rectangleImage)
}

기존에는 subview인 CardView의 layout이 완성되기 전에 View가 만들어져 버렸기에 ImageView에 빈 이미지가 들어가고 있었다. 때문에 subview들이 다 생성된 후인 viewDidLayoutSubviews()에서 image를 넣어주었다. 

https://developer.apple.com/documentation/uikit/uiviewcontroller/1621398-viewdidlayoutsubviews

viewDidLayoutSubviews() | Apple Developer Documentation

 

원하는 결과를 얻을 수 있었다!

https://apps.apple.com/kr/app/roome/id6503616766

‎roome