CN104750367A - 菜单的显示方法及显示装置 - Google Patents

Abstract

本发明提供了一种菜单的显示方法及显示装置，该显示方法包括以下步骤：接收用于启用菜单的启用信号；呈环状显示所述菜单，所述菜单包括至少一个同心环，每个所述同心环用于显示一级菜单的设置项；当一个所述设置项被选中时，若被选中的所述设置项具有下一级菜单，则所述下一级菜单呈同心环状显示，且所述下一级菜单的同心环与其上一级菜单的同心环相互嵌套。该显示装置包括：第一接收模块和第一显示模块。第一接收模块用于接收用于启用菜单的启用信号；第一显示模块用于呈环状显示菜单。本发明能够将设置项都集中在一个界面并可以在一个界面完成设置过程，无需切换界面，同时还简化了操作，使得操作更加方便快捷。

Description

菜单的显示方法及显示装置

技术领域

本发明涉及菜单显示技术领域，特别是涉及一种菜单的显示方法及显示装置。

背景技术

随着电子技术的快速发展以及手机、平板电脑等显示装置的大规模使用，手机、平板电脑等显示装置的功能也越来越多，而手机用户在进行操作以及进入操作界面时，对趣味性、易用性和快速性的要求越来越高。

目前存在的一些触屏的手机的应用里的设置菜单大概通过以下几种方式显示：1、直接在预览界面上显示；2、弹出设置列表窗口，分一级二级菜单；3、跳转到设置界面，分一级二级菜单。

上述方式中，直接显示会影响预览界面的美观；弹出设置列表窗口的方式则比较繁琐，并且在美观方面也比较欠缺；跳转到设置界面的方式则需要启动新的界面，增加了操作的复杂度，不易学会操作。

发明内容

本发明提供了一种菜单的显示方法及显示装置，能够解决现有技术存在的操作复杂、繁琐的问题。

为解决上述技术问题，本发明采用的一个技术方案是：提供一种菜单的显示方法，该方法包括：接收用于启用菜单的启用信号；所述菜单呈环状显示，所述菜单包括至少一个同心环，每个所述同心环用于显示一级菜单的设置项；当一个所述设置项被选中时，若被选中的所述设置项具有下一级菜单，则所述下一级菜单呈同心环状显示，且所述下一级菜单的同心环与其上一级菜单的同心环相互嵌套。

其中，在至少一级所述菜单所在的同心环上预设一位置作为选定位置，位于所述选定位置的设置项为被选中的设置项；至少一级预设了所述选定位置的菜单的所述设置项的选中方式包括通过点击、滑动同心环中的至少一种操作将要选择的所述设置项转到所述选定位置。

其中，当点击在所述设置项上时，所述被点击的设置项自动旋转到所述选定位置。

其中，当滑动同心环时，将要选择的设置项滑动至所述选定位置。

其中，所述同心环中心设有一圆盘旋钮，所述菜单的所述设置项的选中方式还包括：旋转所述圆盘旋钮使其指向所要选择的设置项。

为解决上述技术问题，本发明采用的另一个技术方案是：提供一种显示装置，该显示装置包括：接收模块和显示模块。所述接收模块用于接收用于启用菜单的启用信号。显示模块与所述接收模块连接，其用于呈环状显示菜单，所述菜单包括至少一个同心环，每个所述同心环用于显示一级菜单的设置项；当一个所述设置项被选中时，若被选中的所述设置项具有下一级菜单，则所述下一级菜单呈同心环状显示，且所述下一级菜单的同心环与其上一级菜单的同心环相互嵌套。

其中，所述显示装置还包括：定位模块和第一判定模块，所述定位模块用于将所述同心环上的一位置预设为选定位置；第一判定模块与所述定位模块连接，用于将通过点击、滑动同心环中的至少一种操作将要选择的所述设置项转到所述选定位置判定为选中的设置项。

其中，所述显示装置还包括：自动旋转模块，用于在用户点击所述设置项时，将所述被点击的设置项自动旋转到所述选定位置。

其中，所述显示装置还包括：滑动控制模块，用于在用户进行滑动同心环的操作时，根据用户的操作控制所述同心环的滑动。

