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

起点学院产品经理365成长计划,2天线下闭门集训+1年在线学习,全面掌握BAT产品经理体系。了解详情

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

uijiegou

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

1

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

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

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

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

2

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

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

3

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

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

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

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

#专栏作家#

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

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

您的赞赏,是对我创作的最大鼓励。

评论( 1

登录后参与评论
  1. 求网易新闻整体界面分析,谢谢

    回复
加载中