Android界面设计基础：控件焦点4个步骤

步骤1 定义界面布局

　　我们先设计出界面的布局，代码如下，使用的是Relative相对布局：

<?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">
    </Button>
    <Button
        style="@style/clockFaceNum"
        android:text="11"
        android:id="@+id/button11"
        android:layout_below="@+id/button12"
        android:layout_toLeftOf="@+id/button12">
    </Button>
    <Button
        style="@style/clockFaceNum"
        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"<SPAN st< div>