其中，所述显示模块还用于显示圆盘旋钮，所述圆盘旋钮位于所述同心环的中心。所述显示装置进一步包括：旋转模块和第二判定模块，旋转模块用于在用户进行旋转圆盘旋钮的操作时，根据用户的操作控制所述圆盘旋钮的旋转；所述第二判定模块与所述旋转模块连接，用于将旋转圆盘旋钮指向的设置项判定为选中的设置项。

本发明的有益效果是：区别于现有技术的情况，本发明通过将菜单设为同心环形，可以最大化地将设置项都集中在一个界面。通过多个同心环显示多级菜单，且多个同心环相互嵌套，可以使多级菜单能同时显示，整个设置在一个界面就可以完成，并且无需切换界面，减少了界面反复跳转，同时还简化了操作，使得操作更加方便快捷。并且，同心环状的菜单使得各级菜单设置项的显示更加直观和美观。

附图说明

图1是本发明菜单的显示方法第一实施例的流程示意图；

图2是本发明菜单的显示方法第二实施例的流程示意图；

图3是本发明菜单的显示方法第三实施例的菜单显示界面示意图；

图4是本发明菜单的显示方法菜单显示界面设置项的位置示意图；

图5是本发明菜单的显示方法中确定操作信号指示的设置项的操作为点击设置项时的示意图；

图6是本发明菜单的显示方法通过滑动外环确定操作信号指示的设置项的设置界面示意图；

图7是本发明菜单的显示方法通过旋转圆盘旋钮确定操作信号指示的设置项的设置界面示意图；

图8是本发明显示装置的模块图。

具体实施方式

下面结合具体实施方式和附图对本发明进行详细说明。

请参阅图1，是本发明菜单的显示方法第一实施例的流程示意图。该菜单的显示方法包括以下步骤：

S101，接收用于启用菜单的启用信号。

S102，呈环状显示菜单，菜单包括至少一个同心环，每个同心环用于显示一级菜单的设置项；当一个设置项被选中时，若被选中的设置项具有下一级菜单，则下一级菜单呈同心环状显示，且下一级菜单的同心环与其上一级菜单的同心环相互嵌套。

举例而言，该相互嵌套的同心环中，位于外面的同心环为一级菜单，其相邻的内侧的同心环为二级菜单，依次类推。当然，也可以是最内部的同心环作为一级菜单，其相邻的外侧的同心环为二级菜单等。当一级菜单上的设置项被选中时，如果被选中的设置项具有下一级菜单，则在一级菜单的同心环内呈环状显示出二级菜单。如果被选中的设置项没有下一级菜单，则直接调用该被选中的设置项的功能。

区别于现有技术，本发明通过将菜单设为同心环形，可以最大化地将设置项都集中在一个界面。通过多个同心环显示多级菜单，且多个同心环相互嵌套，可以使多级菜单能同时显示，整个设置在一个界面就可以完成，并且无需切换界面，减少了界面反复跳转，同时还简化了操作，使得操作更加方便快捷。并且，同心环状的菜单使得各级菜单设置项的显示更加直观和美观。在本实施方式中，同心环形的菜单为圆环形，当然，在其他实施例中，菜单选项也可以设置为多边形的方式，譬如三角形、四边形、五边形或六边形等，具体来说，优选为正多边形等。

此外，本实施例还可以同时设置圆形或者多边形自由切换的模式，以此来根据显示界面的大小而智能设置，丰富用户体验。

请参阅图2，是本发明菜单的显示方法第二实施例的流程示意图。该菜单的显示方法包括以下步骤。

S201，接收用于启用菜单的启用信号。

S202，呈环状显示菜单，菜单包括至少一个圆环，每个圆环用于显示一级菜单的设置项；当一个设置项被选中时，若被选中的设置项具有下一级菜单，则下一级菜单呈圆环状显示，且下一级菜单的圆环与其上一级菜单的圆环相互嵌套。圆环中心设有一圆盘旋钮。并且，在至少一级菜单所在的圆环上预设一位置作为选定位置，位于选定位置的设置项为被选中的设置项。

例如，有两级菜单时，一级菜单在外环显示，二级菜单在内环显示。圆盘旋钮用于指示内环上二级菜单的设置项。如果将圆环最下方的位置预设为选定位置，位于该最下方的位置处的设置项则为被选中的设置项。被选中的设置项可以突出显示，例如通过改变颜色、高亮、或者外加圆圈等标记来突出显示。

