內容摘要
上節我們學習了簡單的Android程序入門,使大家對Android開發有了初步的印象,本節我們講解一下簡單的前端架構設計。
1.MVC簡介
2.壞的設計
3.稍好點的設計
4.一點設計經驗
5.總結
其實架構設計無處不在,而APP開發很少涉及架構設計,因為APP的功能定位比較簡單,都是在單進程下的單用戶操作,很少有APP開發者設計非常復雜的多線程架構,但是這并不等于APP的開發就無需架構設計。
對于經驗欠缺的APP開發者,你會發現他們設計的目錄結構以及代碼與代碼之間的邏輯關系非常混亂,很多功能都羅列在一切,只是簡單的讓程序能跑起來,并不怎么關心可維護性和可持續改進的能力。
我曾經見到過這樣的代碼:布局文件既有xml文件來設置,也有java代碼來設置的,非常混亂的摻雜在一起,導致后期維護非常苦難。你會發現對于這樣的代碼,接手者的第一反應是,修改還不如重寫。
因此本節介紹一種簡單的設計模式,MVC模式,讓你的APP代碼目錄結構簡潔,做到高內聚,低耦合。寫出漂亮的代碼既能夠方便自己的管理和維護,又方便他人閱讀和維護。
MVC簡介
MVC:Model View Controller ,這里我簡單說一下我的理解,Model就是數據, View就是數據的展示, Controller 是控制如何展示數據以及用戶操作界面之后,怎樣存儲最新數據。如果有興趣的同學,可以去網上搜索一下更詳細的知識。我從網上搜了一個比較準確的圖片:
我們以展示某學生的簡單信息為例,假設學生信息只有4個屬性:姓名,學號,年齡,年級。我們的主要工作就是展示某學生的基本信息,并支持簡單的內容修改。
首先我們把流程描述一下,你就會發現,每個步驟都要有一個角色去實現
step1:我們根據學生的學號,從數據庫或者網絡獲取關于該學生的基本信息,并存儲到某個對象里面。
step2:我們需要生成或者加載一個界面來展示學生的基本信息。
step3:我們需要把step1中存儲的學生信息,賦值給展示界面的各個控件,當用戶修改這些信息的時候,還需要將用戶修改的數據,賦值給存儲對象,并存儲回數據庫或者網絡。
那么根據以上流程,你就會發現,step1中的功能就需要一個model這樣的角色來處理,step2中的展示功能,就需要view這樣的角色來處理,step3中的邏輯處理就是controller的工作。
這應該是最簡單的MVC的解釋了,關于MVC設計模式,并沒有非常清晰的定義和概念的描述,總的原則就是分離數據,展示,處理邏輯這三部分,讓代碼清晰可讀,容易理解。接下來我將用兩個例子來展示,好的設計和一鍋粥式的代碼實現,有什么區別。
壞的設計
我們在上一節中的Hello World基礎上,增加一個新的Activity ,并從MainActivity跳轉到新界面,這個新建的Activity將為大家展示一個不好的設計代碼。
首先新建一個basic activity。
點擊finish, 然后我們在Hello Word的MainActivity里面增加一個跳轉到我們示例的按鈕,并增加響應代碼,如下:
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);
}
我們在跳轉到新的界面之前,將數據傳輸到新的界面,在生產環境下,一般都是從本地數據庫獲取或者從網絡獲取,然后再在新界面展示。
接下來我們就是要創建一些頁面元素來展現我們得到的數據。這是本節要講解的重點,我們先看一個不好的例子,一個Activity這樣的Controller如何把學生信息這個Model展現在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);
......
首先定義私有成員變量,接收從前一個界面傳輸過來的數據,這部分邏輯就是Model模塊的角色應該承擔的任務。
RelativeLayout layout = new RelativeLayout(this);
RelativeLayout.LayoutParams layoutParams = new ?? ?RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.WRAP_CONTENT, RelativeLayout.LayoutParams.WRAP_CONTENT);
layout.setLayoutParams(layoutParams);
然后創建一個相對布局,用來展示這些數據,創建布局,以及設置布局的大小和相對位置,這些工作是Controller這個角色來完成的,而創作出來的對象就是View這個角色,View的任務就是作為一個手機操作系統可以理解并能夠顯示的對象,用來展示Controller賦予他的內容 。
TextView label_name = new TextView(this);
label_name.setId(1);
label_name.setText("學生姓名:");
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);
添加一個標簽,提示當前數據表示的是學生姓名。然后添加一個可以編輯的控件,用來展示學生姓名給用戶并且可以接受用戶對學生姓名的修改。
這里需要注意的是需要通過代碼來設置兩個控件的大小,距離,以及相對位置等信息,最后通過addview函數將兩個控件放到整個頁面的相對布局中。
其它三個控件的設置與此類似,不再贅述。這里所用到的EditText和TextView控件,都是繼承自android的android.view.View這個類,通過android studio的查看源碼的方式,可以跟蹤到這些控件的父類,此處的View類的命名,很好地詮釋了MVC設計中的View角色應該承擔的工作。
提示:在oncreate函數的最后要調用setContentView(layout);
所有控件添加完成之后,效果是這樣的:
這里需要再深入講解一下的是“修改”這個按鈕的布局和邏輯處理:
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());
//調用數據庫存儲或者網絡存儲
Toast.makeText(MVCBadActivity.this, "處理完成",
Toast.LENGTH_SHORT).show();
finish();
}
});
代碼前半部分是布局設置,與其它控件的設置相似,重點是按鈕的響應代碼。當用戶修改了基本信息的時候,我們從這些View獲取數據并把數據復制給對應的私有成員變量。這個過程就是在Controller的控制下,將View的數據賦值給Model角色。
還有一點需要說明的就是 finish()函數的調用,這個動作是將當前Activity從堆棧中彈出并且釋放內存資源,此知識點在本章中第二節中詳細的介紹過,不理解的同學可以溫習一下。
至此已經將這個demo講解完畢,通篇代碼設計的缺陷也比較明顯,數據的加載賦值,View的創建和位置的設置,數據反饋給Model的代碼邏輯,控件的響應函數,全部融合在Controller這一個角色里面。
當工程比較簡單的情況下,尚且可以維護,但是如果代碼邏輯變得復雜,數據展示內容變多,各種動畫效果和圖片都融合在一起的時候,這樣的代碼將會變得非常復雜和冗長。
但是所有的事情有利有弊,這段代碼的為數不多的優勢就是,方便初學者學習和理解代碼邏輯,特別是在我們講解MVC模式的時候,通過一個函數就可以直觀看到Controller如何操作Model和View的,以及他們之間如何交互。(未完待續)