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

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

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

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

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

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

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

步骤1 定义界面布局

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

 
 
 
      
  
  
  1.  
    2.   
  
  
  2.   
  
  
  3.     xmlns:android="http://schemas.android.com/apk/res/android" 
    4.   
  
  
  4.     android:layout_width="fill_parent" 
    5.   
  
  
  5.     android:layout_height="fill_parent"> 
    6.   
  
  
  6.       
  
  
  7.         style="@style/clockFaceNum" 
    8.   
  
  
  8.         android:text="12" 
    9.   
  
  
  9.         android:id="@+id/button12" 
    10.   
  
  
  10.         android:layout_alignParentTop="true" 
    11.   
  
  
  11.         android:layout_centerHorizontal="true"> 
    12.   
  
  
  12.      
    13.   
  
  
  13.       
  
  
  14.         style="@style/clockFaceNum" 
    15.   
  
  
  15.         android:text="11" 
    16.   
  
  
  16.         android:id="@+id/button11" 
    17.   
  
  
  17.         android:layout_below="@+id/button12" 
    18.   
  
  
  18.         android:layout_toLeftOf="@+id/button12"> 
    19.   
  
  
  19.      
    20.   
  
  
  20.       
  
  
  21.         style="@style/clockFaceNum" 
    22.   
  
  
  22.         android:text="1" 
    23.   
  
  
  23.         android:id="@+id/button1" 
    24.   
  
  
  24.         android:layout_below="@+id/button12" 
    25.   
  
  
  25.         android:layout_toRightOf="@+id/button12"> 
    26.   
  
  
  26.      
    27.   
  
  
  27.       
  
  
  28.         style="@style/clockFaceNum" 
    29.   
  
  
  29.         android:text="10" 
    30.   
  
  
  30.         android:id="@+id/button10" 
    31.   
  
  
  31.         android:layout_below="@+id/button11" 
    32.   
  
  
  32.         android:layout_toLeftOf="@+id/button11"> 
    33.   
  
  
  33.      
    34.   
  
  
  34.       
  
  
  35.         style="@style/clockFaceNum" 
    36.   
  
  
  36.         android:text="2" 
    37.   
  
  
  37.         android:id="@+id/button2" 
    38.   
  
  
  38.         android:layout_below="@+id/button1" 
    39.   
  
  
  39.         android:layout_toRightOf="@+id/button1"> 
    40.   
  
  
  40.      
    41.   
  
  
  41.       
  
  
  42.         style="@style/clockFaceNum" 
    43.   
  
  
  43.         android:text="9" 
    44.   
  
  
  44.         android:id="@+id/button9" 
    45.   
  
  
  45.         android:layout_below="@+id/button10" 
    46.   
  
  
  46.         android:layout_toLeftOf="@+id/button10"> 
    47.   
  
  
  47.      
    48.   
  
  
  48.  
    49.   
  
  
  49.       
  
  
  50.         style="@style/clockFaceNum" 
    51.   
  
  
  51.         android:text="3" 
    52.   
  
  
  52.         android:id="@+id/button3" 
    53.   
  
  
  53.         android:layout_below="@+id/button2" 
    54.   
  
  
  54.         android:layout_toRightOf="@+id/button2"> 
    55.   
  
  
  55.      
    56.   
  
  
  56.       
  
  
  57.         style="@style/clockFaceNum" 
    58.   
  
  
  58.         android:text="8" 
    59.   
  
  
  59.         android:id="@+id/button8" 
    60.   
  
  
  60.         android:layout_below="@+id/button9" 
    61.   
  
  
  61.         android:layout_toRightOf="@+id/button9"> 
    62.   
  
  
  62.      
    63.   
  
  
  63.       
  
  
  64.         style="@style/clockFaceNum" 
    65.   
  
  
  65.         android:text="4" 
    66.   
  
  
  66.         android:id="@+id/button4" 
    67.   
  
  
  67.         android:layout_below="@+id/button3" 
    68.   
  
  
  68.         android:layout_toLeftOf="@+id/button3"> 
    69.   
  
  
  69.      
    70.   
  
  
  70.       
  
  
  71.         style="@style/clockFaceNum" 
    72.   
  
  
  72.         android:text="7" 
    73.   
  
  
  73.         android:id="@+id/button7" 
    74.   
  
  
  74.         android:layout_below="@+id/button8" 
    75.   
  
  
  75.         android:layout_toRightOf="@+id/button8"> 
    76.   
  
  
  76.      
    77.   
  
  
  77.       
  
  
  78.         style="@style/clockFaceNum" 
    79.   
  
  
  79.         android:text="5" 
    80.   
  
  
  80.         android:id="@+id/button5" 
    81.   
  
  
  81.         android:layout_below="@+id/button4" 
    82.   
  
  
  82.         android:layout_toLeftOf="@+id/button4"> 
    83.   
  
  
  83.      
    84.   
  
  
  84.       
  
  
  85.         style="@style/clockFaceNum" 
    86.   
  
  
  86.         android:text="6" 
    87.   
  
  
  87.         android:id="@+id/button6" 
    88.   
  
  
  88.         android:layout_below="@+id/button5" 
    89.   
  
  
  89.         android:layout_centerHorizontal="true"> 
    90.   
  
  
  90.      
    91.   
  
  
  91.  
    92.   
  
  
  92.   
    93.

 上面定义的style文件如下：

 
 
 
      
  
  
  1.  
    2.   
  
  
  2.  
    3.   
  
  
  3.       
  
  
  4.         name="clockFaceNum"> 
    5.   
  
  
  5.           
  
  
  6.             name="android:layout_width">38dp 
    7.   
  
  
  7.           
  
  
  8.             name="android:layout_height">38dp 
    9.   
  
  
  9.           
  
  
  10.             name="android:onClick">numClicked 
    11.   
  
  
  11.           
  
  
  12.             name="android:textSize">9sp 
    13.   
  
  
  13.      
    14.   
  
  
  14.  
    15.