其中，步骤S202中，至少一级预设了选定位置的菜单的设置项的选中方式包括通过点击、滑动圆环中的至少一种操作将要选择的设置项转到选定位置。

具体而言，当该操作是点击设置项时，通过点击的坐标判断用户是否点击在设置项上，如果不是，则不做操作。如果是，则被点击的设置项自动旋转到选定位置，例如最下方的位置。

当该操作是滑动圆环时，用户直接将要选择的设置项滑动到该选定位置，即位于圆环最下方的位置处。

此外，还可以通过圆盘旋钮来选中设置项，具体为旋转圆盘旋钮使其指向要选择的设置项。圆盘旋钮上可以设置凸起的圆点、线或者箭头等作为指示标，当然，该指示标还可以通过刻、画或者粘贴等方式设置在圆盘旋钮上。

如果被选中的设置项具有下一级菜单，则在该菜单圆环内再显示下一级菜单的圆环，且该下一级菜单的圆环上显示该级菜单的设置项。举例而言，如果在外环的一级菜单选中的是Camera应用中的照片大小一项，则内环可以显示照片大小可以设置的值，例如1M，2M，3M，5M，8M等，其中，1M为100万像素，2M为200万像素，以此类推。或者，也可以在内环显示Large、Medium和Small，Large项可以对应为6M，Medium项对应为3.3M，Small项对应为1.5M。当然，每项对应的像素大小可以根据实际进行设置。

如果被选中的设置项没有下一级菜单，则调用该被选中的设置项对应的功能。例如，当在内环中选择了1M，终端判断该设置项没有下一级菜单，则不会再显示下一环，而是调用该设置项的功能，即，将照片大小调整为1M。

请参阅图3，是本发明菜单的显示方法第三实施例的菜单显示界面示意图。

本实施例是以触摸屏手机的Camera应用里的菜单显示为例对本发明进行说明。

本实施例中，接收用于启用Camera应用的菜单的启用信号的步骤，即，当用户要设置Camera的参数时，点击设置键，手机即接收到该点击设置键启用菜单的启用信号。

显示菜单的步骤，即，手机屏幕中弹出环形菜单，该环形菜单分为相互嵌套的外环30和内环31，外环30为一级菜单，内环31为二级菜单。默认显示的为最常设置的项，当选定外环30的某一个一级菜单时，内环31便显示对应的二级菜单。

本实施例中，外环30的每一设置项都是一张小图片，根据设置项多少，每一项则会被等间距地贴在外环30上，理论上可以放置20项，当外环30的一级菜单的一个设置项被选中的同时内环31显示与该一级菜单设置项对应的二级菜单。

常见的Camera设置项及设置值如表1。

表1.

设置项	可设置的值
		ISO	Auto，100，200，400，800，1600
曝光值	-3，-2，-1，0，+1，+2，+3
		定时拍照时间	3s，5s，10s，off
照片大小	1M，2M，3M，5M，8M
		快门声	On，off
拍照模式选择	Auto，night，Hdr，panorama，make up等
		闪光灯	Auto，on，off，torch

如上，这些设置项是最常用的设置项，由上表可以看出，这些设置项都是简单的设置值多选一的方式，或者是开或关两种简单的选择，则这些设置项就可以作为一级菜单的设置项，可设置的值则作为二级菜单的设置项。如前面，一级菜单理论上可容纳近20个设置项，所以应对Camera的设置项绰绰有余，而二级菜单一般在10项以内，同样也是足够的。

请继续参阅图3，整个设置界面主要包括显示数据的外环30和内环31，以及位于内环中心位置的圆盘旋钮32。这三个部分分别对应三个自定义的View：CircleLayout、InnerCircleLayout和Rotate View。CircleLayout和InnerCircleLayout的原理基本相似，CircleLayout的子项被均匀的沿着外环显示，这些子项可以是任意的view，但本实施例中，以Image View为主，本实施例将最下方的位置定义为选定位置300，将该选定位置300的设置项定义为操作信号指示的设置项，也即为处于设置状态的子项。该处于设置状态子项对应的二级菜单被显示到内环31上。内环InnerCircleLayout的子项以TextView为主，TextView用于显示二级菜单子项的value。内环31中心的调整旋钮RotateView是一张图片。RotateView会识别用户的滑动操作，模拟旋转按钮转动，用于调整二级菜单的value。该设置界面还包括第四部分33，该第四部分33用于显示当前设置项的信息。

