CN103914285A - 一种用户界面布局的方法、装置及终端设备 - Google Patents

Abstract

本发明公开了一种用户界面UI布局的方法，所述方法包括：将UI的一部分设置为第一区域，将UI的另一部分设置为第二区域，调用第一添加控件接口，向第一区域添加控件，第一滚动设置接口将添加到所述第一区域的控件以垂直方式排列；和/或，调用第二添加控件接口，向第二区域添加控件，第二滚动设置接口将添加到所述第二区域的控件以水平方式排列。相应的，本发明还公开了一种用于UI布局的装置及终端设备，不仅方便使用者随意添加不同的控件到UI上，而且添加后到UI上的控件布局清晰，满足了不同开发者的UI设计需求。

Description

一种用户界面布局的方法、装置及终端设备

技术领域

本发明涉及移动通信领域，特别涉及一种用户界面布局的方法、装置及终端设备。

背景技术

现在，移动设备如移动电话、PC、具有无线通信能力的PDA等等，越来越被广泛应用于生活中。由于人们对移动设备的应用需求越来越多，运行在移动设备上的软件应用程序品种也越来越多，而这些软件在移动设备上的用户界面(UI，User Interface)对软件的应用起着至关重要的作用。好的UI设计不仅能让软件的操作变得舒适、简单、自由，还能充分体现软件的定位和特点。

布局管理器是一种用于实现UI设计的应用程序。由于现有移动设备采用的操作系统各有不同，其适用的布局管理器也不尽相同。并且，由于现有的移动设备操作系统中所附带的控件比较少，往往还需要通过在其UI中自定义不同的控件来满足客户的需求。

目前，常用于移动设备UI管理的一种布局管理器，是将控件按照从上至下的顺序依次排开，这样的布局管理器虽然能够适用于多种不同操作系统的移动设备，但是其最终实现的UI往往会发生错误，如UI最下端的控件无法显示在合适的位置，或者发生重叠，或者随着内容的增多、减少而发生界面变形等等，并且在该UI中增加控件时还需要开发者自己重新定义其布局。

发明内容

本发明提供的用户界面布局的方法、装置及终端设备，以解决现有移动设备的布局管理器容易发生错误以及不便于添加控件的问题。

本发明提供了一种用户界面UI布局方法，将UI的一部分设置为第一区域，所述第一区域包括用于向所述第一区域添加控件的第一添加控件接口和用于设置是否垂直滚动的第一滚动设置接口；将所述UI的另一部分设置为第二区域，所述第二区域包括用于向所述第二区域添加控件的第二添加控件接口和用于设置是否水平滚动的第二滚动设置接口；

所述方法包括：调用所述第一添加控件接口，向所述第一区域添加控件，所述第一滚动设置接口将添加到所述第一区域的控件以垂直方式排列；和/或，调用所述第二添加控件接口，向所述第二区域添加控件，所述第二滚动设置接口将添加到所述第二区域的控件以水平方式排列。

在上述方案中，所述第一区域还包括第一边距值设置接口、和/或第一控件显示方式设置接口、和/或第一背景设置接口；

所述方法还包括：调用所述第一边距值设置接口，将所述第一区域的边距调整为指定的边距值；和/或，调用所述第一控件显示方式设置接口，将添加到所述第一区域的控件以指定的显示方式进行放置；和/或，调用所述第一背景设置接口，将所述第一区域的背景调整为指定的背景格式。

在上述方案中，所述第二区域包括第二边距值设置接口、和/或第二控件显示方式设置接口、和/或第二背景设置接口；

所述方法还包括：调用所述第二边距值设置接口，将所述第二区域的边距调整为指定的边距值；和/或，调用所述第二控件显示方式设置接口，将添加到所述第二区域的控件以指定的显示方式进行放置；和/或，调用所述第二背景设置接口，将所述第二区域的背景调整为指定的背景格式。

在上述方案中，所述方法适用于采用黑莓操作系统、或塞班操作系统、或安卓操作系统的设备。

