이 과정에서는 앱에서 작업 및 탐색 창을 구현하는 방법을 설명합니다.
Wear OS by Google을 위한 디자인의 일부로 다음과 같은 두 개의 대화식 창을 사용할 수 있습니다.
-
탐색 창. 사용자가 앱에서 뷰 간에 전환하도록 할 수 있습니다.
-
다중 페이지 탐색 창. 탐색 창의 콘텐츠를 한 페이지 또는 여러 페이지에 표시할 수 있습니다. 탐색 창의 콘텐츠를 여러 페이지에 표시하려면 값이
multiPage
로 설정된app:navigationStyle
속성을 사용합니다.
-
다중 페이지 탐색 창. 탐색 창의 콘텐츠를 한 페이지 또는 여러 페이지에 표시할 수 있습니다. 탐색 창의 콘텐츠를 여러 페이지에 표시하려면 값이
-
작업 창. 앱에서 일반적인 작업에 쉽게 액세스할 수 있습니다. 작업 창은 화면 하단에 나타나며 스마트폰의 작업 모음과 유사한 상황별 사용자 작업이 표시됩니다. 작업 창은 사용자가 스크롤 콘텐츠의 상단 또는 하단에 도달하면 미리보기가 구현됩니다.
-
제목 설정:
WearableActionDrawerView
의setTitle()
메서드 또는app:drawerTitle
속성을 사용하여 작업 창의 제목을 설정할 수 있습니다.
-
제목 설정:

그림 1. 탐색 및 작업 창

