안녕하세요:) 스크롤에 따라 스스륵..하고 사라지는 Collapsable HeaderView에 관해 알아보려고 합니다.
당근마켓 클론코딩을 하면서 이런 헤더뷰가 있었거든요.
우선 제가 참고한 사이트들은 두가지입니다!
특히 두번째 링크를 통해 힌트를 좀 얻을 수 있었는데요. 저는 해당 링크를 참조하여..이렇게 구현을 했습니다.
// 스크롤에 따라 최 상단 헤더뷰 Collapsable하게
func scrollViewDidScroll(_ scrollView: UIScrollView) {
if scrollView.contentOffset.y < 0 {
headerHeight?.constant = max(abs(scrollView.contentOffset.y), minHeight)
}
else{
headerHeight?.constant = minHeight
}
let offset = -scrollView.contentOffset.y
let transparent = (offset-50)/100
upperheader?.alpha = transparent
}
살펴보기에 앞서 가장 먼저 해주셔야 하는것은 전체 헤더뷰에 Height값을 오토로 걸어주고 그 오토값을 Outlet선언 해주듯이 쭈욱 끌어서 선언해주셔야합니다! 이 부분이 가장 중요하니 꼭 해주세요
@IBOutlet var headerViewHeightConstraint: NSLayoutConstraint!{
didSet {
// maxH는 전체 헤더뷰의 Height값
headerViewHeightConstraint.constant = maxH
}
}
자 이제 하나하나 살펴보자면 scrollViewDidScroll의 경우는 영어 그대로 스크롤시에 동작하는 메서드입니다.
컬렉션뷰, 테이블뷰도 모두 스크롤 뷰와 한팀인거 아시죠? 걔네들도 다 이 scrollViewDidScroll 메서드를 사용할 수 있습니다!
자 근데 왜 조건문을 scrollView.contentOffset.y<0 으로 했을까요? 스크롤을 아래로 내리면 scrollView.contentOffset.y 가 0보다 커져야 하는거 아냐? 라는 궁금증이 생기실 수 있을 것 같아요
그 이유는!
짠! 보시는 것과 같이 처음 스타트가 음수값이고 y값이 0보다 커지기 전까지 해당 뷰가 아예 사라져버려야하기 때문입니다.
생각보다 별거 아니죠?ㅎㅎ 전 혼자 얼마나 헤맸는지 몰라요
자 다음은 if문 입니다.(코드에 보이는 minHeight은 원하는 헤더뷰가 사라지고 나서의 Height값입니다. 원래 Height값이 300이고 사라진 헤더뷰가 100이면 200으로 잡아주면 되겠죠?)
if scrollView.contentOffset.y < 0 {
headerHeight?.constant = max(abs(scrollView.contentOffset.y), minHeight)
}
else{
headerHeight?.constant = minHeight
}그러면 이제 우리가 본 것처럼 처음엔 y값이 음수니까 스크롤을 할때 0보다 커지기 전까지는 값이 점차 작아질겁니다. -200, -150, -100,...-1 까지!
때문에 점차 작아지는 음수값에 절댓값을 주고 200이라는 고정 Height값과 비교하여 둘 중에 작은 값이 헤더뷰의 Height값이 되게 한다면?
우리가 스크롤을 내릴경우 해당 헤더뷰의 높이가 점점 줄어들겠죠?ㅎㅎ 그게 바로 if문 안에 있는 코드입니다! else문은 y값이 양수가 되는 순간 더 이상 줄어들지 않고 우리가 처음에 계산해서 정해놓은 200이라는 값을 유지하게 되는거구요.
이제 Collapsable하게는 구현이 되었습니다 그 밑에 있는
이 코드는 스크롤에 따라서 투명도를 변화하게 한건데요
let offset = -scrollView.contentOffset.y
let transparent = (offset-50)/100
// upperheader는 사라지게 만들고자 하는 헤더뷰(UIView) 선언 이름
upperheader?.alpha = transparent 투명도는 0일때 완전 투명이고 1일때 완전 불투명이기 때문에 그 값을 조정해주기가 좀 힘들었습니다..
뭔가 더 쉽게 할 수 있을 것 같은데 머리가 안돌아가는 느낌?
그래서 그냥 offset이 -150정도에서 시작해서 -1까지 가니까 양수로 바꿔주고..50빼주면 100이고..!
100부터 점점 작아지는 애를 100으로 나눠주면 1에서 0으로 가게 될거라고 생각했어요 alpha값은 그렇게 조정했습니다ㅎㅎ
오늘은 여기까지 입니다! 감사합니다!!