一种UI界面适配不同屏幕尺寸移动客户端的方法及装置制造方法及图纸

技术编号:10320135 阅读:171 留言:0更新日期:2014-08-13 20:20
本发明专利技术公开了一种UI界面适配不同屏幕尺寸移动客户端的方法及装置。该方法包括以下步骤:提供预定屏幕分辨率的UI界面,并在UI界面上定义出优先显示区和次要显示区;检测移动客户端屏幕分辨率;比较预定屏幕分辨率与移动客户端屏幕分辨率,计算出分辨率偏移量;在移动客户端上根据分辨率偏移量对UI界面进行偏移显示,以使优先显示区优先在所述移动客户端的屏幕上显示;感测移动客户端上的动作指令,并根据动作指令调整UI界面的优先显示区和次要显示区在移动客户端的屏幕上的显示位置。该方法使得不同屏幕尺寸移动客户端可以适配同一UI界面,在移动客户端应用软件时其UI界面的显示效果清晰,无需另行设计UI界面。

【技术实现步骤摘要】
一种UI界面适配不同屏幕尺寸移动客户端的方法及装置
本专利技术涉及移动客户端UI界面屏幕适配领域,具体涉及一种UI界面适配不同屏幕尺寸移动客户端的方法。
技术介绍
在移动互联网迅速发展的今天,智能手机的种类、型号越来越多,相应地,其手机的屏幕尺寸也越来越多(每一种类的智能手机的屏幕尺寸有可能不一致,如三星与苹果的手机屏幕尺寸有可能不一致;每种型号的智能手机的手机屏幕也有可能不一致,如iphone4与iphone5的屏幕尺寸不一致),此时,应用于不同移动客户端的软件面临屏幕适配问题。现有技术中为保证移动客户端软件在不同的屏幕尺寸下,其显示效果不失真,通常使用不同屏幕尺寸的UI界面,如在适配iphone4与iphone5两个屏幕尺寸时,使用两套尺寸不一样的UI界面。在安桌软件上也基本上采用这种处理方法,但安桌移动客户端需要适配更多的屏幕尺寸,需要更多的UI界面。这种方法需要解决UI界面与手机屏幕适配问题,而在UI界面设计过程中,其开发过多、成本大、后期维护难度大,且当前安桌移动客户端屏幕只能适配一些主流尺寸的UI界面,并不能使所有屏幕尺寸都对应适配有一套UI界面。大屏幕尺寸的UI界面应用到小屏幕尺寸移动客户端时,小屏幕尺寸的移动客户端应用软件时其显示效果失真或者部分UI界面不能完全显示。
技术实现思路
本专利技术要解决的技术问题在于,针对现有技术的缺陷,提供一种UI界面适配不同屏幕尺寸移动客户端的方法。本专利技术解决其技术问题所采用的技术方案予以实现:一种UI界面适配不同屏幕尺寸移动客户端的方法,包括以下步骤:S1:提供预定屏幕分辨率的UI界面,并在所述UI界面上定义出优先显示区和次要显示区;S2:检测移动客户端屏幕分辨率;S3:比较所述预定屏幕分辨率与所述移动客户端屏幕分辨率,计算出分辨率偏移量;S4:在所述移动客户端上根据所述分辨率偏移量对所述UI界面进行偏移显示,以使所述优先显示区优先在所述移动客户端的屏幕上显示;S5:感测所述移动客户端上的动作指令,并根据所述动作指令调整所述UI界面的所述优先显示区和次要显示区在所述移动客户端的屏幕上的显示位置。优选地,在步骤S1中,所述预定屏幕分辨率为预设高度×预设宽度;在所述UI界面上划分出至少两个功能区域,按功能的重要程度设置所述至少两个功能区域的优先级,以定义出所述优先显示区和所述次要显示区。优选地,步骤S2包括:获取所述移动客户端的屏幕高度与屏幕宽度,所述移动客户端的屏幕分辨率为屏幕高度×屏幕宽度。优选地,步骤S3中分辨率偏移量为预定屏幕分辨率减去所述移动客户端屏幕分辨率的差。优选地,步骤S4包括:判断所述分辨率偏移量是否为正数,若为正数,则将所述UI界面在所述移动客户端上按分辨率偏移量的偏移显示,以在移动客户端的屏幕上全部显示所述优先显示区,局部显示所述次要显示区;若不为正数,则将所述UI界面在所述移动客户端的屏幕上全部显示。优选地,所述分辨率偏移量包括高度偏移量和宽度偏移量;所述高度偏移量为预设高度减去屏幕高度的差,所述宽度偏移量为预设宽度减去屏幕宽度的差。优选地,所述步骤S4包括:判断所述高度偏移量是否为正数,若为正数,则将所述UI界面在所述移动客户端的高度方向按所述高度偏移量进行偏移显示;若不为正数,则将所述UI界面在所述移动客户端的高度方向全部显示。优选地,所述步骤S4还包括:判断所述宽度偏移量是否为正数,其为正数,则将所述UI界面在所述移动客户端的宽度方向按所述宽度偏移量进行偏移显示,若不为正数,则将所述UI界面在所述移动客户端的宽度方向全部显示。优选地,步骤S5包括:感测所述移动客户端上触发的动作指令;判断所述动作指令是用于全部显示次要显示区的第一动作指令还是用于全部显示优先显示区的第二动作指令;若是所述第一动作指令,则将所述UI界面的次要显示区在所述移动客户端的屏幕上全部显示;若是所述第二动作指令,则将所述UI界面的优先显示区在所述移动客户端的屏幕上全部显示。本专利技术还提供一种UI界面适配不同屏幕尺寸移动客户端的装置,包括:UI界面预设单元:用于提供预定屏幕分辨率的UI界面,并在所述UI界面上定义出优先显示区和次要显示区;分辨率检测单元:用于检测移动客户端屏幕分辨率;偏移量计算单元:用于比较所述预定屏幕分辨率与所述移动客户端屏幕分辨率,计算出分辨率偏移量;偏移显示单元:用于在所述移动客户端上根据所述分辨率偏移量对所述UI界面进行偏移显示,以使所述优先显示区优先在所述移动客户端的屏幕上显示;显示调整单元:用于感测所述移动客户端上的动作指令,并根据所述动作指令调整所述UI界面的所述优先显示区和次要显示区在所述移动客户端的屏幕上的显示位置。本专利技术与现有技术相比具有如下优点:实施本专利技术,通过比较预定屏幕分辨率与移动客户端屏幕分辨率的大小,并计算分辨率偏移量,再根据分辨率偏移量在不同移动客户端上显示预定屏幕分辨率的UI界面,使得不同屏幕尺寸的移动客户端可以适配同一UI界面,其显示效果清晰,无需另行设计UI界面,以节省开发、后期维护的成本。附图说明下面将结合附图及实施例对本专利技术作进一步说明,附图中:图1是本专利技术一实施例中UI界面适配不同屏幕尺寸移动客户端的方法的流程图。图2是本专利技术一实施例中UI界面适配不同屏幕尺寸移动客户端的装置的原理框图。图中:10、UI界面预设单元;20、分辨率检测单元;30、偏移量计算单元;40、偏移显示单元;50、显示调整单元。具体实施方式为了对本专利技术的技术特征、目的和效果有更加清楚的理解,现对照附图详细说明本专利技术的具体实施方式。图1示出本专利技术一实施例中提供一种UI界面适配不同屏幕尺寸移动客户端的方法的流程图,该方法包括以下步骤:S1:提供预定屏幕分辨率的UI界面,并在UI界面上定义出优先显示区和次要显示区。具体地,预定屏幕分辨率为预设高度×预设宽度,以iphone5的UI界面为例,其预定屏幕分辨率为1134×640。在UI界面上划分出至少两个功能区域,如广告区和功能功,按功能的重要程度设置至少两个功能区域的优先级,以定义出优先显示区和次要显示区。可以理解地,优先显示区与次要显示区的定义可依的用户的需求自主设定,对于重视广告效益的用户,广告区为其优先显示区;对于重视用户体验及功能的用户,功能区为其优先显示区。在UI界面上,优先显示区与次要显示区的位置及内容可以自主设置,本实施例中,优先显示区与次要显示区上下相对设置,其中优先显示区设置在UI界面的下半部分,次要显示区设置在UI界面的上半部分。S2:检测移动客户端屏幕分辨率。具体地,检测移动客户端屏幕分辨率需先获取移动客户端的屏幕高度与屏幕宽度,移动客户端的屏幕分辨率为屏幕高度×屏幕宽度。以iphone4为例,在检测过程中获取移动客户端屏幕的屏幕分辨率为960×640。S3:比较预定屏幕分辨率与移动客户端屏幕分辨率,计算出分辨率偏移量。具体地,分辨率偏移量为预定屏幕分辨率减去移动客户端屏幕分辨率的差。在本实施例中,移动客户端为iphone4应用预定屏幕分辨率为1134×640的UI界面时,其分辨率偏移量为1134×640-960×640。S4:在移动客户端上根据分辨率偏移量对UI界面进行偏移显示,以使优先显示区优先在移动客户端的屏幕上显示。具体地,步骤S4包括:判断分辨率偏移量是否本文档来自技高网...
一种UI界面适配不同屏幕尺寸移动客户端的方法及装置

