自拍偷在线精品自拍偷,亚洲欧美中文日韩v在线观看不卡

Android界面設(shè)計(jì)基礎(chǔ)：控件焦點(diǎn)4個(gè)步驟

作者：廖煜嶸
移動(dòng)開(kāi)發(fā) Android
現(xiàn)在，隨著越來(lái)越多的Android的應(yīng)用出現(xiàn)在Android Market上，如何能更加吸引用戶成為擺在開(kāi)發(fā)者面前的重要課題。作為Android應(yīng)用，不僅要在內(nèi)容上取勝，在比如界面等細(xì)節(jié)上也要很重視用戶的使用體驗(yàn)，如果用戶覺(jué)得操作困難和不符合操作習(xí)慣的話，就會(huì)認(rèn)為應(yīng)用不好用而不去下載或購(gòu)買。在用戶體驗(yàn)中，一些細(xì)節(jié)的問(wèn)題更容易引起程序員的忽視。本文將介紹，在Android的界面設(shè)計(jì)中的各個(gè)控件的焦點(diǎn)順序其中要注意的問(wèn)題，這個(gè)很似簡(jiǎn)單的問(wèn)題，值得開(kāi)發(fā)者的重視。

Android設(shè)備有多種多樣，操縱界面也有所不同，比如有觸摸屏、軌跡球，傳統(tǒng)的手機(jī)鍵盤等，因此開(kāi)發(fā)者需要更好地了解，當(dāng)用戶在應(yīng)用程序界面中的不同控件間移動(dòng)時(shí)，各個(gè)控件的獲得焦點(diǎn)和失去焦點(diǎn)的順序，以及如何根據(jù)用戶的操作習(xí)慣去自定義這些順序。

一般情況下，Android對(duì)于特定的布局界面，會(huì)自動(dòng)得出一個(gè)合適的控件焦點(diǎn)順序，很多情況下是足夠用的了。但是在有的情況下是有例外的?？丶南乱粋€(gè)焦點(diǎn)會(huì)到達(dá)哪一個(gè)控件，主要是判斷當(dāng)前控件在指定的方向布局上(up/down/left/right)，哪一個(gè)是最領(lǐng)近的控件，其掃描順序?yàn)閺淖蟮接?，從上到下，就象平時(shí)閱讀書(shū)籍一樣。

然而，這種順序有時(shí)會(huì)帶來(lái)一點(diǎn)小問(wèn)題，比如當(dāng)控件都布置在屏幕的上方時(shí)，如果用戶再按“up”鍵，則不會(huì)有任何效果，同樣，當(dāng)控件都在屏幕下方、左邊、右邊時(shí)，此時(shí)再按如“down”、“Left”,“Right”鍵時(shí)都不會(huì)再獲得控件的焦點(diǎn)。

在本文的例子中，將講解如何修改默認(rèn)的控件焦點(diǎn)順序，以定制特定的控件切換順序，例子中，多個(gè)按鈕以一個(gè)圓形進(jìn)行了排列，例子可以在

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

步驟1 定義界面布局

我們先設(shè)計(jì)出界面的布局，代碼如下，使用的是Relative相對(duì)布局：

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

 上面定義的style文件如下：

  1. <?xml version="1.0" encoding="utf-8"?> 
  2. <resources> 
  3.     <style 
  4.         name="clockFaceNum"> 
  5.         <item 
  6.             name="android:layout_width">38dp</item> 
  7.         <item 
  8.             name="android:layout_height">38dp</item> 
  9.         <item 
  10.             name="android:onClick">numClicked</item> 
  11.         <item 
  12.             name="android:textSize">9sp</item> 
  13.     </style> 
  14. </resources> 

運(yùn)行后，效果如下圖：

步驟1 定義界面布局

步驟2 默認(rèn)的控件焦點(diǎn)切換順序

比如當(dāng)用戶將控件焦點(diǎn)點(diǎn)在12號(hào)按鈕時(shí)，點(diǎn)往下的“down”按鈕，默認(rèn)的控件焦點(diǎn)切換順序如下圖：

步驟1 定義界面布局

也就是說(shuō)，當(dāng)在按鈕12上往下按的時(shí)候，控件的焦點(diǎn)會(huì)切換到11，接著就是鍵10，如此類推。

