Android零基礎入門第16節：Android使用者介面開發概述

標籤：ica   行為控制   利用   覆蓋   單擊   輸入框   出發點   圖表   檔案的   

相信通過前面15期的學習，Android的開發環境已經基本掌握了，如果仍有問題，歡迎到Android零基礎入門技術討論群交流，從本期開始正式來一步一步踏入Android開發之路。

Android應用開發的一項內容就是使用者介面的開發。Android提供了非常豐富的使用者介面組件，藉助於這些使用者介面組件，開發人員可以非常方便地進行使用者介面開發，而且可以開發出非常優秀的使用者介面。

 

 

一、介面UI元素介紹

 

Android應用是運行於手機系統上的程式，這種程式給使用者的第一印象就是使用者介面。接下來從以下幾個方面來認識瞭解Android的介面UI元素。

1.1視圖組件View

在Android中View類是最基本的一個UI類，基本上所有的進階UI組件都是繼承View類實現的。Android應用的絕大部分UI組件都放在android.widget包及其子包、android.view包及其子包中，可以看到Android應用的所有UI組件都繼承了 View類。View類是Android系統平台上使用者介面表示的基本單元，View的一些子類被統稱為Widgets （工具），提供了諸如文本輸入框和按鈕之類的UI對象的完整實現。

一個視圖（View）在螢幕上佔據了一塊矩形地區，它負責渲染這塊矩形地區（如將這塊矩形地區變成其他顏色），也可以處理這塊矩形地區發生的事件（如使用者單擊事件），並且可以設定這塊地區是否可見、是否可以擷取焦點等。

1.2視圖容器組件ViewGroup

View類有一個非常重要的子類ViewGroup，其為View的一個擴充，可以容納多個 View，通過ViewGroup類可以建立有聯絡的子View組成的複合控制項。

表示Android圖形化使用者介面的組件層次。

從可以看出，多個視圖組件（View）可以存放在一個視圖容器（ViewGroup）中，該容器可以與其他視圖組件共同存放在另一個容器中，但是一個介面檔案中必須有且只有一個容器作為根結點。

Android的所有UI組件都是建立在View、ViewGroup基礎之上的，Android採用了 “組合器”設計模式來設計View和ViewGroup。對於一個Android應用的圖形化使用者介面來說，ViewGroup作為容器來盛裝其他組件，而ViewGroup裡除了可以包含普通View組件之外，還可以再次包含ViewGroup組件。

1.3布局組件Layout

Android的介面組件比較多，為了更好的系統管理使用者介面裡的各組件，Android提供了布局組件來進行管理。通過使用布局組件，Android應用的圖形化使用者介面具有良好的平台無關性。

目前Android中主要有六種布局，分別如下：

? LinearLayout（線性布局）：

按照水平或垂直的順序將子項目（可以是控制項或布局）依次按照順序排列，每一個元素都位於前面一個元素之後。

? RelativeLayout（相對布局）：

按照子項目之間的位置關係完成布局的，作為Android系統五大布局中最靈活也是最常用的一種布局方式，非常適合於一些比較複雜的介面設計。

? TableLayout（表格版面配置）：

以行和列的形式對控制項進行管理，每一行為一個TableRow對象，或一個View控制項。

? FrameLayout（幀布局）：

將所有的子項目放在整個介面的左上方，後面的子項目直接覆蓋前面的子項目。

? AbsoluteLayout（絕對布局）：

將所有的子項目通過設定android:layout_x 和 android:layout_y屬性，將子項目的座標位置固定下來。

? GridLayout（網格布局）：

是Android 4.0新增的布局管理器，把整個容器劃分成為行*列個網格，每個網格可以放置一個組件，另外，也可以設定一個組件橫跨多個列和多個行。

以上幾種布局類圖如 所示：

關於布局組件的內容，會在後續課程進行詳細學習，此處不做過多說明。

1.4布局參數LayoutParams

LayoutParams是用來設定視圖布局的基類，基本的LayoutParams類只是用來描述視圖的寬度和高度。

Android提供的布局類都是LayoutParams的子類，LayoutParams的子類主要有：

? AbsListView.LayoutParams

? AbsoluteLayout.LayoutParams

? FrameLayout.LayoutParams

? LinearLayout.LayoutParams

? RadioGroup.LayoutParams

? RelativeLayout.LayoutParams

? TableLayout.LayoutParams

? TableRow.LayoutParams

? ViewGroup.MarginLayoutParams

? WindowManager.LayoutParams