当需要显示设置菜单时，Camera将传入所有可用的设置项(见表1)，为此，需要为圆环构建一个数据适配器Arra Adapter<ListPreference>，ListPreference保存的内容如表2：

表2

mKey	该设置项的键值
		mValue	当前已设置的值
mDefaultValues	该设置项默认值
		mEntries	可设置的值的名称
mEntryValues	可设置的值
		mPictures	该设置项一级菜单图标(包含normal和highlight两种)

请参阅图4，是本发明菜单的显示方法菜单显示界面设置项的位置示意图。ListPreference系列由Camera提供，内容如表1所示。CircleLayout通过Adapter获得了这些数据内容后，再根据需要加载的设置项的数目，来计算设置项相对于CircleLayout中心的位置，也即以中心为圆心，以图中的选定位置300为起点，依次将各个子项的图片以等夹角画到圆环上。位于选定位置300的设置项是当前处于设置状态的项，将该项标记为CenterItem，CenterItem在圆环上的度数为0度，CenterItem高亮显示，且在二级菜单InnerCircleLayout中显示对应的待设置的值。如图4，当前处于设置状态的子项是ISO，该设置项下共有6个待设置的值mEntries＝{auto，100，200，400，800，1600}，这六个值分别作为TextView的值，同样按照CircleLayout的方法，被依次画到InnerCircleLayout上，已被选择的值“200”处于高亮状态。最后是RotateView，RotateView是InnerCircleLayout的内部成员，RotateView、InnerCircleLayout和CircleLayout的圆心是重叠的，如图3所示，当InnerCircleLayout画完待设置的值后，便将RotateView一同画出来，RotateView将指针指向已被选择的值”200”上，并记录下这个位置。

本实施例中，外环30的设置项的选中的操作可以是点击设置项或者是滑动外环。

下面介绍点击设置项的操作。

请参阅图5，是本发明菜单的显示方法中确定操作信号指示的设置项的操作为点击设置项时的示意图。具体地，当用户在外环30上做点击事件时，CircleLayout的onSingleTapUp函数被触发，onSingleTapUp通过点击的坐标判断用户是否点击在设置项上，如果不是则不做操作，否则被点击的子项将自动旋转到CenterItem的位置，定义被点击的子项为mTappedView，当mTappedView旋转到CenterItem的位置后，将mTappedView图片设置为高亮，同时二级菜单被显示到内环31。

进一步地，被点击的设置项会自动旋转到圆环最下方的实现方式如下：首先，外环30是以CircleLayout中心为圆心，以指定半径做一个圆，各个子项被以等弧度画在圆上，以起始子项CenterItem开始，各个子项都有各自的度数，此时，计算mTappedView与CenterItem的度数差，如图5，通过计算，被点击的设置项的度数为240°，与CenterItem 0度的差值为240°，由于顺时针或逆时针都可以旋转到CenterItem的位置，因而规定以最短的路径旋转到CenterItem，当差值大于180°时便取其补，在本实施例中，240°的补值是60°，因而只需要顺时针旋转60°到达CenterItem的位置。旋转的java关键代码如下：

其中，velocity是旋转速度，startAngle用于辅助velocity的增量，其初始值为0，destAngle为目标度数，即上述例子的60°，该步的作用就是把60°分成一小段一小段的，每前进一段都重绘一遍菜单，以达到动画的目的，每一段的度数都不同，velocity越大则增加的度数越大，如此便可以表现出旋转过程中速度由快到慢，直至停止。

下面一段代码是上一段代码的逆过程，每一次都velocity/75将速度转换为该次需要旋转的度数，并将该度数传给rotateButton函数，该函数将每一个设置项在原来度数的基础上增加或减少传入的度数，然后调用draw函数，重新绘制菜单，然后velocity/＝1.0666F，速度变小，再重复如上步骤，直至velocity/75<3°。当mTappedView旋转到CenterItem的位置后，调用notifyRotateFinished()，通知InnerCircleLayout更新二级菜单为当前mTappedView的二级菜单，点击事件完毕。

