.scrollTargetLayout

👋 들어가기 전

SwiftUI에서 스크롤 뷰를 이용할 때 자주 등장하는 함수인 

scrollTargetLayout을 살펴보자.

 

이번 포스틍일 기점으로 사이드 프로젝트 또는 KavSoft님의 강의를 클론코딩하면서
배우게되는 것들을 간략하게 포스팅으로 만들어서 정리해볼까한다. 

---

✊역할

스크롤 타겟으로 사용할 레이아웃을 지정

 

조금 더 정확하게 말하면  ViewAlignedScrollTargetBehavior 과 같이 사용되며 정확하게
정렬될 수 있도록 한다.

스크롤 뷰 안에서 메인 반복 컨텐츠를 포함하는 LazyStack, Vstack, Hstack 과 같은 곳에
사용된다.

---

☝️왜  ViewAlignedScrollTargetBehavior 와 함께??

scrollTargetBehavior는 스크롤 될 뷰들이 어떤 느낌으로 스크롤될지 지정하는 역할을 한다.

 

대표적으로는 .paging과 viewAligned가 있는데 차이는 다음과 같다.

 

.paging

현재 container 기반으로 한 페이지로 설정되어 넘겨진다.

코드와 함께 결과를 살펴보자.

    ScrollView(.horizontal) {
      LazyHStack(spacing: 10.0) {
        ForEach(0..<10) { item in
          Text("\(item)")
            .frame(width: 150, height: 150)
            .background(Color.blue)
            .cornerRadius(10)
            .scrollTargetLayout()
        }
      }
    }
    .scrollTargetBehavior(.paging)

 

이 때 .scrollTargetLayout의 위치를 Text부터 ForEach LazyHstack까지 모두

옮겨봤는데 결과는 다음과 같았다.

느낌을 보면 container의 based은 2칸 반 정도가 나타나고 있다.

여기서 알아볼 수 있는 점은 .scrollTargetLayout읜 .paging과는 크게 영할을 주지 않는다.

 

.viewAligned

viewAligned는 말그대로 Target으로 지정된 Layout을 기준으로 정렬한다.

이번에도 마찬가지로 scrollTargetLayout을 이동해보면 차이를 비교해보자.

 

Target: Text , ForEach, LazyHstack

 

1) 텍스트 뷰로 기준으로하니 생각보다 규칙성이 없다.

2) ForEach도 TextView와 크게 다르지 않는다.

3) LazyHstack 정확히 왼쪽에 뷰가 탁 걸리게 동작한다.

 

 

정확한 차이점은 못 느꼈지만 .scrollTargetLayout의 위치가 동작에 큰 영향을 주는 것을 확인했다.

---

출처

scrollTargetLayout(isEnabled:) | Apple Developer Documentation

 

scrollTargetBehavior(_:) | Apple Developer Documentation

 

ViewAlignedScrollTargetBehavior | Apple Developer Documentation