其中常用的是RelativeLayout.LayoutParams、LinearLayout.LayoutParams、ViewGroup.MarginLayoutParams。將會在後續內容中陸續學習，此處不在贅述。

 

 

二、UI介面通用屬性和方法

 

View類是所有UI組件的基類，其包含的XML屬性和方法是所有組件都可使用的，接下來一起先來整體學習，如下表所示。

ViewGroup繼承了 View類，當然也可以當成普通View來使用，但ViewGroup主要還是當成容器類使用。但由於ViewGroup是一個抽象類別，因此實際使用中通常總是使用ViewGroup 的子類來作為容器，例如各種布局管理器。

ViewGroup容器控制其子組件的分布依賴於ViewGroup.LayoutParams、ViewGroup. MarginLayoutParams兩個內部類。這兩個內部類中都提供了一些XML屬性，ViewGroup容器中的子組件可以指定這些XML屬性。

其中ViewGroup.LayoutParams所支援的兩個XML屬性如下：

? android:layout_width：指定該組件的布局寬度。

? android:layout_height：指定該組件的布局高度。

關於上面這兩個屬性，其屬性值一般為如下3個屬性值其一。

? fill_parent：

指定子組件的高度、寬度與父容器組件的高度、寬度相同（實際上還要減去填充的空白距離）。

? match_parent：

該屬性值與fill_parent完全相同，而且從Android 2.2開始就推薦使用這個屬性值來代替fill_parent。

? wrap_content：

指定子組件的大小恰好能包裹它的內容即可。

除了以上這3個屬性值，還可以指定具體的寬高像素值，如80dp。其中dp為一個尺寸單位。

 

在正式學習Android組件之前，先來一起瞭解幾個基本概念。

? px：

像素（pixels），1px代表螢幕上一個物理的像素點。px單位不被建議使用，因為同樣100px的圖片，在不同手機上顯示的實際大小可能不同。偶爾用到px的情況，是需要畫1像素表格線或陰影線的時候，用其他單位如dp會顯得模糊。

? dp：

裝置獨立像素（Density-independent pixel），一種基於螢幕密度的抽象單位。在每英寸160點的顯示器上，1dp=1px，但隨著螢幕密度的改變，dp與px的換算會發生改變，換算公式為dips=(pixs*160)/densityDpi。

? dip：

裝置獨立像素，與dp完全相同，只是名字不同而已。在早期的Android版本裡多使用dip，後來為了與sp統一就建議使用dp。

? sp：

比例像素（scale-independent pixel），主要處理字型的大小，可以根據使用者的字型大小喜好設定進行縮放。當文字尺寸是“正常”時1sp=1dp=0.00625英寸，而當文字尺寸是“大”或“超大”時1sp1dp=0.00625英寸。

? in：

英寸，標準長度單位，1英寸=2.54厘米（約）。

? mm：

毫米，標準長度單位。

? pt：

磅（point），標準長度單位，1pt=1/72英寸=0.035厘米。

? ppi：

每英吋像素數（pixel per inch），該值越高，則螢幕越細膩。

? dpi：

每英寸多少點（dot per inch），該值越高，則圖片越細膩。

安卓端螢幕大小各不相同，根據其像素密度，主要分為幾種規格，如下表所示。

ViewGroup.MarginLayoutParams用於控制子組件周圍的頁面邊界（Margin，也就是組件四周的空白），它支援的XML屬性如下表所示。

 

 

三、建立UI介面

 

在前面的內容指出過，Android推薦使用XML布局檔案來定義使用者介面，而不是使用Java代碼來開發使用者介面，所有組件都提供了兩種方式來控制組件的行為。

? 在XML布局檔案中通過XML屬性進行控制。

? 在Java程式碼中通過調用方法進行控制。

實際上不管使用哪種方式，它們控制Android使用者介面行為的本質是完全一樣的。大部分時候，控制UI組件的XML屬性還有對應的方法。UI介面的建立主要分為如下三種情況。

3.1使用XML布局檔案

實際上在建立HelloWorld應用程式的時候就是使用該方法，這種方法是Android推薦使用的，不僅簡單、明了，而且可以將應用的視圖控制邏輯從Java代碼中分離出來，放入XML檔案中控制，從而更好地體現MVC原則。

當我們在Android應用的app/src/main/res/layout目錄下定義一個XML布局檔案之後（R.java會自動收錄該布局資源），Java代碼可通過如下方法在Activity中顯示該視圖：

setContentView (R.layout.資源檔名字);

當在布局檔案中添加多個UI組件時，都可以為該UI組件指定android:id屬性，該屬性的屬性值代表該組件的唯一標識。接下來如果希望在Java代碼中訪問指定UI組件，則可通過如下代碼來訪問它：

