庖丁解牛 | 网易新闻客户端的UI结构

从今天开始，我准备策划一个新的系列：《庖丁解牛》，内容主要是挑选一些当前市面上比较常见的软件产品，从我个人的经验出发，对产品从UI界面到底层的实现机制做一些介绍，旨在用现实中的例子帮助大家了解一些当下常用的软件开发技术。

《庖丁解牛》第一期，就拿陪伴了我多年蹲坑时光的「网易新闻」来开刀吧。

网易新闻的主界面，中规中矩，甚至配色都与《今日头条》一致，关于「谁参考了谁」的问题咱们暂且不表，今天，咱们只说技术。

左侧图片在手机上正常显示的程序界面，右侧是在系统中开启了「显示布局边界」功能后的界面。

「布局边界」是指「UI控件」所占的区域大小，每一个红色的框框都代表一个「控件」。给「控件」设置了正确的参数后，它就会被「布局」到屏幕上的正确位置。参数的设定多种多样，比如「控件的宽高是多少」，「相对左边框多少像素」，「布局在某个控件的下方」等。

了解了「控件」的概念后，我们来看看主界面的头部区域：

「网易」logo下面的一排「控件」展示了新闻的分类，每一个分类的标题都由一个单独的「控件」承载，比如「头条」、「娱乐」。这些「控件」都被放在了一个ScrollView中。ScrollView本身也是一个「控件」，顾名思义，这个控件的主要功能就是有Scroll的能力，可以让布局在其内部的控件（控件内还布局有其他控件的结构，我们一般称外层的控件为「父控件」，「父控件」内的控件为「子控件」）实现左右或者上下滚动的功能。

ScrollView的使用非常简单，我们只需要指定ScrollView在屏幕上的大小和位置，将每个子控件的大小设置正确，然后依次添加到ScrollView中，子控件就可以在ScrollView中正常显示了。当子控件的总长度大于控件的展示区域后，用户就可以左右滑动ScrollView来查看显示在屏幕之外的内容。

ScrollView下方的新闻列表，也是一个可以「滚动」的控件，叫做ListView。它的子控件是一批样式相同的新闻题图和简介信息组成的父控件，这个控件也可以实现「滚动」，不过这里的「滚动」稍微比ScrollView复杂一些，它最大的特点是可以将用户滑出屏幕的子控件进行复用，重新绑定新的数据来展示新的内容。

比如我将「超敬业!董卿主持节目踩空摔伤」这个新闻滑出屏幕后，系统会自动「回收」这个新闻对应的控件对象，并把它与即将滑入屏幕中的新闻数据进行绑定，后作为一个新的条目进入屏幕。

ListView主要应用在需要展示的内容数量特别大，而且展示的内容布局又十分近似的场景。原因是每个控件被创建后，都需要占用一定的内存，如果不利用ListView复用控件的机制，用户下滑的距离越大，控件占用的内存就越大，设备就会越来越卡，直至内存耗尽。而相似的内容布局，降低了控件复用的成本。

今天咱们通过分析《网易新闻》客户端的主页，了解了「控件」、「ScrollView」和「ListView」的概念和特性。如果大家对这个系列感兴趣的话，后面会继续介绍客户端的其他UI控件、数据存储和其他相关技术。如果你有特别感兴趣的点，也可以留言告诉我哦。

#专栏作家#

给产品经理讲技术，微信公众号（pm_teacher），人人都是产品经理专栏作家。资深程序猿，专注客户端开发若干年，对前端、后台技术略懂，热衷于对新的科技领域的探索。

本文原创发布于人人都是产品经理，未经许可，不得转载。