请参阅图6，是本发明菜单的显示方法通过滑动外环确定操作信号指示的设置项的设置界面示意图。下面介绍滑动外环的操作。该操作主要是通过手指滑动旋转外环，该过程包括释放手指前和释放手指后两个部分：

释放手指前，在onTouchEvent函数中做如下处理：

在函数getAngle中通过公式Math.asin(y/Math.hypot(x,y))*180/Math.PI，计算出当前手指滑动的坐标x和y相对于圆心的角度，然后直接调用rotateButtons函数按手指移动的角度重绘CircleLayout，这样就完成了手指滑动过程中的动画。

释放手指后，如果手指在CircleLayout上滑动的速度快，程序则计算手指释放时的速度，然后将该速度转换成CircleLayout旋转的初始速度velocity，然后进入velocity的递减的重绘线程，如果velocity足够大时，CircleLayout有可能会旋转很多圈，当velocity减到0时，最下面的设置项没有对准CenterItem位置，则需要将离CenterItem最近的设置项再一次的移动到CenterItem的位置，然后通知InnerCircleLayout更新二级菜单，滑动事件完毕。

二级菜单对应的是一级菜单中处于设置状态的项的二级菜单。当CircleLayout的Layout发生变化时，其notifyRotateFinished会被调用，这个函数通知InnerCircleLayout当前处于设置状态的项，并传入该项对应的ListPreference；InnerCircleLayout获取ListPreference中的mEntries值，例如mEntries＝{auto，100，200，400，800，1600}，InnerCircleLayout将这几个值分别作为TextView的显示内容，同时将这些值的位置ID(如auto的位置ID为0、“1600”的位置ID为5)设入TextView，共六个TextView，然后将TextView绘制到InnerCircleLayout上，具体的绘制过程上文已描述过，这里不再赘述。

二级菜单被选择的子项处于高亮状态。二级菜单的子项的选中有两种方式，一是单指旋转圆形按钮使其指向对应的值，如果圆形按钮指针没有指向值然后手指松开，此时旋转按钮自动转到距离最近的值的位置；二是直接点击对应的值，此时圆形按钮会自动旋转到对应值的位置。

点击设置值是指，在内环中直接点击菜单上的值，使该值处于选择状态。当某个TextView被点击时，获取该TextView对应的位置ID值，然后回调Camera的设置函数，将对应的ID值回传，以完成设置。

旋转圆盘旋钮指向设置值，这种方式是通过滑动InnerCircleLayout上的RotateView来完成。

请参阅图7，是本发明菜单的显示方法通过旋转圆盘旋钮确定操作信号指示的设置项的设置界面示意图。滑动RotateView的实现：当手指点击RotateView时，以RotateView的中心为圆心，通过反正切函数，计算出点击的点在圆中的度数，记为currentdegree，手指开始滑动后，手指点击的坐标开始变化，每更新一次坐标就计算出对应的degree，用degree-currentdegree就能得出当前滑动的度数增量，用该增量去旋转RotateView并重绘，就完成了一次滑动，如果连续的滑动，RotateView就会一直跟随着手指，整个过程就形成了滑动旋钮RotateView的效果。当释放手指时，将旋钮当前的degree转换成设置值的索引值。转换的方法是：rotateView根据可选设置值的数目计算出每一个可选设置值在圆中的弧度，如mEntries＝{auto，100，200，400，800，1600}时，有六个可选设置值，则auto的度数为0°，依次的，100的为60°、200的为120°、400的为180°、800的为240°、1600的为300°。如果手指释放时，RotateView的degree为289°，可知289°在‘800’和‘1600’之间，但289°更接近‘1600’，所以转换后的位置ID是5，而此时RotateView的指针并没有指向‘1600’，需要将RotateView再旋转11°，然后同点击设置一样，回调Camera的设置函数，将对应的ID值回传，以完成设置。

本发明还提供了一种显示装置，请参阅图8，是本发明显示装置的模块图。该显示装置包括：接收模块400和显示模块401。

接收模块400用于接收用于启用菜单的启用信号。显示模块401与接收模块400连接，用于呈环状显示菜单，菜单包括至少一个圆环，每个圆环用于显示一级菜单的设置项；当一个设置项被选中时，若被选中的设置项具有下一级菜单，则下一级菜单呈圆环状显示，且下一级菜单的圆环与其上一级菜单的圆环相互嵌套。

