第2章第4節界面MVC(上)

內容摘要

上節我們學習了簡單的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的,以及他們之間如何交互。(未完待續)

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 229,001評論 6 537
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 98,786評論 3 423
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 176,986評論 0 381
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 63,204評論 1 315
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 71,964評論 6 410
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 55,354評論 1 324
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,410評論 3 444
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 42,554評論 0 289
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 49,106評論 1 335
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 40,918評論 3 356
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 43,093評論 1 371
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,648評論 5 362
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 44,342評論 3 347
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 34,755評論 0 28
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 36,009評論 1 289
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 51,839評論 3 395
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 48,107評論 2 375

推薦閱讀更多精彩內容

  • viewpager是用在滾動中相對比較多的,最近做一個定時滾動顯示viewpager內容。 步驟: 一:在布局文件...
    jiangbin1992閱讀 1,114評論 0 2
  • ¥開啟¥ 【iAPP實現進入界面執行逐一顯】 〖2017-08-25 15:22:14〗 《//首先開一個線程,因...
    小菜c閱讀 6,489評論 0 17
  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 172,681評論 25 708
  • 一只偷嘴的貓被人發現后,驚魂未定中竟隨著早晨的陽光遛入了私塾。那位“之呼者也”的先生正巧不在,悶得發慌的幾個頑童發...
    邢欣Magpie閱讀 500評論 0 5
  • 以前老是說:要是一個愛我的和我愛的人同時出現,我肯定會選愛我的。可是,現實呢,當你真的遇到這樣的情況,可能會遲疑了...
    春宇兒閱讀 183評論 0 0