步驟3 創(chuàng)建自定義的控件焦點(diǎn)順序

下面，我們嘗試創(chuàng)建自定義的控件焦點(diǎn)順序，即同時(shí)允許在上面的界面中，當(dāng)用戶按鍵時(shí)，以順時(shí)針或逆時(shí)針進(jìn)行控件切換，如下圖：

步驟1 定義界面布局

也就是說(shuō)，允許用戶當(dāng)按“Down”或“Right”鍵時(shí)，切換順序是順時(shí)針?lè)较?，比如假設(shè)當(dāng)前在鍵12上，按“Down”或“Right”鍵時(shí)，會(huì)切換到鍵1，而按“Up”或”Left”時(shí)，會(huì)切換到鍵11，如此類推。要實(shí)現(xiàn)這點(diǎn)，可以在每個(gè)按鈕中進(jìn)行設(shè)置如下四個(gè)屬性：

android:nextFocusUp- 定義當(dāng)點(diǎn)up鍵時(shí)，哪個(gè)控件將獲得焦點(diǎn)

android:nextFocusDown-定義當(dāng)點(diǎn)down鍵時(shí)，哪個(gè)控件將獲得焦點(diǎn)

android:nextFocusLeft-定義當(dāng)點(diǎn)left鍵時(shí)，哪個(gè)控件將獲得焦點(diǎn)

android:nextFocusRight--定義當(dāng)點(diǎn)right鍵時(shí)，哪個(gè)控件將獲得焦點(diǎn)

下面是其代碼：

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

下圖中是假定在鍵12開(kāi)始按down鍵時(shí)的焦點(diǎn)切換順序：

步驟1 定義界面布局

步驟4 設(shè)置界面的初始控件焦點(diǎn)

在每個(gè)頁(yè)面加載時(shí)，可以設(shè)置界面中初始的控件焦點(diǎn)，以方便用戶的定位操作，只需要在控件中加入即可。比如：

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

小結(jié)

作為開(kāi)發(fā)者，一定要記住由于Android設(shè)備的多樣性，用戶如何在界面上方便地進(jìn)行輸入或在不同的控件中來(lái)回切換是十分重要的，本文簡(jiǎn)單介紹了用戶如何自定義控件的焦點(diǎn)切換順序，這對(duì)于用戶界面的體驗(yàn)是很有好處的。

責(zé)任編輯：佚名 來(lái)源： it168
控件Android
相關(guān)推薦

2011-04-11 17:07:33

布局基礎(chǔ)用戶界面設(shè)計(jì)Android

2011-12-20 10:42:22

Android應(yīng)用界面設(shè)計(jì)

2011-04-08 13:58:10

Android界面設(shè)計(jì)

2011-04-11 17:25:30

線性布局用戶界面設(shè)計(jì)Android

2011-04-19 09:19:37

相對(duì)布局界面設(shè)計(jì)Android

2011-05-19 08:49:01

使用片段界面設(shè)計(jì)Android

2011-04-22 11:01:36

框架布局界面設(shè)計(jì)Android

2020-10-27 14:02:25

VR設(shè)計(jì)UI

2011-06-01 10:58:57

2012-06-04 14:45:03

兒童移動(dòng)應(yīng)用界面設(shè)計(jì)基礎(chǔ)知識(shí)

2013-11-27 10:12:11

2011-03-02 14:03:02

DashboardAndroid用戶界面反例模板

2011-03-02 10:49:42

DashboardAndroid用戶界面設(shè)計(jì)模板

2015-07-09 10:25:45

界面設(shè)計(jì)UI設(shè)計(jì)

2011-06-01 10:30:41

用戶界面

2011-06-01 16:50:05

Android ListView

2013-12-26 15:46:30

Android開(kāi)發(fā)Android應(yīng)用用戶界面設(shè)計(jì)

2012-01-16 16:16:49

JavaSwing

2013-06-21 16:03:40

用戶體驗(yàn)設(shè)計(jì)UED手勢(shì)

2013-04-11 10:26:37

Google Glas谷歌眼鏡指南分析
點(diǎn)贊
收藏

51CTO技術(shù)棧公眾號(hào)