CN114461213B - 编程界面显示控制方法、装置、电子设备及存储介质 - Google Patents

Abstract

本申请实施例提供一种编程界面显示控制方法、装置、电子设备及存储介质，方法包括：在接收到积木块展示指令时，在设备的可显示区域内，显示积木块菜单栏和积木块展开栏，并在所述设备的可显示区域内，将积木块工作区切换至所述积木块菜单栏和所述积木块展开栏以外进行显示；根据所述积木块工作区的显示区域，更新所述积木块工作区的工作范围。本申请实施例的方案在进行积木块展开栏显示的同时，不会对积木块工作区造成覆盖，不会因为积木块展开栏的显示，影响积木块工作区的实际可利用面积，提高了积木块工作区的空间利用率。

Description

编程界面显示控制方法、装置、电子设备及存储介质

技术领域

本申请涉及计算机技术领域，具体而言，涉及一种编程界面显示控制方法、装置、电子设备及存储介质。

背景技术

图形化编程是一种通过将底层实现进行封装，用户仅需要简单拖拽编程组件(积木块)，就能完成相应具有复杂逻辑的编程任务的编程方式。

在图形化编程应用中，可以参见图1和图2所示，通常需要以下界面组件：舞台区、角色列表区、积木块工作区(也称编辑区)、积木块菜单栏。其中，舞台区用于展示积木块的代码运行效果，角色列表用于展示一组可以通过添加积木块控制的精灵，积木块菜单栏是积木块的功能菜单，在收缩状态时展示积木块的功能集合，并在用户选择某一功能菜单时，会展开显示该功能菜单对应的积木块展开栏，积木块展开栏中展示各种积木块。积木块工作区为积木块的放置区域。

目前，考虑到界面的空间利用率，积木块菜单栏通常都是以缩小形式展示。在用户操作缩小形式的积木块菜单栏后，积木块展开栏被打开，例如图2所示，从而积木块展开栏会覆盖在积木块工作区上，从而导致积木块工作区实际可利用面积变小，无法充分的利用设备的有效空间，影响用户操作体验。

发明内容

本申请实施例的目的在于提供一种编程界面显示控制方法、装置、电子设备及存储介质，用以提高编程界面中积木块工作区的空间利用率。

本申请实施例提供了一种编程界面显示控制方法，包括：在接收到积木块展示指令时，在设备的可显示区域内，显示积木块菜单栏和积木块展开栏，并在所述设备的可显示区域内，将积木块工作区切换至所述积木块菜单栏和所述积木块展开栏以外进行显示；根据所述积木块工作区的显示区域，更新所述积木块工作区的工作范围。

在上述实现过程中，通过在接收到积木块展示指令时，在设备的可显示区域内显示积木块菜单栏和积木块展开栏，并在设备的可显示区域内将积木块工作区切换至积木块菜单栏和积木块展开栏以外进行显示，这就实现了在进行积木块展开栏显示的同时，不会对积木块工作区造成覆盖，从而不会因为积木块展开栏的显示，影响积木块工作区的实际可利用面积，提高了积木块工作区的空间利用率。同时，通过根据积木块工作区的显示区域，更新积木块工作区的工作范围，从而可以保证在积木块工作区位置发生变化后，积木块工作区仍旧可以正常工作，从而保证了方案的可靠性。

进一步地，在设备的可显示区域内，显示积木块菜单栏和积木块展开栏，包括：将所述积木块菜单栏和所述积木块展开栏从第一区域切换至第二区域显示；在所述设备的可显示区域内，将积木块工作区切换至所述积木块菜单栏和所述积木块展开栏以外进行显示，包括：将所述积木块工作区从第三区域切换至第四区域显示；其中，所述第一区域与所述第三区域邻接，且所述第一区域由第一子区域和第二子区域构成；其中，所述第一区域由第一子区域和第二子区域构成；所述第一子区域位于所述设备的可显示区域外，所述第二子区域位于所述设备的可显示区域内，所述第一子区域对应所述积木块展开栏，所述第二子区域对应所述积木块菜单栏；所述第二区域、所述第三区域和所述第四区域位于所述设备的可显示区域内，且所述第二区域与所述第四区域不重叠。

在上述实现方案中，在未接收到积木块展示指令时，积木块展开栏对应于第二子区域(即对应于设备的可显示区域外，这样由于设备本身显示区域的范围限制，使得即使积木块展开栏同样进行了加载操作，但是积木块展开栏也无法被设备用户查看到(设备用户仅能看到可显示区域内的内容))，从而达到积木块展开栏隐藏的效果。在接收到积木块展示指令时，再将积木块菜单栏和积木块展开栏切换至第二区域显示，由于第二区域位于设备的可显示区域内，这就实现了相对于用户而言的积木块展开栏的显示与隐藏。同时，通过将积木块工作区从第三区域切换至第四区域显示，而第四区域与第二区域不重叠，从而可以保证不会因为积木块展开栏的显示，影响积木块工作区的实际可利用面积，提高了积木块工作区的空间利用率。

进一步地，所述方法还包括：在接收到积木块收回指令时，将所述积木块菜单栏和所述积木块展开栏从所述第二区域切换至第一区域，并将所述积木块工作区从所述第四区域切换至所述第三区域显示；根据所述第三区域，更新所述积木块工作区的工作范围。

在上述实现过程中，通过将在接收到积木块收回指令时，将积木块菜单栏和积木块展开栏从第二区域切换至第一区域，并将积木块工作区从第四区域切换至第三区域显示，从而实现了对于积木块展开栏的隐藏。同时，根据第三区域，更新积木块工作区的工作范围，保证了在积木块工作区位置变化后，积木块工作区仍旧可以正常工作，从而保证了方案的可靠性。

