[Android Compose] 2. offset사용하여 DropDownMenu가 펼쳐지는 위치 조정하기

DropDownMenu의 위치 조정이 필요한 이유

material package에서 제공되는 DropDownMenu API는 내부에서 DropDownMenuPositionProvider에 의해 자동으로 위치가 조정되어 화면 상에 표시된다.

val popupPositionProvider = DropdownMenuPositionProvider(
    offset,
    density
) { parentBounds, menuBounds ->
    transformOriginState.value = calculateTransformOrigin(parentBounds, menuBounds)
}

만약 DropDownMenu가 표시될 위치를 조정할 수 없다면 여러 디자인적 요구사항이 반영이 될 수 없을 것이고, DropDown이 어색하게 호출될 수도 있다. 

 

이번 글에서는 DropDownMenu의 위치를 조정할 수 있는 방법에 대해 다룰 것이다.

 

 

예시에서 활용할 코드

우리는 DropDownMenu의 위치 조정을 확인하기 위해 아래 코드를 활용할 것이다.

@Composable
fun KotlinWorldButtonWithDropDownMenu() {
    // 1. DropDownMenu의 펼쳐짐 상태 정의
    var isDropDownMenuExpanded by remember { mutableStateOf(false) }

    // 2. DropDownMenu의 Expanded 상태를 변경하기 위한 버튼 정의
    Button(
        onClick = { isDropDownMenuExpanded = true }
    ) {
        Text(text = "Show Menu")
    }

    // 3. DropDownMenu 정의
    DropdownMenu(
        modifier = Modifier
            .wrapContentSize(),
        expanded = isDropDownMenuExpanded,
        onDismissRequest = { isDropDownMenuExpanded = false }
    ) {
        DropdownMenuItem(onClick = {
            println("Hello")
        }) {
            Text(text = "Print Hello")
        }
        DropdownMenuItem(onClick = {
            println("KotlinWorld")
        }) {
            Text(text = "Print KotlinWorld")
        }
    }
}

 

위코드를 이용해 DropDownMenu를 만들면 DropDownMenu가 Button의 왼쪽 아래쪽을 기준으로 펼쳐진다.

그림1. DropDown Menu Default

 

자 이제 위 DropDownMenu의 위치를 조정할 수 있는 방법에 대해 다루어보자.

 

 

DropDownMenu 위치 조정하기

DropDownMenu는 offset 파라미터를 이용해 DropDownMenu의 위치를 조정할 수 있게 해준다.

@Suppress("ModifierParameter")
@Composable
fun DropdownMenu(
    ..
    offset: DpOffset = DpOffset(0.dp, 0.dp), // offset을 이용해 위치 조정가능
    ..
)

offset은 자동으로 계산된 기준점을 기준으로 DropDownMenu가 보여질 위치를 x축과 y축 방향으로 조정할 수 있도록 해준다. 오른쪽 방향이 x축으로 +방향이고 아래쪽이 y축으로 +방향이다.

그림2. offset이 적용될 기준점과 방향

 

위의 DropDownMenu를 너무 딱 붙이기 보다 아래쪽으로 살짝 여유공간을 주고 싶다고 해보자. y축으로 12dp 만큼의 여유공간을 만드는 DropDownMenu를 다음의 코드로 만들 수 있다.

DropdownMenu(
    modifier = Modifier
        .wrapContentSize(),
    expanded = isDropDownMenuExpanded,
    offset = DpOffset(0.dp, 12.dp), // y축으로 12dp만큼의 여유공간을 만들기
    onDismissRequest = { isDropDownMenuExpanded = false }
) {
    DropdownMenuItem(onClick = {
        println("Hello")
    }) {
        Text(text = "Print Hello")
    }
    DropdownMenuItem(onClick = {
        println("KotlinWorld")
    }) {
        Text(text = "Print KotlinWorld")
    }
}

결과는 다음과 같다.

그림3. offset을 준 DropDownMenu