이 페이지에 설명된 클래스에 관한 자세한 내용은 API 참조에서
androidx.wear.widget.drawer
패키지를 참조하세요.
클래스는 Wear UI 라이브러리에 있습니다. Wear UI 라이브러리, 그리고 Wear UI 라이브러리로 대체되는 지원 중단된 클래스(작업 및 탐색 창에 사용되던 이전 클래스 포함)에 관한 자세한 내용은 Wear UI 라이브러리 사용을 참조하세요.
창 레이아웃 만들기
앱에 작업 또는 탐색 창을 추가하려면
WearableDrawerLayout
객체가 있는 사용자 인터페이스를 레이아웃의 루트 뷰로 선언합니다.
WearableDrawerLayout
내에서 콘텐츠가 스크롤되는 경우 중첩된 스크롤을 지원해야 합니다.
예를 들어 다음 레이아웃에서는 세 개의 하위 뷰가 있는
WearableDrawerLayout
즉, 기본 콘텐츠, 탐색 창, 작업 창이 있는 LinearLayout
을 사용합니다.
<androidx.wear.widget.drawer.WearableDrawerLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:id="@+id/drawer_layout" android:layout_width="match_parent" android:layout_height="match_parent"> <ScrollView android:id="@+id/content" android:layout_width="match_parent" android:layout_height="match_parent" android:nestedScrollingEnabled="true"> <LinearLayout android:id="@+id/linear_layout" android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical" /> </ScrollView> <android.support.wear.widget.drawer.WearableNavigationDrawerView android:id="@+id/top_navigation_drawer" android:layout_width="match_parent" android:layout_height="match_parent"/> <android.support.wear.widget.drawer.WearableActionDrawerView android:id="@+id/bottom_action_drawer" android:layout_width="match_parent" android:layout_height="match_parent" app:actionMenu="@menu/action_drawer_menu"/> </androidx.wear.widget.drawer.WearableDrawerLayout>
참고:
WearableDrawerLayout
클래스는 Wearable Support Library에서 지원 중단된 유사한 클래스를 대체합니다.
다중 페이지 탐색 창 만들기
기본적으로 탐색 창은 단일 페이지 창입니다. 그러나 단일 페이지 창이 앱에 적합하지 않을 수 있으며, 특히 앱의 뷰가 7개보다 많거나 아이콘으로 쉽게 표현되지 않는 뷰가 있는 경우에는 더욱 그렇습니다. 다중 페이지 탐색 창을 만들려면 navigationStyle="multiPage"
속성을 창에 적용합니다. 예를 들면 다음과 같습니다.
<androidx.wear.widget.drawer.WearableNavigationDrawerView android:id="@+id/top_drawer" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@android:color/holo_red_light" app:navigationStyle="multiPage">
창 콘텐츠 초기화
활동의 기본 단계 중 하나로서 창의 항목 목록을 초기화합니다. 탐색 창 콘텐츠를 채우려면 WearableNavigationDrawerAdapter
를 확장해야 합니다. 작업 창 콘텐츠는 다음과 같이 app:actionMenu
속성을 사용하여 레이아웃 XML 파일에서 채울 수 있습니다.
app:actionMenu="@menu/action_drawer_menu"
다음은 창 콘텐츠 초기화 방법을 보여줍니다.
Kotlin
class MainActivity : Activity(), MenuItem.OnMenuItemClickListener { private lateinit var wearableDrawerLayout: WearableDrawerLayout private lateinit var wearableNavigationDrawer: WearableNavigationDrawerView private lateinit var wearableActionDrawer: WearableActionDrawerView ... override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContentView(R.layout.activity_main) ... // Top navigation drawer wearableNavigationDrawer = findViewById(R.id.top_navigation_drawer) wearableNavigationDrawer.setAdapter(YourImplementationNavigationAdapter(this)) // Peeks navigation drawer on the top. wearableNavigationDrawer.controller.peekDrawer() // Bottom action drawer wearableActionDrawer = findViewById<WearableActionDrawerView>(R.id.bottom_action_drawer).apply { // Peeks action drawer on the bottom. controller.peekDrawer() setOnMenuItemClickListener(this@MainActivity) } } }
자바
public class MainActivity extends Activity implements OnMenuItemClickListener { private WearableDrawerLayout wearableDrawerLayout; private WearableNavigationDrawerView wearableNavigationDrawer; private WearableActionDrawerView wearableActionDrawer; ... @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); ... // Top navigation drawer wearableNavigationDrawer = (WearableNavigationDrawerView) findViewById(R.id.top_navigation_drawer); wearableNavigationDrawer.setAdapter(new YourImplementationNavigationAdapter(this)); // Peeks navigation drawer on the top. wearableNavigationDrawer.getController().peekDrawer(); // Bottom action drawer wearableActionDrawer = (WearableActionDrawerView) findViewById(R.id.bottom_action_drawer); // Peeks action drawer on the bottom. wearableActionDrawer.getController().peekDrawer(); wearableActionDrawer.setOnMenuItemClickListener(this); } }
맞춤 창 뷰 만들기
창에서 맞춤 뷰를 사용하려면
WearableDrawerView
를
WearableDrawerLayout
에 추가합니다. 미리보기 뷰와 창 콘텐츠를 설정하려면 이 둘을 WearableDrawerView
의 하위로 추가하고 peekView
및 drawerContent
속성에서 각각 ID를 지정합니다. 또한, android:layout_gravity
속성의 top
또는 bottom
값을 사용하여 창 위치를 지정합니다(top
및 bottom
만 지원됨).
맞춤 미리보기 뷰에서는 자체 상단 및 하단 패딩을 지정해야 합니다.
다음 예제에서는 미리보기 뷰와 창 콘텐츠가 있는 상단 창을 지정합니다.
<androidx.wear.widget.drawer.WearableDrawerView android:layout_width="match_parent" android:layout_height="match_parent" android:layout_gravity="top" android:background="@color/red" app:drawerContent="@+id/drawer_content" app:peekView="@+id/peek_view"> <FrameLayout android:id="@id/drawer_content" android:layout_width="match_parent" android:layout_height="match_parent"> <!-- Drawer content goes here. --> </FrameLayout> <LinearLayout android:id="@id/peek_view" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_horizontal" android:paddingTop="8dp" android:paddingBottom="8dp" android:orientation="horizontal"> <!-- Peek view content goes here. --> </LinearLayout> </androidx.wear.widget.drawer.WearableDrawerView>
창 이벤트 수신
창 이벤트를 수신하려면
WearableDrawerLayout
의 setDrawerStateCallback()
을 호출하여 WearableDrawerLayout.DrawerStateCallback
구현에 전달합니다. 이 추상 클래스는 onDrawerOpened()
, onDrawerClosed()
, onDrawerStatechanged()
와 같은 창 이벤트 콜백을 제공합니다.
창 미리보기
창의 미리보기를 구현하려면 peekDrawer()
, closeDrawer()
및 openDrawer()
에 액세스하도록 getController()
를 호출합니다.
예를 들면 다음과 같습니다.
Kotlin
wearableActionDrawer.controller.peekDrawer()
자바
wearableActionDrawer.getController().peekDrawer();
작업이 여러 개인 경우 기본적으로 첫 번째 작업이 갈매기형 기호와 함께 작업 창에 표시됩니다. 첫 번째 작업을 표시하지 않고 더보기 아이콘(세로 점 세 개)만 표시하려면 showOverflowInPeek
플래그를 true
로 설정하여 기본 동작을 재정의하세요. 예를 들면 다음과 같습니다.
<androidx.wear.widget.drawer.WearableActionDrawerView android:id="@+id/bottom_drawer" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@android:color/holo_blue_dark" app:showOverflowInPeek="true"/>
기본적으로 작업 창은 정상적으로 스크롤하든 급하게 스크롤하든 사용자가 기본 스크롤 콘텐츠(즉, NestedScrollingChild
를 구현하는 뷰)의 상단 또는 하단에 도달하면 미리보기가 구현됩니다. 사용자가 아래로 스크롤할 때마다 창의 미리보기를 구현하려면 actionDrawer.setPeekOnScrollDownEnabled()
메서드를 true
로 설정하세요.
기본적으로 탐색 창은 정상적으로 스크롤하든 급하게 스크롤하든 사용자가 콘텐츠의 상단에 도달하면 미리보기가 구현됩니다.