进一步地，所述积木块菜单栏被设置为最高显示层级，并固定于所述第二子区域进行显示。

在上述实现过程中，通过将积木块菜单栏被设置为最高显示层级，并固定于第二子区域进行显示，这就可以保证即使加载积木块展开栏进行显示，积木块菜单栏可以覆盖于积木块展开栏之上，从而保证用户在设备上不能看到积木块展开栏，从而达到隐藏积木块展开栏的效果。

进一步地，所述积木块展开栏所需的显示区域大小等于所述第一区域的大小；所述积木块展开栏在所述第一区域中显示时，所述积木块展开栏的第一侧边与所述积木块菜单栏的第一侧边重合，并位于所述积木块菜单栏下方显示；其中，所述积木块展开栏的第一侧边为在所述第一区域显示时全部位于所述设备的可显示区域内的边；所述积木块菜单栏的第一侧边为远离所述设备的可显示区域的边缘一侧的边。

在上述实现过程中，通过配置第一区域的大小等于积木块展开栏所需的显示区域大小，从而在将积木块展开栏在第一区域中显示时，积木块菜单栏可以覆盖于积木块展开栏之上，保证用户在设备上不能看到积木块展开栏，从而达到隐藏积木块展开栏的效果。同时可以保证第一区域的大小最小化，降低设备内的区域管理难度。

进一步地，所述积木块菜单栏的第二侧边与所述设备的可显示区域的边缘重合；其中，所述积木块菜单栏的第二侧边为所述积木块菜单栏中，与所述积木块菜单栏的第一侧边相对的边。

在上述实现过程中，积木块菜单栏的第二侧边与所述设备的可显示区域的边缘重合，从而可以保证在进行显示时，第二子区域内不会存在积木块展开栏露出的情况，保证对于积木块展开栏的隐藏效果。

进一步地，所述积木块菜单栏被固定于所述第二子区域进行显示；所述积木块展开栏所需的显示区域大小等于所述第一子区域的大小；所述积木块展开栏在所述第一区域中显示时，所述积木块展开栏的第一侧边与所述积木块菜单栏的第二侧边重合，且所述积木块展开栏位于所述第一子区域中显示；其中，所述积木块菜单栏的第二侧边与所述积木块菜单栏的第一侧边相对的边；所述积木块菜单栏的第一侧边为远离所述设备的可显示区域的边缘一侧的边。

通过上述实现过程，在未接收到积木块展示指令时，积木块展开栏位于第一子区域中，从而显示时，用户并不能从设备的可显示区域内看到该积木块展开栏，从而可以有效达到对于积木块展开栏的隐藏。

进一步地，所述积木块菜单栏的第二侧边与所述设备的可显示区域的边缘重合。

通过上述实现过程，积木块菜单栏的第二侧边与设备的可显示区域的边缘重合，可以保证积木块菜单栏完全位于第二子区域内，从而不会存在着积木块展开栏露出的情况，保证对于积木块展开栏的隐藏效果。

进一步地，所述第二区域中包括所述第一区域中的所述第二子区域；所述积木块菜单栏和所述积木块展开栏在第二区域显示时，所述积木块菜单栏位于所述第二子区域进行显示，且所述积木块展开栏的第二侧边与所述积木块菜单栏的第一侧边重合。

通过上述实现过程，可以实现对于积木块展开栏的显示，且无需对积木块展开栏进行较大位置的移动，可以保证接收到积木块展示指令后，与接收到积木块展示指令前的显示效果的连贯性。

进一步地，所述积木块菜单栏与所述积木块展开栏设置于第一容器中，且：当所述积木块菜单栏和所述积木块展开栏在所述第一区域显示时，所述积木块菜单栏位于所述第二子区域显示，所述积木块展开栏位于所述第一子区域显示。

在上述实现过程中，通过将积木块菜单栏与积木块展开栏设置于一个容器中，从而可以通过改变该容器对应的区域，实现对于积木块菜单栏与积木块展开栏位置的改变。而由于积木块展开栏位于所述第一子区域显示，可以保证用户在设备的可显示区域内，不能看见该积木块展开栏，实现对于积木块展开栏的有效隐藏。

进一步地，当所述积木块菜单栏和所述积木块展开栏在所述第二区域显示时，所述积木块菜单栏和所述积木块展开栏在第二区域显示时，所述积木块展开栏的第二侧边与所述设备的可显示区域边缘重合；其中，所述积木块展开栏的第二侧边为：所述积木块展开栏位于所述第一子区域显示时，远离所述第二子区域的边。

通过上述实现过程，可以实现积木块菜单栏和积木块展开栏沿设备的可显示区域边缘起进行显示，从而提高对于设备的可显示区域的空间利用率，减少设备的可显示区域内的无效区域。

进一步地，所述积木块工作区设置于第二容器中，且所述第二容器中还设有除所述积木块菜单栏、所述积木块展开栏和所述积木块工作区外的所有需显示的组件。

在上述实现过程中，利用第二容器可以使得除积木块菜单栏和积木块展开栏外的所有组件相对位置固定，从而保证在接收到积木块收回指令后，所有组件的位置均可有效恢复。

本申请实施例还提供了一种编程界面显示控制装置，包括：显示控制模块和范围更新模块；所述显示控制模块，用于在接收到积木块展示指令时，在设备的可显示区域内，显示积木块菜单栏和积木块展开栏，并在所述设备的可显示区域内，将积木块工作区切换至所述积木块菜单栏和所述积木块展开栏以外进行显示；所述范围更新模块，用于根据所述积木块工作区的显示区域，更新所述积木块工作区的工作范围。