本发明还提供了一种UI布局装置，所述装置包括：第一布局单元和第二布局单元；其中，

第一布局单元，用于对作为UI一部分的第一区域进行布局，包括用于向所述第一区域添加控件的第一添加控件接口和用于设置是否垂直滚动的第一滚动设置接口；

第二布局单元，用于对作为UI另一部分的第二区域进行布局，包括用于向所述第二区域添加控件的第二添加控件接口和用于设置是否水平滚动的第二滚动设置接口。

在上述方案中，所述第一布局单元还包括第一边距值设置接口、和/或第一控件显示方式设置接口、和/或第一背景设置接口；其中，

第一边距值设置接口，用于在被调用时将所述第一区域的边距调整为指定的边距值；

第一控件显示方式设置接口，用于在被调用时将添加到所述第一区域的控件以指定的显示方式进行放置；

第一背景设置接口，用于在被调用时将所述第一区域的背景调整为指定的背景格式。

在上述方案中，所述第二布局单元还包括第二边距值设置接口、和/或第二控件显示方式设置接口、和/或第二背景设置接口；其中，

第二边距值设置接口，用于在被调用时将所述第二区域的边距调整为指定的边距值；

第二控件显示方式设置接口，用于在被调用时将添加到所述第一区域的控件以指定的显示方式进行放置；

第二背景设置接口，用于在被调用时将所述第一区域的背景调整为指定的背景格式。

在上述方案中，所述装置适用于采用黑莓操作系统、或塞班操作系统、或安卓操作系统的设备。

本发明还提供了一种移动设备，所述移动设备包括上述用于UI布局的装置。

在上述方案中，所述移动设备为采用黑莓操作系统、或塞班操作系统、或安卓操作系统的设备。

本发明实施例的有益效果是：通过将UI分成第一区域和第二区域，调用第一添加控件接口向所述第一区域添加控件，第一滚动设置接口将添加到所述第一区域的控件以垂直方式排列；和/或，调用第二添加控件接口向所述第二区域添加控件，第二滚动设置接口将添加到所述第二区域的控件以水平方式排列。如此，，能够实现移动设备上整个UI的垂直布局，方便使用者随意添加不同的控件到UI上；并且，第一布局单元实现了第一区域的垂直布局，第二布局单元实现了第二区域的水平布局，使得添加后到UI上的控件布局清晰，解决了现有布局管理器UI下端控件的显示容易产生错误的问题，也能够满足不同开发者的UI设计需求。

此外，可以通过重写移动设备上操作系统中原有布局管理器(Manager)的sublayout()方法来编写本发明所提供的方法，再由移动设备执行即可实现，不仅实现方法简单，而且兼容性好，可以应用于多种移动设备中。

附图说明

图1为本发明实施例移动设备上UI布局的方法的实现流程图；

图2为通过本发明实施例所提供移动设备上UI布局的方法得到的UI布局一个示例的示意图；

图3为通过本发明实施例所提供移动设备上UI布局的方法得到的UI布局中第一区域一个示例的示意图；

图4为通过本发明实施例所提供移动设备上UI布局的方法得到的UI布局中第二区域一个示例的示意图；

图5为应用本发明实施例的方法添加控件后的UI一种示例的示意图；

图6为本发明实施例用于移动设备上UI布局的装置的组成结构示意图。

具体实施方式

为使本发明的目的、技术方案和优点更加清楚，下面将结合附图对本发明实施方式作进一步地详细描述。

实施例一

参见图1，为本发明实施例提供的移动设备上UI布局的方法，主要可以包括如下步骤：

步骤101：将UI的一部分设置为第一区域，所述第一区域包括用于向所述第一区域添加控件的第一添加控件接口和用于设置是否垂直滚动的第一滚动设置接口；

步骤102：将所述UI的另一部分设置为第二区域，所述第二区域包括用于向所述第二区域添加控件的第二添加控件接口和用于设置是否水平滚动的第二滚动设置接口；

