Android界面设计基础中控件焦点的步骤是什么

本文在安卓界面设计的基础上给大家介绍控制焦点的步骤。内容非常详细，有兴趣的朋友可以参考一下，希望对你有帮助。

安卓设备繁多，操作界面也各不相同，比如触摸屏、轨迹球、传统手机键盘等。因此，开发人员需要更好地理解当用户在应用程序界面的不同控件之间移动时，每个控件获得焦点和失去焦点的顺序，以及如何根据用户的操作习惯自定义这些顺序。

一般来说，对于特定的布局界面，安卓会自动获得合适的控件焦点顺序，这在很多情况下已经足够了。但在某些情况下也有例外。控件的下一个焦点会到达哪个控件，主要是确定当前控件在指定方向布局(上/下/左/右)，哪个是最接近的控件，它的扫描顺序是从左到右，从上到下，就像平时看书一样。

但是，这个顺序有时候会带来一点问题。例如，当控件都排列在屏幕上方时，如果用户再次按下“向上”键，将不会有任何效果。同样，当控件都在屏幕的底部、“左”、“右”时，此时按下“下”、“左”、“右”等键也不会得到控件的焦点。

在本文的示例中，我们将解释如何修改默认控件焦点顺序，以自定义特定的控件切换顺序。在该示例中，几个按钮排列成一个圆圈，该示例可在中找到

3358 Android-mt-tutorials.googlecode.com/SVN/trunk/simplefocus.

步骤1定义界面布局

首先，我们设计了界面的布局。代码如下，使用相对相对布局：

？xmlversion='1.0 '编码='utf-8 '？relativelayouxmlns : AnDroid=' http://schemas . AnDroid.com/apk/RES/AnDroid ' AnDroid : layout _ width=' fill _ parent ' AnDroid : layout _ height=' fill _ parent ' button style=' @ style/clockFaceum ' AnDroid : text=' 12 ' AnDroid : id=' @ id/button 12 ' AnDroid : layout _ alignParentTop=' true ' AnDroid

t;         android:text="1"         android:id="@+id/button1"         android:layout_below="@+id/button12"         android:layout_toRightOf="@+id/button12">     </Button>     <Button         style="@style/clockFaceNum"         android:text="10"         android:id="@+id/button10"         android:layout_below="@+id/button11"         android:layout_toLeftOf="@+id/button11">     </Button>     <Button         style="@style/clockFaceNum"         android:text="2"         android:id="@+id/button2"         android:layout_below="@+id/button1"         android:layout_toRightOf="@+id/button1">     </Button>     <Button         style="@style/clockFaceNum"         android:text="9"         android:id="@+id/button9"         android:layout_below="@+id/button10"         android:layout_toLeftOf="@+id/button10">     </Button>      <Button         style="@style/clockFaceNum"         android:text="3"         android:id="@+id/button3"         android:layout_below="@+id/button2"         android:layout_toRightOf="@+id/button2">     </Button>     <Button         style="@style/clockFaceNum"         android:text="8"         android:id="@+id/button8"         android:layout_below="@+id/button9"         android:layout_toRightOf="@+id/button9">     </Button>     <Button         style="@style/clockFaceNum"         android:text="4"         android:id="@+id/button4"         android:layout_below="@+id/button3"         android:layout_toLeftOf="@+id/button3">     </Button>     <Button         style="@style/clockFaceNum"         android:text="7"         android:id="@+id/button7"         android:layout_below="@+id/button8"         android:layout_toRightOf="@+id/button8">     </Button>     <Button         style="@style/clockFaceNum"         android:text="5"         android:id="@+id/button5"         android:layout_below="@+id/button4"         android:layout_toLeftOf="@+id/button4">     </Button>     <Button         style="@style/clockFaceNum"         android:text="6"         android:id="@+id/button6"         android:layout_below="@+id/button5"         android:layout_centerHorizontal="true">     </Button> </RelativeLayout>

上面定义的style文件如下：

<?xml version="1.0" encoding="utf-8"?> <resources>     <style         name="clockFaceNum">         <item             name="android:layout_width">38dp</item>         <item             name="android:layout_height">38dp</item>         <item             name="android:onClick">numClicked</item>         <item             name="android:textSize">9sp</item>     </style> </resources>

运行后，效果如下图：

步骤2 默认的控件焦点切换顺序

比如当用户将控件焦点点在12号按钮时，点往下的“down”按钮，默认的控件焦点切换顺序如下图：

也就是说，当在按钮12上往下按的时候，控件的焦点会切换到11，接着就是键10，如此类推。

步骤3 创建自定义的控件焦点顺序

下面，我们尝试创建自定义的控件焦点顺序，即同时允许在上面的界面中，当用户按键时，以顺时针或逆时针进行控件切换，如下图：

也就是说，允许用户当按“Down”或“Right”键时，切换顺序是顺时针方向，比如假设当前在键12上，按“Down”或“Right”键时，会切换到键1，而按“Up”或”Left”时，会切换到键11，如此类推。要实现这点，可以在每个按钮中进行设置如下四个属性：

android:nextFocusUp- 定义当点up键时，哪个控件将获得焦点

android:nextFocusDown-定义当点down键时，哪个控件将获得焦点

android:nextFocusLeft-定义当点left键时，哪个控件将获得焦点

android:nextFocusRight--定义当点right键时，哪个控件将获得焦点

下面是其代码：

