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

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

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

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

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

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

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

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

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

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

#專欄作家#

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

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