前端之Android入門(3):MVC模式(上)

時間 2019-12-01

標籤前端 android 入門 mvc 模式欄目 Android 简体版

原文原文鏈接

不少Android的入門書籍，在前面介紹完佈局後就會逐個介紹組件，而後開始編寫組件使用的例子。往往到此時小夥伴們均可能會有些疑問：是否應該先啃完一本《Java編程思想》學點 Java 知識呢？這些組件會使用了，但如何更好組織起來呢？css

其實，Android 和 iOS 已經把應用層級別的東西封裝得比較簡單易用，也配有豐富的文檔與之對應，因此倒沒必要擔憂如何使用。而實際上，我想讓你們經過這個系列的文章更關注和學習下面兩點，我也會在例子的選取上多涉及這些方面的知識。html

編程的思想。正如學會英語，並不必定就能寫出好的英文文章。
查找學習的能力。知道如何發現問題的關鍵點，而後去找方法解決。

MVC 是軟件工程中最基本的設計模式，也是組織良好代碼的基礎，Android 和 iOS 中也同樣，因此在接下來的三篇文章中，將會介紹如何經過 MVC 模式製做一個簡易計算器應用，Let’s Go!前端

這個高大上（偷笑）的計算器界面以下，此次先完成界面部分。java

一，界面還原準備

首先，打開 Eclipse，建立一個 Android 工程，並命名爲：Calculator（以下圖）android

此時，會默認打開 MainActivity.java 和 activity_main.xml 兩個文件，activity_main.xml 爲界面佈局文件，MainActivity.java 爲程序入口文件（此次先不用編寫）。
同時，咱們將 res > values > styles.xml 文件打開，activity_main.xml 和 styles.xml 之間的關係就至關於 html 和 css。web

咱們知道，Android 中有 LinearLayout，RelativeLayout 等佈局元素，此次咱們就先用 LinearLayout 來完成界面的佈局。編程

:) 首先等我請出本系列課程的助教：Google 大神設計模式

LinearLayout（線性佈局），大神給出的定義是：
將子視圖元素按水平或垂直方向一個接一個排列的視圖組合（佈局）。session

從上一篇文章中咱們知道 View 類由兩類屬性控制其視覺呈現，因此 LinearLayout 有其自有屬性，而處於其內的子元素則可使用 LinearLayout.LayoutParams 定義的屬性，那怎樣去找這些屬性呢？固然是去問咱們的大神了。ide

LinearLayout 類參考

從 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 有什麼屬性呢，一樣咱們從大神那找到：

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)