IOS Beginner | CALayer를 사용해서 다양한 모양 연출하기

프로필 화면이 너무 허전하니까 뭔가 좀 더 꾸미고 싶은데, 샘플로 트와이스 사나님의 프로필을 사용했기 때문에 나머지 내용도 참고했다. 먼저 지난 포스팅에 프로필 사진이 네모로 그려지는 상태로 끝냈기 때문에 이걸 어떻게 동그랗게 자르는지 알아보자.

 

 

CALayer

UIView는 layer라는 인스턴스를 가지고 있어서 이것을 통해 화면에 내용을 그린다. view는 화면에 자리하기 위한 논리적인 사각형 범위와 속성들을 가지고, layer는 이 범위를 실제로 화면에 그리는 역할을 수행하는 것으로 분리되어 있다. 그리고 외곽선, 그림자 등 몇가지 렌더링 효과를 쉽게 설정할 수 있게 property를 제공한다.

 

 

cornerRadius

이 옵션은 모서리의 곡률을 지정한다. 적용해 보기 위해서 화면 구성을 좀 바꾸자. 이전에는(이름 밖에 없었지만) scrollView에 바로 label을 추가했는데, 아래쪽 내용을 담을 수 있는 scrollBody를 추가했다. 이 view의 모서리를 둥글게 만들어 보자.

 

모서리가 둥근 사각형으로 헤더와 바디를 분리해서 그리도록 한다.

 

모든 view는 layer를 가지고 있어서 바로 접근할 수 있다. scrollBody의 cornerRadius를 설정해서 둥글게 보이도록 만들자. 이제 nameLabel을 포함한 프로필 상세 내용은 이 scrollBody에 추가할 것이다.

 

lazy var scrollBody: UIView = {
	let scrollBody = UIView()
	scrollBody.translatesAutoresizingMaskIntoConstraints = false
	scrollBody.backgroundColor = UIColor.white
	scrollBody.layer.cornerRadius = 20

	return scrollBody
}()

 

프로필 이미지는 UIImageView로 만들었다. UIImageView는 같은 방법으로 cornerRadius를 줘도 바로 모서리가 둥글게 보이지 않는다. 이미지 또한 하나의 layer이기 때문이다. layer는 view와 동일하게 sublayer를 가질 수 있는데, 이미지를 그리는 UIImageView의 경우 자기 자신을 그리는 layer 하위에 이미지를 그리는 layer를 가지고 있다. 그리고 특별히 설정하지 않으면 이 하위 layer를 마스킹 하지 않기 때문에 이미지가 잘려서 보이지 않는다.

 

 

UIImageView는 이미지를 그리기위한 layer를 따로 가지고 있다.

 

masksToBounds

masksToBounds 옵션을 켜주면 layer는 하위에 layer들을 자기 범위까지 잘라서 화면에 그린다. 이제 cornerRadius를 적용한 layer의 범위 안쪽 이미지만 화면에 그려진다.

layer에서 기본적으로 제공하는 property를 조작하는 것은 크게 어려운 문법이 필요하지 않아서 몇가지 테스트 해 보면 쉽게 알 수 있다. 단 layer는 UIColor가 아니라 alpha값을 가지는 CGColor라는 색을 사용한다. UIColor도 쉽게 CGColor로 변환할 수 있는 getter를 제공한다. 프로필 이미지를 둥글게 자르는 전체 설정은 다음 코드로 구현할 수 있다.

 

profileImage.layer.masksToBounds = true
profileIamge.layer.cornerRadius = 100    // half of image frame size
profileImage.layer.borderWidth = 5
profileImage.layer.borderColor = UIColor.systemBlue.cgColor    // convert UIColor to CGColor

 

result

 

그림자는 layer를 사용한건 아니지만 layer로도 물론 구현할 수 있다.

 

masksToBounds 옵션을 켜주면 layer는 하위에 layer들을 자기 범위까지 잘라서 화면에 그린다. 이제 cornerRadius를 적용한 layer의 범위 안쪽 이미지만 화면에 그려진다.