一种侧滑菜单实现的系统与方法

暂无

一种侧滑菜单实现的系统与方法\n技术领域\n[0001] 本发明涉及移动通讯领域，尤其涉及一种侧滑菜单实现的系统与方法。\n背景技术\n[0002] 在移动设备APP客户端的开发中，往往产品设计最先考虑的是导航菜单。导航菜单是所有交互界面最重要的部分，不仅要确保导航菜单能完全适合在小屏幕上正常显示，而且要让用户有良好的操作体验。APP开发常见的3种导航模式，即平铺列表、标签页、以及树状结构。每种模式在不同系统中都配有不同的工具栏和控件。\n[0003] 一般地，平铺列表架构简单，没有信息层级也没有组织结构，就像一叠卡片一样。\n因此，平铺列表不适合展示过多页面，无法快速进行跳转翻页。标签页，一般依附在屏幕的底部，大多数页面都会始终占据一定的屏幕空间，而且功能入口过多时，该模式显得笨重不实用。树状结构的主功能和分类直接切换比较麻烦，同级内容过多时，用户浏览容易产生疲劳。\n[0004] 鉴于上述导航模式存在的问题，于是产生了侧滑菜单。侧滑菜单拥有一个面板，这个面板从主画面的左边或者右边滑出来，然后在面板中显示一个垂直的、独立的滚动视图，把该视图当作程序的主导航。此设计一般需要两个视图，一个是放在中间的视图，即内容显示面板，另一个是滑动时左边显示出来的视图，即菜单栏面板。然而，现有的侧滑菜单在显示中间视图时，左边视图则会缩小到屏幕下方，占据一定位置，从而使中间视图无法充满整个屏幕，从而影响显示的效果。\n发明内容\n[0005] 为了解决现在的侧滑菜单的中间视图无法充满整个屏幕的问题，本发明提供一种新的系统与方法，其扩展性好，中间视图可充满整个屏幕，从而不浪费屏幕的空间。\n[0006] 本发明实施例提供一种侧滑菜单实现的方法，所述侧滑菜单包括中间视图与左边视图，所述中间视图与屏幕具有相同的坐标原点，所述方法包括：用户向左滑动中间视图；\n判断滑动后的中间视图中心点的横坐标值是否小于屏幕中心的横坐标值；当中间视图中心点的横坐标值小于屏幕中心的横坐标值时，将中间视图移动至屏幕中心处以全屏显示中间视图，当中间视图中心点的横坐标值大于或者等于屏幕中心的横坐标值时，将中间视图移动至屏幕中心处，以遮住左边视图并全屏显示中间视图；用户向右滑动中间视图；判断滑动后的中间视图中心点的横坐标值是否小于设定的中间视图在屏幕右边时的中心点横坐标值；以及当中间视图中心点的横坐标值小于设定的中间视图在屏幕右边时的中心点横坐标值时，将中间视图移动至设定的屏幕边界处，以显示左边视图，当中间视图中心点的横坐标值大于或者等于设定的中间视图在屏幕右边时的中心点横坐标值时，将中间视图中心点的横坐标值设定为新的屏幕边界的横坐标值，并显示左边视图。\n[0007] 本发明实施例还提供一种侧滑菜单实现的系统，所述侧滑菜单包括中间视图与左边视图，所述中间视图与屏幕具有相同的坐标原点，所述系统包括：操作界面，用于供用户滑动中间视图；分析模块，用于分析用户滑动中间视图的方向；判断模块，当用户向左滑动中间视图时，用于判断滑动后的中间视图中心点的横坐标值是否小于屏幕中心的横坐标值；当用户向右滑动中间视图时，用于判断滑动后的中间视图中心点的横坐标值是否小于设定的中间视图在屏幕右边时的中心点横坐标值；以及执行模块，当中间视图中心点的横坐标值小于屏幕中心的横坐标值时，将中间视图移动至屏幕中心处以全屏显示中间视图，当中间视图中心点的横坐标值大于或者等于屏幕中心的横坐标值时，将中间视图移动至屏幕中心处，以遮住左边视图并全屏显示中间视图；当中间视图中心点的横坐标值小于设定的中间视图在屏幕右边时的中心点横坐标值时，将中间视图移动至设定的屏幕边界处，以显示左边视图，当中间视图中心点的横坐标值大于或者等于设定的中间视图在屏幕右边时的中心点横坐标值时，将中间视图中心点的横坐标值设定为新的屏幕边界的横坐标值，并显示左边视图。\n[0008] 本发明的上述实施例能够让中间视图充满整个屏幕，从而不浪费屏幕的空间。并且，上述实施例能够让开发者在程序中添加常用的导航功能，兼容其他多种模式，扩展性好。\n附图说明\n[0009] 为了更清楚地说明本发明实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动性的前提下，还可以根据这些附图获得其他的附图。\n[0010] 图1是根据本发明实施例的一种侧滑菜单实现的系统的一个范例的功能模块图。\n[0011] 图2是根据本发明实施例的一种侧滑菜单实现的方法的一个范例的流程示意图。\n具体实施方式\n[0012] 下面结合附图和具体实施方式对本发明的技术方案作进一步更详细的描述。显然，所描述的实施例仅仅是本发明的一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有作出创造性劳动的前提下所获得的所有其他实施例，都应属于本发明保护的范围。\n[0013] 图1是根据本发明实施例的一种用于侧滑菜单实现的系统100的一个范例的功能模块图。所述侧滑菜单包括中间视图与左边视图。所述中间视图与屏幕具有相同的坐标原点。具体地，中间视图是滑动侧滑菜单时，设置在中间的视图，即内容显示面板。左边视图是滑动侧滑菜单时，左边显示出来的视图，即菜单栏面板。一般地，先把左边视图添加到窗口中，然后再添加中间视图，如此一来，中间视图盖住了左边视图，即看到的是中间视图。当要显示左边视图时，由于滑动是在中间视图上进行的，因些需要对中间视图添加手势识别，以在滑动时改变中间视图中心点的坐标，从而显示左边视图。\n[0014] 所述侧滑菜单实现的系统100包括操作界面10、分析模块20、判断模块30以及执行模块40。\n[0015] 所述操作界面10用于用户滑动中间视图。\n[0016] 所述分析模块20用于分析用户滑动中间视图的方向。在本实施例中，用户滑动中间视图的方向为向左滑动或者向右滑动。\n[0017] 所述判断模块30用于当用户向左滑动中间视图时，用于判断滑动后的中间视图中心点的横坐标值是否小于屏幕中心的横坐标值。而当用户向右滑动中间视图时，用于判断滑动后的中间视图中心点的横坐标值是否小于设定的中间视图在屏幕右边时的中心点横坐标值。\n[0018] 所述执行模块40用于根据判断模块30的判断结果，执行显示操作，以显示中间视图或者左边视图。具体地，当用户向左滑动中间视图时，且当中间视图中心点的横坐标值小于屏幕中心的横坐标值时，将中间视图移动至屏幕中心处以全屏显示中间视图。当中间视图中心点的横坐标值大于或者等于屏幕中心的横坐标值时，将中间视图移动至屏幕中心处，以遮住左边视图并全屏显示中间视图。\n[0019] 当用户向右滑动中间视图时，当中间视图中心点的横坐标值小于设定的中间视图在屏幕右边时的中心点横坐标值时，将中间视图移动至设定的屏幕边界处，以显示左边视图，当中间视图中心点的横坐标值大于或者等于设定的中间视图在屏幕右边时的中心点横坐标值时，将中间视图中心点的横坐标值设定为新的屏幕边界的横坐标值，并显示左边视图。\n[0020] 在本实施例中，所述设定的中间视图在屏幕右边时的中心点横坐标值大于屏幕中心的横坐标值。所设定的中间视图在屏幕右边时的中心点横坐标值可以根据需要进行设定，从而在向滑动中心视图时，可以根据不同的设定的中间视图在屏幕右边时的中心点横坐标值，以调整中间视图在屏幕上的位置。\n[0021] 所述侧滑菜单实现的系统100能够让中间视图充满整个屏幕，从而不浪费屏幕的空间。并且，上述实施例能够让开发者在程序中添加常用的导航功能，兼容其他多种模式，扩展性好。\n[0022] 图1是根据本发明实施例的一种用于侧滑菜单实现的方法200的一个范例的流程图。所述侧滑菜单包括中间视图与左边视图。所述中间视图与屏幕具有相同的坐标原点。所述侧滑菜单实现的方法200包括如下步骤：\n[0023] 步骤201：用户向左滑动中间视图。\n[0024] 步骤202：判断中间视图中心点的横坐标值是否小于屏幕中心的横坐标值。\n[0025] 步骤203：当中间视图中心点的横坐标值小于屏幕中心的横坐标值时，将中间视图移动至屏幕中心处以全屏显示中间视图。\n[0026] 步骤204：当中间视图中心点的横坐标值大于或者等于屏幕中心的横坐标值时，将中间视图移动至屏幕中心处，以遮住左边视图并全屏显示中间视图。\n[0027] 步骤205：用户向右滑动中间视图。\n[0028] 步骤206：判断中间视图中心点的横坐标值是否小于设定的中间视图在屏幕右边时的中心点横坐标值。所述设定的中间视图在屏幕右边时的中心点横坐标值大于屏幕中心的横坐标值。以及\n[0029] 步骤207：当中间视图中心点的横坐标值小于设定的中间视图在屏幕右边时的中心点横坐标值时，将中间视图移动至设定的屏幕边界处，以显示左边视图；以及[0030] 步骤208：当中间视图中心点的横坐标值大于或者等于设定的中间视图在屏幕右边时的中心点横坐标值时，将中间视图中心点的横坐标值设定为新的屏幕边界的横坐标值，并显示左边视图。\n[0031] 所述侧滑菜单实现的方法100能够让中间视图充满整个屏幕，从而不浪费屏幕的空间。并且，上述实施例能够让开发者在程序中添加常用的导航功能，兼容其他多种模式，扩展性好。\n[0032] 以上所揭露的仅为本发明实施例中的较佳实施例而已，当然不能以此来限定本发明之权利范围，因此依本发明权利要求所作的等同变化，仍属本发明所涵盖的范围。