步骤103：调用所述第一添加控件接口，向所述第一区域添加控件，所述第一滚动设置接口将添加到所述第一区域的控件以垂直方式排列；和/或，调用所述第二添加控件接口，向所述第二区域添加控件，所述第二滚动设置接口将添加到所述第二区域的控件以水平方式排列。

其中，在第一区域配置第一滚动设置接口后，设置垂直滚动，则添加到第一区域的控件将采用垂直方式排列，也就是说，第一区域内的所有控件可以按照从上至下或从下至上的顺序依次排列。

其中，在第二区域配置第二滚动设置接口后，设置水平滚动，则添加到第二区域的控件将采用水平方式排列；也就是说，第二区域内的所有控件可以按照从左至右或从右至左的顺序依次排列。

这里，所述第一区域还可以包括第一边距值设置接口、和/或第一控件显示方式设置接口、和/或第一背景设置接口。

具体的，上述方法还可以包括：可以调用所述第一边距值设置接口，将所述第一区域的边距调整为指定的边距值；和/或，调用所述第一控件显示方式设置接口，将添加到所述第一区域的控件以指定的显示方式进行放置；和/或，调用所述第一背景设置接口，将所述第一区域的背景调整为指定的背景格式。

同样的，上述第二区域还可以包括第二边距值设置接口、和/或第二控件显示方式设置接口、和/或第二背景设置接口；

相应的，所述方法还可以包括：调用所述第二边距值设置接口，将所述第二区域的边距调整为指定的边距值；和/或，调用所述第二控件显示方式设置接口，将添加到所述第二区域的控件以指定的显示方式进行放置；和/或，调用所述第二背景设置接口，将所述第二区域的背景调整为指定的背景格式。

具体的，边距值设置接口用于设置相应区域的边距值，例如，可以表示第一区域或第二区域与父布局管理器的边距值，包括上下边距的设置、左右边距的设置等。实际应用中，所述边距值设置接口可以采用一个默认的设定值，也可以是开放的，由用户自由设置具体的边距值。

控件显示方式设置接口用于设置第一区域或第二区域上各控件的显示位置，其取值可以是靠左显示、靠右显示、居中显示等。实际应用中，所述控件显示方式设置接口可以采用一个默认的设定值(例如居中显示)，也可以是开放的，由用户自由设置具体的显示位置。

背景设置接口用于设置第一区域或第二区域上背景的明暗、颜色、图案等参数。实际应用中，所述背景设置接口可以采用一个默认的设定值(例如居中显示)，也可以是开放的，由用户自由设置。

实际应用中，可以通过调用所述向所述第一区域添加控件的第一添加控件接口，向第一区域上添加控件，在添加控件的同时第一滚动设置接口将添加到第一区域的控件以垂直方式排列，同时，还可以通过第一区域中的第一边距值设置接口设置所述控件的边距值，通过第一控件显示方式设置第一区域内控件的显示方式，通过第一背景设置接口设置第一区域的背景，如果不设置边距值、显示方式或者背景，则第一区域的边距值、显示方式或者背景自动采用默认设置。

同理，可以通过调用所述向所述第二区域添加控件的第二添加控件接口，向第二区域上添加控件，在添加控件的同时第二滚动设置接口将添加到第一区域的控件以水平方式排列，同时，还可以通过第二区域中的第二边距值设置接口设置所述控件的边距值，通过第二控件显示方式设置第二区域内控件的显示方式，通过第二背景设置接口设置第二区域的背景，如果不设置边距值、显示方式或者背景，则第二区域的边距值、显示方式或者背景自动采用默认设置。

如图2，为通过本发明实施例所提供的方法得到的UI布局的一个示例，其中，将一个UI分割成了两部分：一部分为第一区域21和另一部分为第二区域22；第一区域位于UI的上半部分，第二区域位于UI的下半部分，第一区域和第二区域的面积是自适应的。第一区域21配置用于设置是否垂直滚动的第一滚动设置接口，采用垂直模式布局；第二区域22配置用于设置是否水平滚动的第二滚动设置接口，采用水平模式布局；即，添加到第一区域上的所有控件垂直分布，添加到第二区域上的所有控件水平分布。

