一种控件布局方法及装置与流程

文档序号:11322925阅读:156来源:国知局
一种控件布局方法及装置与流程
本发明涉及计算机
技术领域
,特别涉及一种控件布局方法及装置。
背景技术
:随着用户终端设备种类的多样化,用户显示界面需要支持的分辨率范围也越来越广。比如,移动终端设备的分辨率可以从320p至1080p不等,pc(personalcomputer,个人计算机)设备的分辨率可以从1024×768至4k不等。其中,用户图形界面的控件布局通常应与用户终端设备的分辨率相匹配、适应。目前,针对不同分辨率,可以定义不同的控件布局方案。由于需要特定的控件布局方案,故现有实现方式针对不同分辨率的适应性较低。技术实现要素:本发明提供了一种控件布局方法及装置,能够提高针对不同分辨率的适应性。为了达到上述目的,本发明是通过如下技术方案实现的:一方面,本发明提供了一种控件布局方法,确定控件显示位置规则和至少一个栏位布局定义,还包括:获取当前界面布局区域的显示宽度的第一像素值;确定所述至少一个栏位布局定义中的与所述第一像素值相对应的目标栏位布局定义;根据所述控件显示位置规则和所述目标栏位布局定义,对当前界面布局区域进行控件布局。进一步地,所述至少一个栏位布局定义中的每一个栏位布局定义均包括:栏位布局标识、屏幕宽度范围、布局总列数中的任意一个或多个;其中,所述屏幕宽度范围为(w1,w2],其中,w1为最小屏幕宽度的像素值,w2为最大屏幕宽度的像素值;所述控件显示位置规则包括:每一个待布局控件的控件标识、布局顺序、布局所占列数中的任意一个或多个。进一步地,所述确定所述至少一个栏位布局定义中的与所述第一像素值相对应的目标栏位布局定义,包括:判断所述至少一个栏位布局定义中是否存在任一栏位布局定义,以使所述第一像素值位于该栏位布局定义包括的屏幕宽度范围内,若是,确定该栏位布局定义为目标栏位布局定义。进一步地,所述根据所述控件显示位置规则和所述目标栏位布局定义,对当前界面布局区域进行控件布局,包括:针对每一个待布局控件均执行:判断该待布局控件的布局所占列数是否大于所述目标栏位布局定义的布局总列数,若是,将该待布局控件的布局所占列数更改为所述目标栏位布局定义的布局总列数,并根据更改后所得的列数、该待布局控件的控件标识和布局顺序,以及所述目标栏位布局定义的布局总列数,对当前界面布局区域进行控件布局;否则,根据该待布局控件的控件标识、布局顺序和布局所占列数,以及所述目标栏位布局定义的布局总列数,对当前界面布局区域进行控件布局。进一步地,所述对当前界面布局区域进行控件布局,包括:将该待布局控件填充于当前界面布局区域中,以使该待布局控件的显示宽度的像素值满足公式一;所述公式一包括:x=n×a/n-x0×a/a0其中,x为该待布局控件的显示宽度的像素值,n为该待布局控件的布局所占列数,a为所述第一像素值,n为所述目标栏位布局定义的布局总列数,x0为预设的与所述目标栏位布局定义相对应的左空白标准边距和右空白标准边距的像素值之和,a0为预设的与所述目标栏位布局定义相对应的标准像素值。另一方面,本发明提供了一种控件布局装置,包括:第一确定单元,用于确定控件显示位置规则和至少一个栏位布局定义;获取单元,用于获取当前界面布局区域的显示宽度的第一像素值;第二确定单元,用于确定所述至少一个栏位布局定义中的与所述第一像素值相对应的目标栏位布局定义;处理单元,用于根据所述控件显示位置规则和所述目标栏位布局定义,对当前界面布局区域进行控件布局。进一步地,所述至少一个栏位布局定义中的每一个栏位布局定义均包括:栏位布局标识、屏幕宽度范围、布局总列数中的任意一个或多个;其中,所述屏幕宽度范围为(w1,w2],其中,w1为最小屏幕宽度的像素值,w2为最大屏幕宽度的像素值;所述控件显示位置规则包括:每一个待布局控件的控件标识、布局顺序、布局所占列数中的任意一个或多个。进一步地,所述第二确定单元,具体用于判断所述至少一个栏位布局定义中是否存在任一栏位布局定义,以使所述第一像素值位于该栏位布局定义包括的屏幕宽度范围内,若是,确定该栏位布局定义为目标栏位布局定义。进一步地,所述处理单元,具体用于针对每一个待布局控件均执行:判断该待布局控件的布局所占列数是否大于所述目标栏位布局定义的布局总列数,若是,将该待布局控件的布局所占列数更改为所述目标栏位布局定义的布局总列数,并根据更改后所得的列数、该待布局控件的控件标识和布局顺序,以及所述目标栏位布局定义的布局总列数,对当前界面布局区域进行控件布局;否则,根据该待布局控件的控件标识、布局顺序和布局所占列数,以及所述目标栏位布局定义的布局总列数,对当前界面布局区域进行控件布局。进一步地,所述处理单元,具体用于将该待布局控件填充于当前界面布局区域中,以使该待布局控件的显示宽度的像素值满足公式一;所述公式一包括:x=n×a/n-x0×a/a0其中,x为该待布局控件的显示宽度的像素值,n为该待布局控件的布局所占列数,a为所述第一像素值,n为所述目标栏位布局定义的布局总列数,x0为预设的与所述目标栏位布局定义相对应的左空白标准边距和右空白标准边距的像素值之和,a0为预设的与所述目标栏位布局定义相对应的标准像素值。本发明提供了一种控件布局方法及装置,获取当前界面布局区域的显示宽度的像素值,确定预设的至少一个栏位布局定义中的与所述像素值相对应的目标栏位布局定义,根据预设的控件显示位置规则和所述目标栏位布局定义,对当前界面布局区域进行控件布局。当界面布局区域的分辨率不同时,其显示宽度的像素值不同,基于该像素值以进行控件布局,这一实现方式使得控件布局与各分辨率相适应。因此,本发明能够提高针对不同分辨率的适应性。附图说明为了更清楚地说明本发明实施例或现有技术中的技术方案,下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍,显而易见地,下面描述中的附图是本发明的一些实施例,对于本领域普通技术人员来讲,在不付出创造性劳动的前提下,还可以根据这些附图获得其他的附图。图1是本发明一实施例提供的一种控件布局方法的流程图;图2是本发明一实施例提供的另一种控件布局方法的流程图;图3是本发明一实施例提供的一种报销单界面的控件布局示意图;图4是本发明一实施例提供的另一种报销单界面的控件布局示意图;图5是本发明一实施例提供的又一种报销单界面的控件布局示意图;图6是本发明一实施例提供的一种控件布局装置的示意图。具体实施方式为使本发明实施例的目的、技术方案和优点更加清楚,下面将结合本发明实施例中的附图,对本发明实施例中的技术方案进行清楚、完整地描述,显然,所描述的实施例是本发明一部分实施例,而不是全部的实施例,基于本发明中的实施例,本领域普通技术人员在没有做出创造性劳动的前提下所获得的所有其他实施例,都属于本发明保护的范围。如图1所示,本发明实施例提供了一种控件布局方法,可以包括以下步骤:步骤101:确定控件显示位置规则和至少一个栏位布局定义。步骤102:获取当前界面布局区域的显示宽度的第一像素值。步骤103:确定所述至少一个栏位布局定义中的与所述第一像素值相对应的目标栏位布局定义。步骤104:根据所述控件显示位置规则和所述目标栏位布局定义,对当前界面布局区域进行控件布局。本发明实施例提供了一种控件布局方法,获取当前界面布局区域的显示宽度的像素值,确定预设的至少一个栏位布局定义中的与所述像素值相对应的目标栏位布局定义,根据预设的控件显示位置规则和所述目标栏位布局定义,对当前界面布局区域进行控件布局。当界面布局区域的分辨率不同时,其显示宽度的像素值不同,基于该像素值以进行控件布局,这一实现方式使得控件布局与各分辨率相适应。因此,本发明实施例能够提高针对不同分辨率的适应性。在本发明的一个实施例中,所述至少一个栏位布局定义中的每一个栏位布局定义均包括:栏位布局标识、屏幕宽度范围、布局总列数中的任意一个或多个;其中,所述屏幕宽度范围为(w1,w2],其中,w1为最小屏幕宽度的像素值,w2为最大屏幕宽度的像素值;所述控件显示位置规则包括:每一个待布局控件的控件标识、布局顺序、布局所占列数中的任意一个或多个。详细地,各屏幕宽度范围的具体取值可以根据用户需求进行确定。优选地,在本发明一个实施例中,各栏位布局定义均包括:栏位布局标识、屏幕宽度范围、布局总列数。例如,确定的3个栏位布局定义可以如下述表1所述:表1栏位布局标识屏幕宽度范围(px)布局总列数minlayout(0,1024]1mediumlayout(1024,1920]3maxlayout(1920,2560]6由上可知,相邻栏位布局定义的屏幕宽度范围是连续地,比如,屏幕宽度范围(0,1024]的最大屏幕宽度与屏幕宽度范围(1024,1920]的最小屏幕宽度相等。当然,在本发明另一实施例中,基于不同的实际应用需求,相邻栏位布局定义的屏幕宽度范围同样可以是不连续地,比如,确定的栏位布局定义可以为2个,且两者的屏幕宽度范围可以分别为(0,1024]、(1920,2560]。优选地,在本发明一个实施例中,控件显示位置规则包括每一个待布局控件的控件标识、布局顺序、布局所占列数。例如,确定的控件显示位置规则可以如下述表2所述:表2在本发明一个实施例中,通常情况下,待布局控件的布局顺序遵循先从左至右,再从上至下的原则。因此,当当前行的布局所剩列数不足以布局下一个待布局控件时,该待布局控件顺延至下一行的最左侧进行布局。比如,布局总列数为4时,当顺序布局完表2中的前三个控件时,仍剩余一列,但第四个控件的布局所占列数为3,故第四个控件可以布局于下一行的最左侧。在本发明一个实施例中,确定的控件显示位置规则同样可以包括有各控件标识对应的控件含义。比如,ctrlcode的控件含义为报销单号;ctrltype的控件含义为报销类型;ctrlsum的控件含义为报销金额;ctrlnote的控件含义为报销说明;ctrlperson的控件含义为报销人;ctrldept的控件含义为报销部门;ctrldate的控件含义为报销日期。在本发明的一个实施例中,为了说明一种确定目标栏位布局定义的可能实现方式,所以,所述确定所述至少一个栏位布局定义中的与所述第一像素值相对应的目标栏位布局定义,包括:判断所述至少一个栏位布局定义中是否存在任一栏位布局定义,以使所述第一像素值位于该栏位布局定义包括的屏幕宽度范围内,若是,确定该栏位布局定义为目标栏位布局定义。比如,基于上述表1,当获取到的第一像素值为1920时,经判断可知,1920位于屏幕宽度范围(1024,1920]内,则表1中的第二个栏位布局定义为目标栏位布局定义。如此,当需要在任一界面布局区域进行控件布局时,均可以根据与该界面布局区域相匹配的栏位布局定义进行布局,从而使得控件布局与界面布局区域的分辨率相适应。在本发明的一个实施例中,当获取到的第一像素值不位于任一栏位布局定义包括的屏幕宽度范围内时,可以确定出与其最为接近的屏幕宽度范围,进而确定出目标栏位布局定义。比如,若第一像素值为4000,其不位于任一屏幕宽度范围内,则可以确定与其最为接近的屏幕宽度范围为(1920,2560],故可以确定表1中的第三个栏位布局定义为目标栏位布局定义。在本发明的一个实施例中,为了说明一种布局所占列数大于布局总列数的可能处理方式,所以,所述根据所述控件显示位置规则和所述目标栏位布局定义,对当前界面布局区域进行控件布局,包括:针对每一个待布局控件均执行:判断该待布局控件的布局所占列数是否大于所述目标栏位布局定义的布局总列数,若是,将该待布局控件的布局所占列数更改为所述目标栏位布局定义的布局总列数,并根据更改后所得的列数、该待布局控件的控件标识和布局顺序,以及所述目标栏位布局定义的布局总列数,对当前界面布局区域进行控件布局;否则,根据该待布局控件的控件标识、布局顺序和布局所占列数,以及所述目标栏位布局定义的布局总列数,对当前界面布局区域进行控件布局。比如,若第一像素值为1024,则目标栏位布局定义的布局总列数为1,但表2中的第四个控件的布局所占列数为3,故可以将该布局所占列数可以更改为1。如此,若第一像素值为1024,布局总列数为1,通过对表2中的七个控件进行布局,当前界面布局区域中自上而下可以分布有七行,且这七行顺序布局有该七个控件,且各控件的布局所占列数均为1。本发明一个实施例中,为了说明一种可能的控件布局实现方式,所以,所述对当前界面布局区域进行控件布局,包括:将该待布局控件填充于当前界面布局区域中,以使该待布局控件的显示宽度的像素值满足下述公式(1);x=n×a/n-x0×a/a0(1)其中,x为该待布局控件的显示宽度的像素值,n为该待布局控件的布局所占列数,a为所述第一像素值,n为所述目标栏位布局定义的布局总列数,x0为预设的与所述目标栏位布局定义相对应的左空白标准边距和右空白标准边距的像素值之和,a0为预设的与所述目标栏位布局定义相对应的标准像素值。详细地,可以预设不同栏位布局定义对应的左空白标准边距和右空白标准边距的像素值之和,以及预设不同栏位布局定义对应的标准像素值。比如,可以预设表1中的第一个栏位布局定义对应的x0=150+150=300,其中,左空白标准边距和右空白标准边距的像素值均为150,a0=1024;表1中的第二个栏位布局定义对应的x0=100+100=200,其中,左空白标准边距和右空白标准边距的像素值均为100,a0=1920;表1中的第三个栏位布局定义对应的x0=50+50=100,其中,左空白标准边距和右空白标准边距的像素值均为50,a0=2560。由于左空白标准边距和右空白标准边距的像素值相等,故控件布局的填充方式可以为居中填充。举例来说,若第一像素值为1920,则目标栏位布局定义为表2中的第二个栏位布局定义,则布局总列数为3,从而每一列的列宽的像素值可以为640,即1920/3=640。以表2中的第一个待布局控件为例,经计算,该控件的显示宽度的像素值为x=1×1920/3-200×1920/1920=440,故该控件可以居中填充于当前界面布局区域的第一行的第一列。基于第一列的列边缘,该控件的左空白边距的像素值为100,右空白边距的像素值为100,该控件的显示宽度的像素值为440。另一方面,当第一像素值为位于屏幕宽度范围(1024,1920]中的除1920外的任一数值时,比如为1440时,则目标栏位布局定义为表2中的第二个栏位布局定义,则布局总列数为3,从而每一列的列宽的像素值可以为480,即1440/3=480。以表2中的第一个待布局控件为例,经计算,该控件的显示宽度的像素值为x=1×1440/3-200×1440/1920=330,左空白边距的像素值为75=100×1440/1920,右空白边距的像素值为75=100×1440/1920。该控件可以居中填充于当前界面布局区域的第一行的第一列。基于第一列的列边缘,该控件的左空白边距的像素值为75,右空白边距的像素值为75,该控件的显示宽度的像素值为330。由上述内容可知,对于显示宽度的物理尺寸相同,但分辨率不同的多个界面布局区域,由于各控件的显示宽度的像素值随分辨率的变化而改变,故完成控件布局后所得的控件布局效果可以保持一致,即各控件的显示宽度的物理尺寸保持一致。在此基础之上,由于界面布局区域的各列平均分布,且控件以填充的方式进行布局,这一实现方式能够保证控件布局整齐有序,提高布局整体效果。如图2所示,本发明一个实施例提供了另一种控件布局方法,该方法以报销单界面基本信息界面为例,具体包括以下步骤:步骤201:确定控件显示位置规则和3个栏位布局定义。详细地,确定的3个栏位布局定义可以如上述表1所示,确定的控件显示位置规则可以如上述表2所示。同时,还可以确定每一个控件标识相对应的控件含义,且这一对应关系可参照上述内容。步骤202:获取当前界面布局区域的显示宽度的第一像素值。举例来说,假设当前界面布局区域的显示宽度的像素值为1920,故可以获取到第一像素值为1920。步骤203:判断3个栏位布局定义中是否存在任一栏位布局定义,以使第一像素值位于该栏位布局定义包括的屏幕宽度范围内,若是,确定该栏位布局定义为目标栏位布局定义,并执行步骤204,否则,执行异常处理并结束当前流程。参照上述表1,可知像素值1920位于第二个栏位布局定义中,即:栏位布局标识为mediumlayout,屏幕宽度范围为(1024,1920],布局总列数为3。步骤204:针对每一个待布局控件均执行:判断该待布局控件的布局所占列数是否大于目标栏位布局定义的布局总列数,若是,执行步骤206,否则,执行步骤208。由上述内容可知,目标栏位布局定义的布局总列数为3,而上述表2中的任一控件的布局所占列数均不大于3,故对于任一控件,均执行步骤208。步骤206:将该待布局控件的布局所占列数更改为目标栏位布局定义的布局总列数,并执行步骤207。步骤207:根据更改后所得的列数、该待布局控件的控件标识和布局顺序,以及所述目标栏位布局定义的布局总列数,将该待布局控件填充于当前界面布局区域中,以使该待布局控件的显示宽度的像素值满足预设公式,并结束当前流程。详细地,该预设公式可以为上述公式(1)。步骤208:根据该待布局控件的控件标识、布局顺序和布局所占列数,以及所述目标栏位布局定义的布局总列数,将该待布局控件填充于当前界面布局区域中,以使该待布局控件的显示宽度的像素值满足预设公式。详细地,该预设公式可以为上述公式(1)。详细地,若预设的左空白边距的像素值与右空白边距的像素值相等,控件填充可以为居中填充,对应地,若两者不相等,控件填充可以根据具体预设值进行对应填充。请参照上述步骤201至步骤208,以及上述表1和表2,若获取到的第一像素值为位于(1024,1920]范围内的任一像素值,则各控件在当前界面布局区域中的布局效果可以如图3所示。在图3中,所示横向虚线可以为不同行的边界线,所示纵向虚线可以为不同列的边界线,其中,这些横向虚线和纵向虚线在实际应用中不显现,仅作为本发明实施例解释说明之用。基于各控件的控件标识、控件含义、布局顺序和布局所占列数,以及布局总列数,采用填充的布局方式进行布局,可以得到如图3中所示的控件布局结果,同时,各控件的显示宽度的像素值可以满足上述公式(1)。同理,若获取到的第一像素值为位于(0,1024]范围内的任一像素值,则各控件在当前界面布局区域中的布局效果可以如图4所示;若获取到的第一像素值为位于(1920,2560]范围内的任一像素值,则各控件在当前界面布局区域中的布局效果可以如图5所示。本发明实施例在此不作赘述。如图6所示,本发明一个实施例提供了一种控件布局装置,包括:第一确定单元601,用于确定控件显示位置规则和至少一个栏位布局定义;获取单元602,用于获取当前界面布局区域的显示宽度的第一像素值;第二确定单元603,用于确定所述至少一个栏位布局定义中的与所述第一像素值相对应的目标栏位布局定义;处理单元604,用于根据所述控件显示位置规则和所述目标栏位布局定义,对当前界面布局区域进行控件布局。在本发明一个实施例中,所述至少一个栏位布局定义中的每一个栏位布局定义均包括:栏位布局标识、屏幕宽度范围、布局总列数中的任意一个或多个;其中,所述屏幕宽度范围为(w1,w2],其中,w1为最小屏幕宽度的像素值,w2为最大屏幕宽度的像素值;所述控件显示位置规则包括:每一个待布局控件的控件标识、布局顺序、布局所占列数中的任意一个或多个。在本发明一个实施例中,所述第二确定单元603,具体用于判断所述至少一个栏位布局定义中是否存在任一栏位布局定义,以使所述第一像素值位于该栏位布局定义包括的屏幕宽度范围内,若是,确定该栏位布局定义为目标栏位布局定义。在本发明一个实施例中,所述处理单元604,具体用于针对每一个待布局控件均执行:判断该待布局控件的布局所占列数是否大于所述目标栏位布局定义的布局总列数,若是,将该待布局控件的布局所占列数更改为所述目标栏位布局定义的布局总列数,并根据更改后所得的列数、该待布局控件的控件标识和布局顺序,以及所述目标栏位布局定义的布局总列数,对当前界面布局区域进行控件布局;否则,根据该待布局控件的控件标识、布局顺序和布局所占列数,以及所述目标栏位布局定义的布局总列数,对当前界面布局区域进行控件布局。在本发明一个实施例中,所述处理单元604,具体用于将该待布局控件填充于当前界面布局区域中,以使该待布局控件的显示宽度的像素值满足公式(1)。本发明一个实施例提供了一种可读介质,包括执行指令,当存储控制器的处理器执行所述执行指令时,所述存储控制器执行上述任一所述的控件布局方法。本发明一个实施例提供了一种存储控制器,包括:处理器、存储器和总线;所述存储器用于存储执行指令,所述处理器与所述存储器通过所述总线连接,当所述存储控制器运行时,所述处理器执行所述存储器存储的所述执行指令,以使所述存储控制器执行上述任一所述的控件布局方法。上述装置内的各单元之间的信息交互、执行过程等内容,由于与本发明方法实施例基于同一构思,具体内容可参见本发明方法实施例中的叙述,此处不再赘述。综上所述,本发明的各个实施例至少具有如下有益效果:1、本发明实施例中,获取当前界面布局区域的显示宽度的像素值,确定预设的至少一个栏位布局定义中的与所述像素值相对应的目标栏位布局定义,根据预设的控件显示位置规则和所述目标栏位布局定义,对当前界面布局区域进行控件布局。当界面布局区域的分辨率不同时,其显示宽度的像素值不同,基于该像素值以进行控件布局,这一实现方式使得控件布局与各分辨率相适应。因此,本发明实施例能够提高针对不同分辨率的适应性。2、本发明实施例中,对于显示宽度的物理尺寸相同,但分辨率不同的多个界面布局区域,由于各控件的显示宽度的像素值随分辨率的变化而改变,故完成控件布局后所得的控件布局效果可以保持一致,即各控件的显示宽度的物理尺寸保持一致。在此基础之上,由于界面布局区域的各列平均分布,且控件以填充的方式进行布局,这一实现方式能够保证控件布局整齐有序,提高布局整体效果。需要说明的是,在本文中,诸如第一和第二之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来,而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。而且,术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含,从而使得包括一系列要素的过程、方法、物品或者设备不仅包括那些要素,而且还包括没有明确列出的其他要素,或者是还包括为这种过程、方法、物品或者设备所固有的要素。在没有更多限制的情况下,由语句“包括一个〃····〃”限定的要素,并不排除在包括所述要素的过程、方法、物品或者设备中还存在另外的相同因素。本领域普通技术人员可以理解:实现上述方法实施例的全部或部分步骤可以通过程序指令相关的硬件来完成,前述的程序可以存储在计算机可读取的存储介质中,该程序在执行时,执行包括上述方法实施例的步骤;而前述的存储介质包括:rom、ram、磁碟或者光盘等各种可以存储程序代码的介质中。最后需要说明的是:以上所述仅为本发明的较佳实施例,仅用于说明本发明的技术方案,并非用于限定本发明的保护范围。凡在本发明的精神和原则之内所做的任何修改、等同替换、改进等,均包含在本发明的保护范围内。当前第1页12
当前第1页1 2 
网友询问留言 已有0条留言
  • 还没有人留言评论。精彩留言会获得点赞!
1