(해체) 작업 표시줄 계속

(분해)작업 표시줄의 두 번째 부분에 오신 것을 환영합니다. 첫 번째 부분에서는 제목과 자막을 설정하는 방법을 살펴보았습니다. 그리고 우리는 뒤로 탐색을 간단히 다시 방문했습니다. 오늘의 게시물은 ScaffoldDemo라는 작은 예제를 기반으로 합니다. 해당 GitHub 리포지토리는 이 문서의 맨 아래에 링크되어 있습니다.

아주 옛날에 Android 기기에는 뒤로 이동하거나 홈 화면으로 이동하는 하드웨어 키가 있었습니다. 소위 옵션 메뉴를 여는 전용 메뉴 버튼도 있었습니다. 예를 들어 Wikipedia 기사HTC Dream에서 찾을 수 있습니다. 나중에 이러한 하드웨어 키는 가상이 되었습니다. 그리고 옵션 메뉴는 액션바, 즉 앱바로 이동했습니다. 우리(개발자)에게 underlying machanics은 동일하게 유지되었습니다. 여기에는 다음이 포함됩니다.

메뉴를 정의하는 xml 파일 생성

구현onCreateOptionsMenu()(일반적으로 코드는 xml 파일을 확장합니다

onOptionsItemSelected()에서 항목 클릭에 반응

이제 이것이 선언적 세계로 어떻게 번역됩니까? 실제로 매우 간단합니다.

@Composable
fun Content() {
  ScaffoldDemoTheme {
    Scaffold(topBar = {
      TopAppBar(title = {
        Column {
          Text("Title")
          Text("Subtitle", style = MaterialTheme.typography.subtitle1)
        }
      },
        actions = {
          IconButton(onClick = {
            println("Icons.Default.Add")
          }) {
            Icon(Default.Add, null)
          }
          IconButton(onClick = {
            println("Icons.Default.Delete")
          }) {
            Icon(Default.Delete, null)
          }
        })
    }) {
      MyContent()
    }
  }
}

문서는 다음과 같이 말합니다.

The actions displayed at the end of the TopAppBar.
This should typically be IconButtons. The default
layout here is a Row, so icons inside will be placed
horizontally.

이것은 편리하고 구현하기 쉽지만 이전 접근 방식보다 유연성이 떨어집니다. 다음 파일은 내 앱 중 하나의 옵션 메뉴의 일부를 나타냅니다.

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:app="http://schemas.android.com/apk/res-auto">
  <item
    android:id="@+id/new_entry"
    android:icon="@drawable/ic_baseline_create_24"
    app:showAsAction="ifRoom"
    android:title="@string/menu_new_entry" />
  <item
    android:id="@+id/set_date"
    android:title="@string/menu_set_date" />
  …
</menu>

눈치채셨나요ifRoom ? 즉, 충분한 공간이 있으면 앱바에 보이는 아이콘으로 표시하고 그렇지 않으면 다음과 같은 메뉴에 표시합니다.



Compose에서 비슷한 작업을 수행하려면 DropdownMenu 을 사용합니다.

A DropdownMenu behaves similarly to a Popup, and will use
the position of the parent layout to position itself on screen.
Commonly a DropdownMenu will be placed in a Box with a
sibling that will be used as the 'anchor'. Note that a
DropdownMenu by itself will not take up any space in a layout,
as the menu is displayed in a separate window, on top of other
content.

이것이 어떻게 코드로 변환됩니까?

@Composable
fun Content() {
  var menuOpened by remember { mutableStateOf(false) }
  ScaffoldDemoTheme {
    Scaffold(topBar = {
      TopAppBar(title = {
        Column {
          Text("Title")
          Text("Subtitle", style = MaterialTheme.typography.subtitle1)
        }
      },
        actions = {
          Box {
            IconButton(onClick = {
              menuOpened = true
            }) {
              Icon(Default.MoreVert, null)
              DropdownMenu(expanded = menuOpened,
                onDismissRequest = {
                  menuOpened = false
                }) {
                DropdownMenuItem(onClick = {
                  menuOpened = false
                }) {
                  Text("Item #1")
                }
                Divider()
                DropdownMenuItem(onClick = {
                  menuOpened = false
                }) {
                  Text("Item #2")
                }
              }
            }
          }
        })
    }) {
      MyContent()
    }
  }
}

이제 보기에는 좋아 보이지만 이전 세계와 같은 레이아웃은 아닙니다. 다음과 같이 수직 위치를 조정할 수 있습니다.

offset = DpOffset(0.dp, (-20).dp),

그러나 이것은 도로 중간에 떠납니다.



다음과 같이 활용할 수 있는 onGloballyPositioned라는 수정자가 있습니다.

var height: Int
Box(modifier = Modifier.onGloballyPositioned {
  height = it.size.height
}) {
  IconButton(onClick = {

그러나 Int는 dp이기 때문에 이 offset 값을 DpOffset로 변환해야 합니다.

offset = DpOffset(
  0.dp,
  -(LocalDensity.current.density * height).dp
),

자, 좋아 보입니다. Compose의 메뉴 지원에 대해 어떻게 생각하시나요? 댓글로 여러분의 생각을 공유해주세요.


source