167 lines
6.8 KiB
Plaintext
167 lines
6.8 KiB
Plaintext
page.title=Supporting Keyboard Navigation
|
|
|
|
trainingnavtop=true
|
|
|
|
@jd:body
|
|
|
|
<div id="tb-wrapper">
|
|
<div id="tb">
|
|
|
|
<h2>This lesson teaches you to</h2>
|
|
<ol>
|
|
<li><a href="#Test">Test Your App</a></li>
|
|
<li><a href="#Tab">Handle Tab Navigation</a></li>
|
|
<li><a href="#Direction">Handle Directional Navigation</a></li>
|
|
</ol>
|
|
|
|
<h2>You should also read</h2>
|
|
<ul>
|
|
<li><a href="{@docRoot}training/accessibility/index.html">Implementing Accessibility</a></li>
|
|
</ul>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<p>In addition to soft input methods (such as on-screen keyboards), Android supports
|
|
physical keyboards attached to the device. A keyboard offers not only a convenient
|
|
mode for text input, but also offers a way for users to navigate and
|
|
interact with your app. Although most hand-held devices such as phones use touch as the
|
|
primary mode of interaction,
|
|
tablets and similar devices are growing in popularity and many users like to attach
|
|
keyboard accessories.</p>
|
|
|
|
<p>As more Android devices offer this kind of experience, it's important that
|
|
you optimize your app to support interaction through a keyboard. This lesson describes
|
|
how you can better support navigation with a keyboard.</p>
|
|
|
|
<p class="note"><strong>Note:</strong>
|
|
Supporting of directional navigation in your application is also important in ensuring that
|
|
your application is <a href="{@docRoot}guide/topics/ui/accessibility/apps.html">accessible</a>
|
|
to users who do not navigate using visual cues. Fully supporting directional navigation in your
|
|
application can also help you automate <a href="{@docRoot}tools/testing/testing_ui.html">user
|
|
interface testing</a> with tools like <a
|
|
href="{@docRoot}tools/help/uiautomator/index.html">uiautomator</a>.</p>
|
|
|
|
|
|
|
|
<h2 id="Test">Test Your App</h2>
|
|
|
|
<p>It's possible that users can already navigate your app using a keyboard, because the
|
|
Android system enables most of the necessary behaviors by default.</p>
|
|
|
|
<p>All interactive widgets provided by the Android framework (such as {@link android.widget.Button}
|
|
and {@link android.widget.EditText}) are focusable. This means users can navigate with
|
|
control devices such as a D-pad or keyboard and each widget glows or otherwise changes its
|
|
appearance when it gains input focus.</p>
|
|
|
|
<p>To test your app:</p>
|
|
<ol>
|
|
<li>Install your app on a device that offers a hardware keyboard.
|
|
<p>If you don't have a hardware device with a keyboard, connect a Bluetooth keyboard
|
|
or a USB keyboard (though not all devices support USB accessories).</p>
|
|
<p>You can also use the Android emulator:</p>
|
|
<ol>
|
|
<li>In the AVD Manager, either click <strong>New Device</strong> or
|
|
select an existing profile and click <strong>Clone</strong>.</li>
|
|
<li>In the window that appears, ensure that <strong>Keyboard</strong> and
|
|
<strong>DPad</strong> are enabled.</li>
|
|
</ol>
|
|
</li>
|
|
<li>To test your app, use only the Tab key to navigate through your UI, ensuring that
|
|
each UI control gets focus as expected.
|
|
<p>Look for any instances in which the focus moves in a way you don't expect.</p>
|
|
</li>
|
|
<li>Start from the beginning of your app and instead use the direction controls
|
|
(arrow keys on the keyboard) to navigate your app.
|
|
<p>From each focusable element in your UI, press Up, Down, Left, and Right.</p>
|
|
<p>Look for any instances in which the focus moves in a way you don't expect.</p>
|
|
</li>
|
|
</ol>
|
|
|
|
<p>If you encounter any instances where navigating with the Tab key or direction controls
|
|
does not do what you expect, specify where the focus should go in your layout, as discussed
|
|
in the following sections.</p>
|
|
|
|
|
|
|
|
<h2 id="Tab">Handle Tab Navigation</h2>
|
|
|
|
<p>When a user navigates your app using the keyboard Tab key,
|
|
the system passes input focus between elements based
|
|
on the order in which they appear in the layout. If you use a relative layout, for example,
|
|
and the order of elements on the screen is different than the order in the file, then you might need
|
|
to manually specify the focus order.</p>
|
|
|
|
<p>For example, in the following layout, two buttons are aligned to the right side and a text field
|
|
is aligned to the left of the second button. In order to pass focus from the first button to the
|
|
text field, then to the second button, the layout needs to explicitly define the focus order
|
|
for each of the focusable elements with the <a
|
|
href="{@docRoot}reference/android/view/View.html#attr_android:nextFocusForward">{@code
|
|
android:nextFocusForward}</a> attribute:</p>
|
|
|
|
<pre>
|
|
<RelativeLayout ...>
|
|
<Button
|
|
android:id="@+id/button1"
|
|
android:layout_alignParentTop="true"
|
|
android:layout_alignParentRight="true"
|
|
android:nextFocusForward="@+id/editText1"
|
|
... />
|
|
<Button
|
|
android:id="@+id/button2"
|
|
android:layout_below="@id/button1"
|
|
android:nextFocusForward="@+id/button1"
|
|
... />
|
|
<EditText
|
|
android:id="@id/editText1"
|
|
android:layout_alignBottom="@+id/button2"
|
|
android:layout_toLeftOf="@id/button2"
|
|
android:nextFocusForward="@+id/button2"
|
|
... />
|
|
...
|
|
</RelativeLayout>
|
|
</pre>
|
|
|
|
<p>Now instead of sending focus from {@code button1} to {@code button2} then {@code editText1}, the
|
|
focus appropriately moves according to the appearance on the screen: from
|
|
{@code button1} to {@code editText1} then {@code button2}.</p>
|
|
|
|
|
|
<h2 id="Direction">Handle Directional Navigation</h2>
|
|
|
|
<p>Users can also navigate your app using the arrow keys on a
|
|
keyboard (the behavior is the same as when navigating with a D-pad or trackball).
|
|
The system provides a best-guess as to which view should be given focus
|
|
in a given direction based on the layout of the views on screen. Sometimes, however, the system
|
|
might guess wrong.</p>
|
|
|
|
<p>If the system does not pass focus to the appropriate view when navigating in a given direction,
|
|
specify which view should receive focus with the following attributes:</p>
|
|
<ul>
|
|
<li><a href="{@docRoot}reference/android/view/View.html#attr_android:nextFocusUp">{@code
|
|
android:nextFocusUp}</a></li>
|
|
<li><a href="{@docRoot}reference/android/view/View.html#attr_android:nextFocusDown">{@code
|
|
android:nextFocusDown}</a></li>
|
|
<li><a href="{@docRoot}reference/android/view/View.html#attr_android:nextFocusLeft">{@code
|
|
android:nextFocusLeft}</a></li>
|
|
<li><a href="{@docRoot}reference/android/view/View.html#attr_android:nextFocusRight">{@code
|
|
android:nextFocusRight}</a></li>
|
|
</ul>
|
|
|
|
<p>Each attribute designates the next view to receive focus when the user navigates
|
|
in that direction, as specified by the view ID. For example:</p>
|
|
|
|
<pre>
|
|
<Button
|
|
android:id="@+id/button1"
|
|
android:nextFocusRight="@+id/button2"
|
|
android:nextFocusDown="@+id/editText1"
|
|
... />
|
|
<Button
|
|
android:id="@id/button2"
|
|
android:nextFocusLeft="@id/button1"
|
|
android:nextFocusDown="@id/editText1"
|
|
... />
|
|
<EditText
|
|
android:id="@id/editText1"
|
|
android:nextFocusUp="@id/button1"
|
|
... />
|
|
</pre>
|
|
|