很多Android的入門書籍，在前面介紹完佈局後就會逐個介紹組件，然後開始編寫組件使用的例子。每每到此時小夥伴們都可能會有些疑問：是否應該先啃完一本《Java編程思想》學點 Java 知識呢？這些組件會使用了，但如何更好組織起來呢？
其實，Android 和 iOS 已經把應用層級別的東西封裝得比較簡單易用，也配有豐富的文檔與之對應，所以倒不必擔心如何使用。而實際上，我想讓大家通過這個系列的文章更關注和學習下面兩點，我也會在例子的選取上多涉及這些方面的知識。
- 編程的思想。正如學會英語，並不一定就能寫出好的英文文章。
- 查找學習的能力。知道如何發現問題的關鍵點，然後去找方法解決。
MVC 是軟件工程中最基本的設計模式，也是組織良好代碼的基礎，Android 和 iOS 中也一樣，所以在接下來的三篇文章中，將會介紹如何通過 MVC 模式製作一個簡易計算器應用，Let’s Go!
這個高大上（偷笑）的計算器界面如下，這次先完成界面部分。
一，界面還原準備
首先，打開 Eclipse，創建一個 Android 工程，並命名爲：Calculator（如下圖）
此時，會默認打開 MainActivity.java 和 activity_main.xml 兩個文件，activity_main.xml 爲界面佈局文件，MainActivity.java 爲程序入口文件（這次先不用編寫）。
同時，我們將 res > values > styles.xml 文件打開，activity_main.xml
和 styles.xml 之間的關係就相當於 html 和 css。
我們知道，Android 中有 LinearLayout，RelativeLayout 等佈局元素，這次我們就先用 LinearLayout 來完成界面的佈局。
:) 首先等我請出本系列課程的助教：Google 大神
LinearLayout（線性佈局），大神給出的定義是：
將子視圖元素按水平或垂直方向一個接一個排列的視圖組合（佈局）。
從上一篇文章中我們知道 View 類由兩類屬性控制其視覺呈現，所以 LinearLayout 有其自有屬性，而處於其內的子元素則可以使用 LinearLayout.LayoutParams 定義的屬性，那怎樣去找這些屬性呢？當然是去問我們的大神了。
從 Summary 的 XML Attributes 中可以知道這些屬性的信息概要，點擊每個屬性，下面都有詳細的介紹。
幾個常用屬性：
1，android:orientation 通過設置值爲
“horizontal” 或 “vertical” 讓子元素按水平或垂直排列。
2，android:gravity 設置其內容（文字、視圖）在該元素內的位置，通過
“|” 號分隔多個值（top，bottom，left，right，center，center_vertical，center_horizontal）。
3，android:baselineAligned 設置爲”false”則統一對齊的基線，主要用於設置了不同
gravity 的可顯示文字的 View 元素。這裏先不展開。
那 LinearLayout.LayoutParams 有什麼屬性呢，同樣我們從大神那找到：
從上篇文章可知 xxx.LayoutParams 定義的屬性是用於佈局內的元素上的。
1，android:layout_gravity 讓子元素設置其相對於父元素中的位置，其設值和
android:gravity 一樣。可能有人就會疑問了，那這兩個屬性有什麼區別呢？
簡單點理解，android:gravity 是應用於自身所包含的內容（這個內容可以是文字或子視圖），而 android:layout_gravity 則是應用在自身。
（這裏還要指出一個大家在線性佈局中可能會遇到的問題：android:layout_gravity 設值失效問題。例如在設定了 android:orientation = “vertical” 的 LinearLayout 中，設定一個 TextView 的 layout_grivity = “top” 或者 layout_grivity = “bottom” 是失效的。同樣，在 android:orientation = “horizontal” 中設定元素的 “left” 或 “right” 也會一樣。爲什麼會這樣呢？就留給小夥伴們思考了，其實想想這樣設定還算是合理的。）
2，android:layout_weight 大神也有偷懶的時候，這裏竟然沒有說明。大神把它放在另一個地方介紹了。性質類似 Css 的彈性盒，對 -webkit-flex 設值，相當於顯示權重。情況會很多，篇幅問題只能留在以後的文章加以說明。這次界面製作使用 layout_weight 的策略是：每個元素都佔用“足夠大的空間”，然後各自權重爲1，這樣一來就平均了。
請小夥伴們再看一次線性佈局的介紹， LinearLayout 線性佈局
在準備部分，我沒有直接列出所有屬性來介紹。而是更想展示如何去思考和查找解決辦法的過程。對於文章沒展開部分，可以去查一查，培養閱讀文檔的習慣 :)
二，界面的製作
前面廢話多了， 既然用線性佈局，界面就直接用一個 TextView + 4個LinearLayout 垂直排列做佈局。如下圖：
正如把 css 寫在 html 中是“下流”的寫法，那麼我們應該“上流”點，把樣式分離寫在 styles.xml 中，activity_main.xml 中則通過@style/{ClassName} 的方式留下我們錨點則可。
這裏，Eclipse 會提示xml 中存在若干錯誤，因爲我們還沒在 styles.xml 中建立相應的資源名，不用理會。也會提示了一個修改建議，說把字符硬編碼進TextView了，也可不理。
此時轉到 styles.xml 中，建立起相應的“類名”，（注意：這裏先把 AppTheme 設置爲：android:Theme.NoTitleBar ）
建立完“類名”後，我們就可以編寫<body>的樣式了，這裏設置爲垂直排列。
我們還將建立一個資源文件，用於設定顏色值，就如同 strings.xml 的作用一樣。
這裏先把我們會用到的顏色值都設定了，包括按鈕和文字的顏色。
繼續編寫我們的 styles.xml 文件，通過 layout_weight 的設定，我們將 TextView 和 4個 LinearLayout 平分屏幕的空間。並且爲我們的 TextView 添加相應的樣式，而準備用於放置按鈕的 LinearLayout 則設定爲水平排列：
此時轉到 activity_main.xml 並在 xml 編輯框底部點選 Graphical Layout 這個tab，可以預覽還原了的界面。和我們預想一樣，TextView 佔了空間的1/5。
好了，可以開始編寫我們的按鈕了，我們將用 Button 元素實現按鈕，用 btn_operand 命名操作數的樣式，用 btn_operate 命名操作符的樣式，並且 btn_operate 將會繼承 btn_operand 的樣式，然後重新設置背景色和文字色，這些就和使用 Css 一樣。
預覽一下界面。和我們設想的一樣。
剩下的就交由小夥伴繼續完成啦 :) 在小夥伴們嘗試製作界面的時間，我會盡快準備好下一篇文章，大家有什麼意見都可以留言給我。另外，鑑於個人能力有限，在文章中未免會出現錯誤，歡迎大家的指正，感謝大家的支持！時間原因，沒能及時回覆的留言也先說聲對不起！
後話：
下一篇文章開始將會涉及 Java 代碼，有條件的同學請備一本《Java編程思想》，機械工業出版社的，網上應該有很多 pdf ，當然不會讓你啃了它，太浪費時間。因爲在編寫代碼的過程中，或多或少會涉及 Java 的東西，我會指出需要看的那部分，從而把基礎的 Java 知識學了。另外，應小夥伴們的要求，我會找地方提供編寫的代碼下載。題外話，《Java編程思想》的確是本好書，作爲參考或者學習也好，可以考慮備一本。
感謝你的閱讀，本文由 騰訊ISUX 版權所有，轉載時請註明出處，違者必究，謝謝你的合作。
註明出處格式：騰訊ISUX (http://isux.tencent.com/learn-android-from-zero-session3.html)
