欢乐颂第一季免费阅读,有声小说下载

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案

Android界面設(shè)計基礎(chǔ)：控件焦點4個步驟

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

成都創(chuàng)新互聯(lián)公司專注于周口網(wǎng)站建設(shè)服務(wù)及定制，我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗。熱誠為您提供周口營銷型網(wǎng)站建設(shè)，周口網(wǎng)站制作、周口網(wǎng)頁設(shè)計、周口網(wǎng)站官網(wǎng)定制、小程序定制開發(fā)服務(wù)，打造周口網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供周口網(wǎng)站排名全網(wǎng)營銷落地服務(wù)。

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

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

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

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

步驟1 定義界面布局

我們先設(shè)計出界面的布局，代碼如下，使用的是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 默認的控件焦點切換順序

比如當(dāng)用戶將控件焦點點在12號按鈕時，點往下的“down”按鈕，默認的控件焦點切換順序如下圖：

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

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

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

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

android:nextFocusUp- 定義當(dāng)點up鍵時，哪個控件將獲得焦點

android:nextFocusDown-定義當(dāng)點down鍵時，哪個控件將獲得焦點

android:nextFocusLeft-定義當(dāng)點left鍵時，哪個控件將獲得焦點

android:nextFocusRight--定義當(dāng)點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 設(shè)置界面的初始控件焦點

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

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

小結(jié)

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

網(wǎng)頁標(biāo)題：Android界面設(shè)計基礎(chǔ)：控件焦點4個步驟
文章路徑：http://fisionsoft.com.cn/article/djpcjpo.html

新聞中心

其他資訊