從今天開始,我準備策劃一個新的系列:《庖丁解牛》,內容主要是挑選一些當前市面上比較常見的軟件產品,從我個人的經驗出發,對產品從UI界面到底層的實現機製做一些介紹,旨在用現實中的例子幫助大家了解一些當下常用的軟件開發技術。

《庖丁解牛》第一期,就拿陪伴了我多年蹲坑時光的「網易新聞」來開刀吧。

網易新聞的主界面,中規中矩,甚至配色都與《今日頭條》一致,關於「誰參考了誰」的問題咱們暫且不表,今天,咱們只說技術。

左側圖片在手機上正常显示的程序界面,右側是在系統中開啟了「显示布局邊界」功能后的界面。

「布局邊界」是指「UI控件」所佔的區域大小,每一個紅色的框框都代表一個「控件」。給「控件」設置了正確的參數后,它就會被「布局」到屏幕上的正確位置。參數的設定多種多樣,比如「控件的寬高是多少」,「相對左邊框多少像素」,「布局在某個控件的下方」等。

了解了「控件」的概念后,我們來看看主界面的頭部區域:

「網易」logo下面的一排「控件」展示了新聞的分類,每一個分類的標題都由一個單獨的「控件」承載,比如「頭條」、「娛樂」。這些「控件」都被放在了一個ScrollView中。ScrollView本身也是一個「控件」,顧名思義,這個控件的主要功能就是有Scroll的能力,可以讓布局在其內部的控件(控件內還布局有其他控件的結構,我們一般稱外層的控件為「父控件」,「父控件」內的控件為「子控件」)實現左右或者上下滾動的功能。

ScrollView的使用非常簡單,我們只需要指定ScrollView在屏幕上的大小和位置,將每個子控件的大小設置正確,然後依次添加到ScrollView中,子控件就可以在ScrollView中正常显示了。當子控件的總長度大於控件的展示區域后,用戶就可以左右滑動ScrollView來查看显示在屏幕之外的內容。

ScrollView下方的新聞列表,也是一個可以「滾動」的控件,叫做ListView。它的子控件是一批樣式相同的新聞題圖和簡介信息組成的父控件,這個控件也可以實現「滾動」,不過這裏的「滾動」稍微比ScrollView複雜一些,它最大的特點是可以將用戶滑出屏幕的子控件進行復用,重新綁定新的數據來展示新的內容。

比如我將「超敬業!董卿主持節目踩空摔傷」這個新聞滑出屏幕後,系統會自動「回收」這個新聞對應的控件對象,並把它與即將滑入屏幕中的新聞數據進行綁定,後作為一個新的條目進入屏幕。

ListView主要應用在需要展示的內容數量特別大,而且展示的內容布局又十分近似的場景。原因是每個控件被創建后,都需要佔用一定的內存,如果不利用ListView復用控件的機制,用戶下滑的距離越大,控件佔用的內存就越大,設備就會越來越卡,直至內存耗盡。而相似的內容布局,降低了控件復用的成本。

今天咱們通過分析《網易新聞》客戶端的主頁,了解了「控件」、「ScrollView」和「ListView」的概念和特性。如果大家對這個系列感興趣的話,後面會繼續介紹客戶端的其他UI控件、數據存儲和其他相關技術。如果你有特別感興趣的點,也可以留言告訴我哦。

#專欄作家#

給產品經理講技術,微信公眾號(pm_teacher),人人都是產品經理專欄作家。資深程序猿,專註客戶端開發若干年,對前端、後台技術略懂,熱衷於對新的科技領域的探索。

本文原創發佈於人人都是產品經理,未經許可,不得轉載。