如图3为通过本发明实施例所提供的方法得到的UI布局中第一区域的一个示例，其中，第一区域中添加了三个控件：第一控件31、第二控件32和第三控件33，第一控件31、第二控件32和第三控件33按照其添加顺序依次从上至下排列。

如图4为通过本发明实施例所提供的方法得到的UI布局中第二区域的一个示例，其中，第二区域中添加了两个控件：第四控件41和第五控件42，第四控件41和第五控件42按照其添加顺序依次从左至右排列。

如图5，为添加控件后UI的一种示例，其中，在第一区域51上添加有控件511和控件512，控件511用于实现一个输入框，控件512用于实现一个复选框，控件511和控件512按照其添加顺序从上至下排列；在第二区域52上添加有控件521和控件522，控件521用于实现表示“反馈”的按钮，控件522用于实现表示“取消”的按钮，控件521和控件522按照其添加顺序从左至右排列。

本发明实施例提供的方法，通过将UI分成第一区域和第二区域，并分别设置用于添加控件的第一添加控件接口和第二添加控件接口，能够实现移动设备上整个UI的垂直布局，方便使用者随意添加不同的控件到UI上；并且，第一区域配置用于设置是否垂直滚动的第一滚动设置接口，实现了第一区域的垂直布局，第二区域配置用于设置是否水平滚动的第二滚动设置接口，实现了第二区域的水平布局，使得添加后到UI上的控件布局清晰，解决了现有布局管理器在UI下端控件的显示容易产生错误的问题，也满足了不同开发者的UI设计需求。

实际应用中，可以通过重写移动设备上操作系统中原有布局管理器(Manager)的sublayout()方法来编写上述方法，再由移动设备来执行所述方法即可，不仅实现方法简单，而且兼容性好，可以应用于多种移动设备中，例如，可以应用于采用黑莓操作系统、或塞班操作系统、或安卓操作系统的设备。

这里，本发明实施例的方法在各种不同操作系统(如黑莓操作系统、塞班操作系统、或安卓操作系统)中实现的过程如上述，只是针对不同的操作系统实现时代码的编写过程有差别，本领域技术人员基于相应操作系统的语言可以直接得到，不再赘述。

实施例二

参见图6，为本发明实施例提供的用于移动设备上UI布局的装置，主要可以包括：第一布局单元61和第二布局单元62；其中，第一布局单元61，对作为UI一部分的第一区域进行布局，包括用于向所述第一区域添加控件的第一添加控件接口和用于设置是否垂直滚动的第一滚动设置接口；第二布局单元62，用于对作为UI另一部分的第二区域进行布局，包括用于向所述第二区域添加控件的第二添加控件接口和用于设置是否水平滚动的第二滚动设置接口。

其中，在第一布局单元61的第一滚动设置接口设置垂直滚动后，添加到第一区域的控件将采用垂直方式排列，也就是说，第一区域内的所有控件可以按照从上至下或从下至上的顺序依次排列。

其中，在第二布局单元62的第二滚动设置接口设置水平滚动后，添加到第二区域的控件将采用水平方式排列；也就是说，第二区域内的所有控件可以按照从左至右或从右至左的顺序依次排列。

这里，所述第一布局单元61还可以包括的第一边距值设置接口、和/或第一控件显示方式设置接口、和/或第一背景设置接口。具体的，第一边距值设置接口，用于在被调用时将所述第一区域的边距调整为指定的边距值；第一控件显示方式设置接口，用于在被调用时将添加到所述第一区域的控件以指定的显示方式进行放置；第一背景设置接口，用于在被调用时将所述第一区域的背景调整为指定的背景格式。

