內(nèi)容摘要

上節(jié)我們學(xué)習(xí)了簡單的Android程序入門，使大家對(duì)Android開發(fā)有了初步的印象，本節(jié)我們講解一下簡單的前端架構(gòu)設(shè)計(jì)。

1.MVC簡介

2.壞的設(shè)計(jì)

3.稍好點(diǎn)的設(shè)計(jì)

4.一點(diǎn)設(shè)計(jì)經(jīng)驗(yàn)

5.總結(jié)

其實(shí)架構(gòu)設(shè)計(jì)無處不在，而APP開發(fā)很少涉及架構(gòu)設(shè)計(jì)，因?yàn)锳PP的功能定位比較簡單，都是在單進(jìn)程下的單用戶操作，很少有APP開發(fā)者設(shè)計(jì)非常復(fù)雜的多線程架構(gòu)，但是這并不等于APP的開發(fā)就無需架構(gòu)設(shè)計(jì)。

對(duì)于經(jīng)驗(yàn)欠缺的APP開發(fā)者，你會(huì)發(fā)現(xiàn)他們?cè)O(shè)計(jì)的目錄結(jié)構(gòu)以及代碼與代碼之間的邏輯關(guān)系非常混亂，很多功能都羅列在一切，只是簡單的讓程序能跑起來，并不怎么關(guān)心可維護(hù)性和可持續(xù)改進(jìn)的能力。

我曾經(jīng)見到過這樣的代碼：布局文件既有xml文件來設(shè)置，也有java代碼來設(shè)置的，非常混亂的摻雜在一起，導(dǎo)致后期維護(hù)非常苦難。你會(huì)發(fā)現(xiàn)對(duì)于這樣的代碼，接手者的第一反應(yīng)是，修改還不如重寫。

因此本節(jié)介紹一種簡單的設(shè)計(jì)模式，MVC模式，讓你的APP代碼目錄結(jié)構(gòu)簡潔，做到高內(nèi)聚，低耦合。寫出漂亮的代碼既能夠方便自己的管理和維護(hù)，又方便他人閱讀和維護(hù)。

MVC簡介

MVC:Model View Controller ,這里我簡單說一下我的理解，Model就是數(shù)據(jù), View就是數(shù)據(jù)的展示， Controller 是控制如何展示數(shù)據(jù)以及用戶操作界面之后，怎樣存儲(chǔ)最新數(shù)據(jù)。如果有興趣的同學(xué)，可以去網(wǎng)上搜索一下更詳細(xì)的知識(shí)。我從網(wǎng)上搜了一個(gè)比較準(zhǔn)確的圖片：

我們以展示某學(xué)生的簡單信息為例，假設(shè)學(xué)生信息只有4個(gè)屬性:姓名，學(xué)號(hào)，年齡，年級(jí)。我們的主要工作就是展示某學(xué)生的基本信息，并支持簡單的內(nèi)容修改。

首先我們把流程描述一下，你就會(huì)發(fā)現(xiàn)，每個(gè)步驟都要有一個(gè)角色去實(shí)現(xiàn)

step1：我們根據(jù)學(xué)生的學(xué)號(hào)，從數(shù)據(jù)庫或者網(wǎng)絡(luò)獲取關(guān)于該學(xué)生的基本信息，并存儲(chǔ)到某個(gè)對(duì)象里面。

step2：我們需要生成或者加載一個(gè)界面來展示學(xué)生的基本信息。

step3:我們需要把step1中存儲(chǔ)的學(xué)生信息，賦值給展示界面的各個(gè)控件，當(dāng)用戶修改這些信息的時(shí)候，還需要將用戶修改的數(shù)據(jù)，賦值給存儲(chǔ)對(duì)象，并存儲(chǔ)回?cái)?shù)據(jù)庫或者網(wǎng)絡(luò)。

那么根據(jù)以上流程，你就會(huì)發(fā)現(xiàn)，step1中的功能就需要一個(gè)model這樣的角色來處理，step2中的展示功能，就需要view這樣的角色來處理，step3中的邏輯處理就是controller的工作。

