一种ui界面适配不同屏幕尺寸移动客户端的方法及装置制造方法
【专利摘要】本发明公开了一种UI界面适配不同屏幕尺寸移动客户端的方法及装置。该方法包括以下步骤：提供预定屏幕分辨率的UI界面，并在UI界面上定义出优先显示区和次要显示区；检测移动客户端屏幕分辨率；比较预定屏幕分辨率与移动客户端屏幕分辨率，计算出分辨率偏移量；在移动客户端上根据分辨率偏移量对UI界面进行偏移显示，以使优先显示区优先在所述移动客户端的屏幕上显示；感测移动客户端上的动作指令，并根据动作指令调整UI界面的优先显示区和次要显示区在移动客户端的屏幕上的显示位置。该方法使得不同屏幕尺寸移动客户端可以适配同一UI界面，在移动客户端应用软件时其UI界面的显示效果清晰，无需另行设计UI界面。
【专利说明】—种UI界面适配不同屏幕尺寸移动客户端的方法及装置
【技术领域】
[0001]本发明涉及移动客户端UI界面屏幕适配领域，具体涉及一种UI界面适配不同屏幕尺寸移动客户端的方法。
【背景技术】
[0002]在移动互联网迅速发展的今天，智能手机的种类、型号越来越多，相应地，其手机的屏幕尺寸也越来越多(每一种类的智能手机的屏幕尺寸有可能不一致，如三星与苹果的手机屏幕尺寸有可能不一致；每种型号的智能手机的手机屏幕也有可能不一致，如iphone4与iphone5的屏幕尺寸不一致)，此时，应用于不同移动客户端的软件面临屏幕适配问题。
[0003]现有技术中为保证移动客户端软件在不同的屏幕尺寸下，其显示效果不失真，通常使用不同屏幕尺寸的UI界面,如在适配iphone4与iphone5两个屏幕尺寸时,使用两套尺寸不一样的Π界面。在安桌软件上也基本上采用这种处理方法，但安桌移动客户端需要适配更多的屏幕尺寸，需要更多的Π界面。这种方法需要解决Π界面与手机屏幕适配问题，而在UI界面设计过程中，其开发过多、成本大、后期维护难度大，且当前安桌移动客户端屏幕只能适配一些主流尺寸的UI界面，并不能使所有屏幕尺寸都对应适配有一套UI界面。大屏幕尺寸的Π界面应用到小屏幕尺寸移动客户端时，小屏幕尺寸的移动客户端应用软件时其显示效果失真或者部分Π界面不能完全显示。
【发明内容】
[0004]本发明要解决的技术问题在于，针对现有技术的缺陷，提供一种UI界面适配不同屏幕尺寸移动客户端的方法。
[0005]本发明解决其技术问题所采用的技术方案予以实现:一种Π界面适配不同屏幕尺寸移动客户端的方法，包括以下步骤:
[0006]S1:提供预定屏幕分辨率的UI界面，并在所述Π界面上定义出优先显示区和次要显示区；
[0007]S2:检测移动客户端屏幕分辨率；
[0008]S3:比较所述预定屏幕分辨率与所述移动客户端屏幕分辨率，计算出分辨率偏移量;
[0009]S4:在所述移动客户端上根据所述分辨率偏移量对所述UI界面进行偏移显示，以使所述优先显示区优先在所述移动客户端的屏幕上显示；
[0010]S5:感测所述移动客户端上的动作指令，并根据所述动作指令调整所述UI界面的所述优先显示区和次要显示区在所述移动客户端的屏幕上的显示位置。
[0011]优选地，在步骤SI中，所述预定屏幕分辨率为预设高度X预设宽度；在所述π界面上划分出至少两个功能区域，按功能的重要程度设置所述至少两个功能区域的优先级，以定义出所述优先显示区和所述次要显示区。[0012]优选地，步骤S2包括:获取所述移动客户端的屏幕高度与屏幕宽度，所述移动客户端的屏幕分辨率为屏幕高度X屏幕宽度。
[0013]优选地，步骤S3中分辨率偏移量为预定屏幕分辨率减去所述移动客户端屏幕分
辨率的差。
[0014]优选地，步骤S4包括:判断所述分辨率偏移量是否为正数，若为正数，则将所述UI界面在所述移动客户端上按分辨率偏移量的偏移显示，以在移动客户端的屏幕上全部显示所述优先显示区，局部显示所述次要显示区；若不为正数，则将所述Π界面在所述移动客户端的屏幕上全部显示。
[0015]优选地，所述分辨率偏移量包括高度偏移量和宽度偏移量；所述高度偏移量为预设高度减去屏幕高度的差，所述宽度偏移量为预设宽度减去屏幕宽度的差。
[0016]优选地，所述步骤S4包括:判断所述高度偏移量是否为正数，若为正数，则将所述UI界面在所述移动客户端的高度方向按所述高度偏移量进行偏移显示；若不为正数，则将所述Π界面在所述移动客户端的高度方向全部显示。
[0017]优选地，所述步骤S4还包括:判断所述宽度偏移量是否为正数，其为正数，则将所述UI界面在所述移动客户端的宽度方向按所述宽度偏移量进行偏移显示，若不为正数，则将所述Π界面在所述移动客户端的宽度方向全部显示。
[0018]优选地，步骤S5包括:感测所述移动客户端上触发的动作指令；判断所述动作指令是用于全部显示次要显示区的第一动作指令还是用于全部显示优先显示区的第二动作指令；若是所述第一动作指令，则将所述Π界面的次要显示区在所述移动客户端的屏幕上全部显示；若是所述第二动作指令，则将所述Π界面的优先显示区在所述移动客户端的屏幕上全部显示。
[0019]本发明还提供一种UI界面适配不同屏幕尺寸移动客户端的装置，包括:
[0020]UI界面预设单元:用于提供预定屏幕分辨率的UI界面，并在所述UI界面上定义出优先显示区和次要显示区；
[0021]分辨率检测单元:用于检测移动客户端屏幕分辨率；
[0022]偏移量计算单元:用于比较所述预定屏幕分辨率与所述移动客户端屏幕分辨率，计算出分辨率偏移量；
[0023]偏移显示单元:用于在所述移动客户端上根据所述分辨率偏移量对所述UI界面进行偏移显示，以使所述优先显示区优先在所述移动客户端的屏幕上显示；
[0024]显示调整单元:用于感测所述移动客户端上的动作指令，并根据所述动作指令调整所述Π界面的所述优先显示区和次要显示区在所述移动客户端的屏幕上的显示位置。
[0025]本发明与现有技术相比具有如下优点:实施本发明，通过比较预定屏幕分辨率与移动客户端屏幕分辨率的大小，并计算分辨率偏移量，再根据分辨率偏移量在不同移动客户端上显示预定屏幕分辨率的Π界面，使得不同屏幕尺寸的移动客户端可以适配同一Π界面，其显示效果清晰，无需另行设计Π界面，以节省开发、后期维护的成本。
【专利附图】
【附图说明】
[0026]下面将结合附图及实施例对本发明作进一步说明，附图中:
[0027]图1是本发明一实施例中UI界面适配不同屏幕尺寸移动客户端的方法的流程图。[0028]图2是本发明一实施例中Π界面适配不同屏幕尺寸移动客户端的装置的原理框图。
[0029]图中:10、Π界面预设单元；20、分辨率检测单元；30、偏移量计算单元；40、偏移显示单元；50、显示调整单元。
【具体实施方式】
[0030]为了对本发明的技术特征、目的和效果有更加清楚的理解，现对照附图详细说明本发明的【具体实施方式】。
[0031]图1示出本发明一实施例中提供一种UI界面适配不同屏幕尺寸移动客户端的方法的流程图，该方法包括以下步骤:
[0032]S1:提供预定屏幕分辨率的Π界面，并在Π界面上定义出优先显示区和次要显示区。具体地，预定屏幕分辨率为预设高度X预设宽度，以iphone5的UI界面为例，其预定屏幕分辨率为1134X640。在UI界面上划分出至少两个功能区域，如广告区和功能功，按功能的重要程度设置至少两个功能区域的优先级，以定义出优先显示区和次要显示区。可以理解地，优先显示区与次要显示区的定义可依的用户的需求自主设定，对于重视广告效益的用户，
[0033]广告区为其优先显示区；对于重视用户体验及功能的用户，功能区为其优先显示区。在Π界面上，优先显示区与次要显示区的位置及内容可以自主设置，本实施例中，优先显示区与次要显示区上下相对设置，其中优先显示区设置在Π界面的下半部分，次要显示区设置在UI界面的上半部分。
[0034]S2:检测移动客户端屏幕分辨率。具体地，检测移动客户端屏幕分辨率需先获取移动客户端的屏幕高度与屏幕宽度，移动客户端的屏幕分辨率为屏幕高度X屏幕宽度。以iphone4为例，在检测过程中获取移动客户端屏幕的屏幕分辨率为960X640。
[0035]S3:比较预定屏幕分辨率与移动客户端屏幕分辨率,计算出分辨率偏移量。具体地，分辨率偏移量为预定屏幕分辨率减去移动客户端屏幕分辨率的差。在本实施例中，移动客户端为iphone4应用预定屏幕分辨率为1134X640的UI界面时，其分辨率偏移量为1134X640-960X640 ο
[0036]S4:在移动客户端上根据分辨率偏移量对UI界面进行偏移显示，以使优先显示区优先在移动客户端的屏幕上显示。具体地，步骤S4包括:判断分辨率偏移量是否为正数，并根据判断结果执行如下不同的操作:
[0037]判断分辨率偏移量是否为正数，若为正数，则移动客户端屏幕分辨率小于预定屏幕分辨率时，将UI界面在移动客户端上按分辨率偏移量的偏移显示，以在移动客户端的屏幕上全部显示优先显示区，局部显示次要显示区。如当移动客户端为iphone4时，其分辨率偏移量(1134X640-960X640)为正数，则将Π界面在iphone4的屏幕上偏移分辨偏移量，使iphone4上全部显示其优先显示区,次要显示区局部显示。
[0038]若分辨率偏移量不为正数(即分辨率偏移量为负数或O),则移动客户端屏幕分辨率大于或等于预定屏幕分辨率时，将Π界面在移动客户端的屏幕上全部显示。即若移动客户端为iphone5时，其分辨率偏移量为0，则在iphone5上全部显示该Π界面；若移动客户端为分辨率为1920 X 1080的三星GALAXYS4时，其分辨率偏移量为负数，则在三星GALAXYS4上全部显示该UI界面。
[0039]可以理解地，本实施例中的分辨率偏移量包括高度偏移量和宽度偏移量。其中，高度偏移量为预设高度减去屏幕高度的差，宽度偏移量为预设宽度减去屏幕宽度的差。在本实施例中，移动客户端为iphone4应用预定屏幕分辨率为1134X640的Π界面时，其高度偏移量为1134-960，宽度偏移量为640-640。
[0040]所述步骤S4包括:判断高度偏移量是否为正数，若为正数，则将UI界面在移动客户端的高度方向按高度偏移量进行偏移显示；若不为正数，则将UI界面在所述移动客户端的高度方向全部显示。以iphone5的Π界面应用到iphone4时，其高度偏移量为正数。在iphone5的Π界面中，优先显示区与次要显示区上下相对设置，其中优先显示区设置在Π界面的下半部分，次要显示区设置在UI界面的上半部分。在将iphone5的UI界面应用到iphone4时，使整个Π界面在移动客户端的高度方向往上偏移174，使处于Π界面下半部分的优先显示区全部显示，而处于Π界面上半部分的次要显示区局部显示。
[0041]所述步骤S4还包括:判断宽度偏移量是否为正数，其为正数，则将UI界面在移动客户端的宽度方向按宽度偏移量进行偏移显示；若不为正数，则将Π界面在移动客户端的宽度方向全部显示。以iphone5的Π界面应用到iphone4时，其宽度偏移量为0，则Π界面在移动客户端的宽度方向全部显示。可以理解地，根据宽度偏移显示的过程与根据高度偏移显示的过程相似。
[0042]S5:感测移动客户端上的动作指令，并根据动作指令调整UI界面的优先显示区和次要显示区在移动客户端的屏幕上的显示位置。具体地，步骤S5包括感测移动客户端上触发的动作指令；判断感测到的动作指令是用于全部显示次要显示区的第一动作指令还是用于全部显示优先显示区的第二动作指令；若是第一动作指令，则将UI界面的次要显示区在移动客户端的屏幕上全部显示；若是第二动作指令，则将Π界面的优先显示区在移动客户端的屏幕上全部显示。如以iphone5的UI界面应用到iphone4时,在当前优先显示区全部显示，次要显示区局部显示的情况下，若感测到第一动作指令，则iphone5的Π界面整体下移，使处于Π界面上半部分的次要显示区全部显示，则处于Π界面下半部分的优先显示区局部显示。在优先显示区局部显示的情况下，若感测到全部显示优先显示区的第二动作指令，则整个UI界面整体往上偏移，使得优先显示区在移动客户端的屏幕上全部显示，而次要显示区局部显示。
[0043]综上，该Π界面适配不同屏幕尺寸移动客户端的方法可使得不同屏幕尺寸的移动客户端可以适配同一 Π界面，其显示效果清晰，无需另行设计Π界面，以节省开发、后期维护的成本。
[0044]本发明还提供一种Π界面适配不同屏幕尺寸移动客户端的装置，如图2所示，该装置包括顺序相连的:
[0045]UI界面预设单元10:用于提供预定屏幕分辨率的Π界面，并在Π界面上定义出优先显示区和次要显示区。可以理解地，优先显示区与次要显示区的定义可依的用户的需求自主设定。
[0046]分辨率检测单元20:用于检测移动客户端屏幕分辨率。
[0047]偏移量计算单元30:用于比较预定屏幕分辨率与移动客户端屏幕分辨率，计算出分辨率偏移量。具体地，分辨率偏移量为预定屏幕分辨率减去移动客户端屏幕分辨率的差。[0048]偏移显示单元40:用于在移动客户端上根据分辨率偏移量对UI界面进行偏移显示，以使优先显示区优先在移动客户端的屏幕上显示。具体地，若分辨率偏移量为负数或0，则将Π界面在移动客户端的屏幕上全部显示；若分辨率偏移量为正数，将Π界面在移动客户端上按分辨率偏移量的偏移显示，以在移动客户端的屏幕上全部显示优先显示区，局部显示次要显示区。
[0049]显示调整单元50:感测移动客户端上的动作指令，并根据动作指令调整UI界面的优先显示区和次要显示区在移动客户端的屏幕上的显示位置。
[0050]该装置可以使不同屏幕尺寸的移动客户端可以适配同一 Π界面，在移动客户端应用软件时其UI界面的显示效果清晰，无需另行设计UI界面，以节省另行开发UI界面成本及后期维护成本。
[0051]本发明是通过一个具体实施例进行说明的，本领域技术人员应当明白，在不脱离本发明范围的情况下，还可以对本发明进行各种变换和等同替代。另外，针对特定情形或具体情况，可以对本发明做各种修改，而不脱离本发明的范围。因此，本发明不局限于所公开的具体实施例，而应当包括落入本发明权利要求范围内的全部实施方式。
【权利要求】
1.一种Π界面适配不同屏幕尺寸移动客户端的方法，其特征在于:包括以下步骤: 51:提供预定屏幕分辨率的Π界面，并在所述Π界面上定义出优先显示区和次要显示区； 52:检测移动客户端屏幕分辨率； 53:比较所述预定屏幕分辨率与所述移动客户端屏幕分辨率，计算出分辨率偏移量； 54:在所述移动客户端上根据所述分辨率偏移量对所述Π界面进行偏移显示，以使所述优先显示区优先在所述移动客户端的屏幕上显示； 55:感测所述移动客户端上的动作指令，并根据所述动作指令调整所述Π界面的所述优先显示区和次要显示区在所述移动客户端的屏幕上的显示位置。
2.根据权利要求1所述Π界面适配不同屏幕尺寸移动客户端的方法，其特征在于:在步骤SI中，所述预定屏幕分辨率为预设高度X预设宽度；在所述Π界面上划分出至少两个功能区域，按功能的重要程度设置所述至少两个功能区域的优先级，以定义出所述优先显示区和所述次要显示区。
3.根据权利要求2所述Π界面适配不同屏幕尺寸移动客户端的方法，其特征在于:步骤S2包括:获取所述移动客户端的屏幕高度与屏幕宽度，所述移动客户端的屏幕分辨率为屏幕高度X屏幕宽度。
4.根据权利要求3所述Π界面适配不同屏幕尺寸移动客户端的方法，其特征在于:步骤S3中分辨率偏移量为预定屏幕分辨率减去所述移动客户端屏幕分辨率的差。
5.根据权利要求4所述Π界面适配不同屏幕尺寸移动客户端的方法，其特征在于:步骤S4包括:判断所述分辨率偏移量是否为正数，若为正数，则将所述Π界面在所述移动客户端上按分辨率偏移量的偏移显示，以在移动客户端的屏幕上全部显示所述优先显示区，局部显示所述次要显示区；若不为正数，则将所述Π界面在所述移动客户端的屏幕上全部显不O
6.根据权利要求5所述Π界面适配不同屏幕尺寸移动客户端的方法，其特征在于:所述分辨率偏移量包括高度偏移量和宽度偏移量；所述高度偏移量为预设高度减去屏幕高度的差，所述宽度偏移量为预设宽度减去屏幕宽度的差。
7.根据权利要求6所述Π界面适配不同屏幕尺寸移动客户端的方法，其特征在于:所述步骤S4包括:判断所述高度偏移量是否为正数，若为正数，则将所述Π界面在所述移动客户端的高度方向按所述高度偏移量进行偏移显示；若不为正数，则将所述Π界面在所述移动客户端的高度方向全部显示。
8.根据权利要求6所述Π界面适配不同屏幕尺寸移动客户端的方法，其特征在于:所述步骤S4还包括:判断所述宽度偏移量是否为正数，其为正数，则将所述Π界面在所述移动客户端的宽度方向按所述宽度偏移量进行偏移显示，若不为正数，则将所述Π界面在所述移动客户端的宽度方向全部显示。
9.根据权利要求1-8任一项所述Π界面适配不同屏幕尺寸移动客户端的方法，其特征在于:步骤S5包括:感测所述移动客户端上触发的动作指令；判断所述动作指令是用于全部显示次要显示区的第一动作指令还是用于全部显示优先显示区的第二动作指令；若是所述第一动作指令，则将所述Π界面的次要显示区在所述移动客户端的屏幕上全部显示；若是所述第二动作指令，则将所述Π界面的优先显示区在所述移动客户端的屏幕上全部显示。
10.一种Π界面适配不同屏幕尺寸移动客户端的装置，其特征在于:包括: UI界面预设单元(10):用于提供预定屏幕分辨率的UI界面，并在所述UI界面上定义出优先显示区和次要显示区； 分辨率检测单元(20):用于检测移动客户端屏幕分辨率； 偏移量计算单元(30):用于比较所述预定屏幕分辨率与所述移动客户端屏幕分辨率，计算出分辨率偏移量； 偏移显示单元(40):用于在所述移动客户端上根据所述分辨率偏移量对所述Π界面进行偏移显示，以使所述优先显示区优先在所述移动客户端的屏幕上显示； 显示调整单元(50):用于感测所述移动客户端上的动作指令，并根据所述动作指令调整所述UI界面的所述优先显示区和次要显示区在所述移动客户端的屏幕上的显示位置。
【文档编号】H04M1/725GK103984477SQ201410128959
【公开日】2014年8月13日 申请日期:2014年4月1日 优先权日:2014年4月1日
【发明者】刘可, 黄贺群, 陈晓嘉 申请人:深圳市云来网络科技有限公司