✅ 진행한 기능

Partial Anchored Bottom Sheet 구현

💡문제 해결 과정 기록

내가 사용할 컴포넌트가 있나?

BottomSheet 선택 ⇒ Material Design 3에서 제공하는 컴포넌트들의 사용에 어려움이 있어 커스텀 하기로 결정했다.

Why?

• Partial - 최소화, 최대화 뿐만 아니라 중간 위치에 앵커를 추가해야한다.
• No Scrim - bottomSheet 뒤의 ui와 상호작용이 가능해야한다.

1. 일단 Draggable을 사용해보자

https://github.com/user-attachments/assets/2fbedc9e-cfa4-4ef6-837b-dbdc7d19ea21

컴포저블의 modifier에 draggable을 enable로 설정하면 해당 컴포저블은 드래그할 수 있는 상태가 된다.

draggable을 설정할때 드래그 방향을 설정하고, 드래그 이벤트가 발생했을때 지정한 방향으로의 delta를 받아 처리할 콜백인 draggableState를 추가해서 동작할 수 있다.

@Composable
fun Foo() {
    var offsetY by remember { mutableStateOf(0f) }
    
    Box(
	modifier = Modifier
	    .offset { IntOffset(0, offsetY.roundToInt()) }
	    .draggable(
       	        orientation = Orientation.Vertical,
               	state = rememberDraggableState { delta ->
			offsetY = (offsetY + delta)
               	},
       )

실제 컴포저블의 이동은 시작 위치로부터의 offset(픽셀)을 remember로 관리하고 delta만큼 변화시키며 modifier에 offset을 적용하는식으로 동작한다.

이때 offset과 delta는 실제 기기의 픽셀값이므로 다른 단위를 픽셀로 전환할때는 density 블럭안에서 처리해 줘야 한다. (modifier의 offset이 density 블럭을 사용한다.)

2. Draggable Bottom Sheet

https://github.com/user-attachments/assets/d194f90e-2469-4daa-8815-9e7619f2fc11

draggable한 영역은 bottomsheet 상단의 handle에만 한정하고

handle을 드래그 할때 offset은 sheet 전체에 적용

하지만 앵커를 적용하기 위해서는 드래그를 중단했을때의 위치와 속도에 따라 어디로 이동할지 정해야 하는데 modifier에 실험실 기능으로 anchoredDraggable이 있는것을 확인했다.

3. AnchoredDraggable

초기 위치에 해당하는 state, 각 state와 실제 기기상에서 앵커로 사용할 위치, 드래그를 중단했을때 어떤 앵커로 위치 시킬지에 대한 Threshold와 앵커로 위치시킬때 사용할 animation등을 정의한 AnchoredDraggableState를 modifier의 anchoredDraggable에 state로 사용할 수 있다.

https://github.com/user-attachments/assets/38a5e033-1f24-44b9-b95b-27df03f5e044

❗ BottomPadding

bottom sheet의 크기를 화면 전체의 크기로 설정했는데 sheet가 중간에 위치하면 sheet의 하단이 화면 아래에 가려져 content 전체를 스크롤 할 수 없는 문제가 있었다.

sheet의 content에 해당하는 영역에 bottom paddind을 추가하기 위해 AnchoredDraggableState의 anchor 포지션을 dp로 변환해 하단에 패딩으로 추가했었는데 예상과 다른 패딩이 추가되는 문제가 있었다.

하단에 패딩으로 추가할 dp값을 구하기 위해 AnchoredDraggableState에 사용한 픽셀값(Float)에 .dp로 타입을 바꿨었는데 실제 기기 해상도를 고려하지 않은 값을 패딩으로 사용하며 생긴 문제였다.

.dp 대신 with(density) { .toDp() } 으로 수정하여 문제 해결

• with(density) { .toDp() } 와 .dp의 차이

  차원을 변환할때 실제 화면의 픽셀 밀도를 고려해 스케일링 하는지 유무