本申请实施例还提供了一种电子设备，包括显示器、处理器、存储器及通信总线；所述通信总线用于实现显示器、处理器和存储器之间的连接通信；所述显示器用于进行组件的显示；所述处理器用于执行存储器中存储的一个或者多个程序，以实现上述任一种的编程界面显示控制方法。

本申请实施例中还提供了一种计算机可读存储介质，所述计算机可读存储介质存储有一个或者多个程序，所述一个或者多个程序可被一个或者多个处理器执行，以实现上述任一种的编程界面显示控制方法。

附图说明

为了更清楚地说明本申请实施例的技术方案，下面将对本申请实施例中所需要使用的附图作简单地介绍，应当理解，以下附图仅示出了本申请的某些实施例，因此不应被看作是对范围的限定，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他相关的附图。

图1为相关技术中的积木块展示栏隐藏时的显示示意图；

图2为相关技术中的积木块展示栏展示时的显示示意图；

图3为本申请实施例提供的一种编程界面显示控制方法的流程示意图；

图4为本申请实施例提供的一种积木块菜单栏与积木块展开栏的显示变化示意图；

图5为本申请实施例提供的一种积木块菜单栏与积木块展开栏的显示示意图；

图6为本申请实施例提供的一种坐标系空间中的可显示区域示意图；

图7为本申请实施例提供的一种积木块展示栏隐藏时的显示示意图；

图8为本申请实施例提供的一种积木块展示栏展示时的显示示意图；

图9为本申请实施例提供的另一种积木块展示栏展示时的显示示意图；

图10为本申请实施例提供的另一种积木块展示栏隐藏时的显示示意图；

图11为本申请实施例提供的另一种积木块展示栏展示时的显示示意图；

图12为本申请实施例提供的一种编程界面显示控制装置的结构示意图；

图13为本申请实施例提供的一种电子设备的结构示意图。

具体实施方式

下面将结合本申请实施例中的附图，对本申请实施例中的技术方案进行描述。

实施例一：

为了提高编程界面中积木块工作区的空间利用率，本申请实施例中提供了一种编程界面显示控制方法。可以参见图3所示，图3为本申请实施例中提供的编程界面显示控制方法的基本流程示意图，包括：

S301：在接收到积木块展示指令时，在设备的可显示区域内，显示积木块菜单栏和积木块展开栏，并在设备的可显示区域内，将积木块工作区切换至积木块菜单栏和积木块展开栏以外进行显示。

需要说明的是，本申请实施例中所述的设备为进行编程界面显示的设备，该设备为具有显示器的电子设备，例如手机、电脑等。此外，该设备也可以为本申请实施例中所提供的编程界面显示控制方法的执行主体。

还需要说明的是，在编程界面中，存在有界面显示组件，包括但不限于积木块工作区、积木块菜单栏、积木块展开栏等。应理解，在实际应用中，积木块菜单栏和积木块展开栏也可以通过一个组件来实现，对此本申请实施例中不做限制。

需要注意的是，在本申请实施例中，积木块菜单栏可以始终显示于设备的可显示区域内，从而为用户提供积木块的功能菜单选项。

但是，积木块菜单栏也可以是在接收到某种触发指令后，再显示于设备的可显示区域内，从而节约显示空间。

例如，可以在接收到菜单栏展示指令时，展示积木块菜单栏。在展示积木块菜单栏之后，当再接收用户通过积木块菜单栏触发的积木块展示指令，执行本申请实施例所提供的方案，例如图4所示。

又例如，可以在接收到积木块展示指令时，同时在设备的可显示区域内显示积木块菜单栏和一个积木块展开栏，例如图5所示。应理解，积木块菜单栏是积木块的功能菜单，在收缩状态时展示积木块的功能集合，并在用户选择某一功能菜单时，展开显示该功能菜单对应的积木块展开栏，积木块展开栏中展示各种积木块。因此，在上述在接收到积木块展示指令时，同时显示积木块菜单栏和一个积木块展开栏的示例方案中，该显示的积木块展开栏可以是预先设定的默认的积木块展开栏，也可以是上一次进行积木块展开栏显示时，所显示出的积木块展开栏。此后，用户可以通过诸如在积木块菜单栏上点击功能菜单，或者拖动鼠标位置，或者进行滑动操作等等方式，选中新的功能菜单，触发新的积木块展示指令，从而展示出该新选中的功能菜单对应的积木块展开栏。

在本申请实施例的一种可选实施方式中，可以在接收到积木块展示指令之前，不加载积木块展开栏。在接收到积木块展示指令之后，再加载积木块展开栏。

在此种方式中，可以预先设定两种显示区域的组合。一种显示区域的组合是针对未加载积木块展开栏的情况。可以设定好积木块菜单栏、积木块工作区等各组件在设备的可显示区域(即设备显示屏所能进行显示的区域)内的显示区域，从而实现对于除积木块展开栏外的其余各组件的显示。

另一种显示区域的组合是针对加载积木块展开栏的情况。可以在设备内预先设定好加载积木块展开栏后，积木块展开栏在设备的可显示区域内的显示区域，并对应设置当加载积木块展开栏后，除积木块展开栏外的其余各组件的显示区域。从而在接收到积木块展示指令时，加载积木块展开栏，并在相应显示区域显示，同时将其余各组件在各种对应的显示区域显示。其中，积木块工作区的显示区域应当设置于积木块菜单栏和积木块展开栏以外。

