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

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

成都创新互联公司专注于周口网站建设服务及定制，我们拥有丰富的企业做网站经验。热诚为您提供周口营销型网站建设，周口网站制作、周口网页设计、周口网站官网定制、小程序定制开发服务，打造周口网络公司原创品牌,更为您提供周口网站排名全网营销落地服务。

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

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

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

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

步骤1 定义界面布局

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

 
 
   
  
     
  
    
  
  
    xmlns:android="http://schemas.android.com/apk/res/android"   
  
      android:layout_width="fill_parent"   
  
      android:layout_height="fill_parent">   
  
        
  
  
        style="@style/clockFaceNum"   
  
          android:text="12"   
  
          android:id="@+id/button12"   
  
          android:layout_alignParentTop="true"   
  
          android:layout_centerHorizontal="true">   
  
         
  
        
  
  
        style="@style/clockFaceNum"   
  
          android:text="11"   
  
          android:id="@+id/button11"   
  
          android:layout_below="@+id/button12"   
  
          android:layout_toLeftOf="@+id/button12">   
  
         
  
        
  
  
        style="@style/clockFaceNum"   
  
          android:text="1"   
  
          android:id="@+id/button1"   
  
          android:layout_below="@+id/button12"   
  
          android:layout_toRightOf="@+id/button12">   
  
         
  
        
  
  
        style="@style/clockFaceNum"   
  
          android:text="10"   
  
          android:id="@+id/button10"   
  
          android:layout_below="@+id/button11"   
  
          android:layout_toLeftOf="@+id/button11">   
  
         
  
        
  
  
        style="@style/clockFaceNum"   
  
          android:text="2"   
  
          android:id="@+id/button2"   
  
          android:layout_below="@+id/button1"   
  
          android:layout_toRightOf="@+id/button1">   
  
         
  
        
  
  
        style="@style/clockFaceNum"   
  
          android:text="9"   
  
          android:id="@+id/button9"   
  
          android:layout_below="@+id/button10"   
  
          android:layout_toLeftOf="@+id/button10">   
  
         
  
     
  
        
  
  
        style="@style/clockFaceNum"   
  
          android:text="3"   
  
          android:id="@+id/button3"   
  
          android:layout_below="@+id/button2"   
  
          android:layout_toRightOf="@+id/button2">   
  
         
  
        
  
  
        style="@style/clockFaceNum"   
  
          android:text="8"   
  
          android:id="@+id/button8"   
  
          android:layout_below="@+id/button9"   
  
          android:layout_toRightOf="@+id/button9">   
  
         
  
        
  
  
        style="@style/clockFaceNum"   
  
          android:text="4"   
  
          android:id="@+id/button4"   
  
          android:layout_below="@+id/button3"   
  
          android:layout_toLeftOf="@+id/button3">   
  
         
  
        
  
  
        style="@style/clockFaceNum"   
  
          android:text="7"   
  
          android:id="@+id/button7"   
  
          android:layout_below="@+id/button8"   
  
          android:layout_toRightOf="@+id/button8">   
  
         
  
        
  
  
        style="@style/clockFaceNum"   
  
          android:text="5"   
  
          android:id="@+id/button5"   
  
          android:layout_below="@+id/button4"   
  
          android:layout_toLeftOf="@+id/button4">   
  
         
  
        
  
  
        style="@style/clockFaceNum"   
  
          android:text="6"   
  
          android:id="@+id/button6"   
  
          android:layout_below="@+id/button5"   
  
          android:layout_centerHorizontal="true">

上面定义的style文件如下：

 
 
   
  
     
  
     
  
        
  
  
        name="clockFaceNum">   
  
            
  
  
            name="android:layout_width">38dp   
  
            
  
  
            name="android:layout_height">38dp   
  
            
  
  
            name="android:onClick">numClicked   
  
            
  
  
            name="android:textSize">9sp

运行后，效果如下图：

步骤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键时，哪个控件将获得焦点

下面是其代码：

 
 
   
  
     
  
    
  
  
    xmlns:android="http://schemas.android.com/apk/res/android"   
  
      android:layout_width="fill_parent"   
  
      android:layout_height="fill_parent">   
  
        
  
  
        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">   
  
         
  
        
  
  
        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">   
  
         
  
        
  
  
        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">   
  
         
  
        
  
  
        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">   
  
         
  
        
  
  
        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">   
  
         
  
        
  
  
        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">   
  
         
  
     
  
        
  
  
        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">   
  
         
  
        
  
  
        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">   
  
         
  
        
  
  
        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">   
  
         
  
        
  
  
        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">   
  
         
  
        
  
  
        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">   
  
         
  
        
  
  
        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">

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

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

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

 
 
   
  
    
  
  
        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">

小结

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

网页题目：Android界面设计基础：控件焦点4个步骤
文章URL：http://www.36103.cn/qtweb/news4/31504.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容