[SwiftUI Project] Sticky Header 만들기

스크롤하면 상단에 고정되는  Sticky Header

이번에 구현할 기능은 스크롤 했을 시 상단에 고정되어 남아있는 Sticky Header입니다. 

Sticky Header는 사용되지 않는 어플이 없을 만큼 자주 볼 수 있는데요. 

 

iOS 14+ 에서 사용할 수 있는 LazyStack의 pinnedViews 옵션을 사용한다면 매우 손쉽게 구현할 수 있습니다. 

애플 공식 문서

 

이번 프로젝트에서는 HomeView.swift 에서 다음과 같이 사용하였습니다. 

  struct HomeView: View {

    var body: some View {
        ZStack {
            // Background layer
            Color.theme.background
                .ignoresSafeArea()
            
            // content layer
            VStack(spacing: 0) {
                homeHeader
                ScrollView() {
                    VStack {
                        TotalBalanceView()
                        LazyVStack(pinnedViews: [.sectionHeaders]) { <- LazyVStack으로 감싸줍니다.
                            Section(header: VStack(spacing: 0) { <- Sticky Header가 될 부분
                                listOptionBar
                                sortOptionList
                            }.background(Color.theme.background)
                            ) {
                                AllCoinListView(viewModel: viewModel) <- Sticky Header 밑에 사용될 코인 리스트
                            }
                        }
                    }
                }
                Spacer(minLength: 0)
            }
        }
    }
}

 

 

Sticky Header 참고 블로그: 

Swift: SwiftUI에서 Sticky Header 만들기