Wear 탐색 및 작업

이 과정에서는 앱에서 작업 및 탐색 창을 구현하는 방법을 설명합니다.

Wear OS by Google을 위한 디자인의 일부로 다음과 같은 두 개의 대화식 창을 사용할 수 있습니다.

  • 탐색 창. 사용자가 앱에서 뷰 간에 전환하도록 할 수 있습니다.
    • 다중 페이지 탐색 창. 탐색 창의 콘텐츠를 한 페이지 또는 여러 페이지에 표시할 수 있습니다. 탐색 창의 콘텐츠를 여러 페이지에 표시하려면 값이 multiPage로 설정된 app:navigationStyle 속성을 사용합니다.
  • 작업 창. 앱에서 일반적인 작업에 쉽게 액세스할 수 있습니다. 작업 창은 화면 하단에 나타나며 스마트폰의 작업 모음과 유사한 상황별 사용자 작업이 표시됩니다. 작업 창은 사용자가 스크롤 콘텐츠의 상단 또는 하단에 도달하면 미리보기가 구현됩니다.

그림 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로 설정하세요.

기본적으로 탐색 창은 정상적으로 스크롤하든 급하게 스크롤하든 사용자가 콘텐츠의 상단에 도달하면 미리보기가 구현됩니다.

이전
Wear UI 라이브러리 사용
다음
실제 버튼