UIImageView Auto Layout

윤주현·2023년 7월 19일
0

Auto Layout

목록 보기
7/8

UIImageView 화면에 꽉 차게 하기

Problem

let albumImage = UIImageView()

albumImage.translatesAutoresizingMaskIntoConstraints = false
albumImage.contentMode = .scaleAspectFit
albumImage.image = UIImage(named: "rush")
albumImage.setContentHuggingPriority(UILayoutPriority(rawValue: 249), for: .vertical)
albumImage.setContentCompressionResistancePriority(UILayoutPriority(rawValue: 749), for: .vertical)

view.addSubview(albumImage)

albumImage.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor).isActive = true
albumImage.leadingAnchor.constraint(equalTo: view.leadingAnchor).isActive = true
albumImage.trailingAnchor.constraint(equalTo: view.trailingAnchor).isActive = true

이미지뷰가 정확한 높이를 모르기 때문에(?) 위와 같이 제약 조건을 주었음에도 이미지뷰가 화면에 꽉 차지 않고 intrinsic content size를 계속 유지하는 문제가 있다.

How to solve

albumImage.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor).isActive = true
// X축 가운데 정렬
albumImage.centerXAnchor.constraint(equalTo: view.centerXAnchor).isActive = true
// 높이와 너비 비율 1:1로 설정
albumImage.heightAnchor.constraint(equalTo: albumImage.widthAnchor, multiplier: 1).isActive = true
// 이미지 뷰의 너비를 기기의 너비로 설정
albumImage.widthAnchor.constraint(equalToConstant: view.bounds.width).isActive = true

Vector Image

벡터 이미지(.pdf)는 비트맵 이미지(.jpeg)처럼 이미지의 정보를 픽셀 좌표로 저장하지 않고 수학적인 정보로 저장하기 때문에 이미지가 깨지는 현상없이 사용이 가능하다.

Xcode에 Vector Image 추가하기

다른 이미지를 추가할때와 마찬가지로 Assets.xcassets에 이미지를 드래그앤 드롭한 뒤 이미지를 클릭하고

  1. Attribute Inspector창에 Preserve Vector Data를 체크한다.
  2. Scale을 Single Scale로 변경한다.

1개의 댓글

comment-user-thumbnail
2023년 7월 19일

너무 좋은 글이네요. 공유해주셔서 감사합니다.

답글 달기