CN108304136A - 控件的显示控制方法及装置 - Google Patents

控件的显示控制方法及装置 Download PDF

Info

Publication number
CN108304136A
CN108304136A CN201810160988.6A CN201810160988A CN108304136A CN 108304136 A CN108304136 A CN 108304136A CN 201810160988 A CN201810160988 A CN 201810160988A CN 108304136 A CN108304136 A CN 108304136A
Authority
CN
China
Prior art keywords
control
preset
region
shape
preset shape
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Pending
Application number
CN201810160988.6A
Other languages
English (en)
Inventor
张晓斐
何家辉
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Netease Hangzhou Network Co Ltd
Original Assignee
Netease Hangzhou Network Co Ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Netease Hangzhou Network Co Ltd filed Critical Netease Hangzhou Network Co Ltd
Priority to CN201810160988.6A priority Critical patent/CN108304136A/zh
Publication of CN108304136A publication Critical patent/CN108304136A/zh
Pending legal-status Critical Current

Links

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0487—Interaction techniques based on graphical user interfaces [GUI] using specific features provided by the input device, e.g. functions controlled by the rotation of a mouse with dual sensing arrangements, or of the nature of the input device, e.g. tap gestures based on pressure sensed by a digitiser
    • G06F3/0488—Interaction techniques based on graphical user interfaces [GUI] using specific features provided by the input device, e.g. functions controlled by the rotation of a mouse with dual sensing arrangements, or of the nature of the input device, e.g. tap gestures based on pressure sensed by a digitiser using a touch-screen or digitiser, e.g. input of commands through traced gestures
    • A—HUMAN NECESSITIES
    • A63—SPORTS; GAMES; AMUSEMENTS
    • A63F—CARD, BOARD, OR ROULETTE GAMES; INDOOR GAMES USING SMALL MOVING PLAYING BODIES; VIDEO GAMES; GAMES NOT OTHERWISE PROVIDED FOR
    • A63F13/00—Video games, i.e. games using an electronically generated display having two or more dimensions
    • A63F13/40—Processing input control signals of video game devices, e.g. signals generated by the player or derived from the environment
    • A63F13/42—Processing input control signals of video game devices, e.g. signals generated by the player or derived from the environment by mapping the input signals into game commands, e.g. mapping the displacement of a stylus on a touch screen to the steering angle of a virtual vehicle
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F21/00—Security arrangements for protecting computers, components thereof, programs or data against unauthorised activity
    • G06F21/30—Authentication, i.e. establishing the identity or authorisation of security principals
    • G06F21/31—User authentication
    • G06F21/36—User authentication by graphic or iconic representation
    • H—ELECTRICITY
    • H04—ELECTRIC COMMUNICATION TECHNIQUE
    • H04M—TELEPHONIC COMMUNICATION
    • H04M1/00—Substation equipment, e.g. for use by subscribers
    • H04M1/66—Substation equipment, e.g. for use by subscribers with means for preventing unauthorised or fraudulent calling
    • H04M1/667—Preventing unauthorised calls from a telephone set
    • H04M1/67—Preventing unauthorised calls from a telephone set by electronic means
    • H—ELECTRICITY
    • H04—ELECTRIC COMMUNICATION TECHNIQUE
    • H04M—TELEPHONIC COMMUNICATION
    • H04M1/00—Substation equipment, e.g. for use by subscribers
    • H04M1/72—Mobile telephones; Cordless telephones, i.e. devices for establishing wireless links to base stations without route selection
    • H04M1/724—User interfaces specially adapted for cordless or mobile telephones
    • H04M1/72448—User interfaces specially adapted for cordless or mobile telephones with means for adapting the functionality of the device according to specific conditions
    • H04M1/72463—User interfaces specially adapted for cordless or mobile telephones with means for adapting the functionality of the device according to specific conditions to restrict the functionality of the device

Landscapes

  • Engineering & Computer Science (AREA)
  • Computer Security & Cryptography (AREA)
  • Theoretical Computer Science (AREA)
  • Multimedia (AREA)
  • Human Computer Interaction (AREA)
  • General Engineering & Computer Science (AREA)
  • General Physics & Mathematics (AREA)
  • Physics & Mathematics (AREA)
  • Signal Processing (AREA)
  • Software Systems (AREA)
  • Computer Hardware Design (AREA)
  • Computer Networks & Wireless Communication (AREA)
  • User Interface Of Digital Computer (AREA)

Abstract

本公开是关于一种控件的显示控制方法及装置。该控件的显示控制方法包括：将控件显示区域划分为虚拟网格区域，所述虚拟网格区域包含第一预设数量的划分区域；将第二预设数量的控件按照第一预设规则分别放入所述第一预设数量的划分区域内，其中，所述划分区域中的第一划分区域包含第一控件和第二控件；根据所述控件的坐标位置显示所述控件。本公开的控件的显示控制方法可以使得控件分布更加灵活。

Description