这样，在正常情况下不加载积木块展开栏，各组件按照一种设定的显示区域组合进行显示。在接收到积木块展示指令后，包括积木块展开栏在内的各组件以另一种设定的显示区域组合进行显示，且积木块工作区在积木块菜单栏和积木块展开栏以外进行显示。这就达到了对于积木块展开栏展开的同时，不会覆盖积木块工作区的效果，不会因为积木块展开栏的显示，影响积木块工作区的实际可利用面积，提高了积木块工作区的空间利用率。

应理解，在实际应用过程中，设备内通常以坐标系的方式构建显示空间，并在其中构建有设备的可显示区域对应的坐标区域。当组件加载区域位于可显示区域所属的坐标区域内时，组件即可在设备上显示出来。当组件加载区域位于可显示区域所属的坐标区域外时，受限于设备的显示区域大小，此时用户并不能从设备的显示器中看到该组件。

例如参见图6所示，在图6所示的坐标系中，组件K位于可显示区域外的坐标区域，虽然在技术上仍旧可以执行加载显示等操作，但是受限于显示器，这些区域内执行的加载显示等操作并不会被显示器所实际显示给用户。

基于以上原理，在本申请实施例中，也可以通过区域设置的方式，实现即使在积木块展开栏一直被加载的情况下，也可以同样在视觉效果上，呈现出积木块展开栏的展开与隐藏的效果。

示例性的，例如图7所示，可以预先在设备内定义第一区域，其中第一区域由第一子区域和第二子区域构成，第一子区域位于设备的可显示区域外，第二子区域位于设备的可显示区域内，且第一子区域对应积木块展开栏，第二子区域对应积木块菜单栏。

这样，当需要积木块展开栏隐藏时，积木块展开栏对应于第二子区域(即对应于设备的可显示区域外，这样由于设备本身显示区域的范围限制，使得即使积木块展开栏进行了加载操作，但是积木块展开栏也无法被设备用户查看到)，从而达到积木块展开栏隐藏的效果。

同时，在本申请实施例中，可以预先设置第二区域，第二区域位于设备的可显示区域内，从而在接收到积木块展示指令时，将积木块菜单栏和积木块展开栏从第一区域切换至第二区域显示，达到将积木块展开栏展开的效果。

应理解，在本申请实施例中，第二区域也可以不预设，而是根据一些位置限制条件进行限制。例如，参见图8所示，可以通过将积木块展开栏向设备的可显示区域中远离积木块菜单栏的一侧移动，直至积木块展开栏的第二侧边B2和积木块菜单栏的第一侧边A1重合，此时积木块菜单栏和积木块展开栏所占用的区域即为第二区域。又例如，参见图9所示，可以通过将积木块菜单栏和积木块展开栏一起向设备的可显示区域中远离第一区域的一侧移动，直至积木块展开栏的第二侧边B2与设备的可显示区域边缘重合，此时积木块菜单栏和积木块展开栏所占用的区域即为第二区域。

类似的，仍旧参见图7所示，在本申请实施例中还可以预先设置第三区域，第三区域位于设备的可显示区域内，从而在需要积木块展开栏隐藏时，积木块工作区位于第三区域进行显示。

同时，还可以预先设置第四区域，第四区域也位于设备的可显示区域内，且第二区域与第四区域不重叠。当接收到积木块展示指令时，即可将积木块工作区从第三区域切换至第四区域显示。这样，由于第二区域与第四区域不重叠，从而在实现了对积木块展开栏显示的同时，不会影响积木块工作区的实际可利用面积，提高了积木块工作区的空间利用率。

类似的，第四区域也可以不预设，而是根据一些位置限制条件进行限制。例如，参见图8所示，可以通过将积木块工作区向设备的可显示区域中远离积木块菜单栏的一侧移动，直至积木块工作区与积木块展开栏的第一侧边B1侧重合或相距设定间隔为止，此时积木块工作区所占用的区域即为第四区域。又例如，参见图9所示，可以通过将积木块工作区向设备的可显示区域中远离积木块菜单栏一侧移动，直至积木块工作区与积木块菜单栏的第一侧边A1侧重合或相距设定间隔为止，此时积木块工作区所占用的区域即为第四区域。

需要理解的是，在本申请实施例中，为了可以更充分的利用有限的设备可显示区域，可以设置第一区域与第三区域邻接，例如图7所示，而第二区域与第四区域邻接，例如图8或图9所示。

值得注意的是，在本申请实施例的一种可行实施方式中，积木块菜单栏可以被设置为最高显示层级，并固定于第二子区域进行显示。

此时，可以设置第一区域的大小等于积木块展开栏所需的显示区域大小。此时，当积木块展开栏需要隐藏时，积木块展开栏在第一区域中显示，积木块展开栏的第一侧边B1与积木块菜单栏的第一侧边A1重合，并位于积木块菜单栏下方显示。

此时，由于积木块菜单栏被设置为最高显示层级，并固定于第二子区域进行显示，因此积木块菜单栏可以实现对于积木块展开栏中位于设备的可显示区域内的部分的覆盖。而积木块展开栏中位于设备的可显示区域外的部分，受显示器的显示区域限制，也不会显示出来，从而可以达到对积木块展开栏的隐藏效果。

在本可行实现方式中，为了保证积木块菜单栏对于积木块展开栏的覆盖效果，可以设置积木块菜单栏的第二侧边A2与设备的可显示区域的边缘重合，而第一侧边A1与第二子区域的边缘重合，从而保证覆盖效果。

而在另一种可行实现方式中，积木块菜单栏被固定于第二子区域进行显示，但是可以不设置积木块菜单栏为最高显示层级(当然，也可以设置积木块菜单栏为最高显示层级，在此不做限制)。

