[iOS] Image contentmode의 모든 것

문제 상황

---

Cell의 크기를 맞게 지정해주었고 틀린부분 없게 잘 코드를 작성했다고 생각했다.
그러나 실제 빌드를 해보니, 내가 의도한 대로 빌드가 되지 않고 여백이 많이 생겼다.

 

 

해결 방법 - Hint

---

//
//  TableCollectionViewCell.swift
//  CollectionView_Section
//
//  Created by 김동현 on 2023/06/23.
//


import UIKit

import SnapKit
import Then

class MainCollectionViewCell: UICollectionViewCell {
    static let identifier = "ImageCell"
    
    var imageCollectionView = UICollectionView(frame: .zero, collectionViewLayout: UICollectionViewFlowLayout())
    var imageView = UIImageView()
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        setStyle()
        setLayout()
    }

    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }

    func setStyle() {
        imageView.contentMode = .scaleAspectFit
        imageView.backgroundColor = .red
    }
    
    func setLayout() {
        contentView.addSubview(imageView)
        imageView.snp.makeConstraints {
            $0.edges.equalToSuperview()
        }
    }

    func configureCell(_ image: UIImage) {
        imageView.image = image
    }
}

 

 

공부 해보기

---

Content Mode란?

Options to specify how a view adjusts its content when its size changes.

크기가 변경될 때 보기가 내용을 조정하는 방법을 지정하는 옵션입니다.

 
* 비교를 위해 임의로 셀의 높이를 변경해두었습니다:)
 

1) scaleAspectFit

비율을 유지하면서 뷰의 사이즈에 맞게 이미지를 늘리는 옵션이다. 
이미지가 뷰를 꽉채우지 못해서 남는 부분은 투명처리 된다.
 

 
 
 
이미지가 뷰의 영역을 꽉 채우지 못했기때문에!
기존에 Cell의 BackGroundColor을 Red로 해둔것을
반영해서 빨간색 배경이 보이는 것을 확인할 수 있다.
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

 

 

2) scaleAspectFill

비율을 유지하면서 뷰의 사이즈에 맞게 이미지를 꽉 채우는 옵션이다.
따라서 특정 이미지의 어떤 부분은 잘려 보일수도 있다.
 
 

 
 
 
위의 사진과 다른 점은 단 하나!  fit 이냐 fill이냐..
위에서 본 것과 달리, 빨간 영역이 보이지 않는 것을 확인할 수 있다.
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

 

 

3) scaleToFill

 
이는 전체 이미지가 다 나올 수 있도록 필요하다면 비율을 깨트리면서
뷰의 사이즈에 맞게 이미지를 꽉 채우는 옵션이다.
 
 

 
 
 
지정해둔 셀의 높이에 맞추기 위해
사진이 자동으로 확대된 느낌을 받을 수 있다.
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

 

 

결국!

내가 임의로 Cell의 Height를 지정해둔 상황이라면, AspectFit을 사용하면 되지 않을까.. 하는 생각을 했다.
 

 

 

비교해보기

---

AspectFill	비율 유지 O	화면 꽉 채움 O	이미지 잘림 O
AspectFill	비율 유지 O	화면 꽉 채움 X	이미지 잘림 X
ScaleToFill	비율 유지 X	화면 꽉 채움 O	이미지 잘림 X