我们先设计出界面的布局,代码如下,使用的是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>