同理，所述第二布局单元62还可以包括第二边距值设置接口、和/或第二控件显示方式设置接口、和/或第二背景设置接口。具体的，第二边距值设置接口，用于在被调用时将所述第二区域的边距调整为指定的边距值；第二控件显示方式设置接口，用于在被调用时将添加到所述第一区域的控件以指定的显示方式进行放置；第二背景设置接口，用于在被调用时将所述第一区域的背景调整为指定的背景格式。

实际应用中，可以通过调用所述向所述第一区域添加控件的第一添加控件接口，向第一区域上添加控件，在添加控件的同时第一滚动设置接口将添加到第一区域的控件以垂直方式排列，同时，还可以通过第一区域中的第一边距值设置接口设置所述控件的边距值，通过第一控件显示方式设置第一区域内控件的显示方式，通过第一背景设置接口设置第一区域的背景，如果不设置边距值、显示方式或者背景，则第一区域的边距值、显示方式或者背景自动采用默认设置。

同理，可以通过调用所述向所述第二区域添加控件的第二添加控件接口，向第二区域上添加控件，在添加控件的同时第二滚动设置接口将添加到第一区域的控件以水平方式排列，同时，还可以通过第二区域中的第二边距值设置接口设置所述控件的边距值，通过第二控件显示方式设置第二区域内控件的显示方式，通过第二背景设置接口设置第二区域的背景，如果不设置边距值、显示方式或者背景，则第二区域的边距值、显示方式或者背景自动采用默认设置。

本发明实施例提供的装置，通过将UI分成第一区域和第二区域，并分别设置用于添加控件的第一添加控件接口和第二添加控件接口，能够实现移动设备上整个UI的垂直布局，方便使用者随意添加不同的控件到UI上：并且，第一布局单元配置用于设置是否垂直滚动的第一滚动设置接口，实现了第一区域的垂直布局，第二布局单元配置用于设置是否水平滚动的第二滚动设置接口，实现了第二区域的水平布局，使得添加后到UI上的控件布局清晰，解决了现有布局管理器在UI下端控件的显示容易产生错误的问题，也满足了不同开发者的UI设计需求。

实际应用中，可以通过移动设备上操作系统中原有布局管理器(Manager)的sublayout()方法来编写上述装置，再由将上述装置装载于移动设备上即可，不仅实现方法简单，而且兼容性好，可以应用于多种移动设备中，例如，可以应用于采用黑莓操作系统、或塞班操作系统、或安卓操作系统的设备。

这里，本发明实施例的装置在各种不同操作系统(如黑莓操作系统、塞班操作系统、或安卓操作系统)中实现的过程如上述，只是针对不同的操作系统实现时具体的代码编写过程会有差别，本领域技术人员基于相应操作系统的语言可以直接得到，不再赘述。

实施例三

本发明实施例还提供了一种移动设备，所述移动设备包含有上述实施例二所述用于移动设备上UI布局的装置。

本发明实施例中的移动设备可以是任何可以具备无线通信能力的移动终端，例如，可以是手机、PC、具有无线通信能力的PDA等；也可以是采用黑莓操作系统、或塞班操作系统、安卓操作系统或类似操作系统的设备。

本发明实施例提供的移动设备，其UI分成第一区域和第二区域，并分别设置用于添加控件的第一添加控件接口和第二添加控件接口，能够实现移动设备上整个UI的垂直布局，方便使用者随意添加不同的控件到UI上；并且，第一区域配置用于设置是否垂直滚动的第一滚动设置接口，实现了垂直布局，第二区域配置用于设置是否水平滚动的第二滚动设置接口，实现了水平布局，使得添加后到UI上的控件布局清晰，解决了现有布局管理器在UI下端控件的显示容易产生错误的问题，也满足了不同开发者的UI设计需求。

实际应用中，可以通过重写移动设备上操作系统中原有布局管理器(Manager)的sublayout()方法来编写实现上述用于移动设备上UI布局的装置，再将所述装置装载于移动设备来执行即可，不仅实现方法简单，而且兼容性好。

