Android界面设计基础：控件焦点4个步骤_12点圆形布局

【IT168技术】现在，随着越来越多的Android的应用出现在Android Market上，如何能更加吸引用户成为摆在开发者面前的重要课题。作为Android应用，不仅要在内容上取胜，在比如界面等细节上也要很重视用户的使用体验，如果用户觉得操作困难和不符合操作习惯的话，就会认为应用不好用而不去下载或购买。在用户体验中，一些细节的问题更容易引起程序员的忽视。本文将介绍，在Android的界面设计中的各个控件的焦点顺序其中要注意的问题，这个很似简单的问题，值得开发者的重视。

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

　　一般情况下，Android对于特定的布局界面，会自动得出一个合适的控件焦点顺序，很多情况下是足够用的了。但是在有的情况下是有例外的。控件的下一个焦点会到达哪一个控件，主要是判断当前控件在指定的方向布局上(up/down/left/right)，哪一个是最领近的控件，其扫描顺序为从左到右，从上到下，就象平时阅读书籍一样。

　　然而，这种顺序有时会带来一点小问题，比如当控件都布置在屏幕的上方时，如果用户再按“up”键，则不会有任何效果，同样，当控件都在屏幕下方、左边、右边时，此时再按如“down”、“Left”,“Right”键时都不会再获得控件的焦点。

　　在本文的例子中，将讲解如何修改默认的控件焦点顺序，以定制特定的控件切换顺序，例子中，多个按钮以一个圆形进行了排列，例子可以在

　　http://android-mt-tutorials.googlecode.com/svn/trunk/SimpleFocus中下载。

　　步骤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>

java代码

   
   

    
    public class SimpleFocusActivity extends Activity {
   
   
	/** Called when the activity is first created. */

   
   

    
    ceState) {
   
   
	@Override
	public void onCreate(Bundle savedInsta
n
		super.onCreate(savedInstanceState);

   
   

    
    blic void numClicked(View v) {
	
   
   
		setContentView(R.layout.main);
	}

	p
u	
		Button butClicked = (Button)v;

   
   

    
    ext().toString();
		Toast.makeText(getApplicationCont
   
   
		String strButton = butClicked.get
Text(),
				"Clicked " + strButton, Toast.LENGTH_SHORT).show();
	}

   
   

}

　　运行后，效果如下图：

　　

　　步骤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="">