第三章 使用者界面設計
寫在前面：
有人問為什麼網絡上那麼多教程，直接學習就好了，為啥還要浪費時間跟精力自己重新寫一系統的文章？
寫部落格不是一種情懷，而是對自己所學所用知識的總結。寫文章是一種态度，是對自己已知能力的輸出的考核。
最重要一點，人生在世，總要留點痕迹不是？
本文同時發表至簡書，不為什麼，用他的MarkDown線上編輯爽得要哭。
第一節 應用組成預覽
從第二章建立的應用是由一個Activity和一個布局(layout)構成。
- Activity
- activity是SDK中Activity類的一個具體執行個體，負責管理使用者與資訊屏的互動。應用的功能則是通過一個個Activity子類來實作。簡單的應用可能隻要一個子類。而複雜的應用則會有多個子類。
- 布局（layout）
- layout定義了一系列使用者界面對象以及它們顯示在螢幕上的位置。組成布局的定義儲存在XML中。每個定義用來建立螢幕上的一個對象，如文本或按鈕。
如上圖所示，Eclipse已預設打開activity_quiz.xml布局檔案，同時在Android圖形布局工具中顯示了預覽界面。但為了更好的了解布局的内部原理，先學習XML如何定義布局。
代碼清單3-1 預設的activity布局
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context="com.example.geoquiz.QuizActivity" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/hello_world" />
</RelativeLayout>
在代碼3-1中可以看到activity的布局預設兩個元件（widget）:RelativeLayout 與TextView。
元件是組成使用者界面的構造子產品，類似HTML中的各種标簽。 元件可以顯示文字、圖像與使用者互動，甚至是布置螢幕上的其他元件。 SDK中内置了很多種元件，通過配置各種元件可獲得所需的使用者界面及行為。
但根據第二章的需求分析可以得到預設的元件布局并不符合或滿足需求。而實際上我們需要比預設的元件布局更複雜的元件布局。
- 一個垂直的LinearLayout元件，用于框住整個布局界面
- 一個TextView元件，用于展示問題内容
- 一個水準的LinearLayout元件，用于固定兩個按鈕
- 兩個Button元件，用于使用者選擇答案
最後以實際需求要的元件，在XML中定義
代碼3-2 在XML檔案中定義元件（activity_quiz.xml）
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:orientation="vertical" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="24dp"
android:text="@string/question_text" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/true_button"
tools:ignore="ButtonStyle" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/false_button" />
</LinearLayout>
</LinearLayout>
第二節 視圖層級結構
根據XML所定義的元件，可以得到XML布局對應的視圖層級結構
從布局的視圖層次結構可以看到，LinearLayout元件是其根元素。而作為根元素LinearLayout元件必須指定Android XML資源檔案的命名空間屬性為
http://schemas.android.com/apk/res/android
。
LinearLayout元件繼承自View子類的ViewGroup元件。ViewGroup元件是一個包含并配置其他元件的特殊元件。而LinearLayout元件可以實作一列或一排的樣式布置。其他的ViewGroup子類還包括FrameLayout、TableLayout和RelativeLayout。
若某個元件包含在一個ViewGroup中，該元件與ViewGroup構成父子關系。
第三節 元件屬性
在XML配置中，可以看到有些配置的資訊，如
android:layout_width
等。這些屬性都是一些常用屬性。現在我們來看一下。
-
android:layout_width和android:layout_height
可以這麼認為，所有元件都需要這兩個屬性。它們通常被設定為以下兩種屬性值之一：
- match_parent：視圖與其父視圖大小相同
-
wrap_content：視圖将根據其内容自動調整大小
根LinearLayout元件的高度與寬度值均設定為match_parent。但根LinearLayout也有父視圖：View--Android提供該父視圖來容納應用的整個視圖層級結構。
-
android:orientation屬性
android:orientation屬性是兩個LinearLayout元件都具有的屬性，決定了才者子元件是水準放置還是垂直放置。
LinearLayout子元件的定義順序決定在螢幕上顯示的順序。
在豎直的LinearLayout,第一個定義的子元件出現在螢幕的最上端。
在水準的LinearLayout,第一個定義的子元件出現在螢幕的最左端。
-
android:text屬性
TextView與Button元件都有android:text屬性。該屬性是指定元件顯示的文字内容。
請注意，android:text屬性不是字元串字面值，而是對字元串資源的引用。同時由于在activity_quiz.xml檔案中引用的字元串資源不存在。要進行添加這些資源。
第三節 建立字元串資源
每個項目都有包含一個名為
string.xml
的預設字元串檔案。
代碼3-3 添加字元串資源
<?xml version="1.0" encoding="utf-8"?>
<resources>
<string name="app_name">GeoQuiz</string>
<string name="hello_world">Hello world!</string>
<string name="action_settings">Settings</string>
<string name="question_text">This is question zone!</string>
<string name="true_button">True</string>
<string name="false_button">False</string>
</resources>
現在，在項目的任何XML檔案中，隻要引用到@string/false_button，應用運作時就行得到
false
小結
本章節主要是介紹一個activity組成及相應布局。下一章将對Button操作進行代碼實作。
您還可以閱讀第二章
轉載于:https://www.cnblogs.com/zhengguinan/p/5294063.html