《庖丁解牛》第一期,就拿陪伴了我多年蹲坑时光的「网易新闻」来开刀吧。
网易新闻的主界面,中规中矩,甚至配色都与《今日头条》一致,关于「谁参考了谁」的问题咱们暂且不表,今天,咱们只说技术。
左侧图片在手机上正常显示的程序界面,右侧是在系统中开启了「显示布局边界」功能后的界面。
「布局边界」是指「UI控件」所占的区域大小,每一个红色的框框都代表一个「控件」。给「控件」设置了正确的参数后,它就会被「布局」到屏幕上的正确位置。参数的设定多种多样,比如「控件的宽高是多少」,「相对左边框多少像素」,「布局在某个控件的下方」等。
了解了「控件」的概念后,我们来看看主界面的头部区域:
「网易」logo下面的一排「控件」展示了新闻的分类,每一个分类的标题都由一个单独的「控件」承载,比如「头条」、「娱乐」。这些「控件」都被放在了一个ScrollView中。ScrollView本身也是一个「控件」,顾名思义,这个控件的主要功能就是有Scroll的能力,可以让布局在其内部的控件(控件内还布局有其他控件的结构,我们一般称外层的控件为「父控件」,「父控件」内的控件为「子控件」)实现左右或者上下滚动的功能。
ScrollView的使用非常简单,我们只需要指定ScrollView在屏幕上的大小和位置,将每个子控件的大小设置正确,然后依次添加到ScrollView中,子控件就可以在ScrollView中正常显示了。当子控件的总长度大于控件的展示区域后,用户就可以左右滑动ScrollView来查看显示在屏幕之外的内容。
ScrollView下方的新闻列表,也是一个可以「滚动」的控件,叫做ListView。它的子控件是一批样式相同的新闻题图和简介信息组成的父控件,这个控件也可以实现「滚动」,不过这里的「滚动」稍微比ScrollView复杂一些,它最大的特点是可以将用户滑出屏幕的子控件进行复用,重新绑定新的数据来展示新的内容。
比如我将「超敬业!董卿主持节目踩空摔伤」这个新闻滑出屏幕后,系统会自动「回收」这个新闻对应的控件对象,并把它与即将滑入屏幕中的新闻数据进行绑定,后作为一个新的条目进入屏幕。
ListView主要应用在需要展示的内容数量特别大,而且展示的内容布局又十分近似的场景。原因是每个控件被创建后,都需要占用一定的内存,如果不利用ListView复用控件的机制,用户下滑的距离越大,控件占用的内存就越大,设备就会越来越卡,直至内存耗尽。而相似的内容布局,降低了控件复用的成本。
今天咱们通过分析《网易新闻》客户端的主页,了解了「控件」、「ScrollView」和「ListView」的概念和特性。如果大家对这个系列感兴趣的话,后面会继续介绍客户端的其他UI控件、数据存储和其他相关技术。如果你有特别感兴趣的点,也可以留言告诉我哦。
#专栏作家#
给产品经理讲技术,微信公众号(pm_teacher),人人都是产品经理专栏作家。资深程序猿,专注客户端开发若干年,对前端、后台技术略懂,热衷于对新的科技领域的探索。
本文原创发布于人人都是产品经理,未经许可,不得转载。
求网易新闻整体界面分析,谢谢
+1