页面布局方法及装置与流程

1.本公开涉及计算机技术领域，尤其涉及一种页面布局方法及装置。


背景技术：

2.信息时代，越来越多的人选择通过互联网平台进行生活分享、信息查询等来便捷生活。互联网平台的各项内容可通过页面向用户展示，相关技术中存在一种组件，可用来切换页面内不同的模块显示，但是这种组件在实际的页面布局中，不能够灵活适配到各个用户客户端，大大限制了用户的使用场景。


技术实现要素：

3.本公开提供一种页面布局方法及装置，以至少解决上述相关技术中的问题，也可不解决任何上述问题。本公开的技术方案如下：
4.根据本公开实施例的第一方面，提供一种页面布局方法，包括：获取选项卡组件的信息和当前屏幕宽度；根据所述选项卡组件的信息以及所述当前屏幕宽度，确定所述选项卡组件的布局方式；采用所述布局方式进行页面布局。
5.可选地，所述选项卡组件包括至少一个选项卡子项，所述选项卡组件的信息包括所述选项卡子项的数量和字符信息；所述根据所述选项卡组件的信息以及所述当前屏幕宽度，确定所述选项卡组件的布局方式，包括：在所述选项卡子项的数量大于或者等于第一预设阈值的情况下，确定所述布局方式为第一布局方式，其中，所述第一布局方式为将所述选项卡子项进行等间距排布并采用滚动视图进行布局；在所述选项卡子项的数量小于所述第一预设阈值的情况下，根据所述选项卡子项的字符信息和所述当前屏幕宽度，确定所述选项卡组件的布局方式。
6.可选地，所述根据所述选项卡子项的字符信息和所述当前屏幕宽度，确定所述选项卡组件的布局方式，包括：确定所有选项卡子项的字符信息拼接成的总体字符信息所占用的第一宽度；在所述第一宽度大于第二预设阈值的情况下，确定所述布局方式为所述第一布局方式，其中，所述第二预设阈值是所述当前屏幕宽度和预设值的差值；在所述第一宽度小于或者等于所述第二预设阈值的情况下，确定每一选项卡子项的字符信息所占用的第二宽度；根据所述第二宽度和所述当前屏幕宽度，确定所述选项卡组件的布局方式。
7.可选地，所述根据所述第二宽度和所述当前屏幕宽度，确定所述选项卡组件的布局方式，包括：在所述每一选项卡子项的字符信息所占用的第二宽度均小于或者等于第三预设阈值的情况下，确定所述布局方式为第二布局方式；在存在任一选项卡子项的字符信息所占用的第二宽度大于所述第三预设阈值的情况下，确定所述布局方式为第三布局方式，其中，所述第三预设阈值是所述当前屏幕宽度和所述选项卡子项的数量的商，所述第二布局方式为将所述选项卡子项在当前屏幕范围之内进行等宽排布，所述第三布局方式为将所述选项卡子项在所述当前屏幕范围之内进行等间距排布。
8.可选地，所述第一宽度和所述第二宽度是通过创建盒子模型确定的；在所述选项
卡组件的布局方式确定完成之后，所述页面布局方法还包括：删除所述盒子模型。
9.可选地，所述确定所有选项卡子项的字符信息拼接成的总体字符信息所占用的第一宽度，包括：创建第一盒子模型，其中，所述第一盒子模型的宽度和所述前屏幕宽度相等，所述第一盒子模型用于将所述所有选项卡子项的字符信息拼接在一起进行页面布局；基于所述第一盒子模型，确定所述第一宽度。
10.可选地，所述基于所述第一盒子模型，确定所述第一宽度，包括：在所述第一盒子模型中创建第一字符组件；将所述所有选项卡子项的字符信息拼接成总体字符信息，并置入所述第一字符组件中；根据所述第一字符组件的宽度，得到所述第一宽度。
11.可选地，所述确定每一选项卡子项的字符信息所占用的第二宽度，包括：创建第二盒子模型，其中，所述第二盒子模型的宽度和所述前屏幕宽度相等，所述第二盒子模型用于将每一选项卡子项的字符信息分开布局到同一页面；基于所述第二盒子模型，确定每一选项卡子项的字符信息所占用的第二宽度。
12.可选地，所述基于所述第二盒子模型，确定每一选项卡子项的字符信息所占用的第二宽度，包括：在所述第二盒子模型中创建与所述每一选项卡子项对应的第二字符组件；将所述每一选项卡子项的字符信息置入其对应的第二字符组件中；根据所述每一选项卡子项对应的第二字符组件的宽度，得到所述每一选项卡子项的字符信息所占用的第二宽度。
13.根据本公开实施例的第二方面，提供一种页面布局装置，包括：接收单元，被配置为：获取选项卡组件的信息和当前屏幕宽度；确定单元，被配置为：根据所述选项卡组件的信息以及所述当前屏幕宽度，确定所述选项卡组件的布局方式；布局单元，被配置为：采用所述布局方式进行页面布局。
14.可选地，所述选项卡组件包括至少一个选项卡子项，所述选项卡组件的信息包括所述选项卡子项的数量和字符信息；确定单元被配置为：在所述选项卡子项的数量大于或者等于第一预设阈值的情况下，确定所述布局方式为第一布局方式，其中，所述第一布局方式为将所述选项卡子项进行等间距排布并采用滚动视图进行布局；在所述选项卡子项的数量小于所述第一预设阈值的情况下，根据所述选项卡子项的字符信息和所述当前屏幕宽度，确定所述选项卡组件的布局方式。
15.可选地，确定单元被配置为：确定所有选项卡子项的字符信息拼接成的总体字符信息所占用的第一宽度；在所述第一宽度大于第二预设阈值的情况下，确定所述布局方式为所述第一布局方式，其中，所述第二预设阈值是所述当前屏幕宽度和预设值的差值；在所述第一宽度小于或者等于所述第二预设阈值的情况下，确定每一选项卡子项的字符信息所占用的第二宽度；根据所述第二宽度和所述当前屏幕宽度，确定所述选项卡组件的布局方式。
16.可选地，确定单元被配置为：在所述每一选项卡子项的字符信息所占用的第二宽度均小于或者等于第三预设阈值的情况下，确定所述布局方式为第二布局方式；在存在任一选项卡子项的字符信息所占用的第二宽度大于所述第三预设阈值的情况下，确定所述布局方式为第三布局方式，其中，所述第三预设阈值是所述当前屏幕宽度和所述选项卡子项的数量的商，所述第二布局方式为将所述选项卡子项在当前屏幕范围之内进行等宽排布，所述第三布局方式为将所述选项卡子项在所述当前屏幕范围之内进行等间距排布。
17.可选地，所述第一宽度和所述第二宽度是通过创建盒子模型确定的；页面布局装
置还包括删除单元，被配置为：删除所述盒子模型。
18.可选地，确定单元被配置为：创建第一盒子模型，其中，所述第一盒子模型的宽度和所述前屏幕宽度相等，所述第一盒子模型用于将所述所有选项卡子项的字符信息拼接在一起进行页面布局；基于所述第一盒子模型，确定所述第一宽度。
19.可选地，确定单元被配置为：在所述第一盒子模型中创建第一字符组件；将所述所有选项卡子项的字符信息拼接成总体字符信息，并置入所述第一字符组件中；根据所述第一字符组件的宽度，得到所述第一宽度。
20.可选地，确定单元被配置为：创建第二盒子模型，其中，所述第二盒子模型的宽度和所述前屏幕宽度相等，所述第二盒子模型用于将每一选项卡子项的字符信息分开布局到同一页面；基于所述第二盒子模型，确定每一选项卡子项的字符信息所占用的第二宽度。
21.可选地，确定单元被配置为：在所述第二盒子模型中创建与所述每一选项卡子项对应的第二字符组件；将所述每一选项卡子项的字符信息置入其对应的第二字符组件中；根据所述每一选项卡子项对应的第二字符组件的宽度，得到所述每一选项卡子项的字符信息所占用的第二宽度。
22.根据本公开实施例的第三方面，提供一种电子设备，包括：至少一个处理器；至少一个存储计算机可执行指令的存储器，其中，所述计算机可执行指令在被所述至少一个处理器运行时，促使所述至少一个处理器执行根据本公开的页面布局方法。
23.根据本公开实施例的第四方面，提供一种存储指令的计算机可读存储介质，当所述指令被至少一个处理器运行时，促使所述至少一个处理器执行根据本公开的页面布局方法。
24.根据本公开实施例的第五方面，提供一种计算机程序产品，包括计算机指令，所述计算机指令被至少一个处理器执行时实现根据本公开的页面布局方法。
25.本公开的实施例提供的技术方案至少带来以下有益效果：
26.根据本公开的页面布局方法及装置，可根据选项卡组件的信息以及当前屏幕宽度确定选项卡组件的布局方式，可实现基于客户端屏幕尺寸和选项卡组件的信息的不同进行自动动态布局，不限制选项卡子项的数量和字符信息宽度大小，灵活选择适配的布局方式对所有的选项卡子项的字符信息进行完整显示，能够提高用户体验。
27.应当理解的是，以上的一般描述和后文的细节描述仅是示例性和解释性的，并不能限制本公开。
附图说明
28.此处的附图被并入说明书中并构成本说明书的一部分，示出了符合本公开的实施例，并与说明书一起用于解释本公开的原理，并不构成对本公开的不当限定。
29.图1是相关技术中的一种包含选项卡组件的页面示意图。
30.图2是根据一示例性实施例示出的一种页面布局方法的流程图。
31.图3是根据一示例性实施例示出的一种页面布局方法的整体流程图。
32.图4是根据一示例性实施例示出的一种页面布局装置的框图。
33.图5是根据一示例性实施例的电子设备500的框图。
具体实施方式
34.为了使本领域普通人员更好地理解本公开的技术方案，下面将结合附图，对本公开实施例中的技术方案进行清楚、完整地描述。
35.需要说明的是，本公开的说明书和权利要求书及上述附图中的术语“第一”、“第二”等是用于区别类似的对象，而不必用于描述特定的顺序或先后次序。应该理解这样使用的数据在适当情况下可以互换，以便这里描述的本公开的实施例能够以除了在这里图示或描述的那些以外的顺序实施。以下实施例中所描述的实施方式并不代表与本公开相一致的所有实施方式。相反，它们仅是与如所附权利要求书中所详述的、本公开的一些方面相一致的装置和方法的例子。
36.在此需要说明的是，在本公开中出现的“若干项之中的至少一项”均表示包含“该若干项中的任意一项”、“该若干项中的任意多项的组合”、“该若干项的全体”这三类并列的情况。例如“包括a和b之中的至少一个”即包括如下三种并列的情况：(1)包括a；(2)包括b；(3)包括a和b。又例如“执行步骤一和步骤二之中的至少一个”，即表示如下三种并列的情况：(1)执行步骤一；(2)执行步骤二；(3)执行步骤一和步骤二。
37.信息时代，越来越多的人选择通过互联网平台进行生活分享、信息查询等来便捷生活。互联网平台可通过移动客户端供用户使用，互联网平台的各项内容可通过移动客户端的显示的页面向用户展示。而对于移动客户端，其操作系统可能是ios，也可能是android，相关技术中的开发框架rn(react-native)，可实现在上两种不同的操作系统中共用一套代码。
38.相关技术中，对于rn，存在一种组件，可用来切换页面内不同的模块显示，进行页面内不同区域的导航，该组件可以是选项卡组件，选项卡组件即为tab组件，图1是相关技术中的一种包含选项卡组件的页面示意图。参考图1，选项卡组件是在水平方向进行布局的，也可以称为是水平选项卡组件，图1所示的选项卡组件包括三个选项卡子项，第一个选项卡子项、第二个选项卡子项和第三个选项卡子项的字符信息分别是“选项1”、“选项2”和“选项3”，在获知到用户点击任一选项卡子项时，移动客户端可切换选项卡组件下方的内容区域展示不同内容。为使得用户得到良好的使用体验，需要实现不限制各选项卡子项的字符信息的文字数量，使得文字能够得到完全显示(不折行，不出现“...”)且针对不同情况，自动切换合适的选项卡组件布局。
39.但是，目前的基于选项卡组件进行页面布局时，只能固定选择一种或两种现有的布局方式，不能实现动态切换布局，使得在使用选项卡组件时，需要考虑字符信息的宽度，大大限制了用户的使用场景，同时，由于各个用户客户端，尤其是移动客户端的屏幕宽度不同，使得目前采用固定方式进行布局的方法不能够灵活适配到各个用户客户端。
40.为了解决上述相关技术中存在的问题，本公开提出一种页面布局方法及装置，可根据选项卡组件的信息以及当前屏幕宽度确定选项卡组件的布局方式，可实现基于客户端屏幕尺寸和选项卡组件的信息的不同进行自动动态布局，不限制选项卡子项的数量和字符信息宽度大小，灵活选择适配的布局方式对所有的选项卡子项的字符信息进行完整显示，能够提高用户体验。
41.下面，将参照图2至图5来详细描述根据本公开的页面布局方法及装置。
42.图2是根据一示例性实施例示出的一种页面布局方法的流程图。图2所示的流程图
的执行主体可以是客户端，在这里，客户端可以是移动客户端如手机、平板电脑等，本公开对此不做限制。参照图2，在步骤201，可获取选项卡组件的信息和当前屏幕宽度。
43.本公开的示例性实施例可从服务端获取选项卡组件的信息。例如，当客户端获知到用户点击某组件，而该组件可用于显示包含选项卡组件的页面，则客户端可向服务端请求该选项卡组件的信息。本公开的示例性实施例还可以从客户端本端获取当前客户端的屏幕宽度(如414像素或320像素等)。
44.根据本公开的示例性实施例，选项卡组件可以是水平选项卡组件。选项卡组件可包括至少一个选项卡子项，例如，如图1所示的选项卡组件包括3个选项卡子项。选项卡组件的信息可包括，但不限于，选项卡子项的数量和选项卡子项的字符信息，该字符信息可以是文字信息、符号信息、数字信息，本公开对此不做限制。
45.在获取完选项卡组件的信息和当前屏幕宽度之后，本公开的示例性实施例可基于获取到的这两项选择适配于当前客户端的布局方式，实现动态布局，该布局方式可以是既有的方式。那么具体是在步骤202，可根据选项卡组件的信息以及当前屏幕宽度，确定选项卡组件的布局方式。
46.根据上述描述可知，选项卡组件的信息可包括选项卡子项的数量和选项卡子项的字符信息，本公开的示例性实施例可首先通过选项卡子项的数量进行第一次判断选择，然后通过字符信息和当前屏幕宽度进行第二次判断选择。
47.对于第一次判断选择，考虑到在选项卡子项的数量过多的时候，在当前屏幕宽度范围之内可能不能够完全容纳，所以本公开的示例性实施例可在选项卡子项的数量大于或者等于第一预设阈值的情况下，确定布局方式为第一布局方式，其中，第一布局方式为将选项卡子项进行等间距排布并采用滚动视图进行布局。需要说明的是，将选项卡子项采用滚动视图进行布局可以指的是选项卡组件可在水平方向进行滚动，在既有的技术中，可使用scrollview组件来将选项卡子项采用滚动视图进行布局，在上述描述中已经说明，既有的技术中仅仅可采用一两种固定的布局方式进行布局，所以选择这种滚动的方式时不太适配于字符信息较少或是选项卡子项的数量较少的情况。基于此，本公开可设置有第二次判断选择。
48.对于第二次判断选择，可在选项卡子项的数量小于第一预设阈值的情况下，根据选项卡子项的字符信息和当前屏幕宽度，确定选项卡组件的布局方式。根据实施例，通过这两次判断选择，能够根据选项卡子项的数量和选项卡子项的字符信息，动态确定合适的布局方式。
49.对于上述第二次判断选择，可再分成两个步骤进行判断，首先可将所有的选项卡子项的字符信息拼接在一起，进行判断选择，然后可分别针对每一选项卡子项的字符信息进行判断选择。具体可以是：
50.首先，可确定所有选项卡子项的字符信息拼接成的总体字符信息所占用的第一宽度。例如，第一宽度可以是总体字符信息在水平方向占用的像素数。
51.然后，可在第一宽度大于第二预设阈值的情况下，确定布局方式为第一布局方式，其中，第二预设阈值是当前屏幕宽度和预设值的差值，在这里，设置预设值是为让选项卡子项之间保持合理的间距，保证更好的显示效果。
52.接下来，可在第一宽度小于或者等于第二预设阈值的情况下，确定每一选项卡子
项的字符信息所占用的第二宽度。例如，第二宽度可以是每一选项卡子项的字符信息在水平方向占用的像素数。
53.最后，可根据第二宽度和当前屏幕宽度，确定选项卡组件的布局方式。根据实施例，可以在确定布局方式的过程中既考虑到总体字符信息所占用的第一宽度，又考虑到每一选项卡子项的字符信息所占用的第二宽度，能够实现不限制字符信息宽度大小，灵活选择适配的布局方式对所有的选项卡子项的字符信息进行完整显示。
54.根据本公开的示例性实施例，在每一选项卡子项的字符信息所占用的第二宽度均小于或者等于第三预设阈值的情况下，确定布局方式为第二布局方式。在存在任一选项卡子项的字符信息所占用的第二宽度大于第三预设阈值的情况下，确定布局方式为第三布局方式。其中，第三预设阈值是当前屏幕宽度和选项卡子项的数量的商。根据实施例，通过比较第二宽度和第三预设阈值，能够更加细致灵活地选择适配的布局方式。
55.下面，针对上述第二布局方式和第三布局方式进行进一步地解释说明。第二布局方式可以是将选项卡子项在当前屏幕范围之内进行等宽排布。也就是说，每一选项卡子项在布局完成后在水平方向占用的宽度相等。例如，当前屏幕宽度为360像素，选项卡子项的数量为4，则在布局完成后在水平方向每个选项卡子项占用的宽度均为90像素。在既有的技术中，可使用flex的方法来将选项卡子项均匀排布。第三布局方式可以是将选项卡子项在当前屏幕范围之内进行等间距排布。也就是说，每一选项卡子项在布局完成后在水平方向的相隔间距相等。例如，设置间距为20像素，在当前屏幕宽度为360像素，选项卡子项的数量为4的情况下，间距就会占用60像素，如果屏幕两边也需要保留20像素，那么也就是说间距就会占用100像素，留给选项卡子项的可用长度是260像素。
56.根据本公开的页面布局方法可通过上述两次判断选择，灵活选择布局方式，克服仅仅使用第一布局方式、第二布局方式或是第三布局方式存在的不足。
57.基于上述描述，需要说明的是，对于rn，在text组件首次完成绘制的时候，可触发onlayout事件从而得到该text组件所占用的宽度，那么对于选项卡组件来说，针对于每一选项卡子项，将从服务端获取到的字符信息填入时，可将该选项卡子项作为一个text组件，那么首次绘制可以理解为用户点击显示选项卡组件。也就是说，对于上述第一宽度和第二宽度，可通过这种方式确定。
58.根据本公开的示例性实施例，第一宽度和第二宽度是通过创建盒子模型确定的。需要说明的是，两个盒子模型的宽度可设置等于当前屏幕宽度。还需说明的是，盒子模型可选用透明盒子模型，也可选用非透明盒子模型，在选用非透明盒子模型的情况下，可将非透明盒子模型定位在当前客户端的屏幕之外以使得用户无感知，获得更好的体验。本公开的示例性实施例可在选项卡组件的布局方式确定完成之后，删除盒子模型。根据实施例，通过创建盒子模型，能够便于确定第一宽度和第二宽度，以使得可通过第一宽度和第二宽度灵活选择适配的布局方式，通过在布局方式确定完成之后删除盒子模型，能够使得用户无感知，获得更好的体验。
59.根据本公开的示例性实施例，通过创建盒子模型确定第一宽度，首先，可创建第一盒子模型，其中，第一盒子模型的宽度和前屏幕宽度相等，第一盒子模型用于将所有选项卡子项的字符信息拼接在一起进行页面布局。
60.然后，可基于第一盒子模型，确定第一宽度。根据实施例，可通过创建用于将所有
选项卡子项的字符信息拼接在一起进行页面布局的第一盒子模型，能够便于确定第一宽度，以使得后续可通过第一宽度和第二宽度灵活选择适配的布局方式。
61.例如，可先在第一盒子模型中创建第一字符组件；再将所有选项卡子项的字符信息拼接成总体字符信息，并置入第一字符组件中；最后根据第一字符组件的宽度，得到第一宽度。根据实施例，可实现基于第一字符组件触发onlayout事件，从而可得到第一宽度。
62.根据本公开的示例性实施例，通过创建盒子模型确定第二宽度，首先，可创建第二盒子模型，其中，第二盒子模型的宽度和前屏幕宽度相等，第二盒子模型用于将每一选项卡子项的字符信息分开布局到同一页面。
63.然后，可基于第二盒子模型，确定每一选项卡子项的字符信息所占用的第二宽度。根据实施例，可通过创建用于将每一选项卡子项的字符信息分开布局到同一页面的第二盒子模型，能够便于确定第二宽度，以使得后续可通过第一宽度和第二宽度灵活选择适配的布局方式。
64.例如，可先在第二盒子模型中创建与每一选项卡子项对应的第二字符组件；再将每一选项卡子项的字符信息置入其对应的第二字符组件中；最后根据每一选项卡子项对应的第二字符组件的宽度，得到每一选项卡子项的字符信息所占用的第二宽度。根据实施例，可实现基于第二字符组件触发onlayout事件，从而可得到第二宽度。
65.回到图2，在步骤203，可采用确定的布局方式进行页面布局。在这里，确定的布局方式可以是在步骤202中确定的布局方式。
66.图3是根据一示例性实施例示出的一种页面布局方法的整体流程图。图3所示的流程适用于客户端，下面参考图3，对本公开的页面布局方法进行整体阐述。
67.首先，可进行选项卡组件初始化。需要说明的是，可在进行任一种从其他内容通过用户点击等操作显示选项卡组件的情况下进行选项卡组件的初始化。
68.然后，可获取当前屏幕宽度，并从服务端获取数据，也就是进行数据更新，在服务端下发的数据不是有效数据的情况下，也就是说，服务端下发的不是有效的选项卡组件的信息的情况下，等待数据再次更新(加载)，在服务端下发的数据是有效数据的情况下，进行后续的步骤并隐藏加载。其中，服务端下发的选项卡组件的信息可包括选项卡子项的数量和选项卡子项的字符信息。
69.接下来，可判断选项卡子项的数量和第一预设阈值的大小关系，在选项卡子项的数量大于或者等于第一预设阈值的情况下，确定布局方式为第一布局方式。在选项卡子项的数量小于第一预设阈值的情况下可进行后续步骤。
70.再来，可在选项卡子项的数量小于第一预设阈值的情况下，创建第一透明盒子模型用于布局：先基于第一透明盒子模型确定第一宽度，再基于第一透明盒子模型判断第一宽度和第二预设阈值的大小关系，这里，第一宽度可以是所有选项卡子项的字符信息拼接成的总体字符信息所占用的宽度。在第一宽度大于第二预设阈值的情况下，确定布局方式为第一布局方式，在第一宽度小于或者等于第二预设阈值的情况下可进行后续步骤。
71.接着，可在第一宽度小于或者等于第二预设阈值的情况下，创建第二透明盒子模型用于布局：先基于第二透明盒子模型确定第二宽度，再基于第二透明盒子模型判断每一选项卡子项的字符信息所占用的第二宽度和第三预设阈值的大小关系，在每一选项卡子项的字符信息所占用的第二宽度均小于或者等于第三预设阈值的情况下，确定布局方式为第
二布局方式，在存在任一选项卡子项的字符信息所占用的第二宽度大于第三预设阈值的情况下，确定布局方式为第三布局方式。
72.最后，可将创建的透明盒子模型删除并采用确定的布局方式进行页面布局。
73.需要说明的是，第二预设阈值、第三预设阈值、第一布局方式、第二布局方式和第三布局方式可参考前述的说明，在此不再赘述。
74.图4是根据一示例性实施例示出的一种页面布局装置的框图。图4所示的装置可布置于客户端。参考图4，页面布局装置400包括接收单元401、确定单元402和布局单元403。
75.接收单元401，可获取选项卡组件的信息和当前屏幕宽度。
76.根据本公开的示例性实施例，接收单元401可从服务端获取选项卡组件的信息。例如，当客户端获知到用户点击某组件，而该组件可用于显示包含选项卡组件的页面，则客户端可向服务端请求该选项卡组件的信息。接收单元401还可以从客户端本端获取当前客户端的屏幕宽度(如414像素或320像素等)。
77.根据本公开的示例性实施例，选项卡组件可以是水平选项卡组件。选项卡组件可包括至少一个选项卡子项，例如，如图1所示的选项卡组件包括3个选项卡子项。选项卡组件的信息可包括，但不限于，选项卡子项的数量和选项卡子项的字符信息，该字符信息可以是文字信息、符号信息、数字信息，本公开对此不做限制。
78.确定单元402，可根据选项卡组件的信息以及当前屏幕宽度，确定选项卡组件的布局方式。
79.根据上述描述可知，选项卡组件的信息可包括选项卡子项的数量和选项卡子项的字符信息，确定单元402可首先通过选项卡子项的数量进行第一次判断选择，然后通过字符信息和当前屏幕宽度进行第二次判断选择。
80.对于第一次判断选择，考虑到在选项卡子项的数量过多的时候，在当前屏幕宽度范围之内可能不能够完全容纳，所以确定单元402可在选项卡子项的数量大于或者等于第一预设阈值的情况下，确定布局方式为第一布局方式，其中，第一布局方式为将选项卡子项进行等间距排布并采用滚动视图进行布局。需要说明的是，将选项卡子项采用滚动视图进行布局可以指的是选项卡组件可在水平方向进行滚动，在既有的技术中，可使用scrollview组件来将选项卡子项采用滚动视图进行布局，在上述描述中已经说明，既有的技术中仅仅可采用一两种固定的布局方式进行布局，所以选择这种滚动的方式时不太适配于字符信息较少或是选项卡子项的数量较少的情况。基于此，确定单元402可设置有第二次判断选择。
81.对于第二次判断选择，确定单元402可在选项卡子项的数量小于第一预设阈值的情况下，根据选项卡子项的字符信息和当前屏幕宽度，确定选项卡组件的布局方式。根据实施例，通过这两次判断选择，能够根据选项卡子项的数量和选项卡子项的字符信息，动态确定合适的布局方式。
82.对于上述第二次判断选择，确定单元402可再分成两个步骤进行判断，首先确定单元402可将所有的选项卡子项的字符信息拼接在一起，进行判断选择，然后确定单元402可分别针对每一选项卡子项的字符信息进行判断选择。具体可以是：
83.首先，确定单元402可确定所有选项卡子项的字符信息拼接成的总体字符信息所占用的第一宽度。例如，第一宽度可以是总体字符信息在水平方向占用的像素数。
84.然后，确定单元402可在第一宽度大于第二预设阈值的情况下，确定布局方式为第一布局方式，其中，第二预设阈值是当前屏幕宽度和预设值的差值，在这里，设置预设值是为让选项卡子项之间保持合理的间距，保证更好的显示效果。
85.接下来，确定单元402可在第一宽度小于或者等于第二预设阈值的情况下，确定每一选项卡子项的字符信息所占用的第二宽度。例如，第二宽度可以是每一选项卡子项的字符信息在水平方向占用的像素数。
86.最后，确定单元402可根据第二宽度和当前屏幕宽度，确定选项卡组件的布局方式。根据实施例，可以在确定布局方式的过程中既考虑到总体字符信息所占用的第一宽度，又考虑到每一选项卡子项的字符信息所占用的第二宽度，能够实现不限制字符信息宽度大小，灵活选择适配的布局方式对所有的选项卡子项的字符信息进行完整显示。
87.根据本公开的示例性实施例，确定单元402在每一选项卡子项的字符信息所占用的第二宽度均小于或者等于第三预设阈值的情况下，确定布局方式为第二布局方式。确定单元402在存在任一选项卡子项的字符信息所占用的第二宽度大于第三预设阈值的情况下，确定布局方式为第三布局方式。其中，第三预设阈值是当前屏幕宽度和选项卡子项的数量的商。根据实施例，通过比较第二宽度和第三预设阈值，能够更加细致灵活地选择适配的布局方式。
88.下面，针对上述第二布局方式和第三布局方式进行进一步地解释说明。第二布局方式可以是将选项卡子项在当前屏幕范围之内进行等宽排布。也就是说，每一选项卡子项在布局完成后在水平方向占用的宽度相等。例如，当前屏幕宽度为360像素，选项卡子项的数量为4，则在布局完成后在水平方向每个选项卡子项占用的宽度均为90像素。第三布局方式可以是将选项卡子项在当前屏幕范围之内进行等间距排布。也就是说，每一选项卡子项在布局完成后在水平方向的相隔间距相等。例如，设置间距为20像素，在当前屏幕宽度为360像素，选项卡子项的数量为4的情况下，间距就会占用60像素，如果屏幕两边也需要保留20像素，那么也就是说间距就会占用100像素，留给选项卡子项的可用长度是260像素。
89.基于上述描述，需要说明的是，对于rn，在text组件首次完成绘制的时候，可触发onlayout事件从而得到该text组件所占用的宽度，那么对于选项卡组件来说，针对于每一选项卡子项，将从服务端获取到的字符信息填入时，可将该选项卡子项作为一个text组件，那么首次绘制可以理解为用户点击显示选项卡组件。也就是说，对于上述第一宽度和第二宽度，确定单元402可通过这种方式确定。
90.根据本公开的示例性实施例，第一宽度和第二宽度是通过创建盒子模型确定的。需要说明的是，两个盒子模型的宽度可设置等于当前屏幕宽度。还需说明的是，盒子模型可选用透明盒子模型，也可选用非透明盒子模型，在选用非透明盒子模型的情况下，可将非透明盒子模型定位在当前客户端的屏幕之外以使得用户无感知，获得更好的体验。本公开的示例性实施例可设置有删除单元，删除单元可在确定单元402执行完成之后，删除盒子模型。根据实施例，通过创建盒子模型，能够便于确定第一宽度和第二宽度，以使得可通过第一宽度和第二宽度灵活选择适配的布局方式，通过在布局方式确定完成之后删除盒子模型，能够使得用户无感知，获得更好的体验。
91.根据本公开的示例性实施例，首先，确定单元402可创建第一盒子模型，其中，第一盒子模型的宽度和前屏幕宽度相等，第一盒子模型用于将所有选项卡子项的字符信息拼接
在一起进行页面布局。
92.然后，确定单元402可基于第一盒子模型，确定第一宽度。根据实施例，可通过创建用于将所有选项卡子项的字符信息拼接在一起进行页面布局的第一盒子模型，能够便于确定第一宽度，以使得后续可通过第一宽度和第二宽度灵活选择适配的布局方式。
93.例如，确定单元402可先在第一盒子模型中创建第一字符组件；再将所有选项卡子项的字符信息拼接成总体字符信息，并置入第一字符组件中；最后根据第一字符组件的宽度，得到第一宽度。根据实施例，可实现基于第一字符组件触发onlayout事件，从而可得到第一宽度。
94.根据本公开的示例性实施例，首先，确定单元402可创建第二盒子模型，其中，第二盒子模型的宽度和前屏幕宽度相等，第二盒子模型用于将每一选项卡子项的字符信息分开布局到同一页面。
95.然后，确定单元402可基于第二盒子模型，确定每一选项卡子项的字符信息所占用的第二宽度。根据实施例，可通过创建用于将每一选项卡子项的字符信息分开布局到同一页面的第二盒子模型，能够便于确定第二宽度，以使得后续可通过第一宽度和第二宽度灵活选择适配的布局方式。
96.例如，确定单元402可先在第二盒子模型中创建与每一选项卡子项对应的第二字符组件；再将每一选项卡子项的字符信息置入其对应的第二字符组件中；最后根据每一选项卡子项对应的第二字符组件的宽度，得到每一选项卡子项的字符信息所占用的第二宽度。根据实施例，可实现基于第二字符组件触发onlayout事件，从而可得到第二宽度。
97.回到图4，布局单元403，可采用确定的布局方式进行页面布局。在这里，确定的布局方式可以是在确定单元402中确定的布局方式。
98.图5是根据一示例性实施例的电子设备500的框图。
99.参照图5，电子设备500包括至少一个存储器501和至少一个处理器502，所述至少一个存储器501中存储有计算机可执行指令集合，当计算机可执行指令集合被至少一个处理器502执行时，执行根据本公开的页面布局方法。
100.作为示例，电子设备500可以是pc计算机、平板装置、个人数字助理、智能手机、或其他能够执行上述指令集合的装置。这里，电子设备500并非必须是单个的电子设备，还可以是任何能够单独或联合执行上述指令(或指令集)的装置或电路的集合体。电子设备500还可以是集成控制系统或系统管理器的一部分，或者可被配置为与本地或远程(例如，经由无线传输)以接口互联的便携式电子设备。
101.在电子设备500中，处理器502可包括中央处理器(cpu)、图形处理器(gpu)、可编程逻辑装置、专用处理器系统、微控制器或微处理器。作为示例而非限制，处理器还可包括模拟处理器、数字处理器、微处理器、多核处理器、处理器阵列、网络处理器等。
102.处理器502可运行存储在存储器501中的指令或代码，其中，存储器501还可以存储数据。指令和数据还可经由网络接口装置而通过网络被发送和接收，其中，网络接口装置可采用任何已知的传输协议。
103.存储器501可与处理器502集成为一体，例如，将ram或闪存布置在集成电路微处理器等之内。此外，存储器501可包括独立的装置，诸如，外部盘驱动、存储阵列或任何数据库系统可使用的其他存储装置。存储器501和处理器502可在操作上进行耦合，或者可例如通
过i/o端口、网络连接等互相通信，使得处理器502能够读取存储在存储器中的文件。
104.此外，电子设备500还可包括视频显示器(诸如，液晶显示器)和用户交互接口(诸如，键盘、鼠标、触摸输入装置等)。电子设备500的所有组件可经由总线和/或网络而彼此连接。
105.根据本公开的示例性实施例，还可提供一种存储指令的计算机可读存储介质，其中，当指令被至少一个处理器运行时，促使至少一个处理器执行根据本公开的页面布局方法。这里的计算机可读存储介质的示例包括：只读存储器(rom)、随机存取可编程只读存储器(prom)、电可擦除可编程只读存储器(eeprom)、随机存取存储器(ram)、动态随机存取存储器(dram)、静态随机存取存储器(sram)、闪存、非易失性存储器、cd-rom、cd-r、cd r、cd-rw、cd rw、dvd-rom、dvd-r、dvd r、dvd-rw、dvd rw、dvd-ram、bd-rom、bd-r、bd-r lth、bd-re、蓝光或光盘存储器、硬盘驱动器(hdd)、固态硬盘(ssd)、卡式存储器(诸如，多媒体卡、安全数字(sd)卡或极速数字(xd)卡)、磁带、软盘、磁光数据存储装置、光学数据存储装置、硬盘、固态盘以及任何其他装置，所述任何其他装置被配置为以非暂时性方式存储计算机程序以及任何相关联的数据、数据文件和数据结构并将所述计算机程序以及任何相关联的数据、数据文件和数据结构提供给处理器或计算机使得处理器或计算机能执行所述计算机程序。上述计算机可读存储介质中的计算机程序可在诸如客户端、主机、代理装置、服务器等计算机设备中部署的环境中运行，此外，在一个示例中，计算机程序以及任何相关联的数据、数据文件和数据结构分布在联网的计算机系统上，使得计算机程序以及任何相关联的数据、数据文件和数据结构通过一个或多个处理器或计算机以分布式方式存储、访问和执行。
106.根据本公开的示例性实施例，还可提供一种计算机程序产品，该计算机程序产品中的指令可由计算机设备的处理器执行以完成根据本公开的页面布局方法。
107.根据本公开的页面布局方法及装置，可根据选项卡组件的信息以及当前屏幕宽度确定选项卡组件的布局方式，可实现基于客户端屏幕尺寸和选项卡组件的信息的不同进行自动动态布局，不限制选项卡子项的数量和字符信息宽度大小，灵活选择适配的布局方式对所有的选项卡子项的字符信息进行完整显示，能够提高用户体验。
108.本领域技术人员在考虑说明书及实践这里公开的发明后，将容易想到本公开的其它实施方案。本技术旨在涵盖本公开的任何变型、用途或者适应性变化，这些变型、用途或者适应性变化遵循本公开的一般性原理并包括本公开未公开的本技术领域中的公知常识或惯用技术手段。说明书和实施例仅被视为示例性的，本公开的真正范围和精神由下面的权利要求指出。
109.应当理解的是，本公开并不局限于上面已经描述并在附图中示出的精确结构，并且可以在不脱离其范围进行各种修改和改变。本公开的范围仅由所附的权利要求来限制。