此方式中，可以设置积木块展开栏所需的显示区域大小等于第一子区域的大小。这样，当积木块展开栏需要隐藏时，可以将积木块展开栏在第一区域的第一子区域中显示，并设置积木块展开栏的第一侧边B1与积木块菜单栏的第二侧边A2重合。

在本可行实现方式中，为了保证积木块展开栏不会在设备的可显示区域内露出，可以设置积木块菜单栏的第二侧边A2与设备的可显示区域的边缘重合，从而保证与积木块菜单栏的第二侧边A2相接的积木块展开栏全部位于设备的可显示区域外。

此外，在以上两种可行实现方式中，第二区域可以与第一区域存在重叠，重叠部分即为第一区域的第二子区域。也即，第二区域中可以包括第一区域的第二子区域。这样，当需要展示积木块展开栏时，积木块菜单栏位于第二子区域进行显示，而积木块展开栏位于第二区域中除第二子区域外的其他区域显示。此时积木块展开栏的第二侧边B2与积木块菜单栏的第一侧边A1重合，例如图8所示。

在本申请实施例的另一种可行实施方式中，积木块菜单栏可以与积木块展开栏一起设置于同一个第一容器中，并配置第一容器对应第一区域和第二区域。

在本可行实施方式中，需要设置当积木块菜单栏和积木块展开栏在第一区域显示时，积木块菜单栏位于第二子区域显示，积木块展开栏位于第一子区域显示，从而保证此时积木块展开栏不会被设备实际显示出来，达到隐藏的效果。

需要注意的是，在本可行实施方式中，由于积木块菜单栏可以与积木块展开栏一起设置于同一个第一容器中，因此当需要进行区域切换时，会将整个第一容器进行区域切换(此时积木块菜单栏可以与积木块展开栏的相对位置将不会发生改变)。也即，在需要展示积木块展开栏时，区别于前文介绍的两种可行实施方式中积木块菜单栏位置会保持不变，本可行实施方式中，积木块菜单栏与积木块展开栏的位置将一起改变，例如图9所示。

需要注意的是，在本可行实施方式中，还可以设置当积木块菜单栏和积木块展开栏在第二区域显示时，积木块展开栏的第二侧边B2与设备的可显示区域边缘重合，例如图9所示。这样，可以实现积木块菜单栏和积木块展开栏沿设备的可显示区域边缘起进行显示，从而提高对于设备的可显示区域的空间利用率，减少设备的可显示区域内的无效区域。

需要理解的是，以上介绍的各实现方式，仅是本申请实施例所示例的方案，不代表本申请实施例仅可采用上述方式实现。事实上，只要能实现上述步骤S121的方式，均可被本申请实施例所采用。

还需要理解的是，以上介绍的通过第一区域、第二区域、第三区域和第四区域实现编程界面显示控制的各实施方式中，在积木块展开栏需要隐藏时，积木块展开栏可以是处于加载状态的，但是也可以不加载。两种情况均不影响对于积木块展开栏的隐藏效果。

需要注意的是，在实际应用中，编程界面中除了具有积木块工作区、积木块菜单栏和积木块展开栏外，往往还会具有其他的组件，例如舞台区、角色列表区等组件。

那么，为了保证显示效果的整洁，在本申请实施例中的一种可选实施方式中，可以将编程界面中除了积木块菜单栏和积木块展开栏外的所有组件均设置于同一第二容器中，从而通过第二容器保证包含积木块工作区在内的各组件的相对位置不变，达到积木块工作区切换显示区域时，其他各组件也相应进行区域切换。

当然，也可以不通过第二容器，而是分别针对每一个组件进行单独的位置控制的方式，达到积木块工作区切换显示区域时，其他各组件也相应进行区域切换的效果。在本申请实施例中对此不做限制。

S302：根据积木块工作区的显示区域，更新积木块工作区的工作范围。

应理解，为了保证进行区域切换后，积木块工作区可以正常工作，需要对积木块工作区的工作范围进行更新。例如，在将积木块工作区切换至第四区域时，即需要将积木块工作区的工作范围更新为该第四区域的范围。

还应理解，由于设备内通常是通过坐标实现的显示控制，因此可以基于积木块工作区的显示区域的坐标，实现积木块工作区的工作范围的更新。

还应理解，在本申请实施例中，还可以在接收到积木块收回指令时，将编程界面恢复至接收到积木块展示指令之前的状态。

比如，还可以在接收到积木块收回指令时，将积木块菜单栏和积木块展开栏从第二区域切换至第一区域，并将积木块工作区从第四区域切换至第三区域显示，从而实现对于展示后的积木块展开栏的隐藏，以及对于其他组件位置的恢复。

此时，需要将积木块工作区的工作范围更新为第三区域的范围，以保证积木块工作区的可以正常工作。

应理解，接收到积木块收回指令后的操作过程，本质是上述接收到积木块展示指令后的显示控制过程的逆过程，故此参考上述接收到积木块展示指令后的显示控制过程，在此不再展开说明。

应理解，在具有除积木块菜单栏、积木块展开栏外和积木块工作区外的其他组件时，同样可以在每一次区域切换后，根据切换后的区域更新相应组件的工作范围，在此不再赘述。

此外，在实际应用过程中，设备内通常会设置积木块删除功能。通常，积木块菜单栏所在区域会被配置为删除区域，也即当积木块被拖动至积木块菜单栏所在区域时，积木块会被删除。当积木块展开栏呈现的时候，删除区域变为积木块菜单栏和积木块展开栏的总区域。

为此，在本申请实施例中，在执行步骤S302的同时，还可以根据积木块菜单栏和积木块展开栏在设备的可显示区域内所占据的区域，更新删除区域的范围。

