在android智能设备上对HTML网页内容进行分段显示的方法与流程

文档序号:12363707阅读:428来源:国知局
在android智能设备上对HTML网页内容进行分段显示的方法与流程

本发明涉及HTML网页相关技术领域,特别涉及一种在android智能设备上对HTML网页内容进行分段显示的方法。



背景技术:

HTML(HyperText Markup Language),中文名叫超文本标记语言。超文本标记语言的结构包括“头”部分(英语:Head)、和“主体”部分(英语:Body),其中“头”部提供关于网页的信息,“主体”部分提供网页的具体内容。HTML文本在传统的显示设备如PC(个人电脑终端)、移动设备(手机、PAD/平板)、TV机顶盒上显示的方式为上下不分页整体显示。也即当在终端显示器(个人电脑终端为显示屏,移动设备为手机,PAD/平板为触摸屏或非触摸屏显示器,TV机顶盒为电视显示器或机顶盒连接的其他显示器)一屏显示不下的时候,传统方式为上下滑动加载HTML内容的“主体”部分(英语:Body)的更多内容来显示。

下面以android移动设备的手机终端为例,说明HTML文本在终端传统显示的例子。

如图1A所示为HTML文本的第一页,当一页显示不下的HTML内容时,如图1B所示通过滑动或者滚动陆续加载进来(图1B下方虚线框内的内容即为该HTML网页剩余的待显示内容,其与当前显示的内容为一个整体,通过滑动的或滚动形式进行依次显示),直到一大页全部把HTML全部内容加载进来。

这种显示方式单一,不能满足需要横向浏览页面的用户需要。



技术实现要素:

本发明的目的在于提供一种在android智能设备(android手机,android平板,android TV)上对HTML网页内容进行分段显示的方法,以解决现有的HTML网页显示时不能横向分段显示的问题。

为实现上述目的,本发明提供了一种在android智能设备上对HTML网页内容进行分段显示的方法,包括以下步骤:

S1:获取待显示的HTML网页的全部内容;

S2:判断待显示的HTML网页的全部内容是否能在显示区域的范围内进行单页显示,如是,则直接进行HTML网页内容的单页显示,如否,则进入步骤S3;

S3:根据显示区域的大小将HTML网页内容分为若干段内容,每段内容对应一个新页;

S4:将所述若干段内容对应的新页在所述显示区域内进行分页显示。

较佳地,所述步骤S3包括:

S31:计算所述显示区域内单页允许显示的高度及宽度;

S32:按照所述高度及宽度将所述HTML网页内容从头至尾依顺序创建为依次相邻的若干新页,其中,每个新页的网页内容的容量与所述显示区域大小相同,每个新页创建时将未分配至已创建新页中的HTML网页内容添加至当前创建的新页中;

S33:判断当前新页中的内容是否填满显示区域,如否,则结束新页创建并进入步骤S34,如是,则继续创建下一个新页;

S34:将创建好的新页在所述显示区域内进行分页显示。

较佳地,所述步骤S32中,还包括:每创建一个新页,则将该新页的分页逻辑数据以及页面元素数据缓存至内存缓冲区,进而所述步骤S34具体为:根据接收到的显示命令,调用所述内存缓冲区内的任意一个新页的分页逻辑数据以及页面元素数据,并加载至显示区域内进行分页显示。

较佳地,所述步骤S32中创建新页的过程进一步包括:

S321:创建每个新页时,将当前创建的新页分为预设数量的若干小页,对应地,将当前新页对应的内容分配至所述若干小页;

S322:当前新页中,依次创建各个小页;

S323:每个小页创建时判断当前小页是否填满,如否,则结束小页创建,并继续创建下一个新页,如是,则返回步骤S322继续创建下一个小页;

此时,步骤S33进一步包括:将创建好的各新页的小页在所述显示区域内进行横向显示。

较佳地,所述预设数量为2,对应地,每个新页分为左小页及右小页。

较佳地,每个新页所包括的全部小页的宽度小于显示区域的宽度,各小页的高度等于显示区域的高度。

较佳地,所述高度及宽度的单位为像素,对应地,判断当前新页中的内容是否填满显示区域时,根据内容中字体的高度与宽度、图片的高度与宽度进行计算每个新页中所能容纳的字数及/或图片数。

较佳地,将HTML网页内容进行分段时,对于当前创建的新页,若分段的内容包含有图片,且图片不能在该新页内完整显示时,则将该图片及图片之后对应的网页内容依序分配至下一个新页中。

较佳地,若任意一个新页中的内容未填满显示区域,则显示该新页时,该新页的内容在显示区域的中部进行显示。