這應(yīng)該是最簡單的MVC的解釋了，關(guān)于MVC設(shè)計(jì)模式，并沒有非常清晰的定義和概念的描述，總的原則就是分離數(shù)據(jù)，展示，處理邏輯這三部分，讓代碼清晰可讀，容易理解。接下來我將用兩個(gè)例子來展示，好的設(shè)計(jì)和一鍋粥式的代碼實(shí)現(xiàn)，有什么區(qū)別。

壞的設(shè)計(jì)

我們?cè)谏弦还?jié)中的Hello World基礎(chǔ)上，增加一個(gè)新的Activity ，并從MainActivity跳轉(zhuǎn)到新界面，這個(gè)新建的Activity將為大家展示一個(gè)不好的設(shè)計(jì)代碼。

首先新建一個(gè)basic activity。

點(diǎn)擊finish， 然后我們?cè)贖ello Word的MainActivity里面增加一個(gè)跳轉(zhuǎn)到我們示例的按鈕，并增加響應(yīng)代碼，如下：

public void jumpToBad(View view){

Intent intent = new Intent(this, MVCBadActivity.class);

intent.putExtra("name", "李四");

intent.putExtra("idCard", "wx001");

intent.putExtra("age", 20);

intent.putExtra("grade", 2);

startActivity(intent);

}

我們?cè)谔D(zhuǎn)到新的界面之前，將數(shù)據(jù)傳輸?shù)叫碌慕缑妫谏a(chǎn)環(huán)境下，一般都是從本地?cái)?shù)據(jù)庫獲取或者從網(wǎng)絡(luò)獲取，然后再在新界面展示。

接下來我們就是要?jiǎng)?chuàng)建一些頁面元素來展現(xiàn)我們得到的數(shù)據(jù)。這是本節(jié)要講解的重點(diǎn)，我們先看一個(gè)不好的例子，一個(gè)Activity這樣的Controller如何把學(xué)生信息這個(gè)Model展現(xiàn)在Textview，EditText這些android的View上的。先看代碼：

public class MVCBadActivity extends AppCompatActivity {

String stu_name, stu_idCard;

int stu_age, stu_grade;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

Intent intent = getIntent();

stu_name = intent.getStringExtra("name");

stu_idCard = intent.getStringExtra("idCard");

stu_age = intent.getIntExtra("age", 18);

stu_grade = intent.getIntExtra("grade", 1);

......

首先定義私有成員變量，接收從前一個(gè)界面?zhèn)鬏斶^來的數(shù)據(jù)，這部分邏輯就是Model模塊的角色應(yīng)該承擔(dān)的任務(wù)。

RelativeLayout layout = new RelativeLayout(this);

RelativeLayout.LayoutParams layoutParams = new ?? ?RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.WRAP_CONTENT, RelativeLayout.LayoutParams.WRAP_CONTENT);

layout.setLayoutParams(layoutParams);

然后創(chuàng)建一個(gè)相對(duì)布局，用來展示這些數(shù)據(jù)，創(chuàng)建布局，以及設(shè)置布局的大小和相對(duì)位置，這些工作是Controller這個(gè)角色來完成的，而創(chuàng)作出來的對(duì)象就是View這個(gè)角色，View的任務(wù)就是作為一個(gè)手機(jī)操作系統(tǒng)可以理解并能夠顯示的對(duì)象，用來展示Controller賦予他的內(nèi)容 。

TextView label_name = new TextView(this);

label_name.setId(1);

label_name.setText("學(xué)生姓名:");

RelativeLayout.LayoutParams params1 = new RelativeLayout.LayoutParams(

RelativeLayout.LayoutParams.WRAP_CONTENT,

RelativeLayout.LayoutParams.WRAP_CONTENT);

EditText text_name = new EditText(this);

text_name.setId(2);?? ?text_name.setEms(5);

text_name.setInputType(InputType.TYPE_TEXT_VARIATION_PERSON_NAME);

text_name.setText(stu_name);

RelativeLayout.LayoutParams params2 = new ?? ?RelativeLayout.LayoutParams(300,??????????????? RelativeLayout.LayoutParams.WRAP_CONTENT);

params2.addRule(RelativeLayout.RIGHT_OF, label_name.getId());

params1.addRule(RelativeLayout.ALIGN_BOTTOM, text_name.getId());