【技术保护点】
一种UI界面适配不同屏幕尺寸移动客户端的方法,其特征在于:包括以下步骤:S1:提供预定屏幕分辨率的UI界面,并在所述UI界面上定义出优先显示区和次要显示区;S2:检测移动客户端屏幕分辨率;S3:比较所述预定屏幕分辨率与所述移动客户端屏幕分辨率,计算出分辨率偏移量;S4:在所述移动客户端上根据所述分辨率偏移量对所述UI界面进行偏移显示,以使所述优先显示区优先在所述移动客户端的屏幕上显示;S5:感测所述移动客户端上的动作指令,并根据所述动作指令调整所述UI界面的所述优先显示区和次要显示区在所述移动客户端的屏幕上的显示位置。

【技术特征摘要】
1.一种UI界面适配不同屏幕尺寸移动客户端的方法,其特征在于:包括以下步骤:S1:提供预定屏幕分辨率的UI界面,并在所述UI界面上定义出优先显示区和次要显示区;S2:检测移动客户端屏幕分辨率;S3:比较所述预定屏幕分辨率与所述移动客户端屏幕分辨率,计算出分辨率偏移量;S4:在所述移动客户端上根据所述分辨率偏移量对所述UI界面进行偏移显示,以使所述优先显示区优先在所述移动客户端的屏幕上显示;S5:感测所述移动客户端上的动作指令,并根据所述动作指令调整所述UI界面的所述优先显示区和次要显示区在所述移动客户端的屏幕上的显示位置。2.根据权利要求1所述UI界面适配不同屏幕尺寸移动客户端的方法,其特征在于:在步骤S1中,所述预定屏幕分辨率为预设高度×预设宽度;在所述UI界面上划分出至少两个功能区域,按功能的重要程度设置所述至少两个功能区域的优先级,以定义出所述优先显示区和所述次要显示区。3.根据权利要求2所述UI界面适配不同屏幕尺寸移动客户端的方法,其特征在于:步骤S2包括:获取所述移动客户端的屏幕高度与屏幕宽度,所述移动客户端的屏幕分辨率为屏幕高度×屏幕宽度。4.根据权利要求3所述UI界面适配不同屏幕尺寸移动客户端的方法,其特征在于:步骤S3中分辨率偏移量为预定屏幕分辨率减去所述移动客户端屏幕分辨率的差。5.根据权利要求4所述UI界面适配不同屏幕尺寸移动客户端的方法,其特征在于:步骤S4包括:判断所述分辨率偏移量是否为正数,若为正数,则将所述UI界面在所述移动客户端上按分辨率偏移量的偏移显示,以在移动客户端的屏幕上显示全部所述优先显示区,显示局部所述次要显示区;若不为正数,则将所述UI界面在所述移动客户端的屏幕上全部显示。6.根据权利要求5所述UI界面适配不同屏幕尺寸移动客户端的方法,其特征在于:所述分辨率偏移量包括高度偏移量和宽度偏移量;所述高度偏移量为预设高度减去屏幕高度的差,所述宽...

【专利技术属性】
技术研发人员:刘可黄贺群陈晓嘉
申请(专利权)人:深圳市云来网络科技有限公司
类型:发明
国别省市:广东;44

网友询问留言 已有0条评论
  • 还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。

1