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