params2.leftMargin = 180;

layout.addView(label_name, params1);

layout.addView(text_name, params2);

添加一個(gè)標(biāo)簽，提示當(dāng)前數(shù)據(jù)表示的是學(xué)生姓名。然后添加一個(gè)可以編輯的控件，用來展示學(xué)生姓名給用戶并且可以接受用戶對(duì)學(xué)生姓名的修改。

這里需要注意的是需要通過代碼來設(shè)置兩個(gè)控件的大小，距離，以及相對(duì)位置等信息，最后通過addview函數(shù)將兩個(gè)控件放到整個(gè)頁面的相對(duì)布局中。

其它三個(gè)控件的設(shè)置與此類似，不再贅述。這里所用到的EditText和TextView控件，都是繼承自android的android.view.View這個(gè)類，通過android studio的查看源碼的方式，可以跟蹤到這些控件的父類，此處的View類的命名，很好地詮釋了MVC設(shè)計(jì)中的View角色應(yīng)該承擔(dān)的工作。

提示：在oncreate函數(shù)的最后要調(diào)用setContentView(layout);

所有控件添加完成之后，效果是這樣的：

這里需要再深入講解一下的是“修改”這個(gè)按鈕的布局和邏輯處理:

RelativeLayout.LayoutParams params9 = new RelativeLayout.LayoutParams(300,?????? ??? ?RelativeLayout.LayoutParams.WRAP_CONTENT);

params9.topMargin = 200;

params9.leftMargin = 100;

params9.addRule(RelativeLayout.BELOW, label_grade.getId());

Button btn_ok = new Button(this);

btn_ok.setText("修改");

btn_ok.setId(9);

btn_ok.setOnClickListener(new View.OnClickListener(){

@Override

public void onClick(View v) {

stu_name = text_name.getText().toString();

stu_idCard = text_idCard.getText().toString();

stu_age = Integer.valueOf(text_age.getText().toString());

stu_grade = Integer.valueOf(text_grade.getText().toString());

//調(diào)用數(shù)據(jù)庫存儲(chǔ)或者網(wǎng)絡(luò)存儲(chǔ)

Toast.makeText(MVCBadActivity.this, "處理完成",

Toast.LENGTH_SHORT).show();

finish();

}

});

代碼前半部分是布局設(shè)置，與其它控件的設(shè)置相似，重點(diǎn)是按鈕的響應(yīng)代碼。當(dāng)用戶修改了基本信息的時(shí)候，我們從這些View獲取數(shù)據(jù)并把數(shù)據(jù)復(fù)制給對(duì)應(yīng)的私有成員變量。這個(gè)過程就是在Controller的控制下，將View的數(shù)據(jù)賦值給Model角色。

還有一點(diǎn)需要說明的就是 finish()函數(shù)的調(diào)用，這個(gè)動(dòng)作是將當(dāng)前Activity從堆棧中彈出并且釋放內(nèi)存資源，此知識(shí)點(diǎn)在本章中第二節(jié)中詳細(xì)的介紹過，不理解的同學(xué)可以溫習(xí)一下。

至此已經(jīng)將這個(gè)demo講解完畢，通篇代碼設(shè)計(jì)的缺陷也比較明顯，數(shù)據(jù)的加載賦值，View的創(chuàng)建和位置的設(shè)置，數(shù)據(jù)反饋給Model的代碼邏輯，控件的響應(yīng)函數(shù)，全部融合在Controller這一個(gè)角色里面。

當(dāng)工程比較簡單的情況下，尚且可以維護(hù)，但是如果代碼邏輯變得復(fù)雜，數(shù)據(jù)展示內(nèi)容變多，各種動(dòng)畫效果和圖片都融合在一起的時(shí)候，這樣的代碼將會(huì)變得非常復(fù)雜和冗長。

但是所有的事情有利有弊，這段代碼的為數(shù)不多的優(yōu)勢(shì)就是，方便初學(xué)者學(xué)習(xí)和理解代碼邏輯，特別是在我們講解MVC模式的時(shí)候，通過一個(gè)函數(shù)就可以直觀看到Controller如何操作Model和View的，以及他們之間如何交互。(未完待續(xù))