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

左側圖片在手機上正常顯示的程序界面，右側是在系統(tǒng)中開啟了「顯示布局邊界」功能后的界面。

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

了解了「控件」的概念后，我們來看看主界面的頭部區(qū)域：

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

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

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

比如我將「超敬業(yè)!董卿主持節(jié)目踩空摔傷」這個新聞滑出屏幕后，系統(tǒng)會自動「回收」這個新聞對應的控件對象，并把它與即將滑入屏幕中的新聞數(shù)據(jù)進行綁定，后作為一個新的條目進入屏幕。

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

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

#專欄作家#

給產品經理講技術，微信公眾號（pm_teacher），人人都是產品經理專欄作家。資深程序猿，專注客戶端開發(fā)若干年，對前端、后臺技術略懂，熱衷于對新的科技領域的探索。

本文原創(chuàng)發(fā)布于人人都是產品經理，未經許可，不得轉載。