SwiftUI - ScrollBounceBehavior

안녕하세요. 그린입니다 🍏

이번 포스팅은 SwiftUI의 ScrollBounceBehavior에 대해 관련하여 알아보려 합니다 🙋🏻

 

생각보다 간단하지만 유용한 기능이니 가볍게 봐볼까요?

 

---

ScrollBounceBehavior?

iOS 16.4 이상에서부터 사용 가능한 타입으로, 스크롤 가능한 뷰가 컨텐츠 끝에 도달했을 때 튀어오르는 방식을 정의합니다.

 

struct ScrollBounceBehavior

 

해당 구조체 타입에는 아래 세가지로 기본 정의가 되어 있어요.

 

1️⃣ automatic - 기본값으로 플랫폼과 상황에 따라서 적절한 바운스 동작을 자동으로 결정

2️⃣ always - 컨텐츠 크기와 상관없이 항상 바운스 효과를 가짐

3️⃣ basedOnSize - 컨텐츠 크기에 따라 바운스 효과가 결정

 

여기서 basedOnSize를 더 살펴보면, 컨텐츠가 스크롤 뷰보다 큰 경우에는 바운스 효과가 활성화되며, 반대로 컨텐츠 크기가 스크롤 뷰보다 작은 경우에는 바운스 효과가 비활성화 됩니다 😁

 

결국 이런 값들로 인해 사용자가 뷰 컨텐츠의 끝까지 스크롤할 때 바운스 동작을 어떻게 줄것인지를 보여주는거라고 이해하면 됩니다!

또한, 각 스크롤 축이 다른 바운스 모드를 사용하도록도 구성할 수 있어요.

 

그럼 이 타입을 실제 뷰 모디파이어에서 활용해볼까요?

 

---

scrollBounceBehavior(_:axes:)

ScrollBounceBehavior 타입을 이용하는 뷰 모디파이어로, 마찬가지로 iOS 16.4 이상에서 사용 가능합니다.

지정된 축을 따라 스크롤 가능한 뷰의 바운스 동작을 구성합니다.

 

nonisolated
func scrollBounceBehavior(
    _ behavior: ScrollBounceBehavior,
    axes: Axis.Set = [.vertical]
) -> some View

 

매개변수로는 두가지를 받죠.

 

1️⃣ behavior - 구성된 뷰 내의 스크롤 가능한 뷰에 적용할 바운스 동작으로 ScrollBounceBehavior로 정의된 값을 사용합니다.

2️⃣ axes - 동작을 적용할 축의 집합으로 기본값은 vertical입니다.

 

해당 뷰 모디파이어를 이용하면 뷰의 컨텐츠 끝까지 스크롤할 때 스크롤 가능한 뷰가 바운스되는지 여부를 나타내며, 뷰와 컨텐츠의 상대적인 크기를 고려합니다.

 

예시로, 아래 코드를 볼까요?

 

ScrollView {
    Text("Small")
    Text("Content")
}
.scrollBounceBehavior(.basedOnSize)

 

이렇게 되어 있다면, 컨텐츠가 스크롤이 필요한 경우에만 바운스 동작을 활성화하게 됩니다.

 

감이 안올 수 있으니 같은 예시를 가지고 구성하고 다른 타입 조건을 넣어 실제 동작을 볼까요?

 

import SwiftUI

struct ContentView: View {
  var colors: [Color] = [
    .red,
    .blue,
    .orange,
    .brown,
    .green,
    .black,
    .gray
  ]
  
  var body: some View {
    ScrollView {
      VStack {
        ForEach(colors, id: \.self) { color in
          Rectangle()
            .fill(color)
            .frame(height: 200)
        }
      }
    }
    🙋🏻🙋🏻🙋🏻🙋🏻🙋🏻🙋🏻🙋🏻🙋🏻🙋🏻🙋🏻🙋🏻🙋🏻🙋🏻🙋🏻🙋🏻
    .scrollBounceBehavior(.basedOnSize)
  }
}

 

간단한 여러 색상의 사각형을 보여주는 코드가 있습니다.

 

여기서 사람 손들고 있죠?

해당 부분의 값을 변경해보면서 테스트해보면 더 확실히 알 수 있어요.

 

먼저, always나 automatic으로 해볼까요?

 

 

컨텐츠가 현재는 스크롤 뷰 즉, 화면비보다 크죠.

여기서 스크롤을 하면 이렇게 바운싱 효과를 가지고 스크롤이 되는것을 볼 수 있어요.

즉, 그냥 쉽게 스크롤을 가진다~ 라고 볼 수 있죠!

이렇게 컨텐츠가 현재 스크롤 뷰보다 큰 경우엔 basedOnSize로 설정해도 동일한 결과를 가져요.

 

그런데, 가장 큰 차이는 이 컨텐츠가 현재 스크롤 뷰보다 작을 경우입니다.

 

컬러를 두가지만 주고 한번 테스트 해볼께요.

 

먼저, automatic과 always

 

 

보시는것처럼 컨텐츠가 이미 스크롤 뷰보다 작아서 다 표현됐음에도 스크롤이 되며 바운스 효과를 가지죠?

 

반면, basedOnSize로 준다면 어떨까요?

 

 

아무 동작이 없어보이지만, 스크롤을 시도하고 있습니다.

즉, 스크롤 바운스 동작이 일어나지 않아요.

결국 사용자가 보기에는 스크롤 뷰인지 모를 수 있습니다.

 

사실 이전에 이런 스크롤 뷰에 대한 포스팅을 한적이 있는데요.

 

컨텐츠 크기에 따른 자동 ScrollView 전환하기 (feat. SwiftUI)

 

요 포스팅인데, 컨텐츠 크기에 따라 스크롤 뷰로 나타낼지 스크롤 뷰로 나타내지 않을지에 대한 포스팅이였어요.

 

이 맥락이랑 똑같습니다.

결국 구동되어 사용자에게 보여지는건 같죠.

scrollBounceBehavior는 iOS 16.4 이상에서 사용 가능하기에, 사실상 여러분의 미니멈 타겟에 따라 scrollBounceBehavior을 사용할지 아니면 위 포스팅처럼 커스텀하게 SwiftUI 환경에서 구현할지 선택할 수 있다고 봅니다 😃

 

scrollBounceBehavior 모디파이어는 다음과 같은 상황들에서 유용해요.

 

1️⃣ 작은 컨텐츠를 표시할 때 불필요한 바운스 효과를 제거하고 싶은 경우

2️⃣ 특정 UI 요소에서 바운스 효과가 사용자 경험을 방해할 수 있는 경우

3️⃣ 가변적인 데이터 환경에서 스크롤 동작을 달리 주고 싶은 경우

 

즉, 결국 컨텐츠가 작아 스크롤할게 없는데 스크롤을 경험하게 하는게 오히려 어색할 수도 있다고 생각해요.

그런 입장에서 이전 포스팅을 작성했던것인데 유용하고 간편하게 scrollBounceBehavior 모디파이어가 나왔다고 볼 수 있습니다 🙋🏻

 

---

마무리

SwiftUI를 계속 사용하면서 느끼는것중 하나는 없어서 커스텀하게 만들면 꼭 몇달뒤에 나오는 느낌이 들어요ㅋㅋ

그래서 궁금해지는게 과연 내부는 어떻게 구현해놓은것일까?

커스텀하게 제 나름대로 구현해본거랑 어떤 공통점이나 차이점이 있을지 뭔가 하나의 해설을 보고 싶습니다 🥹

 

---

레퍼런스

ScrollBounceBehavior | Apple Developer Documentation

scrollBounceBehavior(_:axes:) | Apple Developer Documentation