本发明提供的在android智能设备上对HTML网页内容进行分段显示的方法可以将传统的整个显示的HTML网页进行分页显示,且每页中所包含的各小页横向显示在android终端设备中,使得HTML网页的显示形式可以更符合人们的阅读习惯,使得最终用户可以左右翻页横向浏览内容,提供了差异化的浏览体验。

附图说明

图1A为现有技术中HTML网页显示示意图;

图1B为现有技术中HTML网页滑动显示示意图;

图2为本发明优选实施例提供的在android智能设备上对HTML网页内容进行分段显示的方法流程图;

图3为优选实施例提供的将HTML网页内容分为若干段内容的流程图;

图4为优选实施例提供的方法中创建新页的具体流程图;

图5A为一个优选实施例方法中创建的第一新页的示意图;

图5B为一个优选实施例方法中创建的第二新页的示意图;

图5C为一个优选实施例方法中创建的第三新页的示意图。

具体实施方式

为更好地说明本发明,兹以一优选实施例,并配合附图对本发明作详细说明,具体如下:

本发明方法应用于一个具有可进行HTML网页显示的android智能设备,该设备具有一个显示区域用于显示HTML网页,该设备可以为andoid手机,android平板或android TV,本发明不限定该方法的具体使用环境,只有该设备具有一定的数据处理能力,可供对HTML网页内容进行分段显示即可。

具体地,如图2所示,本实施例提供的在android智能设备上对HTML网页内容进行分段显示的方法,包括以下步骤:

S1:获取待显示的HTML网页的全部内容;

S2:判断待显示的HTML网页的全部内容是否能在显示区域的范围内进行单页显示,如是,则直接进行HTML网页内容的单页显示,如否,则进入步骤S3;

S3:根据显示区域的大小将HTML网页内容分为若干段内容,每段内容对应一个新页;

S4:将所述若干段内容对应的新页在所述显示区域内进行分页显示。

其中,分页后的各个新页在显示时可以在显示终端设备上进行纵向的一页一页的分页显示及浏览、切换,也可以根据需要进行横向的一页一页的分页显示及浏览、切换,使其达到类似于逐次翻页的显示效果。

进一步地,如图3所示,步骤S3包括:

S31:计算所述显示区域内单页允许显示的高度及宽度;

S32:按照所述高度及宽度将所述HTML网页内容从头至尾依顺序创建为依次相邻的若干新页,其中,每个新页的网页内容的容量与所述显示区域大小相同,每个新页创建时将未分配至已创建新页中的HTML网页内容添加至当前创建的新页中;

S33:判断当前新页中的内容是否填满显示区域,如否,则结束新页创建并进入步骤S34,如是,则继续创建下一个新页;

S34:将创建好的新页在所述显示区域内进行分页显示。

上述的步骤S32中,还包括:每创建一个新页,则将该新页的分页逻辑数据以及页面元素数据缓存至内存缓冲区,进而所述步骤S34具体为:android智能设备根据接收到的显示命令,调用所述内存缓冲区内的任意一个新页的分页逻辑数据以及页面元素数据,并加载至显示区域内进行分页显示。

也即在创建分页过程中,该方法从头到尾,支持分完一页即可浏览一页,另外将当前创建好的新页的分页逻辑数据(如总页数,页码,页面开始,结束索引),页面元素数据(如网页文字,网页图片数据)缓存到内存缓冲区中。在android智能设备接收到左右翻页浏览或上下翻页浏览的显示命令的过程中,根据命令中所需要显示的页面,可以直接加载缓存好了的各页面数据,不需要重新分页与联网获取数据。采用这种方法可以实现,总共分页一次,分页过程分了多少页就可以浏览多少页,减少了用户浏览页面过程的等待时间与设备在加载页面的总时间。

如图4所示,所述步骤S32中创建新页的过程进一步包括:

S321:创建每个新页时,将当前创建的新页分为预设数量的若干小页,对应地,将当前新页对应的内容分配至所述若干小页;

S322:当前新页中,依次创建各个小页;

S323:每个小页创建时判断当前小页是否填满,如否,则结束小页创建,并继续创建下一个新页,如是,则返回步骤S322继续创建下一个小页。

此时,步骤S33进一步包括:将创建好的各新页的小页在显示区域内进行横向显示。

在一优选实施例中,每个新页所包括的全部小页的宽度小于显示区域的宽度,各小页的高度等于显示区域的高度。

其中,高度及宽度的单位为像素,对应地,判断当前新页中的内容是否填满显示区域时,根据内容中字体的高度与宽度、图片的高度与宽度进行计算每个新页中所能容纳的字数及/或图片数。

其中,在下述的一个具体实施例中,预设数量为2,对应地,每个新页分为左小页及右小页。假设有如下HTML图文混合的内容要显示到设备终端的显示器:

<html>

<head>

</head>

<body>