需要注意的是，在本申请实施例中，前文所述的积木块展示指令、菜单栏展示指令、积木块收回指令可以是由用户通过在设备上进行相应操作从而触发，例如菜单栏展示指令可以是通过特定的屏幕滑动操作、特定位置的单击或双击操作等方式实现触发，积木块展示指令、积木块收回指令可以是通过点击积木块菜单栏上的菜单，或通过特定的屏幕滑动操作、特定位置的单击或双击操作等方式实现触发，但不作为限制。

本申请实施例所提供的编程界面显示控制方法，通过在接收到积木块展示指令时，在设备的可显示区域内显示积木块菜单栏和积木块展开栏，并在设备的可显示区域内将积木块工作区切换至积木块菜单栏和积木块展开栏以外进行显示，这就实现了在进行积木块展开栏显示的同时，不会对积木块工作区造成覆盖，从而不会因为积木块展开栏的显示，影响积木块工作区的实际可利用面积，提高了积木块工作区的空间利用率。同时，通过根据积木块工作区的显示区域，更新积木块工作区的工作范围，从而可以保证在积木块工作区位置发生变化后，积木块工作区仍旧可以正常工作，从而保证了方案的可靠性。

实施例二：

本实施例在实施例一的基础上，以图10和图11为例，为本申请做进一步示例说明。

为方便动画控制及提高代码性能，将编程界面中除积木块菜单栏和积木块展开栏外的所有组件放置于同一容器S中，且积木块菜单栏单独悬浮固定于设备可显示区域的右侧，并设置最高显示层级。

此时，参见图10所示，积木块展开栏的左边顶点与积木块菜单栏的右侧顶点重合，积木块展开栏一分部位于设备的可显示区域内，但由于积木块菜单栏的层级最高，该部分积木块展开栏被积木块菜单栏覆盖遮挡，从而不可见。而积木块展开栏的另一部分超出右侧可显示区域，所以积木块展开栏在视觉上不可见的。

当用户点击积木块菜单栏上的某一菜单时，触发积木块展示指令，需要将该菜单对应的积木块展开栏进行展示。此时将容器S整体往左移动一段距离，直至积木块展开栏的右侧顶点恰好与积木块菜单的左侧顶点重合。此时积木块展开栏已完全进入可视区内，完全可见。而舞台区和角色列表区会有一部分会跑出左侧可显示区域外，在视觉上有一部分不可见。

考虑到在积木块工作区内，积木块拖动及放置是依赖于相对于设备可显示区域的坐标进行计算的。当容器S往左移动后，需要更新积木块工作区的工作范围。此时重新获取移动后的积木块工作区四个顶点相对于设备可显示区域的坐标值，更新积木块工作区的工作范围，以保证能正确放置及拖拽积木块。

此外，还需要重新计算删除区域的坐标：获取积木块展开栏左边界的x坐标。删除区域的横向区域即为该x坐标开始至屏幕右边界，纵向区域为积木块展开栏上下的高度范围。

当通过点击触发积木块收回指令，以收起积木块菜单栏时，将容器S向右挪动恢复初始位置，此时视觉上表现为舞台区、角色列表区积木块工作区与积木块展开栏向右收回挪动，积木块展示栏重新移出视区外，不可见。

重新获取移动后的积木块工作区四个顶点相对于设备可显示区域的坐标值，更新积木块工作区的工作范围，以保证能正确放置及拖拽积木块。

重新计算删除区域的范围：获取积木块菜单栏的左边界的x坐标。删除区域的横向区域即为该x坐标开始至屏幕右边界，纵向坐标为积木块菜单栏的高度范围。

通过上述方案，可以充分利用设备的可显示区域进行积木块编辑，增强用户的使用体验。

实施例三：

基于同一发明构思，本申请实施例中还提供一种编程界面显示控制装置120。请参阅图12所示，图12示出了采用图3所示的方法的编程界面显示控制装置。应理解，装置120具体的功能可以参见上文中的描述，为避免重复，此处适当省略详细描述。装置120包括至少一个能以软件或固件的形式存储于存储器中或固化在装置120的操作系统中的软件功能模块。

具体地：

参见图12所示，装置120包括：显示控制模块121和范围更新模块122。其中：

所述显示控制模块121，用于在接收到积木块展示指令时，在设备的可显示区域内，显示积木块菜单栏和积木块展开栏，并在所述设备的可显示区域内，将积木块工作区切换至所述积木块菜单栏和所述积木块展开栏以外进行显示；

所述范围更新模块122，用于根据所述积木块工作区的显示区域，更新所述积木块工作区的工作范围。

在本申请实施例的一种可行实施方式中，所述显示控制模块121具体用于，将所述积木块菜单栏和所述积木块展开栏从第一区域切换至第二区域显示，并将所述积木块工作区从第三区域切换至第四区域显示；

其中，所述第一区域由第一子区域和第二子区域构成；所述第一子区域位于所述设备的可显示区域外，所述第二子区域位于所述设备的可显示区域内，所述第一子区域对应所述积木块展开栏，所述第二子区域对应所述积木块菜单栏；

所述第二区域、所述第三区域和所述第四区域位于所述设备的可显示区域内，且所述第二区域与所述第四区域不重叠。

在本申请实施例中，所述显示控制模块121还用于，在接收到积木块收回指令时，将所述积木块菜单栏和所述积木块展开栏从所述第二区域切换至第一区域，并将所述积木块工作区从所述第四区域切换至所述第三区域显示；所述范围更新模块122还用于，根据所述第三区域更新所述积木块工作区的工作范围。

在本申请实施例的一种可行实施方式中，所述积木块菜单栏被设置为最高显示层级，并固定于所述第二子区域进行显示。