findViewByld (R.id.android.id 屬性值);

一旦在Java程式中獲得指定UI組件之後，接下來就可以通過代碼來控制各UI組件的外觀行為了，包括為UI組件綁定事件監聽器等。

3.2使用Java代碼

雖然Android推薦使用XML布局檔案來控制UI介面，但如果開發人員願意，Android允許開發人員完全在Java代碼中控制UI介面。 如果希望在代碼中控制UI介面，那麼所有的UI組件都將通過new關鍵字建立出來，然後以合適的方式添加到UI介面即可。

為了更好的學習這一塊內容內容，在HelloWorld工程中將app/src/main/java/MainActivity.java檔案的代碼修改一下，具體控制碼如下：

public class MainActivity extends AppCompatActivity {     @Override   protected void onCreate(Bundle savedInstanceState) {     super.onCreate(savedInstanceState);     //setContentView(R.layout.activity_main);         // 建立一個線性布局     LinearLayout layout = new LinearLayout(this);     layout.setOrientation(LinearLayout.VERTICAL);       // 建立一個顯示Hello World!的TextView     TextView show = new TextView(this);     show.setText(Hello World!);       // 向layout容器添加一個TextView     layout.addView(show);       // 設定該Activity顯示layout     setContentView(layout);   }  }  

 

 從上面程式的字代碼可以看出，該程式中所用到的UI組件都是通過new關鍵字建立出來的，然後程式使用LinearLayout容器來容納這些UI組件，這樣就組成了圖形化使用者介面。

 

從上面的程式碼中可以看出，建立UI組件時需要傳入一個this參數，這是由於Context代表訪問Android應用環境的全域資訊的 API。讓UI組件持有一個Context參數，可以讓這些UI組件通過該Context參數來擷取Android 應用環境的全域資訊。Context本身是一個抽象類別，Android應用的 Activity、Service 都繼承了 Context，因此Activity、Service都可直接作為Context使用。關於這一塊的內容現在可能會看不太懂，不過沒關係，經過後續的學習就明白了。

通過XML布局和通過Java代碼都可以實現同樣的功能，但是發現通過Java代碼實現程式非常臃腫，而用XML布局代碼要簡單得多，因此在開發中不推薦使用這種方式。

3.3混合使用XML布局檔案和Java代碼

前面己經提到，完全使用Java代碼來控制UI介面不僅煩瑣，而且不利於解耦；而完全利用XML布局檔案來控制UI介面雖然方便、便捷，但難免有失靈活。因此有些時候，可能需要混合使用XML布局檔案和代碼來控制UI介面。

當混合使用XML布局檔案和代碼來控制UI介面時，習慣上把變化小、行為比較固定的組件放在XML布局檔案中管理，而那些變化較多、行為控制比較複雜的組件則交給Java代碼來管理。

此處不做過多介紹，在後續課程中會陸續接觸到這種混合使用的方式來控制UI介面。

今天就先到這裡，下一期開始UI組件的學習。如果有問題歡迎留言一起探討，也歡迎加入Android零基礎入門技術討論群，共同成長！

往期總結分享：

Android零基礎入門第1節：Android的前世今生

Android零基礎入門第2節：Android 系統架構和應用組件那些事

Android零基礎入門第3節：帶你一起來聊一聊Android開發環境

Android零基礎入門第4節：正確安裝和配置JDK, 高富帥養成第一招

Android零基礎入門第5節：善用ADT Bundle, 輕鬆邂逅女神

Android零基礎入門第6節：配置最佳化SDK Manager, 正式約會女神

Android零基礎入門第7節：搞定Android模擬器，開啟甜蜜之旅

Android零基礎入門第8節：HelloWorld，我的第一趟旅程出發點

Android零基礎入門第9節：Android應用實戰，不懂代碼也可以開發

Android零基礎入門第10節：開發IDE大升級，終於迎來了Android Studio

Android零基礎入門第11節：簡單幾步帶你飛，運行Android Studio工程

Android零基礎入門第12節：熟悉Android Studio介面，開始裝逼賣萌

Android零基礎入門第13節：Android Studio配置最佳化，打造開發利器

Android零基礎入門第14節：使用高速Genymotion，跨入火箭時代

Android零基礎入門第15節：掌握Android Studio項目結構，揚帆起航

此文章著作權為公眾號分享達人秀（ShareExpert）——鑫鱻所有，若轉載請備忘出處，特此聲明！

Android零基礎入門第16節：Android使用者介面開發概述