<p>开始html文本内容

11111111111111111111111111111111111111111111111111111111111111</p>

<p>html文本内容22222222222222222222222222</p>

<p>img src=\"http://xxx.xxx.xxx.xxx/test1.jpg\"/>茉莉花</p>

<p>文本内容33333333333333333333333333333333333333段落结束1</p>

<p>html文本内容44444444444444444444段落结束2</p>

<p>img src=\"http://xxx.xxx.xxx.xxx/test2.jpg\"/>桂花</p>

<p>5555555555555555555555HTML全部内容结束标识</p>

</body>

则对该HTML图文混合的内容进行分页过程具体为:

a.通过计算,获知当前设备的显示区域中,每页允许显示的宽度为500像素,高度为300像素。其中,设备显示区域总像素计算,通过终端的编程语言可以获取显示区域像素的高度,宽度总量。

b.计算并设置当前的设备显示区域中,每各新页的左小页显示的宽度为220像素,高度为300像素,右小页显示的宽度为220像素,高度为300像素。

c.创建第一个新页,第一页的左小页开始填充数据,计算HTML网页中内容所包含的字体的高度与宽度(通过终端的编程语言,即可以计算一个字文本或图片在显示区域占的像素的高度,宽度总量),以及包含的图片的高度与宽度(通过终端的编程语言,即可以计算HTML网页中所包含的图片的宽度、高度或者约定的图片显示的固定高度、宽度),算出内容“开始html文本内容11111111111111111111111111111111111111111111111111111111111111html文本内容2222222”刚好填满第一页的左小页,将其填入左小页;第一页左小页填满后,开始填充第一页右小页,同样算出内容“2222222222222222222<图片>茉莉花文本内容33333”以刚好填满第一页的右小页,创建的第一页如图5A所示。其中,两个小页外部的深色框线表示当前显示区域的范围,300PX表示当前显示区域的高度为300像素,500PX表示当前显示区域的宽度为500像素,而中间两个小页的框线分别表示两个小页在显示区域内所占用的显示部分。

d.将HTML网页内容的数据填满第一页全部小页后,开始创建第二个新页,创建第二个新页的过程与步骤c相同,算出内容“333333333333333333333333333333333段落结束1html文本内容4444444444444”刚好填满第二页的左小页;第二页左小页填满后,开始填充第二页右小页,算出内容“4444444段落结束2<图片>桂花555555555555”刚好填满第二页的右小页,创建的第二页如图5B所示,以此类推,创建各个新页。

e.当创建至第3个新页时,填充内容“5555555555HTML全部内容结束标识”到第三页左小页,此时发现内容填充完成,没有更多的HTML内容了,则退出填充流程,此时表明全部的HTML网页内容已创建为新页,可供分页横向显示每页的各小页了,本实施例中创建的第3页如图5C所示;如果还有其他更多的HTML内容则按照以上步骤c与填充规则继续填充,一直到全部HTML内容填充完毕。

f.按照步骤c中计算网页内容时,步骤c~e,当发现HTML有图片元素的时候,显示区域预留足够的空间给图片显示,如果当前小页的显示空间不够,则换另外一小页或者创建新的另外一个新页来显示。

在另一优选实施例中,将HTML网页内容进行分段时,对于当前创建的新页,若分段的内容包含有图片,且图片不能在该新页内完整显示时,则将该图片及图片之后对应的网页内容依序分配至下一个新页中,当每个新页分为多个小页时,如具有左小页及右小页,则该图片的分配原则也是以当前的小页可以足够容纳该图片为准,如当前小页无法全部显示,则将该整个图片置于下一个相邻的小页中进行显示,如此,避免显示图片时,图片被割裂或无法显示完整。

在另一优选实施例中,若任意一个新页中的内容未填满显示区域,则显示该新页时,该新页的内容在显示区域的中部进行显示。也即,如当某一个新页中内容无法填满显示区域时,将其所包含的内容在显示区域中间部分进行显示,可以更符合用户习惯,避免画面部分过于拥挤,而其他部分过于空白。

在其他优选实施例中,每个新页中所包含的小页数量,小页相对于显示区域的大小,以及小页的排布方式(如横向并列,或多行多列横向显示等)等,本领域技术人员可根据待显示的HTML网页中文字、图片的大小及显示终端的显示区域的大小进行自由设置。

以上所述,仅为本发明的具体实施方式,但本发明的保护范围并不局限于此,任何本领域的技术人员在本发明揭露的技术范围内,对本发明所做的变形或替换,都应涵盖在本发明的保护范围之内。因此,本发明的保护范围应以所述的权利要求的保护范围为准。

当前第1页1 2 3 
网友询问留言 已有0条留言
  • 还没有人留言评论。精彩留言会获得点赞!
1