以上所述仅为本发明的较佳实施例而已，并非用于限定本发明的保护范围。凡在本发明的精神和原则之内所作的任何修改、等同替换、改进等，均包含在本发明的保护范围内。

Claims (10)

1.一种用户界面UI布局方法，其特征在于，

将UI的一部分设置为第一区域，所述第一区域包括用于向所述第一区域添加控件的第一添加控件接口和用于设置是否垂直滚动的第一滚动设置接口：

将所述UI的另一部分设置为第二区域，所述第二区域包括用于向所述第二区域添加控件的第二添加控件接口和用于设置是否水平滚动的第二滚动设置接口；

所述方法包括：调用所述第一添加控件接口，向所述第一区域添加控件，所述第一滚动设置接口将添加到所述第一区域的控件以垂直方式排列；和/或，调用所述第二添加控件接口，向所述第二区域添加控件，所述第二滚动设置接口将添加到所述第二区域的控件以水平方式排列。

2.根据权利要求1所述的方法，其特征在于，

所述第一区域还包括第一边距值设置接口、和/或第一控件显示方式设置接口、和/或第一背景设置接口；

所述方法还包括：调用所述第一边距值设置接口，将所述第一区域的边距调整为指定的边距值；和/或，调用所述第一控件显示方式设置接口，将添加到所述第一区域的控件以指定的显示方式进行放置；和/或，调用所述第一背景设置接口，将所述第一区域的背景调整为指定的背景格式。

3.根据权利要求1所述的方法，其特征在于，

所述第二区域包括第二边距值设置接口、和/或第二控件显示方式设置接口、和/或第二背景设置接口；

所述方法还包括：调用所述第二边距值设置接口，将所述第二区域的边距调整为指定的边距值；和/或，调用所述第二控件显示方式设置接口，将添加到所述第二区域的控件以指定的显示方式进行放置；和/或，调用所述第二背景设置接口，将所述第二区域的背景调整为指定的背景格式。

4.根据权利要求1、2、或3所述的方法，其特征在于，所述方法适用于采用黑莓操作系统、或塞班操作系统、或安卓操作系统的设备。

5.一种UI布局装置，其特征在于，所述装置包括：第一布局单元和第二布局单元；其中，

第一布局单元，用于对作为UI一部分的第一区域进行布局，包括用于向所述第一区域添加控件的第一添加控件接口和用于设置是否垂直滚动的第一滚动设置接口；

第二布局单元，用于对作为UI另一部分的第二区域进行布局，包括用于向所述第二区域添加控件的第二添加控件接口和用于设置是否水平滚动的第二滚动设置接口。

6.根据权利要求5所述的装置，其特征在于，所述第一布局单元还包括第一边距值设置接口、和/或第一控件显示方式设置接口、和/或第一背景设置接口；其中，

第一边距值设置接口，用于在被调用时将所述第一区域的边距调整为指定的边距值；

第一控件显示方式设置接口，用于在被调用时将添加到所述第一区域的控件以指定的显示方式进行放置；

第一背景设置接口，用于在被调用时将所述第一区域的背景调整为指定的背景格式。

7.根据权利要求5所述的装置，其特征在于，所述第二布局单元还包括第二边距值设置接口、和/或第二控件显示方式设置接口、和/或第二背景设置接口；其中，

第二边距值设置接口，用于在被调用时将所述第二区域的边距调整为指定的边距值；

第二控件显示方式设置接口，用于在被调用时将添加到所述第一区域的控件以指定的显示方式进行放置；

第二背景设置接口，用于在被调用时将所述第一区域的背景调整为指定的背景格式。

8.根据权利要求5、6或7所述的装置，其特征在于，所述装置适用于采用黑莓操作系统、或塞班操作系统、或安卓操作系统的设备。

9.一种移动设备，其特征在于，所述移动设备包括如权利要求5至7任一项所述用于UI布局的装置。

10.根据权利要求9所述的移动设备，其特征在于，所述移动设备为采用黑莓操作系统、或塞班操作系统、或安卓操作系统的设备。