发明内容
本说明书实施例提供了一种控件的布局方法、布局装置、服务器及可读存储介质,能够提高控件布局的效率,并确保每两个控件之间不会存在重叠部分。
本说明书实施例第一方面提供了一种控件的布局方法,包括:
从显示界面上获取用于布局多个控件的布局区域;
对所述布局区域进行切分,得到每个控件对应的切分区域,其中,每个控件对应的切分区域均能容纳该控件,且每两个切分区域未有重合部分;
在通过碰撞检测方式检测到每个控件与对应的切分区域的边缘区域未发生碰撞时,获取每个控件在对应的切分区域的放置坐标;
根据每个控件在对应的切分区域的放置坐标,将每个控件设置到切分区域中对应的放置位置上。
本说明书实施例第二方面提供了一种控件的布局装置,包括:
布局区域获取单元,用于从显示界面上获取用于布局多个控件的布局区域;
区域切分单元,用于对所述布局区域进行切分,得到每个控件对应的切分区域,其中,每个控件对应的切分区域均能容纳该控件,且每两个切分区域未有重合部分;
位置坐标获取单元,用于在通过碰撞检测方式检测到每个控件与对应的切分区域的边缘区域未发生碰撞时,获取每个控件在对应的切分区域的放置坐标;
控件放置单元,用于根据每个控件在对应的切分区域的放置坐标,将每个控件设置到切分区域中对应的放置位置上。
本说明书实施例第三方面还提供了一种服务器,包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序,所述处理器执行所述程序时实现上述控件的布局方法的步骤。
本说明书实施例第四方面还提供了一种计算机可读存储介质,其上存储有计算机程序,该程序被处理器执行时上述乘车码的布局方法的步骤。
本说明书实施例的有益效果如下:
基于上述技术方案,在通过从布局区域中切分出每个控件对应的切分区域之后,在通过碰撞检测方式检测到每个控件与对应的切分区域的边缘区域未发生碰撞时,获取每个控件在对应的切分区域的放置坐标,并根据每个控件对应的放置坐标,将每个控件进行放置;与现有技术相比,本申请技术方案只需要对每个控件与对应切分区域进行碰撞检测,而不会在布局区域这个大范围空间内完成的所述多个控件的碰撞检测,将求解空间缩小在对应的切分区域内,即将原本需要在大范围空间内完成的碰撞检测(此时需对每个控件与所述布局区域进行碰撞检测),范围缩小到在对应的切分区域内进行碰撞检测,并能够针对所述多个控件并行进行碰撞检测,在碰撞检测的求解空间缩小的基础上还能够并行进行碰撞检测,能够极大提高计算效率,从而提高控件布局的效率。
另外,本说明书提供的技术方案能够使得每个控件均能放置到对应的切分区域中且每个控件与对应的切分区域的边缘之间有空隙,而每两个切分区域不相交,如此,能够确保每两个控件之间不会存在重叠部分。
具体实施方式
为了更好的理解上述技术方案,下面通过附图以及具体实施例对本说明书实施例的技术方案做详细的说明,应当理解本说明书实施例以及实施例中的具体特征是对本说明书实施例技术方案的详细的说明,而不是对本说明书技术方案的限定,在不冲突的情况下,本说明书实施例以及实施例中的技术特征可以相互组合。
第一方面,如图1所示,本说明书实施例提供一种控件的布局方法,包括:
S102、从显示界面上获取用于布局多个控件的布局区域;
S104、对所述布局区域进行切分,得到每个控件对应的切分区域,其中,每个控件对应的切分区域均能容纳该控件,且每两个切分区域未有重合部分;
S106、在通过碰撞检测方式检测到每个控件与对应的切分区域的边缘区域未发生碰撞时,获取每个控件在对应的切分区域的放置坐标;
S108、根据每个控件在对应的切分区域的放置坐标,将每个控件设置到切分区域中对应的放置位置上。
本说明书实施例中,所述多个控件是指2个或2个以上的控件。
其中,在步骤S102中,可以获取所述显示界面的元素布局,然后根据所述元素布局,从所述显示界面中获取所述布局区域,其中,所述布局区域可以为空白区域,即所述显示界面中未有元素布局的区域。
具体来讲,也可以从所述显示界面中确定一个区域作为所述布局区域,其中,所述布局区域的宽度可与所述显示界面的宽度相同或小于所述显示界面的宽度,所述布局区域的高度可以为所述显示界面的高度的设定比值,所述设定比值例如可以是1/4,1/5或1/6等。
具体地,在从所述显示界面中确定一个区域作为所述布局区域时,可以从所述显示界面中申请或划分一个区域作为所述布局区域。
接下来执行步骤S104,在该步骤中,可以根据每个控件的长度和高度,对所述布局区域进行切分,得到每个控件对应的切分区域,以使得每个控件对应的切分区域均能容纳该控件,且每两个切分区域未有重合部分。
例如,以控件A为例,若控件A的长度为10毫米(mm)以及高度为5mm,从所述布局区域中切分出与控件A对应的切分区域A1的长度大于10mm以及高度大于5mm,从而使得A1能够容纳控件A,A1的长度例如可以是12mm以及高度6mm,如此,使得A1在容纳控件A时,控件A能够与A1的边缘之间有空隙。
本说明书另一实施例中,还可以从所述布局区域中选取用于布局所述多个控件的安全区域,其中,所述安全区域的显示面积小于所述布局区域的显示面积;再根据所述多个控件的尺寸,从所述安全区域进行切分,得到每个控件对应的切分区域。
具体来讲,从所述布局区域中选取所述安全区域是用于确保所述多个控件的整体的安全范围,以防止有控件布局在所述显示界面之外。
例如,若所述布局区域的长度为10厘米(cm)且高度为6cm,则可以从所述布局区域中选取长度为pcm且高度为qcm的区域作为安全区域,其中,p小于10且大于最长控件的长度,q为小于6且最高控件的高度;其中,所述最长控件为所述多个控件中长度最长的一个控件,相应地,所述最高控件为所述多个控件中高度最高的一个控件,例如,p例如可以为9.5cm,q为5.5cm。
接下来执行步骤S106,在该步骤中,针对每个控件,依次执行以下步骤,如图2所示:
S201、从该控件对应的切分区域中选取一个位置坐标,将该控件放置在该位置坐标对应的位置上进行碰撞检测;
具体来讲,将该控件放置在该位置坐标对应的位置上进行碰撞检测时,将该位置坐标作为该控件的中心点;基于所述中心点,将该控件放置在该位置坐标对应的位置上进行碰撞检测。
具体地,在将该控件放置在该位置坐标对应的位置上进行碰撞检测时,在该控件放置在该位置坐标对应的位置上时,检测该控件与对应的切分区域的边缘是否有接触;若该控件与对应的切分区域的边缘有接触,则判定该控件与对应的切分区域的边缘发生了碰撞;若该控件与对应的切分区域的边缘未有接触,则判定该控件与对应的切分区域的边缘未发生碰撞。
具体地,在从该控件对应的切分区域中选取一个位置坐标时,可以从对应的切分区域中随机选取一个位置坐标,也可以从对应的切分区域中间位置选取一个位置坐标,本说明书不作具体限制。
例如,以控件A和切分区域A1为例,可以从A1中随机选取一个位置坐标B1,然后将B1作为控件A的中心点,从而将控件A放置在B1对应的位置上进行碰撞检测,若控件A和A1均为矩形,则在将控件A放置在B1对应的位置上时,在XY轴方向检测控件A是否与A1的边有接触,若检测到控件A在XY轴方向与A1的边均未接触,则判定A与A1的边缘未发生碰撞;否则,则判定A与A1的边缘发生了碰撞。
S202、若通过碰撞检测方式检测到该控件与对应的切分区域的边缘未发生碰撞,则获取该位置坐标作为该控件的放置坐标;
S203、若通过碰撞检测方式检测到该控件与对应的切分区域的边缘发生了碰撞,则重新从对应的切分区域中选取另一位置坐标进行碰撞检测,直至通过碰撞检测方式检测到该控件与对应的切分区域的边缘未发生碰撞对应的选取坐标,并将所述选取坐标作为该控件对应的放置坐标。
例如,以控件A和切分区域A1为例,首先可以从A1中随机选取一个位置坐标B1,然后将B1作为控件A的中心点,从而将控件A放置在B1对应的位置上进行碰撞检测,若碰撞检测方式检测到控件A与A1的边缘未发生碰撞,则确定B1为控件A对应的放置坐标;若碰撞检测方式检测到控件A与A1的边缘发生了碰撞,则重新从A1中选取另一个位置坐标B2,将B2作为控件A的中心点,从而将控件A放置在B2对应的位置上进行碰撞检测;若碰撞检测方式检测到控件A与A1的边缘发生了碰撞,则再重新从A1中选取第三个位置坐标B3进行碰撞检测,直至碰撞检测方式检测到控件A与A1的边缘未发生碰撞时对应的选取坐标为Bn,则将Bn作为控件A对应的放置坐标,其中,n为不小于4的整数。如此,针对每个控件执行上述操作,获取到每个控件对应的放置坐标。
接下来执行步骤S108,在获取到每个控件对应的放置坐标之后,将每个控件对应的放置坐标作为该控件的中心点;根据每个控件对应的中心点,确定每个控件在对应的切分区域中的放置位置,然后将每个控件放置在对应的放置位置上。
例如,参见图3,以显示界面为智能手机的显示界面为例,首先可以获取需要进行布局的多个控件为控件31、控件32、控件33、控件34、控件35和控件36这6个控件,然后从智能手机的显示界面30中获取用于布局上述6个控件的布局区域为区域40,区域40的宽度与显示界面30的宽度相同,区域40的长度为显示界面30的长度的1/3。
参见图4,在对区域40进行切分时,首先从区域40中选取安全区域41,然后根据上述6个控件,对安全区域41进行切分,得到控件31对应的切分区域411,控件32对应的切分区域412,控件33对应的切分区域413,控件34对应的切分区域414,控件35对应的切分区域415,控件36对应的切分区域416,且每个控件对应的切分区域均能容纳该控件,且每两个切分区域未有重合部分。
继续参见图4,以控件31为例,首先从切分区域411中随机选取一个位置坐标D1作为控件31的圆心(中心点),然后将控件31放置在位置坐标D1对应的位置上进行碰撞检测,即检测控件31与切分区域411的四条边是否有接触,若检测到控件31与切分区域411中的任意一条边有接触,则检测到控件31与切分区域411的边缘发生了碰撞,然后重新选取一个位置坐标D2作为控件31的圆心再进行碰撞检测,若检测到控件31与切分区域411中的四条边均未接触,则检测到控件31与切分区域411的边缘未发生碰撞,则将位置坐标D2作为放置坐标;然后以位置坐标D2为控件31的圆心将控件31放置在对应的放置位置上;若通过重新选取一个位置坐标D2作为控件31的圆心再进行碰撞检测时检测到控件31与切分区域411的边缘发生了碰撞,则继续从切分区域411中选取下一个位置坐标作为控件31的圆心再进行碰撞检测,直至通过碰撞检测方式检测到控件31与切分区域411的边缘未发生碰撞时对应的选取坐标,然后以所述选取坐标作为控件31的圆心将控件31放置在对应的放置位置上。
针对每个控件执行上述操作,使得每个控件均能放置到对应的切分区域中且每个控件与对应的切分区域的边缘之间有空隙,而每两个切分区域不相交,如此,能够确保每两个控件之间不会存在重叠部分。而且,与现有技术相比,只需要对每个控件与对应切分区域进行碰撞检测,而不会在布局区域这个大范围空间内完成的所述多个控件的碰撞检测,将求解空间缩小在对应的切分区域内,即将原本需要在大范围空间内完成的碰撞检测(此时不仅要对每两个控件之间进行碰撞检测还需对每个控件与所述布局区域进行碰撞检测),范围缩小到在对应的切分区域内进行碰撞检测,并能够针对所述多个控件并行进行碰撞检测,在碰撞检测的求解空间缩小的基础上还能够并行进行碰撞检测,能够极大提高计算效率,从而提高控件布局的效率。
另外,由于每个控件在对应的切分区域中进行碰撞检测时,可以从对应的切分区域中随机选取一个位置坐标进行碰撞检测,直至碰撞检测方式检测到该控件与对应的切分区域的边缘未发生碰撞对应的放置坐标,并将每个控件设置到切分区域中对应的放置位置上;如此,使得每个控件可以在对应的切分区域中随机布局,能够使得多个控件更灵活的布局,促使所述多个控件的展示效果更好。
第二方面,基于与第一方面的同一发明构思,本说明书实施例提供一种控件的布局装置,如图5所示,包括:
布局区域获取单元501,用于从显示界面上获取用于布局多个控件的布局区域;
区域切分单元502,用于对所述布局区域进行切分,得到每个控件对应的切分区域,其中,每个控件对应的切分区域均能容纳该控件,且每两个切分区域未有重合部分;
位置坐标获取单元503,用于在通过碰撞检测方式检测到每个控件与对应的切分区域的边缘区域未发生碰撞时,获取每个控件在对应的切分区域的放置坐标;
控件放置单元504,用于根据每个控件在对应的切分区域的放置坐标,将每个控件设置到切分区域中对应的放置位置上。
在一种可选方式中,位置坐标获取单元503,具体用于针对每个控件,依次执行以下步骤:从该控件对应的切分区域中选取一个位置坐标,将该控件放置在该位置坐标对应的位置上进行碰撞检测;若通过碰撞检测方式检测到该控件与对应的切分区域的边缘未发生碰撞,则获取该位置坐标作为该控件的放置坐标;若通过碰撞检测方式检测到该控件与对应的切分区域的边缘发生了碰撞,则重新从对应的切分区域中选取另一位置坐标进行碰撞检测,直至通过碰撞检测方式检测到该控件与对应的切分区域的边缘未发生碰撞对应的选取坐标,并将所述选取坐标作为该控件对应的放置坐标。
在一种可选方式中,位置坐标获取单元503,还用于从该控件对应的切分区域中随机选取一个位置坐标,将该控件放置在该位置坐标对应的位置上进行碰撞检测。
在一种可选方式中,位置坐标获取单元503,还用于将该位置坐标作为该控件的中心点;基于所述中心点,将该控件放置在该位置坐标对应的位置上进行碰撞检测。
在一种可选方式中,控件放置单元504,具体用于将每个控件对应的放置坐标作为该控件的中心点;根据每个控件对应的中心点,确定每个控件在对应的切分区域中的放置位置,并将每个控件放置在对应的放置位置上。
在一种可选方式中,区域切分单元502,具体用于从所述布局区域中选取用于放置所述多个控件的安全区域,其中,所述安全区域的显示面积小于所述布局区域的显示面积;根据所述多个控件的尺寸,从所述安全区域进行切分,得到每个控件对应的切分区域。
第三方面,基于与前述实施例中控件的布局方法同样的发明构思,本说明书实施例还提供一种服务器,如图6所示,包括存储器604、处理器602及存储在存储器604上并可在处理器602上运行的计算机程序,所述处理器602执行所述程序时实现前文所述控件的布局方法的任一方法的步骤。
其中,在图6中,总线架构(用总线600来代表),总线600可以包括任意数量的互联的总线和桥,总线600将包括由处理器602代表的一个或多个处理器和存储器604代表的存储器的各种电路链接在一起。总线600还可以将诸如外围设备、稳压器和功率管理电路等之类的各种其他电路链接在一起,这些都是本领域所公知的,因此,本文不再对其进行进一步描述。总线接口605在总线600和接收器601和发送器603之间提供接口。接收器601和发送器603可以是同一个元件,即收发机,提供用于在传输介质上与各种其他装置通信的单元。处理器602负责管理总线600和通常的处理,而存储器604可以被用于存储处理器602在执行操作时所使用的数据。
第四方面,基于与前述实施例中控件的布局方法的发明构思,本说明书实施例还提供一种计算机可读存储介质,其上存储有计算机程序,该程序被处理器执行时实现前文所述控件的布局方法的任一方法的步骤。
本说明书是参照根据本说明书实施例的方法、设备(系统)、和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以产生一个机器,使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的设备。
这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理设备以特定方式工作的计算机可读存储器中,使得存储在该计算机可读存储器中的指令产生包括指令设备的制造品,该指令设备实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。
这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上,使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理,从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。
尽管已描述了本说明书的优选实施例,但本领域内的技术人员一旦得知了基本创造性概念,则可对这些实施例作出另外的变更和修改。所以,所附权利要求意欲解释为包括优选实施例以及落入本说明书范围的所有变更和修改。
显然,本领域的技术人员可以对本说明书进行各种改动和变型而不脱离本说明书的精神和范围。这样,倘若本说明书的这些修改和变型属于本说明书权利要求及其等同技术的范围之内,则本说明书也意图包含这些改动和变型在内。