diff options
| -rw-r--r-- | docs/html/wear/preview/features/ui-nav-actions.jd | 94 |
1 files changed, 56 insertions, 38 deletions
diff --git a/docs/html/wear/preview/features/ui-nav-actions.jd b/docs/html/wear/preview/features/ui-nav-actions.jd index 1ba275fa97c1..fb1426401695 100644 --- a/docs/html/wear/preview/features/ui-nav-actions.jd +++ b/docs/html/wear/preview/features/ui-nav-actions.jd @@ -12,7 +12,7 @@ page.image=/wear/preview/images/card_drawer.png <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="#creating">Create a Custom Drawer View</a></li> <li><a href="#listen to events">Listen for Drawer Events</a></li> <li><a href=#peeking">Peeking Drawers</a></li> </ol> @@ -37,8 +37,8 @@ page.image=/wear/preview/images/card_drawer.png </div> </div> <p>As part of the <a href="http://www.google.com/design/spec-wear">Material Design</a> - for Android Wear, Wear 2.0 adds interactive navigation and action drawers. - The navigation drawer appears at the top of the screen and lets users jump to + for Android Wear, Wear 2.0 adds interactive navigation and action drawers. + 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, @@ -59,7 +59,8 @@ the opposite direction. </p> <div class="cols"> <p>This lesson describes how to implement action and navigation drawers in your -app using the {@code WearableDrawerLayout} APIs. +app using the {@code WearableDrawerLayout} APIs. For more information, see the +downloadable <a href="{@docRoot}preview/setup-sdk.html#docs-dl">API reference</a>. </p> <h2 id="create a drawer">Create a Drawer Layout</h2> @@ -99,41 +100,44 @@ To add an action or a navigation drawer, declare your user interface with a </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> +a list of actions, inflate an XML file into the Menu (via {@code 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); @@ -149,44 +153,58 @@ WearableActionDrawer.OnMenuItemClickListener{ } </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> + +<h2 id="creating">Create a Custom Drawer View</h2> + +<p>To use custom views in drawers, add <code>WearableDrawerView</code> to the +<code>WearableDrawerLayout</code>. To set the peek view and drawer contents, add + them as children of the {@code WearableDrawerView} and specify their IDs in the + {@code peek_view} and {@code drawer_content} attributes respectively. You must + also specify the drawer position with the {@code android:layout_gravity} + attribute. </p> + +<p> The following example specifies a top drawer with peek view and drawer +contents:</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> + <android.support.wearable.view.drawer.WearableDrawerView + android:layout_width="match_parent" + android:layout_height="match_parent" + android:layout_gravity="top" + android:background="@color/red" + app:drawer_content="@+id/drawer_content" + app:peek_view="@+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:orientation="horizontal"> + <!-- Peek view content goes here. --> + <LinearLayout> + </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 +<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 +<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> + alternate drawer views or actions associated with it: </p> + +<pre>{@code mWearableDrawerLayout.peekDrawer(Gravity.BOTTOM);}</pre> -<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> |