本发明的显示装置还进一步包括：定位模块和第一判定模块。第二接收模块400。定位模块用于将圆环上的一位置预设为选定位置。判断模块用于判断操作信号指示的设置项是否具有下一级菜单。第一判定模块了与定位模块连接，用于将通过点击、滑动圆环中的至少一种操作将要选择的设置项转到选定位置判定为选中的设置项。

具体地，该显示装置还包括用于在用户点击设置项时，将被点击的设置项自动旋转到选定位置的自动旋转模块和用于在用户进行滑动圆环的操作时，根据用户的操作控制圆环的滑动控制模块。此外，显示模块401还用于显示圆盘旋钮，圆盘旋钮位于圆环的中心。具体地，显示装置还包括旋转模块和第二判定模块，旋转模块用于在用户进行旋转圆盘旋钮的操作时，根据用户的操作控制圆盘旋钮的旋转。第二判定模块与旋转模块连接，用于将旋转圆盘旋钮指向的设置项判定为选中的设置项。

以上仅为本发明的实施方式，并非因此限制本发明的专利范围，凡是利用本发明说明书及附图内容所作的等效结构或等效流程变换，或直接或间接运用在其他相关的技术领域，均同理包括在本发明的专利保护范围内。

Claims (10)

1.一种菜单的显示方法，其特征在于，包括：

接收用于启用菜单的启用信号；

呈环状显示所述菜单，所述菜单包括至少一个同心环，每个所述同心环用于显示一级菜单的设置项；当一个所述设置项被选中时，若被选中的所述设置项具有下一级菜单，则所述下一级菜单呈同心环状显示，且所述下一级菜单的同心环与其上一级菜单的同心环相互嵌套。

2.根据权利要求1所述的显示方法，其特征在于，在至少一级所述菜单所在的同心环上预设一位置作为选定位置，位于所述选定位置的设置项为被选中的设置项；

至少一级预设了所述选定位置的菜单的所述设置项的选中方式包括通过点击、滑动同心环中的至少一种操作将要选择的所述设置项转到所述选定位置。

3.根据权利要求2所述的显示方法，其特征在于，当点击在所述设置项上时，所述被点击的设置项自动旋转到所述选定位置。

4.根据权利要求2所述的显示方法，其特征在于，当滑动同心环时，将要选择的设置项滑动至所述选定位置。

5.根据权利要求1所述的显示方法，其特征在于，所述同心环中心设有一圆盘旋钮，所述菜单的所述设置项的选中方式还包括：旋转所述圆盘旋钮使其指向所要选择的设置项。

6.一种显示装置，其特征在于，包括：

接收模块，用于接收用于启用菜单的启用信号；

显示模块，与所述接收模块连接，用于呈环状显示菜单，所述菜单包括至少一个同心环，每个所述同心环用于显示一级菜单的设置项；当一个所述设置项被选中时，若被选中的所述设置项具有下一级菜单，则所述下一级菜单呈同心环状显示，且所述下一级菜单的同心环与其上一级菜单的同心环相互嵌套。

7.根据权利要求6所述的显示装置，其特征在于，所述显示装置还包括：

定位模块，用于将所述同心环上的一位置预设为选定位置；

第一判定模块，与所述定位模块连接，用于将通过点击、滑动同心环中的至少一种操作将要选择的所述设置项转到所述选定位置判定为选中的设置项。

8.根据权利要求7所述的显示装置，其特征在于，所述显示装置还包括：

自动旋转模块，用于在用户点击所述设置项时，将所述被点击的设置项自动旋转到所述选定位置。

9.根据权利要求7所述的显示装置，其特征在于，所述显示装置还包括：

滑动控制模块，用于在用户进行滑动同心环的操作时，根据用户的操作控制所述同心环的滑动。

10.根据权利要求6所述的显示装置，其特征在于，所述显示模块还用于显示圆盘旋钮，所述圆盘旋钮位于所述同心环的中心；

所述显示装置进一步包括：

旋转模块，用于在用户进行旋转圆盘旋钮的操作时，根据用户的操作控制所述圆盘旋钮的旋转；

第二判定模块，与所述旋转模块连接，用于将旋转圆盘旋钮指向的设置项判定为选中的设置项。