<?xml version="1.0" encoding="utf-8"?> <RelativeLayout     xmlns:android="http://schemas.android.com/apk/res/android"     android:layout_width="fill_parent"     android:layout_height="fill_parent">     <Button         style="@style/clockFaceNum"         android:text="12"         android:id="@+id/button12"         android:layout_alignParentTop="true"         android:layout_centerHorizontal="true"         android:nextFocusUp="@+id/button11"         android:nextFocusLeft="@+id/button11"         android:nextFocusRight="@+id/button1"         android:nextFocusDown="@+id/button1">     </Button>     <Button         style="@style/clockFaceNum"         android:text="11"         android:id="@+id/button11"         android:layout_below="@+id/button12"         android:layout_toLeftOf="@+id/button12"         android:nextFocusUp="@+id/button10"         android:nextFocusLeft="@+id/button10"         android:nextFocusRight="@+id/button12"         android:nextFocusDown="@+id/button12">     </Button>     <Button         style="@style/clockFaceNum"         android:text="1"         android:id="@+id/button1"         android:layout_below="@+id/button12"         android:layout_toRightOf="@+id/button12"         android:nextFocusUp="@+id/button12"         android:nextFocusLeft="@+id/button12"         android:nextFocusRight="@+id/button2"         android:nextFocusDown="@+id/button2">     </Button>     <Button         style="@style/clockFaceNum"         android:text="10"         android:id="@+id/button10"         android:layout_below="@+id/button11"         android:layout_toLeftOf="@+id/button11"         android:nextFocusUp="@+id/button9"         android:nextFocusLeft="@+id/button9"         android:nextFocusRight="@+id/button11"         android:nextFocusDown="@+id/button11">     </Button>     <Button         style="@style/clockFaceNum"         android:text="2"         android:id="@+id/button2"         android:layout_below="@+id/button1"         android:layout_toRightOf="@+id/button1"         android:nextFocusUp="@+id/button1"         android:nextFocusLeft="@+id/button1"         android:nextFocusRight="@+id/button3"         android:nextFocusDown="@+id/button3">     </Button>     <Button         style="@style/clockFaceNum"         android:text="9"         android:id="@+id/button9"         android:layout_below="@+id/button10"         android:layout_toLeftOf="@+id/button10"         android:nextFocusUp="@+id/button8"         android:nextFocusLeft="@+id/button8"         android:nextFocusRight="@+id/button10"         android:nextFocusDown="@+id/button10">     </Button>      <Button         style="@style/clockFaceNum"         android:text="3"         android:id="@+id/button3"         android:layout_below="@+id/button2"         android:layout_toRightOf="@+id/button2"         android:nextFocusUp="@+id/button2"         android:nextFocusLeft="@+id/button2"         android:nextFocusRight="@+id/button4"         android:nextFocusDown="@+id/button4">     </Button>     <Button         style="@style/clockFaceNum"         android:text="8"         android:id="@+id/button8"         android:layout_below="@+id/button9"         android:layout_toRightOf="@+id/button9"         android:nextFocusUp="@+id/button7"         android:nextFocusLeft="@+id/button7"         android:nextFocusRight="@+id/button9"         android:nextFocusDown="@+id/button9">     </Button>     <Button         style="@style/clockFaceNum"         android:text="4"         android:id="@+id/button4"         android:layout_below="@+id/button3"         android:layout_toLeftOf="@+id/button3"         android:nextFocusUp="@+id/button3"         android:nextFocusLeft="@+id/button3"         android:nextFocusRight="@+id/button5"         android:nextFocusDown="@+id/button5">     </Button>     <Button         style="@style/clockFaceNum"         android:text="7"         android:id="@+id/button7"         android:layout_below="@+id/button8"         android:layout_toRightOf="@+id/button8"         android:nextFocusUp="@+id/button6"         android:nextFocusLeft="@+id/button6"         android:nextFocusRight="@+id/button8"         android:nextFocusDown="@+id/button8">     </Button>     <Button         style="@style/clockFaceNum"         android:text="5"         android:id="@+id/button5"         android:layout_below="@+id/button4"         android:layout_toLeftOf="@+id/button4"         android:nextFocusUp="@+id/button4"         android:nextFocusLeft="@+id/button4"         android:nextFocusRight="@+id/button6"         android:nextFocusDown="@+id/button6">     </Button>     <Button         style="@style/clockFaceNum"         android:text="6"         android:id="@+id/button6"         android:layout_below="@+id/button5"         android:layout_centerHorizontal="true"         android:nextFocusUp="@+id/button5"         android:nextFocusLeft="@+id/button5"         android:nextFocusRight="@+id/button7"         android:nextFocusDown="@+id/button7">     </Button> </RelativeLayout>

下图中是假定在键12开始按down键时的焦点切换顺序：

步骤4 设置界面的初始控件焦点

在每个页面加载时，可以设置界面中初始的控件焦点，以方便用户的定位操作，只需要在控件中加入即可。比如：

<Button         style="@style/clockFaceNum"         android:text="12"         android:id="@+id/button12"         android:layout_alignParentTop="true"         android:layout_centerHorizontal="true"         android:nextFocusUp="@+id/button11"         android:nextFocusLeft="@+id/button11"         android:nextFocusRight="@+id/button1"         android:nextFocusDown="@+id/button1">         <requestFocus />     </Button>

作为开发者，一定要记住由于Android设备的多样性，用户如何在界面上方便地进行输入或在不同的控件中来回切换是十分重要的，本文简单介绍了用户如何自定义控件的焦点切换顺序，这对于用户界面的体验是很有好处的。

关于Android界面设计基础中控件焦点的步骤是什么就分享到这里了，希望