控件的显示控制方法及装置
技术领域
本公开涉及信息处理技术领域，具体而言，涉及一种控件的显示控制方法及装置。
背景技术
显示界面例如手机游戏界面或者手机解锁界面中，一些按钮等控件需要在界面中通过滑动、点击等操作连接不同的控件以实现游戏或者解锁目的，因此，需要设计各控件在界面中的分布方式。
因此，需要一种新的控件的显示控制方法及装置。
需要说明的是，在上述背景技术部分公开的信息仅用于加强对本公开的背景的理解，因此可以包括不构成对本领域普通技术人员已知的现有技术的信息。
发明内容
针对现有技术中的部分问题或者全部问题，本公开提供一种控件的显示控制方法及装置。
根据本公开的一个方面，提供一种控件的显示控制方法，包括：将控件显示区域划分为一个虚拟网格区域，所述虚拟网格区域包含第一预设数量的划分区域；将第二预设数量的控件按照第一预设规则分别放入所述第一预设数量的划分区域内，其中，所述划分区域中的第一划分区域包含第一控件和第二控件；根据所述控件的坐标位置显示所述控件。
在本公开的一种示例性实施例中，所述第一预设规则包括：判断所述第一控件和所述第二控件是否重合；当所述第一控件和所述第二控件重合时，按照第二预设规则移动所述第一控件和/或所述第二控件，使得所述第一控件和所述第二控件不重合。
在本公开的一种示例性实施例中，所述控件分别置于第一预设形状内，其中所述第一预设规则包括：判断所述第一控件的第一预设形状和所述第二控件的第一预设形状是否重合；当所述第一控件的第一预设形状和第二控件的第一预设形状重合时，按照第三预设规则移动所述第一控件和/或所述第二控件及其相应的第一预设形状，使得所述第一控件的第一预设形状和所述第二控件的第一预设形状不重合。
在本公开的一种示例性实施例中，所述第三预设规则包括：分别获得重合的所述第一控件和所述第二控件与预设点之间的第一距离和第二距离；当所述第一距离小于所述第二距离时，将相应的第一控件及其第一预设形状沿着重合的所述第一控件与所述第二控件连线的反方向的水平分量或者垂直分量移动。
在本公开的一种示例性实施例中，所述第三预设规则还包括：所述第一控件及其第一预设形状移动过程中，判断所述第一控件的第一预设形状是否与所述第一划分区域相交；当所述第一控件的第一预设形状与所述第一划分区域不相交时，所述第一控件的移动距离为所述第一预设形状的边长减去所述第一控件和所述第二控件之间的间距；当所述第一控件的第一预设形状与所述第一划分区域相交时，将所述第一控件及其第一预设形状移动至所述第一划分区域边界，并沿着与所述第一控件移动的反方向移动所述第二控件及其第一预设形状，其中所述第二控件的移动距离为所述第一预设形状的边长减去所述第一控件和所述第二控件之间的间距再减去所述第一控件已经移动的距离。
在本公开的一种示例性实施例中，所述第一预设形状为边长为a的正方形。
在本公开的一种示例性实施例中，所述第一预设数量x和所述第二预设数量y之间的关系为：
在本公开的一种示例性实施例中，所述第一预设规则包括：将所述第二预设数量的控件中的第一预设数量的控件依次放入所述第一预设数量的划分区域内；当每个划分区域内均放置一个所述控件时，依次在所述第一预设数量的划分区域内放入所述第二预设数量的控件中的剩余控件。
在本公开的一种示例性实施例中，所述虚拟网格等面积划分为所述第一预设数量的划分区域。
在本公开的一种示例性实施例中，所述控件在相应的划分区域内的坐标随机，且所述控件与相应的划分区域的边界不相交。
根据本公开的一个方面，提供一种控件的显示控制装置，包括：区域划分模块，用于将控件显示区域划分为虚拟网格区域，所述虚拟网格区域包含第一预设数量的划分区域；控件放置模块，用于将第二预设数量的控件按照第一预设规则分别放入所述第一预设数量的划分区域内，其中，所述划分区域中的第一划分区域包含第一控件和第二控件；控件显示模块，用于根据所述控件的坐标位置显示所述控件。
在本公开的一种示例性实施例中，所述第一预设规则包括：判断所述第一控件和所述第二控件是否重合；当所述第一控件和所述第二控件重合时，按照第二预设规则移动所述第一控件和/或所述第二控件，使得所述第一控件和所述第二控件不重合。
在本公开的一种示例性实施例中，所述控件分别置于第一预设形状内，其中所述第一预设规则包括：判断所述第一控件的第一预设形状和所述第二控件的第一预设形状是否重合；当所述第一控件的第一预设形状和第二控件的第一预设形状重合时，按照第三预设规则移动所述第一控件和/或所述第二控件及其相应的第一预设形状，使得所述第一控件的第一预设形状和所述第二控件的第一预设形状不重合。
在本公开的一种示例性实施例中，所述第三预设规则包括：分别获得重合的所述第一控件和所述第二控件与预设点之间的第一距离和第二距离；当所述第一距离小于所述第二距离时，将相应的第一控件及其第一预设形状沿着重合的所述第一控件与所述第二控件连线的反方向的水平分量或者垂直分量移动。
在本公开的一种示例性实施例中，所述第三预设规则还包括：所述第一控件及其第一预设形状移动过程中，判断所述第一控件的第一预设形状是否与所述第一划分区域相交；当所述第一控件的第一预设形状与所述第一划分区域不相交时，所述第一控件的移动距离为所述第一预设形状的边长减去所述第一控件和所述第二控件之间的间距；当所述第一控件的第一预设形状与所述第一划分区域相交时，将所述第一控件及其第一预设形状移动至所述第一划分区域边界，并沿着与所述第一控件移动的反方向移动所述第二控件及其第一预设形状，其中所述第二控件的移动距离为所述第一预设形状的边长减去所述第一控件和所述第二控件之间的间距再减去所述第一控件已经移动的距离。
在本公开的一种示例性实施例中，所述第一预设形状为边长为a的正方形。
在本公开的一种示例性实施例中，所述第一预设数量x和所述第二预设数量y之间的关系为：
在本公开的一种示例性实施例中，所述第一预设规则包括：将所述第二预设数量的控件中的第一预设数量的控件依次放入所述第一预设数量的划分区域内；当每个划分区域内均放置一个所述控件时，依次在所述第一预设数量的划分区域内放入所述第二预设数量的控件中的剩余控件。
在本公开的一种示例性实施例中，所述虚拟网格等面积划分为所述第一预设数量的划分区域。
在本公开的一种示例性实施例中，所述控件在相应的划分区域内的坐标随机，且所述控件与相应的划分区域的边界不相交。
本公开的一种实施例中的控件的显示控制方法及装置，通过将控件显示区域划分为虚拟网格区域，且所述虚拟网格包含第一预设数量的划分区域；再将第二预设数量的控件按照第一预设规则分别放入所述第一预设数量的划分区域内，根据所述控件的坐标位置显示所述控件，可以使得控件显示更加灵活。
应当理解的是，以上的一般描述和后文的细节描述仅是示例性和解释性的，并不能限制本公开。
附图说明
此处的附图被并入说明书中并构成本说明书的一部分，示出了符合本公开的实施例，并与说明书一起用于解释本公开的原理。显而易见地，下面描述中的附图仅仅是本公开的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。
图1示意性示出现有技术中一种控件显示的示意图。
图2示意性示出本公开示例性实施例中一种控件的显示控制方法的流程图。
图3示意性示出本公开示例性实施例中一种控件的示意图。
图4示意性示出本公开示例性实施例中一种控件显示的示意图。
图5示意性示出本公开示例性实施例中另一种控件显示的示意图。
图6示意性示出本公开示例性实施例中又一种控件显示的示意图。
图7示意性示出本公开示例性实施例中再一种控件显示的示意图。
图8示意性示出本公开示例性实施例中再一种控件显示的示意图。
图9示意性示出本公开示例性实施例中再一种控件显示的示意图。
图10示意性示出本公开示例性实施例中再一种控件显示的示意图。
图11示意性示出本公开示例性实施例中再一种控件显示的示意图。
图12示意性示出本公开示例性实施例中再一种控件显示的示意图。
图13示意性示出本公开示例性实施例中一种控件的显示控制装置的示意图。
具体实施方式
现在将参考附图更全面地描述示例实施方式。然而，示例实施方式能够以多种形式实施，且不应被理解为限于在此阐述的范例；相反，提供这些实施方式使得本公开将更加全面和完整，并将示例实施方式的构思全面地传达给本领域的技术人员。所描述的特征、结构或特性可以以任何合适的方式结合在一个或更多实施方式中。在下面的描述中，提供许多具体细节从而给出对本公开的实施方式的充分理解。然而，本领域技术人员将意识到，可以实践本公开的技术方案而省略所述特定细节中的一个或更多，或者可以采用其它的方法、组元、装置、步骤等。在其它情况下，不详细示出或描述公知技术方案以避免喧宾夺主而使得本公开的各方面变得模糊。
此外，附图仅为本公开的示意性图解，并非一定是按比例绘制。图中相同的附图标记表示相同或类似的部分，因而将省略对它们的重复描述。附图中所示的一些方框图是功能实体，不一定必须与物理或逻辑上独立的实体相对应。可以采用软件形式来实现这些功能实体，或在一个或多个硬件模块或集成电路中实现这些功能实体，或在不同网络和/或处理器装置和/或微控制器装置中实现这些功能实体。
现有技术的一般性做法是：固定各控件的坐标值，通过加载预先设定的各控件的坐标确定各控件的位置。
如图1所示，这里以常见的连线操作的控件分布设计进行说明，以图1所示的游戏界面为例。当用户开启图1所示的游戏界面时，每次让用户随机连线，然后再根据用户的随机连线随机给出不同的奖励，从而让用户产生一种连线规则与奖励内容相关联的感觉。当用户开启手机界面时，其上显示九个固定坐标值的按钮控件，用户通过手指滑动选中相应的按钮控件，将被选中的按钮控件之间按手指滑动的轨迹进行连线，当连线操作显示的控件满足预先设置的图形时，即可将手机解锁。
这种固定控件位置的控件分布设计方式，需要预先设定各控件的坐标，且这种方式比较死板无变化，尤其无法满足手机游戏这种应用场景中用户对于随机性和趣味性的要求。
现有技术的另一种做法是：对于控件分布设计，完全随机坐标，通过随机生成的坐标值确定各控件的位置。
还是以上述的连线游戏界面为例，这种完全随机控件位置的控件分布设计方式，即在控件显示区域内随机设置各控件的坐标，当需要分布的控件数量较多时，一方面，容易出现部分控件之间互相重叠，假如用户只是简单的通过移动控件来避免控件之间互相重叠，又容易产生移动后再次与其他控件重叠，然后需要用户继续移动重叠的控件，从而陷入死循环；另一方面，可能导致控件分布不均，从而影响用户的视觉和操作体验。
图2示意性示出本公开示例性实施例中一种控件的显示控制方法的流程图。
如图2所示，本实施方式提供了一种控件的显示控制方法，可以包括如下步骤。
在步骤S110中，将控件显示区域划分为虚拟网格区域，所述虚拟网格区域包含第一预设数量的划分区域。
在步骤S120中，将第二预设数量的控件按照第一预设规则分别放入所述第一预设数量的划分区域内，其中，所述划分区域中的第一划分区域包含第一控件和第二控件。
在步骤S130中，根据所述控件的坐标位置显示所述控件。
本实施方式提供的控件的显示控制方法，通过将控件显示区域划分为虚拟网格区域，所述虚拟网格区域包含第一预设数量的划分区域；将第二预设数量的控件按照第一预设规则分别放入所述第一预设数量的划分区域内，其中，所述划分区域中的第一划分区域包含第一控件和第二控件，从而根据所述控件的坐标位置显示所述控件，可以使得控件分布更加灵活。
下面结合附图3-12对上述控件的显示控制方法进行示例说明。
在示例性实施例中，所述方法还可以包括：创建第二预设数量的控件，且将各控件分别置于第一预设尺寸的第一预设形状内。
在示例性实施例中，所述第一预设尺寸的第一预设形状为边长为预设值的正四边形。
如图3所示，为本公开示例性实施例中一种控件的示意图。
本实施例中，创建控件102时，将控件102放置于一定尺寸的正四边形101，这里假设该正四边形的边长为a，其中a为大于0的值。
需要说明的是，虽然图3所示的实施例中，以五角星形状示意该控件102的形状，但实际上，本实施例中的控件的形状可以是任意形状，例如圆形、矩形、不规则形状等，可以根据具体的应用场景进行设置，本公开对此不作限定。
另外，虽然上述图3的实施例中，将控件102放置于边长为a的正四边形内，但实际上并不限于正四边形，在其他实施例中，可以将控件放置于其他任意形状，例如三角形、长方形、圆形等，只要其能够完全包围住控件即可。
本实施例中，界面中的各控件之间可以具有相同的尺寸和相同的形状，例如均为相同边长的五边形，在其他实施例中，界面中的各控件也可以分别具有不同的形状和/或不同的尺寸，与此类似，第一预设尺寸的第一预设形状可以具有相同的尺寸和相同的形状，例如均为边长为a的正方形，在其他实施例中，第一预设尺寸的第一预设形状也可以分别具有不同的形状和/或不同的尺寸。本公开对此不作限定。在下面的实施例中，均以相同尺寸和相同形状的五角星作为控件102，边长为a的正方形作为控件102的第一预设尺寸的第一预设形状。
在步骤S110中，将控件显示区域划分为虚拟网格区域，所述虚拟网格区域包含第一预设数量的划分区域。
在示例性实施例中，所述虚拟网格区域等面积划分为所述第一预设数量的划分区域。在其他实施例中，所述虚拟网格区域也可以是非等面积划分的，本公开对此不作限定。
在示例性实施例中，所述第一预设数量x和所述第二预设数量y之间的关系为：
本实施例中，将界面上可放置控件的控件显示区域等面积划分，其中划分区域的划分个数x为该界面上控件个数y的一半并向上取整，即这样能确保每个划分区域有且最多只有两个控件在里面，单个控件的分布范围相对较宽，而且控件之间的间距幅度也相对较大，使得最后出来的控件分布效果更为灵活。假如按x＝y来划分，这样每个区域里只有一个控件，这样当控件数量较多时，单个控件的分布范围会比较窄，而且控件之间的间距幅度也比较小，最后出来的控件分布效果不够灵活。而假如同一个划分区域里有三个或者以上的控件时，该三个或者以上的控件之间相比两个控件更容易发生重合，且发生重合后，该三个或者以上的控件的移动规则相比两个重合控件之间的移动规则要复杂的多。
在步骤S120中，将第二预设数量的控件按照第一预设规则分别放入所述第一预设数量的划分区域内，其中，所述划分区域中的第一划分区域包含第一控件和第二控件。
在示例性实施例中，各控件在相应的划分区域内的坐标随机，且各控件对应的第一预设形状与相应的划分区域的边界不相交。
如图4所示，这里假设界面201的控件显示区域202为一个矩形，且将该控件显示区域202划分为四个划分区域203，即x＝4，对应的控件个数可以为7或者8。下面以控件个数为8为例进行说明。
继续参考图4的实施例，将图3所示的控件102及其第一预设形状101(这里以边长为a的正方形为例)放入控件显示区域202左上角的第一划分区域203中，控件102及其第一预设形状101位于该第一划分区域203的坐标是随机设定的，且该控件102对应的正方形101不与该第一划分区域203的边界相交。
在示例性实施例中，所述第一预设规则可以包括：将所述第二预设数量的控件中的第一预设数量的控件依次放入所述第一预设数量的划分区域内；当每个划分区域内均放置一个所述控件时，依次在所述第一预设数量的划分区域内放入所述第二预设数量的控件中的剩余控件。
本实施例中，可以将y个控件中的前1至x个控件(例如可以将前1至x个控件称为第一控件)分别依次放入x个划分区域内。当每个划分区域均放置一个控件后，再依次将y个控件中剩下的其他控件(这里将其称之为第二控件)分别依次x个划分区域内，这样，当y是偶数时，最后每个划分区域内分别具有一个第一控件和一个第二控件；当y是奇数时，有一个划分区域内只有一个第一控件，其他每个划分区域内分别具有一个第一控件和一个第二控件。这样的控件放置方式，更有利于控件的均匀分布，即使在控件数量改变时(例如，不再满足时)，控件也不会集中在某些划分区域，可以使控件尽量分布到不同的划分区域内，从而使得最后显示的控件分布设计更加均匀和自然。
在另一实施例中，也可以依次将两个控件分别依次放入同一个划分区域内，例如将y个控件中的第一个控件和第二个控件放入第一划分区域后，再将第三个控件和第四个控件放入第二划分区域内，以此类推。
需要说明的是，各第一控件和各第二控件在相应的划分区域内的坐标均是随机的。
在示例性实施例中，所述第一预设规则可以包括：判断所述第一控件和所述第二控件是否重合；当所述第一控件和所述第二控件重合时，按照第二预设规则移动所述第一控件和/或所述第二控件，使得所述第一控件和所述第二控件不重合。
本公开实施例中，由于所述控件单独放置于相应的第一预设形状内(例如边长为a的正方形内)，可以通过所述第一控件的第一预设形状和所述第二控件的第一预设形状是否重合来判定所述第一控件和所述第二控件是否重合。但本公开并限定于此，在其他实施例中，所述控件也可以不放置于第一预设形状内，此时，当所述第一控件和所述第二控件重合时，可以通过所述第二预设规则移动所述第一控件和/或所述第二控件来使得这两个控件之间不重合。
在示例性实施例中，所述第一预设规则可以包括：判断所述第一控件的第一预设形状和所述第二控件的第一预设形状是否重合；当所述第一控件的第一预设形状和所述第二控件的第一预设形状重合时，按照第三预设规则移动所述第一控件和/或所述第二控件及其相应的第一预设形状，使得所述第一控件的第一预设形状和所述第二控件的第一预设形状不重合。
需要说明的是，上述第二预设规则可以与所述第三预设规则相同，也可以不同，只要能够保证重合的控件之间不再重合的任意规则均属于本公开的保护范围。
在示例性实施例中，所述第三预设规则可以包括：分别获得重合的所述第一控件和所述第二控件与预设点之间的第一距离和第二距离；当所述第一距离小于所述第二距离时，控制所述第一控件移动，以使得其远离所述第二控件，例如，将所述第一控件及其第一预设形状沿着重合的所述第一控件与所述第二控件连线的反方向的水平分量或者垂直分量移动。
在示例性实施例中，所述预设点可以为所述第一划分区域的几何中心点，所述连线可以为所述第一控件的几何中心点和所述第二控件的几何中心点之间的连线，但本公开并不限定于此。
本公开实施例中，所述第一距离可以为所述第一控件的中心点与所述第一划分区域的中心点之间的距离，所述第二距离可以为所述第二控件的中心点与所述第一划分区域的中心点之间的距离。
在示例性实施例中，所述第三预设规则还可以包括：所述第一控件及其第一预设形状移动过程中，判断所述第一控件的第一预设形状是否与所述第一划分区域相交；当所述第一控件的第一预设形状与所述第一划分区域不相交时，所述第一控件的移动距离为所述第一预设形状的边长减去所述第一控件和所述第二控件之间的间距。
参考图5所示的实施例中，这里假设一共有8个控件301，每个控件放置在对应的正方形302内。界面201中的控件显示区域202划分为4个划分区域，这里以左上角的第一划分区域203为例，第一划分区域203内具有一个第一控件301和一个第二控件302。这里假设左上角的第一划分区域302中的第一控件301和第二控件302随机放入该第一划分区域302内时，第一控件301对应的正方形边界(图示中的虚线)与第二控件302的正方形边界是相交的。而其他三个划分区域内的第一控件和第二控件的正方形边界是不相交的。
其中，图5中，假设第一控件301的中心点到该第一划分区域的中心点的第一距离小于第二控件302的中心点到该第一划分区域的中心点的第二距离，即第一控件301的中心点更靠近该第一划分区域的中心点。将第一控件301和第二控件302的中心点连线形成第一控件301的中心点至第二控件302的中心点连线矢量，其中该中心点连线矢量的方向如图5所示，其该中心点连线的距离为d。
需要说明的是，在其他实施例中，界面中的每个划分区域内的第一控件对应的正方形和第二控件对应的正方形均不重叠；或者，界面中有更多(不止一个)划分区域内的第一控件对应的正方形和第二控件对应的正方形重叠。本公开对此不作限定。
参考图6所示，当图5中第一划分区域203内的第一控件301对应的正方形和第二控件302对应的正方形至少有部分重叠时，可以移动第一划分区域203内的第一控件301和/或第二控件302，使得第一划分区域203内的第一控件301对应的正方形和第二控件302对应的正方形的边界不相交。
需要说明的是，可以采用任意的移动方式，只要让同一划分区域内的两个控件(第一控件301和第二控件302)对应的正方形之间不重合就可以。
本实施例中，假设图5中第一划分区域内的第一控件301的中心点距离第一划分区域的中心点更近，说明第一控件301距离第一划分区域的边界更远，此时可以沿着第一控件301与第二控件302的中心点之间的连线的相反方向的水平分量或者垂直分量移动第一控件301及其对应的正方形，这里移动方向可以随机选择图6中所示黑色箭头的水平分量或者垂直分量。需要说明的是，图6所示的实施例中，水平分量是指与界面201的长平行的方向(即图示中的x轴方向)，垂直分量是指与界面201的宽平行的方向(即图示中的y轴方向)。这种移动方式的好处是不容易出现因为要移动的控件靠近对应的划分区域的边界，而导致的该移动的控件的移动距离不足，从而要再次移动该同一个划分区域内的另外一个控件。因为距离划分区域中心更近的控件，距离该划分区域的边界更远。
当然，本公开并不限定于上述例举的移动方式，例如还可以让上图6中的第一划分区域内的第一控件301及其对应的正方形沿着第一控件301的中心点和第二控件302的中心点之间的连线矢量的反方向移动，如图6所示的黑色箭头所示。
本实施例中，若同一个划分区域内的两控件即第一控件和第二控件的第一预设形状之间不重叠，则视为该划分区域内的控件成功放置。若同一个划分区域内的两控件即第一控件和第二控件的第一预设形状之间重合，则移动距离该划分区域中心点更近的控件向另一个控件的反方向移动，其中移动距离s可以为判定区边长a减去两个控件即第一控件和第二控件的中心点间距d，即s＝a-d。
在示例性实施例中，所述第三预设规则还可以包括：在移动所述第一划分区域内的第一控件时，当所述第一控件的第一预设形状与所述第一划分区域相交时，将所述第一控件及其第一预设形状移动至所述第一划分区域边界，并沿着与所述第一控件移动的反方向移动所述第二控件及其第一预设形状，其中所述第二控件的移动距离为所述第一预设形状的边长减去所述第一控件和所述第二控件之间的间距再减去所述第一控件已经移动的距离。如图6所示，这样移动第一控件301后，同一划分区域例如第一划分区域203内的两个控件(第一控件301和第二控件302)的第一预设形状不重合，且移动距离较小。
本实施例中，若上述移动使得被移动控件(这里假设为第一控件)边沿与划分区域(这里为第一划分区域203)相交，则将第一控件移动至第一划分区域203的边界，同时移动另一个控件假如第二控件向反方向移动，其中，第二控件的移动距离s等于(a-d)并再减去第一控件已移动的距离。
需要说明的是，上述有至少部分重叠的第一控件的第一预设形状和第二控件的第一预设形状的移动方向和移动距离并不限于上述举例。
如图7所示，还是以第一划分区域203的第一控件401的正方形和第二控件402的正方形边界相交为例，不同之处在于，当按照图6所示方法(移动方向和移动距离)移动第一控件401后，如图8所示，第一控件401会移出到第一划分区域203的边界。此时图9所示，首先让第一控件401按照图6所示的移动方向移动第一控件401及其正方形，当实时检测到该第一控件401的正方形的边界与第一划分区域203的边界相交时，此时停止该第一控件401及其正方形的移动，开始第二控件402及其正方形的移动，其中第一控件402及其正方形的移动方向与第一控件401及其正方形的移动方向相反。
图10为根据上述第一控件401和第二控件402的移动方式获得各控件的坐标。
在步骤S130中，根据所述控件的坐标位置显示所述控件。
本实施例中，当控件按上述逻辑放置完成后，记录各控件的坐标点，当接收到用户请求时，例如在触控解锁界面中，当接收到开启指令时，在界面中根据记录的各控件的坐标点分布显示相应的控件。
图11示意性示出本公开示例性实施例中一种控件显示的示意图。
图11为控件数为8时的控件显示示意图。
图12示意性示出本公开示例性实施例中另一种控件显示的示意图。
图12为控件数为7时的控件显示示意图。
根据上述图11和图12所示的实施例可知，各控件在控件显示区域内的分布较为均匀和自然。
本实施方式提供的控件的显示控制方法，采用了将控件随机放置于相应的划分区域内，一方面，能够解决固定坐标控件带来的刻板控件分布设计；另一方面，当划分区域内随机放置的控件之间有重叠时，通过预设方式移动控件，可以解决纯随机坐标下控件重叠对操作的影响，并且可以使得控件分布更加均匀和自然，从而对界面上的控件显示的视觉和操作体验进行了优化。
当将方法应用于游戏界面时，通过在划分区域内制定随机控件分布的方法，连线操作更富有趣味性，产生的控件位置灵活且有机，在玩家的操作中可以感受更丰富的游戏内容，连线出不同的形态，提升了操作价值。当然，本公开实施方式提供的控件的显示控制方法并不限于例举的游戏界面中，分布后的控件还可以有很多种类的其他操作方式。
图13示意性示出本公开示例性实施例中一种控件的显示控制装置的示意图。
进一步的，本示例实施方式中还提供了一种控件的显示控制装置500，可以应用于一移动终端上安装的手机游戏简称为手游。参考图13中所示，所述控件的显示控制装置500可以包括区域划分模块510、控件放置模块520以及控件显示模块530。其中：
区域划分模块510可以用于将控件显示区域划分为虚拟网格区域，所述虚拟网格区域包含第一预设数量的划分区域。
控件放置模块520可以用于将第二预设数量的控件按照第一预设规则分别放入所述第一预设数量的划分区域内，其中，所述划分区域中的第一划分区域包含第一控件和第二控件。
控件显示模块530可以用于根据所述控件的坐标位置显示所述控件。
在示例性实施例中，所述第一预设规则包括：判断所述第一控件和所述第二控件是否重合；当所述第一控件和所述第二控件重合时，按照第二预设规则移动所述第一控件和/或所述第二控件，使得所述第一控件和所述第二控件不重合。
在示例性实施例中，所述控件分别置于第一预设形状内，其中所述第一预设规则包括：判断所述第一控件的第一预设形状和所述第二控件的第一预设形状是否重合；当所述第一控件的第一预设形状和第二控件的第一预设形状重合时，按照第三预设规则移动所述第一控件和/或所述第二控件及其相应的第一预设形状，使得所述第一控件的第一预设形状和所述第二控件的第一预设形状不重合。
在示例性实施例中，所述第三预设规则包括：分别获得重合的所述第一控件和所述第二控件与预设点之间的第一距离和第二距离；当所述第一距离小于所述第二距离时，将相应的第一控件及其第一预设形状沿着重合的所述第一控件与所述第二控件连线的反方向的水平分量或者垂直分量移动。
在示例性实施例中，所述第三预设规则还包括：所述第一控件及其第一预设形状移动过程中，判断所述第一控件的第一预设形状是否与所述第一划分区域相交；当所述第一控件的第一预设形状与所述第一划分区域不相交时，所述第一控件的移动距离为所述第一预设形状的边长减去所述第一控件和所述第二控件之间的间距；当所述第一控件的第一预设形状与所述第一划分区域相交时，将所述第一控件及其第一预设形状移动至所述第一划分区域边界，并沿着与所述第一控件移动的反方向移动所述第二控件及其第一预设形状，其中所述第二控件的移动距离为所述第一预设形状的边长减去所述第一控件和所述第二控件之间的间距再减去所述第一控件已经移动的距离。
在示例性实施例中，所述第一预设形状为边长为a的正方形。
在示例性实施例中，所述第一预设数量x和所述第二预设数量y之间的关系为：
在示例性实施例中，所述第一预设规则包括：将所述第二预设数量的控件中的第一预设数量的控件依次放入所述第一预设数量的划分区域内；当每个划分区域内均放置一个所述控件时，依次在所述第一预设数量的划分区域内放入所述第二预设数量的控件中的剩余控件。
在示例性实施例中，所述虚拟网格等面积划分为所述第一预设数量的划分区域。
在示例性实施例中，所述控件在相应的划分区域内的坐标随机，且所述控件与相应的划分区域的边界不相交。
上述控件的显示控制装置中各模块的具体细节已经在对应的控件的显示控制方法中进行了详细的描述，因此此处不再赘述。
应当注意，尽管在上文详细描述中提及了用于动作执行的装置的若干模块，但是这种划分并非强制性的。实际上，根据本公开的实施方式，上文描述的两个或更多模块的特征和功能可以在一个模块中具体化。反之，上文描述的一个模块的特征和功能可以进一步划分为由多个模块来具体化。
此外，尽管在附图中以特定顺序描述了本公开中方法的各个步骤，但是，这并非要求或者暗示必须按照该特定顺序来执行这些步骤，或是必须执行全部所示的步骤才能实现期望的结果。附加的或备选的，可以省略某些步骤，将多个步骤合并为一个步骤执行，以及/或者将一个步骤分解为多个步骤执行等。
通过以上的实施方式的描述，本领域的技术人员易于理解，这里描述的示例实施方式可以通过软件实现，也可以通过软件结合必要的硬件的方式来实现。因此，根据本公开实施方式的技术方案可以以软件产品的形式体现出来，该软件产品可以存储在一个非易失性存储介质(可以是CD-ROM，U盘，移动硬盘等)中或网络上，包括若干指令以使得一台计算设备(可以是个人计算机、服务器、触控终端、或者网络设备等)执行根据本公开实施方式的方法。
本领域技术人员在考虑说明书及实践这里公开的发明后，将容易想到本公开的其它实施方案。本申请旨在涵盖本公开的任何变型、用途或者适应性变化，这些变型、用途或者适应性变化遵循本公开的一般性原理并包括本公开未公开的本技术领域中的公知常识或惯用技术手段。说明书和实施例仅被视为示例性的，本公开的真正范围和精神由下面的权利要求指出。
应当理解的是，本公开并不局限于上面已经描述并在附图中示出的精确结构，并且可以在不脱离其范围进行各种修改和改变。本公开的范围仅由所附的权利要求来限制。

