[iOS, Swift] Sticky Header(배달의민족, 당근마켓)

 

배달의민족                                                                                                               당근마켓

구현 아이디어

전체 스크롤 뷰에 imageView와 bottomView가 있으며 최상단에서 아래로 스크롤시 imageView의 Top은 고정되어 있어고 bottomView의 Top과 imageView의 Bottom이 붙어 이미지가 확대된다.

또한 위로 스크롤시 하나의 ScrollView에 있는것과 같이 imageView와 BottomView가 붙어 스크롤 되는 형태를 구현 하고자 했다.

구현과정

기본적인 ScrollView와 같이 imageView와 BottomView를 담되 imageVIew의 Top의 제약조건을 통해 아래로 스크롤시 imageView를 고정시키려고 했으나 전체가 스크롤되지 않는 현상이 계속 발생하였고 ScrollView의 동작 방식을 잘못 이해하고 구현했다.

중요포인트

frameLayoutGuide의 Top을 imageView의 Top과 동일하게 주되 contentLayoutGuide의 Top은 bottomView의 Top과 동일하게 주고 imageView의 Bottom과 bottomView의 Top을 붙여주면 원하는 대로 아래로 스크롤시 원하는 형태를 만들수 있고, 위로 스크롤시 imageView의 Top의 제약조건을 -y (y = scrollView.contentOffset.y) 만큼 주게 되면 실제 imageView는 ScrollView에서 처럼 화면 밖으로 밀려나는 효과를 줄 수 있었다.

또한 imageView의 content mode 는 Scale To Fill이고 imageView의 bottom과 bottomView의 Top이 붙어있는 제약조건으로 인해 세로로는 늘어나지만 가로로는 늘어나지 않아 CGAffineTransform 메소드를 이용해 대략적인 비율로 늘어날 수 있게해주었다.

결과적으로 bottomView의 constraint는 ContentLayoutGuide의 Top 과 imageView의 bottom 이라는 2개의 제약조건을 갖는다.

결과

구현 아이디어

전체 스크롤 뷰에 imageView와 bottomView가 있으며 최상단에서 아래로 스크롤시 imageView의 Top은 고정되어 있어고 bottomView의 Top과 imageView의 Bottom이 붙어 이미지가 확대된다.

또한 위로 스크롤시 하나의 ScrollView에 있는것과 같이 imageView와 BottomView가 붙어 스크롤 되는 형태를 구현 하고자 했다.

구현과정

기본적인 ScrollView와 같이 imageView와 BottomView를 담되 imageVIew의 Top의 제약조건을 통해 아래로 스크롤시 imageView를 고정시키려고 했으나 전체가 스크롤되지 않는 현상이 계속 발생하였고 ScrollView의 동작 방식을 잘못 이해하고 구현했다.

중요포인트

frameLayoutGuide의 Top을 imageView의 Top과 동일하게 주되 contentLayoutGuide의 Top은 bottomView의 Top과 동일하게 주고 imageView의 Bottom과 bottomView의 Top을 붙여주면 원하는 대로 아래로 스크롤시 원하는 형태를 만들수 있고, 위로 스크롤시 imageView의 Top의 제약조건을 -y (y = scrollView.contentOffset.y) 만큼 주게 되면 실제 imageView는 ScrollView에서 처럼 화면 밖으로 밀려나는 효과를 줄 수 있었다.

또한 imageView의 content mode 는 Scale To Fill이고 imageView의 bottom과 bottomView의 Top이 붙어있는 제약조건으로 인해 세로로는 늘어나지만 가로로는 늘어나지 않아 CGAffineTransform 메소드를 이용해 대략적인 비율로 늘어날 수 있게해주었다.

결과적으로 bottomView의 constraint는 ContentLayoutGuide의 Top 과 imageView의 bottom 이라는 2개의 제약조건을 갖는다.

결과 화면