[iOS] UIView layer로 뷰 그리기, 그림자

예시를 통해 빠르게 알아보겠습니다.

 

let testView = UIView()

view.addSubview(testView)


testView.translatesAutoresizingMaskIntoConstraints = false
NSLayoutConstraint.activate([
	testView.widthAnchor.constraint(equalToConstant: 300),
	testView.heightAnchor.constraint(equalToConstant: 300),
	testView.centerXAnchor.constraint(equalTo: view.centerXAnchor),
	testView.centerYAnchor.constraint(equalTo: view.centerYAnchor)
])

testView.backgroundColor = .systemRed
testView.layer.opacity = 0.5
testView.layer.cornerRadius = 50
testView.layer.borderWidth = 5
testView.layer.borderColor = UIColor.systemBlue.cgColor

레이어의 투명도를 0.5로 하니까 테두리 색 역시 투명도가 0.5가 됐습니다.

뷰의 백그라운드 색을 빨강으로 했는데 레이어에 투명도를 조절했더니 색이 바뀌네요.

그럼 레이어에 백그라운드 색을 바꿔보겠습니다.

let testView = UIView()

view.addSubview(testView)


testView.translatesAutoresizingMaskIntoConstraints = false
NSLayoutConstraint.activate([
	testView.widthAnchor.constraint(equalToConstant: 300),
	testView.heightAnchor.constraint(equalToConstant: 300),
	testView.centerXAnchor.constraint(equalTo: view.centerXAnchor),
	testView.centerYAnchor.constraint(equalTo: view.centerYAnchor)
])

testView.backgroundColor = .systemRed
testView.layer.opacity = 0.5
testView.layer.cornerRadius = 50
testView.layer.borderWidth = 5
testView.layer.borderColor = UIColor.systemBlue.cgColor

testView.layer.backgroundColor = UIColor.white.cgColor

 

뷰의 백그라운드 색이 전혀보이지 않네요.

 

let testView = UIView()

view.addSubview(testView)


testView.translatesAutoresizingMaskIntoConstraints = false
NSLayoutConstraint.activate([
	testView.widthAnchor.constraint(equalToConstant: 300),
	testView.heightAnchor.constraint(equalToConstant: 300),
	testView.centerXAnchor.constraint(equalTo: view.centerXAnchor),
	testView.centerYAnchor.constraint(equalTo: view.centerYAnchor)
])

testView.backgroundColor = .systemRed
testView.layer.opacity = 0.5
testView.layer.cornerRadius = 50
testView.layer.borderWidth = 5
testView.layer.borderColor = UIColor.systemBlue.cgColor

testView.layer.backgroundColor = UIColor.white.cgColor
testView.layer.shadowOpacity = 1
testView.layer.shadowRadius = 0
testView.layer.shadowOffset = CGSize(width: 50, height: 50)
testView.layer.shadowColor = UIColor.systemGreen.cgColor

 

testView.layer.shadowRadius = 0

testView.layer.shadowRadius = 10

shadowOffset은 shadow의 시작점입니다. testView의 왼쪽상단을 0.0으로 보고 50.50만큼 떨어져서 그립니다.

shdowRadius가 높아지면 그림자의 가장자리가 흐려집니다.

 

여기서 testView.layer.shadowPath = UIBezierPath(rect: testView.bounds).cgPath를 하면 그림자가 생기지 않습니다. 

shadowPath는 그림자의 모양을 결정하는데 testView.bounds가 (0, 0, 0, 0)이기 때문입니다.

 

뷰를 let testView = UIView(frame: CGRect(x: 0, y: 0, width: 300, height: 300))로 수정하면 정상적으로 나옵니다.

 

let testView = UIView(frame: CGRect(x: 0, y: 0, width: 300, height: 300))
view.addSubview(testView)


testView.translatesAutoresizingMaskIntoConstraints = false
NSLayoutConstraint.activate([
	testView.widthAnchor.constraint(equalToConstant: 300),
	testView.heightAnchor.constraint(equalToConstant: 300),
	testView.centerXAnchor.constraint(equalTo: view.centerXAnchor),
	testView.centerYAnchor.constraint(equalTo: view.centerYAnchor)
])

testView.backgroundColor = .systemRed
testView.layer.opacity = 0.5
testView.layer.cornerRadius = 50
testView.layer.borderWidth = 5
testView.layer.borderColor = UIColor.systemBlue.cgColor

testView.layer.backgroundColor = UIColor.black.cgColor
testView.layer.shadowOpacity = 1
testView.layer.shadowRadius = 10
testView.layer.shadowOffset = CGSize(width: 50, height: 50)
testView.layer.shadowColor = UIColor.systemGreen.cgColor
testView.layer.shadowPath = UIBezierPath(rect: testView.bounds).cgPath

 

 

testView.layer.shadowPath = UIBezierPath(rect: CGRect(x: 0, y: 0, width: testView.bounds.width, height: testView.bounds.height/2)).cgPath