Claims (11)

1.一种控件的显示控制方法，其特征在于，包括：
将控件显示区域划分为虚拟网格区域，所述虚拟网格区域包含第一预设数量的划分区域；
将第二预设数量的控件按照第一预设规则分别放入所述第一预设数量的划分区域内，其中，所述划分区域中的第一划分区域包含第一控件和第二控件；
根据所述控件的坐标位置显示所述控件。
2.根据权利要求1所述的方法，其特征在于，所述第一预设规则包括：
判断所述第一控件和所述第二控件是否重合；
当所述第一控件和所述第二控件重合时，按照第二预设规则移动所述第一控件和/或所述第二控件，使得所述第一控件和所述第二控件不重合。
3.根据权利要求1所述的方法，其特征在于，所述控件分别置于第一预设形状内，其中所述第一预设规则包括：
判断所述第一控件的第一预设形状和所述第二控件的第一预设形状是否重合；
当所述第一控件的第一预设形状和所述第二控件的第一预设形状重合时，按照第三预设规则移动所述第一控件和/或所述第二控件及其相应的第一预设形状，使得所述第一控件的第一预设形状和所述第二控件的第一预设形状不重合。
4.根据权利要求3所述的方法，其特征在于，所述第三预设规则包括：
分别获得重合的所述第一控件和所述第二控件与所述第一划分区域中的预设点之间的第一距离和第二距离；
当所述第一距离小于所述第二距离时，将所述第一控件及其第一预设形状沿着重合的所述第一控件与所述第二控件连线的反方向的水平分量或者垂直分量移动。
5.根据权利要求4所述的方法，其特征在于，所述第三预设规则还包括：
所述第一控件及其第一预设形状移动过程中，判断所述第一控件的第一预设形状是否与所述第一划分区域相交；
当所述第一控件的第一预设形状与所述第一划分区域不相交时，所述第一控件的移动距离为所述第一预设形状的边长减去所述第一控件和所述第二控件之间的间距；
当所述第一控件的第一预设形状与所述第一划分区域相交时，将所述第一控件及其第一预设形状移动至所述第一划分区域边界，并沿着与所述第一控件移动的反方向移动所述第二控件及其第一预设形状，其中所述第二控件的移动距离为所述第一预设形状的边长减去所述第一控件和所述第二控件之间的间距再减去所述第一控件已经移动的距离。
6.根据权利要求3所述的方法，其特征在于，所述第一预设形状为边长为a的正方形。
7.根据权利要求1所述的方法，其特征在于，所述第一预设数量x和所述第二预设数量y之间的关系为：
8.根据权利要求1所述的方法，其特征在于，所述第一预设规则包括：
将所述第二预设数量的控件中的第一预设数量的控件依次放入所述第一预设数量的划分区域内；
当每个划分区域内均放置一个所述控件时，依次在所述第一预设数量的划分区域内放入所述第二预设数量的控件中的剩余控件。
9.根据权利要求1所述的方法，其特征在于，所述虚拟网格区域等面积划分为所述第一预设数量的划分区域。
10.根据权利要求1所述的方法，其特征在于，所述控件在相应的划分区域内的坐标随机，且所述控件与相应的划分区域的边界不相交。
11.一种控件的显示控制装置，其特征在于，包括：
区域划分模块，用于将控件显示区域划分为虚拟网格区域，所述虚拟网格区域包含第一预设数量的划分区域；
控件放置模块，用于将第二预设数量的控件按照第一预设规则分别放入所述第一预设数量的划分区域内，其中，所述划分区域中的第一划分区域包含第一控件和第二控件；
控件显示模块，用于根据所述控件的坐标位置显示所述控件。
CN201810160988.6A 2018-02-26 2018-02-26 控件的显示控制方法及装置 Pending CN108304136A (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN201810160988.6A CN108304136A (zh) 2018-02-26 2018-02-26 控件的显示控制方法及装置

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201810160988.6A CN108304136A (zh) 2018-02-26 2018-02-26 控件的显示控制方法及装置

Publications (1)

Publication Number Publication Date
CN108304136A true CN108304136A (zh) 2018-07-20

Family

ID=62848938

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201810160988.6A Pending CN108304136A (zh) 2018-02-26 2018-02-26 控件的显示控制方法及装置

Country Status (1)

Country Link
CN (1) CN108304136A (zh)

Cited By (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US11127321B2 (en) 2019-10-01 2021-09-21 Microsoft Technology Licensing, Llc User interface transitions and optimizations for foldable computing devices

Citations (7)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN102999256A (zh) * 2012-12-11 2013-03-27 广东欧珀移动通信有限公司 一种显示终端图标排列方法及装置
CN103793137A (zh) * 2014-01-23 2014-05-14 联想(北京)有限公司 一种显示方法及电子设备
WO2014094628A1 (en) * 2012-12-19 2014-06-26 Tencent Technology (Shenzhen) Company Limited Method of implementing screen adaptation for owner-drawn elements and apparatus
CN106227415A (zh) * 2016-07-29 2016-12-14 努比亚技术有限公司 图标显示方法、装置及终端
CN106933454A (zh) * 2017-03-28 2017-07-07 歌尔科技有限公司 显示方法和系统
CN106940612A (zh) * 2017-03-20 2017-07-11 网易（杭州）网络有限公司 按钮控件的布局方法及装置、存储介质和处理器
CN107632873A (zh) * 2017-08-25 2018-01-26 网易（杭州）网络有限公司 一种界面布局方法、装置、终端设备及存储介质

Patent Citations (7)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN102999256A (zh) * 2012-12-11 2013-03-27 广东欧珀移动通信有限公司 一种显示终端图标排列方法及装置
WO2014094628A1 (en) * 2012-12-19 2014-06-26 Tencent Technology (Shenzhen) Company Limited Method of implementing screen adaptation for owner-drawn elements and apparatus
CN103793137A (zh) * 2014-01-23 2014-05-14 联想(北京)有限公司 一种显示方法及电子设备
CN106227415A (zh) * 2016-07-29 2016-12-14 努比亚技术有限公司 图标显示方法、装置及终端
CN106940612A (zh) * 2017-03-20 2017-07-11 网易（杭州）网络有限公司 按钮控件的布局方法及装置、存储介质和处理器
CN106933454A (zh) * 2017-03-28 2017-07-07 歌尔科技有限公司 显示方法和系统
CN107632873A (zh) * 2017-08-25 2018-01-26 网易（杭州）网络有限公司 一种界面布局方法、装置、终端设备及存储介质

Cited By (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US11127321B2 (en) 2019-10-01 2021-09-21 Microsoft Technology Licensing, Llc User interface transitions and optimizations for foldable computing devices
US11138912B2 (en) * 2019-10-01 2021-10-05 Microsoft Technology Licensing, Llc Dynamic screen modes on a bendable computing device

Similar Documents

Publication Publication Date Title
JP6185123B1 (ja) プログラム、制御方法、及び情報処理装置
EP2405403A1 (en) Three Dimensional User Interface
JP2014501998A (ja) タッチスクリーン上に複数のフレームを提示するためのシステム及び方法
US20150331492A1 (en) Method and apparatus for identifying spatial gesture of user
CN110448904A (zh) 游戏视角的控制方法及装置、存储介质、电子装置
US20160054887A1 (en) Gesture-based selection and manipulation method
CN105843467A (zh) 一种图标展示方法及装置
WO2016124584A2 (en) A toy system comprising toy elements that are detectable by a computing device
CN106445087A (zh) 一种撤销输入操作的方法及装置
CN105843531A (zh) 一种屏幕模式的切换方法和装置
JP2012174112A (ja) 画像表示装置、画像表示方法およびプログラム
CN106310659A (zh) 游戏显示控制方法及装置
US9619134B2 (en) Information processing device, control method for information processing device, program, and information storage medium
CN108304136A (zh) 控件的显示控制方法及装置
CN106201320A (zh) 用户界面控制方法及系统
CN103870042B (zh) 显示图像的方法和电子设备
CN103019553B (zh) 一种屏幕解锁的方法及装置
CN107493387A (zh) 一种游戏控制方法及移动终端
JP2015035045A (ja) 情報処理装置、表示制御プログラム
CN106445359A (zh) 控件控制方法及装置
CN104423866B (zh) 一种基于触控屏的控制方法及具备触控屏的电子终端
JP6641041B2 (ja) 表示制御プログラム、表示制御方法、及び表示制御システム
JP6980748B2 (ja) 表示制御プログラム、表示制御方法、及び表示制御システム
JP6466736B2 (ja) 情報処理装置、情報処理方法、ならびに、プログラム
JP6480520B2 (ja) プログラム、制御方法、及び情報処理装置

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination
RJ01 Rejection of invention patent application after publication

Application publication date: 20180720

RJ01 Rejection of invention patent application after publication