运行后，效果如下图：

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

下面是其代码：

 
 
 
      
  
  
  1.  
    2.   
  
  
  2.   
  
  
  3.     xmlns:android="http://schemas.android.com/apk/res/android" 
    4.   
  
  
  4.     android:layout_width="fill_parent" 
    5.   
  
  
  5.     android:layout_height="fill_parent"> 
    6.   
  
  
  6.       
  
  
  7.         style="@style/clockFaceNum" 
    8.   
  
  
  8.         android:text="12" 
    9.   
  
  
  9.         android:id="@+id/button12" 
    10.   
  
  
  10.         android:layout_alignParentTop="true" 
    11.   
  
  
  11.         android:layout_centerHorizontal="true" 
    12.   
  
  
  12.         android:nextFocusUp="@+id/button11" 
    13.   
  
  
  13.         android:nextFocusLeft="@+id/button11" 
    14.   
  
  
  14.         android:nextFocusRight="@+id/button1" 
    15.   
  
  
  15.         android:nextFocusDown="@+id/button1"> 
    16.   
  
  
  16.      
    17.   
  
  
  17.       
  
  
  18.         style="@style/clockFaceNum" 
    19.   
  
  
  19.         android:text="11" 
    20.   
  
  
  20.         android:id="@+id/button11" 
    21.   
  
  
  21.         android:layout_below="@+id/button12" 
    22.   
  
  
  22.         android:layout_toLeftOf="@+id/button12" 
    23.   
  
  
  23.         android:nextFocusUp="@+id/button10" 
    24.   
  
  
  24.         android:nextFocusLeft="@+id/button10" 
    25.   
  
  
  25.         android:nextFocusRight="@+id/button12" 
    26.   
  
  
  26.         android:nextFocusDown="@+id/button12"> 
    27.   
  
  
  27.      
    28.   
  
  
  28.       
  
  
  29.         style="@style/clockFaceNum" 
    30.   
  
  
  30.         android:text="1" 
    31.   
  
  
  31.         android:id="@+id/button1" 
    32.   
  
  
  32.         android:layout_below="@+id/button12" 
    33.   
  
  
  33.         android:layout_toRightOf="@+id/button12" 
    34.   
  
  
  34.         android:nextFocusUp="@+id/button12" 
    35.   
  
  
  35.         android:nextFocusLeft="@+id/button12" 
    36.   
  
  
  36.         android:nextFocusRight="@+id/button2" 
    37.   
  
  
  37.         android:nextFocusDown="@+id/button2"> 
    38.   
  
  
  38.      
    39.   
  
  
  39.       
  
  
  40.         style="@style/clockFaceNum" 
    41.   
  
  
  41.         android:text="10" 
    42.   
  
  
  42.         android:id="@+id/button10" 
    43.   
  
  
  43.         android:layout_below="@+id/button11" 
    44.   
  
  
  44.         android:layout_toLeftOf="@+id/button11" 
    45.   
  
  
  45.         android:nextFocusUp="@+id/button9" 
    46.   
  
  
  46.         android:nextFocusLeft="@+id/button9" 
    47.   
  
  
  47.         android:nextFocusRight="@+id/button11" 
    48.   
  
  
  48.         android:nextFocusDown="@+id/button11"> 
    49.   
  
  
  49.      
    50.   
  
  
  50.       
  
  
  51.         style="@style/clockFaceNum" 
    52.   
  
  
  52.         android:text="2" 
    53.   
  
  
  53.         android:id="@+id/button2" 
    54.   
  
  
  54.         android:layout_below="@+id/button1" 
    55.   
  
  
  55.         android:layout_toRightOf="@+id/button1" 
    56.   
  
  
  56.         android:nextFocusUp="@+id/button1" 
    57.   
  
  
  57.         android:nextFocusLeft="@+id/button1" 
    58.   
  
  
  58.         android:nextFocusRight="@+id/button3" 
    59.   
  
  
  59.         android:nextFocusDown="@+id/button3"> 
    60.   
  
  
  60.      
    61.   
  
  
  61.       
  
  
  62.         style="@style/clockFaceNum" 
    63.   
  
  
  63.         android:text="9" 
    64.   
  
  
  64.         android:id="@+id/button9" 
    65.   
  
  
  65.         android:layout_below="@+id/button10" 
    66.   
  
  
  66.         android:layout_toLeftOf="@+id/button10" 
    67.   
  
  
  67.         android:nextFocusUp="@+id/button8" 
    68.   
  
  
  68.         android:nextFocusLeft="@+id/button8" 
    69.   
  
  
  69.         android:nextFocusRight="@+id/button10" 
    70.   
  
  
  70.         android:nextFocusDown="@+id/button10"> 
    71.   
  
  
  71.      
    72.   
  
  
  72.  
    73.   
  
  
  73.       
  
  
  74.         style="@style/clockFaceNum" 
    75.   
  
  
  75.         android:text="3" 
    76.   
  
  
  76.         android:id="@+id/button3" 
    77.   
  
  
  77.         android:layout_below="@+id/button2" 
    78.   
  
  
  78.         android:layout_toRightOf="@+id/button2" 
    79.   
  
  
  79.         android:nextFocusUp="@+id/button2" 
    80.   
  
  
  80.         android:nextFocusLeft="@+id/button2" 
    81.   
  
  
  81.         android:nextFocusRight="@+id/button4" 
    82.   
  
  
  82.         android:nextFocusDown="@+id/button4"> 
    83.   
  
  
  83.      
    84.   
  
  
  84.       
  
  
  85.         style="@style/clockFaceNum" 
    86.   
  
  
  86.         android:text="8" 
    87.   
  
  
  87.         android:id="@+id/button8" 
    88.   
  
  
  88.         android:layout_below="@+id/button9" 
    89.   
  
  
  89.         android:layout_toRightOf="@+id/button9" 
    90.   
  
  
  90.         android:nextFocusUp="@+id/button7" 
    91.   
  
  
  91.         android:nextFocusLeft="@+id/button7" 
    92.   
  
  
  92.         android:nextFocusRight="@+id/button9" 
    93.   
  
  
  93.         android:nextFocusDown="@+id/button9"> 
    94.   
  
  
  94.      
    95.   
  
  
  95.       
  
  
  96.         style="@style/clockFaceNum" 
    97.   
  
  
  97.         android:text="4" 
    98.   
  
  
  98.         android:id="@+id/button4" 
    99.   
  
  
  99.         android:layout_below="@+id/button3" 
    100.   
  
  
  100.         android:layout_toLeftOf="@+id/button3" 
    101.   
  
  
  101.         android:nextFocusUp="@+id/button3" 
    102.   
  
  
  102.         android:nextFocusLeft="@+id/button3" 
    103.   
  
  
  103.         android:nextFocusRight="@+id/button5" 
    104.   
  
  
  104.         android:nextFocusDown="@+id/button5"> 
    105.   
  
  
  105.      
    106.   
  
  
  106.       
  
  
  107.         style="@style/clockFaceNum" 
    108.   
  
  
  108.         android:text="7" 
    109.   
  
  
  109.         android:id="@+id/button7" 
    110.   
  
  
  110.         android:layout_below="@+id/button8" 
    111.   
  
  
  111.         android:layout_toRightOf="@+id/button8" 
    112.   
  
  
  112.         android:nextFocusUp="@+id/button6" 
    113.   
  
  
  113.         android:nextFocusLeft="@+id/button6" 
    114.   
  
  
  114.         android:nextFocusRight="@+id/button8" 
    115.   
  
  
  115.         android:nextFocusDown="@+id/button8"> 
    116.   
  
  
  116.      
    117.   
  
  
  117.       
  
  
  118.         style="@style/clockFaceNum" 
    119.   
  
  
  119.         android:text="5" 
    120.   
  
  
  120.         android:id="@+id/button5" 
    121.   
  
  
  121.         android:layout_below="@+id/button4" 
    122.   
  
  
  122.         android:layout_toLeftOf="@+id/button4" 
    123.   
  
  
  123.         android:nextFocusUp="@+id/button4" 
    124.   
  
  
  124.         android:nextFocusLeft="@+id/button4" 
    125.   
  
  
  125.         android:nextFocusRight="@+id/button6" 
    126.   
  
  
  126.         android:nextFocusDown="@+id/button6"> 
    127.   
  
  
  127.      
    128.   
  
  
  128.       
  
  
  129.         style="@style/clockFaceNum" 
    130.   
  
  
  130.         android:text="6" 
    131.   
  
  
  131.         android:id="@+id/button6" 
    132.   
  
  
  132.         android:layout_below="@+id/button5" 
    133.   
  
  
  133.         android:layout_centerHorizontal="true" 
    134.   
  
  
  134.         android:nextFocusUp="@+id/button5" 
    135.   
  
  
  135.         android:nextFocusLeft="@+id/button5" 
    136.   
  
  
  136.         android:nextFocusRight="@+id/button7" 
    137.   
  
  
  137.         android:nextFocusDown="@+id/button7"> 
    138.   
  
  
  138.      
    139.   
  
  
  139.  
    140.

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

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

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

 
 
 
      
  
  
  1.   
  
  
  2.         style="@style/clockFaceNum" 
    3.   
  
  
  3.         android:text="12" 
    4.   
  
  
  4.         android:id="@+id/button12" 
    5.   
  
  
  5.         android:layout_alignParentTop="true" 
    6.   
  
  
  6.         android:layout_centerHorizontal="true" 
    7.   
  
  
  7.         android:nextFocusUp="@+id/button11" 
    8.   
  
  
  8.         android:nextFocusLeft="@+id/button11" 
    9.   
  
  
  9.         android:nextFocusRight="@+id/button1" 
    10.   
  
  
  10.         android:nextFocusDown="@+id/button1"> 
    11.   
  
  
  11.          
    12.   
  
  
  12.      
    13.

小结

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

文章标题：Android界面设计基础：控件焦点4个步骤
本文路径：http://www.shufengxianlan.com/qtweb/news22/188522.html

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

广告

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

猜你还喜欢下面的内容

App设计知识

各行业网站

广元双南建站　　 　成都发电机维修　　 　香港云虚拟主机　　 　seo推广公司　　 　防护网厂　　 　东电技服　　 　达州服务器托管　　 　成都光华电信机房　　 　艾名斯智能　　 　成都微信小程序　　 　品牌官网设计　　 　四川正泰动物　　 　衣柜书柜酒柜定制　　 　网站制作公司　　 　西云服务器托管　　 　草坪音箱　　 　联通服务器托管　　 　营销型网站　　 　成都宣传海报　　 　网站制作