在本可行实施方式中，所述积木块展开栏所需的显示区域大小等于所述第一区域的大小；所述积木块展开栏在所述第一区域中显示时，所述积木块展开栏的第一侧边与所述积木块菜单栏的第一侧边重合，并位于所述积木块菜单栏下方显示；其中，所述积木块展开栏的第一侧边为在所述第一区域显示时全部位于所述设备的可显示区域内的边；所述积木块菜单栏的第一侧边为远离所述设备的可显示区域的边缘一侧的边。

在本可行实施方式中，所述积木块菜单栏的第二侧边与所述设备的可显示区域的边缘重合；其中，所述积木块菜单栏的第二侧边为所述积木块菜单栏中，与所述积木块菜单栏的第一侧边相对的边。

在本申请实施例的一种可行实施方式中，所述积木块菜单栏被固定于所述第二子区域进行显示；所述积木块展开栏所需的显示区域大小等于所述第一子区域的大小；所述积木块展开栏在所述第一区域中显示时，所述积木块展开栏的第一侧边与所述积木块菜单栏的第二侧边重合，且所述积木块展开栏位于所述第一子区域中显示；其中，所述积木块菜单栏的第二侧边与所述积木块菜单栏的第一侧边相对的边；所述积木块菜单栏的第一侧边为远离所述设备的可显示区域的边缘一侧的边。

在本可行实施方式中，所述积木块菜单栏的第二侧边与所述设备的可显示区域的边缘重合。

在上述两种可行实施方式中，所述第二区域中包括所述第一区域中的所述第二子区域；所述积木块菜单栏和所述积木块展开栏在第二区域显示时，所述积木块菜单栏位于所述第二子区域进行显示，且所述积木块展开栏的第二侧边与所述积木块菜单栏的第一侧边重合。

在本申请实施例的一种可行实施方式中，所述积木块菜单栏与所述积木块展开栏设置于第一容器中，且：当所述积木块菜单栏和所述积木块展开栏在所述第一区域显示时，所述积木块菜单栏位于所述第二子区域显示，所述积木块展开栏位于所述第一子区域显示。

在本可行实施方式中，当所述积木块菜单栏和所述积木块展开栏在所述第二区域显示时，所述积木块展开栏的第二侧边与所述设备的可显示区域边缘重合；其中，所述积木块展开栏的第二侧边为：所述积木块展开栏位于所述第一子区域显示时，远离所述第二子区域的边。

在本申请实施例中，所述积木块工作区设置于第二容器中，且所述第二容器中还设有除所述积木块菜单栏、所述积木块展开栏和所述积木块工作区外的所有需显示的组件。

需要理解的是，出于描述简洁的考量，部分实施例一中描述过的内容在本实施例中不再赘述。

实施例四：

本实施例提供了一种电子设备，参见图13所示，其包括显示器1301、处理器1302、存储器1303以及通信总线1304。其中：

通信总线1304用于实现显示器1301、处理器1302和存储器1303之间的连接通信。

显示器1301用于进行组件的显示。

处理器1302用于执行存储器1303中存储的一个或多个程序，以实现上述实施例一和/或实施例二中的编程界面显示控制方法。

可以理解，图13所示的结构仅为示意，电子设备还可包括比图13中所示更多或者更少的组件，或者具有与图13所示不同的配置。例如，还可以具有鼠标、键盘等信息输入组件。

在本申请实施例中，电子设备可以是具有数据处理、图形显示以及图形编程能力的设备，如手机、电脑、平板等。

本实施例还提供了一种计算机可读存储介质，如软盘、光盘、硬盘、闪存、U盘、SD(Secure Digital Memory Card，安全数码卡)卡、MMC(Multimedia Card，多媒体卡)卡等，在该计算机可读存储介质中存储有实现上述各个步骤的一个或者多个程序，这一个或者多个程序可被一个或者多个处理器执行，以实现上述实施例一和/或实施例二中的编程界面显示控制方法。在此不再赘述。

在本申请所提供的实施例中，应该理解到，所揭露装置和方法，可以通过其它的方式实现。以上所描述的装置实施例仅仅是示意性的，例如，所述单元的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式，又例如，多个单元或组件可以结合或者可以集成到另一个系统，或一些特征可以忽略，或不执行。

在本文中，诸如第一和第二等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来，而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。

在本文中，多个是指两个或两个以上。

以上所述仅为本申请的实施例而已，并不用于限制本申请的保护范围，对于本领域的技术人员来说，本申请可以有各种更改和变化。凡在本申请的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本申请的保护范围之内。

Claims (13)

1.一种编程界面显示控制方法，其特征在于，包括：

在接收到积木块展示指令时，在设备的可显示区域内，显示积木块菜单栏和积木块展开栏，并在所述设备的可显示区域内，将积木块工作区切换至所述积木块菜单栏和所述积木块展开栏以外进行显示；

根据所述积木块工作区的显示区域，更新所述积木块工作区的工作范围；

在设备的可显示区域内，显示积木块菜单栏和积木块展开栏，包括：将所述积木块菜单栏和所述积木块展开栏从第一区域切换至第二区域显示；

在所述设备的可显示区域内，将积木块工作区切换至所述积木块菜单栏和所述积木块展开栏以外进行显示，包括：将所述积木块工作区从第三区域切换至第四区域显示；

其中，所述第一区域与所述第三区域邻接，且所述第一区域由第一子区域和第二子区域构成；其中，所述第一子区域位于所述设备的可显示区域外，所述第二子区域位于所述设备的可显示区域内，所述第一子区域对应所述积木块展开栏，所述第二子区域对应所述积木块菜单栏；所述积木块菜单栏被设置为最高显示层级，并固定于所述第二子区域进行显示；

