diff options
| -rw-r--r-- | docs/html/wear/preview/features/ui-nav-actions.jd | 181 | ||||
| -rw-r--r-- | docs/html/wear/preview/images/action_drawer.gif | bin | 0 -> 5069500 bytes | |||
| -rw-r--r-- | docs/html/wear/preview/images/nav_drawer.gif | bin | 0 -> 931505 bytes |
3 files changed, 180 insertions, 1 deletions
diff --git a/docs/html/wear/preview/features/ui-nav-actions.jd b/docs/html/wear/preview/features/ui-nav-actions.jd index ad61b98f134a..587f88f23a7b 100644 --- a/docs/html/wear/preview/features/ui-nav-actions.jd +++ b/docs/html/wear/preview/features/ui-nav-actions.jd @@ -4,4 +4,183 @@ page.tags="wear" @jd:body -<p>stub</p>
\ No newline at end of file +<div id="qv-wrapper"> +<div id="qv"> + + <h2>In this document</h2> + <ol> + <li><a href="#create a drawer">Create a Drawer Layout</a></li> + <li><a href="#initialize">Initialize the Drawer List</a></li> + <li><a href="#creating">Create a Custom View Drawer</a></li> + <li><a href="#listen to events">Listen for Drawer Events</a></li> + <li><a href=#peeking">Peeking Drawers</a></li> + </ol> + + <h2>You should also read</h2> + <ul> + <li><a href="https://spec.googleplex.com/wear/components/navigation-drawer.html"> + Navigation Drawer Design</a> </li> + <li> + <a href="https://spec.googleplex.com/wear/components/action-drawer.html"> + Action Drawer Design</a> + </ul> + + <h2>Samples</h2> + <ol> + + </ol> + +</div> +</div> +<p>Wear 2.0 adds interactive navigation and action drawers that users can pull +from the top or bottom edge of the window, respectively. The navigation drawer +appears at the top of the screen and lets users jump to different views within +the app, similar to the navigation drawer on a phone. The action drawer appears +at the bottom of the screen and provides context-specific actions for the user, +similar to the action bar on a phone. These drawers are accessible when the user +swipes from the top or bottom of the screen, and they peek when users scroll in +the opposite direction. </p> +<div class="cols"> +<div class="col-2of6"> + <img src="{@docRoot}wear/preview/images/nav_drawer.gif" alt="" style="padding:.5em"> + <p class="img-caption"> + <strong>Figure 1.</strong> Navigation and Action Drawers. + </p> +</div> +<div class="col-2of6"> + <img src="{@docRoot}wear/preview/images/action_drawer.gif" alt="" style="padding:.5em;""> +</div> +</div> +<div class="cols"> + +<p>This lesson describes how to implement action and navigation drawers in your +app using the {@code WearableDrawerLayout} APIs. +</p> + +<h2 id="create a drawer">Create a Drawer Layout</h2> +To add an action or a navigation drawer, declare your user interface with a +<code>WearableDrawerLayout</code> object as the root view of your layout. Inside + the <code>WearableDrawerLayout</code>, add one view that contains the main content + for the screen (your primary layout when the drawer is hidden) and additional + child views that contain the contents of the drawer.</h2> +<p>For example, the following layout uses a <code>WearableDrawerLayout</code> with + three child views: a <code>FrameLayout</code> to contain the main content, a + navigation drawer, and an action drawer.</p> + +<pre> +<android.support.wearable.view.drawer.WearableDrawerLayout + android:id="@+id/drawer_layout" + xmlns:android="http://schemas.android.com/apk/res/android" + android:layout_width="match_parent" + android:layout_height="match_parent" + tools:deviceIds="wear"> + + <FrameLayout + android:layout_width="match_parent" + android:layout_height="match_parent" + android:id="@+id/content_frame"/> + + <android.support.wearable.view.drawer.WearableNavigationDrawer + android:id="@+id/top_navigation_drawer" + android:layout_width="match_parent" + android:layout_height="match_parent"/> + + <android.support.wearable.view.drawer.WearableActionDrawer + android:id="@+id/bottom_action_drawer" + android:layout_width="match_parent" + android:layout_height="match_parent"/> + +</android.support.wearable.view.drawer.WearableDrawerLayout> + +</pre> +<h2 id="initialize">Initialize the Drawer List</h2> +<p>One of the first things you need to do in your activity is to initialize the +drawers list of items. You should implement {@code WearableNavigationDrawerAdapter} +to populate the navigation drawer contents. To populate the action drawer with +a list of actions, inflate an XML file into the Menu (via MenuInflater).</p> + +<p>The following code snippet shows how to initialize the contents of your drawers: +</p> +<pre> +public class MainActivity extends WearableActivity implements +WearableActionDrawer.OnMenuItemClickListener{ + private WearableDrawerLayout mwearableDrawerLayout; + private WearableNavigationDrawer mWearableNavigationDrawer; + private WearableActionDrawer mWearableActionDrawer; + + ... + + @Override + public void onCreate(Bundle savedInstanceState) { + super.onCreate(savedInstanceState); + setContentView(R.layout.activity_main); + + ...... + + + // Main Wearable Drawer Layout that wraps all content + mWearableDrawerLayout = (WearableDrawerLayout) findViewById(R.id.drawer_layout); + + // Top Navigation Drawer + mWearableNavigationDrawer = (WearableNavigationDrawer) findViewById(R.id.top_navigation_drawer); + mWearableNavigationDrawer.setAdapter(new YourImplementationNavigationAdapter(this)); + + // Peeks Navigation drawer on the top. + mWearableDrawerLayout.peekDrawer(Gravity.TOP); + + // Bottom Action Drawer + mWearableActionDrawer = (WearableActionDrawer) findViewById(R.id.bottom_action_drawer); + + // Populate Action Drawer Menu + Menu menu = mWearableActionDrawer.getMenu(); + MenuInflater inflater = getMenuInflater(); + inflater.inflate(R.menu.action_drawer_menu, menu); + mWearableActionDrawer.setOnMenuItemClickListener(this); + + // Peeks action drawer on the bottom. + mWearableDrawerLayout.peekDrawer(Gravity.BOTTOM); + } +} + +</pre> +<h2 id="creating">Create a Custom View Drawer</h2> + +<p>To use custom views in drawers, add <code>WearableDrawerView</code> to the +<code>WearableDrawerLayout</code>. To set the contents of the drawer, call <code> +<a href="https://x20web.corp.google.com/~psoulos/docs/reference/android/support/wearable/view/drawer/WearableDrawerView.html#setDrawerContent(android.view.View)">setDrawerContent(View)</a></code> + instead of manually adding the view to the hierarchy. You must also specify the + drawer position with the <code>android:layout_gravity</code> attribute. </p> +<p> The following example specifies a top drawer:</p> +<pre> +<android.support.wearable.view.drawer.WearableDrawerLayout> + <FrameLayout + android:id=”@+id/content” /> + + <WearableDrawerView + android:layout_width=”match_parent” + andndroid:layout_height=”match_parent” + android:layout_gravity=”top”> + <FrameLayout + android:id=”@+id/top_drawer_content” /> + </WearableDrawerView> +</android.support.wearable.view.drawer.WearableDrawerView> + +</pre> + +<h2 id="listen to events">Listen for Drawer Events</h2> +<p>To listen for drawer events, call {@code setDrawerStateCallback()}on your +{@code WearableDrawerLayout} and pass it an implementation of +{@code WearableDrawerLayout.DrawerStateCallback}. This interface provides callbacks + for drawer events such as <code>onDrawerOpened()</code>, + <code>onDrawerClosed(),</code> and <code>onDrawerStatechanged()</code>.</p> + +<h2 id="peeking">Peeking Drawers</h2> +<p>To set the drawers to temporarily appear, call <code>peekDrawer()</code> on +your {@code WearableDrawerLayout} and pass it the {@code Gravity} of the drawer. + This feature is especially useful because it allows immediate access to the + alternate drawer views or actions associated with it. </p> + +<pre>{@code mWearableDrawerLayout.peekDrawer</code>(<code>Gravity.BOTTOM);}</pre> + +<p>You can also call {@code setPeekContent()} on your drawer to display a custom + view when the drawer is peeking.</p> diff --git a/docs/html/wear/preview/images/action_drawer.gif b/docs/html/wear/preview/images/action_drawer.gif Binary files differnew file mode 100644 index 000000000000..b8231372cf84 --- /dev/null +++ b/docs/html/wear/preview/images/action_drawer.gif diff --git a/docs/html/wear/preview/images/nav_drawer.gif b/docs/html/wear/preview/images/nav_drawer.gif Binary files differnew file mode 100644 index 000000000000..1c3b1dc098f2 --- /dev/null +++ b/docs/html/wear/preview/images/nav_drawer.gif |