所述第二区域与所述第四区域邻接，且所述第二区域、所述第三区域和所述第四区域位于所述设备的可显示区域内；

所述方法还包括：在接收到积木块收回指令时，将所述积木块菜单栏和所述积木块展开栏从所述第二区域切换至第一区域，并将所述积木块工作区从所述第四区域切换至所述第三区域显示；根据所述第三区域，更新所述积木块工作区的工作范围。

2.如权利要求1所述的编程界面显示控制方法，其特征在于，所述积木块展开栏所需的显示区域大小等于所述第一区域的大小；

所述积木块展开栏在所述第一区域中显示时，所述积木块展开栏的第一侧边与所述积木块菜单栏的第一侧边重合，并位于所述积木块菜单栏下方显示；

其中，所述积木块展开栏的第一侧边为在所述第一区域显示时全部位于所述设备的可显示区域内的边；所述积木块菜单栏的第一侧边为远离所述设备的可显示区域的边缘一侧的边。

3.如权利要求2所述的编程界面显示控制方法，其特征在于，所述积木块菜单栏的第二侧边与所述设备的可显示区域的边缘重合；

其中，所述积木块菜单栏的第二侧边为所述积木块菜单栏中，与所述积木块菜单栏的第一侧边相对的边。

4.如权利要求1所述的编程界面显示控制方法，其特征在于，

所述积木块展开栏所需的显示区域大小等于所述第一子区域的大小；

所述积木块展开栏在所述第一区域中显示时，所述积木块展开栏的第一侧边与所述积木块菜单栏的第二侧边重合，且所述积木块展开栏位于所述第一子区域中显示；

其中，所述积木块菜单栏的第二侧边为与所述积木块菜单栏的第一侧边相对的边；所述积木块菜单栏的第一侧边为远离所述设备的可显示区域的边缘一侧的边。

5.如权利要求4所述的编程界面显示控制方法，其特征在于，所述积木块菜单栏的第二侧边与所述设备的可显示区域的边缘重合。

6.如权利要求3或5所述的编程界面显示控制方法，其特征在于，所述第二区域中包括所述第一区域中的所述第二子区域；

所述积木块菜单栏和所述积木块展开栏在第二区域显示时，所述积木块菜单栏位于所述第二子区域进行显示，且所述积木块展开栏的第二侧边与所述积木块菜单栏的第一侧边重合。

7.如权利要求1所述的编程界面显示控制方法，其特征在于，所述积木块菜单栏与所述积木块展开栏设置于第一容器中，且：

当所述积木块菜单栏和所述积木块展开栏在所述第一区域显示时，所述积木块菜单栏位于所述第二子区域显示，所述积木块展开栏位于所述第一子区域显示。

8.如权利要求7所述的编程界面显示控制方法，其特征在于，当所述积木块菜单栏和所述积木块展开栏在所述第二区域显示时，所述积木块展开栏的第二侧边与所述设备的可显示区域边缘重合；

其中，所述积木块展开栏的第二侧边为：所述积木块展开栏位于所述第一子区域显示时，远离所述第二子区域的边。

9.如权利要求1-5、7-8中任一项所述的编程界面显示控制方法，其特征在于，所述积木块工作区设置于第二容器中，且所述第二容器中还设有除所述积木块菜单栏、所述积木块展开栏和所述积木块工作区外的所有需显示的组件。

10.如权利要求6所述的编程界面显示控制方法，其特征在于，所述积木块工作区设置于第二容器中，且所述第二容器中还设有除所述积木块菜单栏、所述积木块展开栏和所述积木块工作区外的所有需显示的组件。

11.一种编程界面显示控制装置，其特征在于，包括：显示控制模块和范围更新模块；

所述显示控制模块，用于在接收到积木块展示指令时，在设备的可显示区域内，显示积木块菜单栏和积木块展开栏，并在所述设备的可显示区域内，将积木块工作区切换至所述积木块菜单栏和所述积木块展开栏以外进行显示；

所述范围更新模块，用于根据所述积木块工作区的显示区域，更新所述积木块工作区的工作范围；

所述显示控制模块具体用于，将所述积木块菜单栏和所述积木块展开栏从第一区域切换至第二区域显示，并将所述积木块工作区从第三区域切换至第四区域显示；

所述显示控制模块还用于，在接收到积木块收回指令时，将所述积木块菜单栏和所述积木块展开栏从所述第二区域切换至第一区域，并将所述积木块工作区从所述第四区域切换至所述第三区域显示；

所述范围更新模块还用于，根据所述第三区域更新所述积木块工作区的工作范围；

其中，所述第一区域由第一子区域和第二子区域构成；所述第一子区域位于所述设备的可显示区域外，所述第二子区域位于所述设备的可显示区域内，所述第一子区域对应所述积木块展开栏，所述第二子区域对应所述积木块菜单栏；所述积木块菜单栏被设置为最高显示层级，并固定于所述第二子区域进行显示；

所述第二区域、所述第三区域和所述第四区域位于所述设备的可显示区域内，且所述第二区域与所述第四区域不重叠。

12.一种电子设备，其特征在于，包括：显示器、处理器、存储器及通信总线；

所述通信总线用于实现显示器、处理器和存储器之间的连接通信；

所述显示器用于进行组件的显示；

所述处理器用于执行存储器中存储的一个或者多个程序，以实现如权利要求1至10任一项所述的编程界面显示控制方法。

13.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质存储有一个或者多个程序，所述一个或者多个程序可被一个或者多个处理器执行，以实现如权利要求1至10中任一项所述的编程界面显示控制方法。

Images