专利名称：实现多Tab页面切换的方法及其触摸式移动终端的制作方法
技术领域：
本发明涉及触摸式移动终端领域，更具体地涉及一种实现多Tab页面切换的方法及其触摸式移动终端。
背景技术：
Tab页面(或称标签选项卡)为常用的交互界面应用形式。Tab页面一般包括Tab区和数据区，Tab区包括多个Tab标签显示区,Tab标签显示区显示Tab标签，当任一 Tab标签被选中(点击、滑动或光标覆盖)时数据区将展示其对应的用户数据。Tab页面的运用不但有利于分类信息的显示、在有限的应用界面中展现尽可能多的信息，而且具有易操作、切换速度快及用户体验好的优点。然而，现有Tab页面仅适用于并列的多个主分类页面间的切换，无法应对“矩阵式”分类页面的切换，即当主分类下还存在多个子分类页面时，现有Tab页面就无法实现有效的切换，从而限制了 Tab页面的适用范围。因此，有必要提供一种实现多Tab页面切换的方法及其触摸式移动终端来克服上述缺陷。
发明内容
本发明的目的是提供一种实现多Tab页面切换的方法以实现Tab页面对“矩阵式”分类项目的展示，拓展Tab页面的应用范围，保持Tab页面易操作、切换速度快及用户体验好的优点。本发明的另一目的是提供一种具有多Tab页面切换功能的触摸式移动终端，以实现Tab页面对“矩阵式”分类项目的展示，拓展Tab页面的应用范围，保持Tab页面易操作、切换速度快及用户体验好的优点。为了实现上述目的，本发明提供了一种实现多Tab页面切换的方法，适用于触摸式移动终端的交互界面，所述方法包括如下步骤:(I)监测任一 Tab标签显示区内是否有触摸操作；(2)根据(I)的监测结果获取所述触摸操作的操作属性，所述操作属性包括操作类型和操作参数；(3)根据所述操作属性实现所述Tab标签显示区显示的Tab标签的切换及所述Tab标签所对应的用户数据的切换。与现有技术相比，本发明先监测任一所述Tab标签显示区内是否有触摸操作，再根据监测结果获取触摸操作的操作属性，最后根据操作属性切换Tab标签显示区显示的Tab标签及数据区展示的用户数据，实现了 Tab页面对“矩阵式”分类项目的展示，拓展了Tab页面的应用范围，保持了 Tab页面易操作、切换速度快及用户体验好的优点。具体地，所述步骤(I)之前还包括:建立每一所述Tab标签显示区对应的Tab标签列表，所述Tab标签列表包括多个所述Tab标签及其对应的所述用户数据。具体地，所述步骤(3)包括:(31)判断所述操作类型是否为滑动操作，若是，则执行步骤(32)，反之，则执行步骤(33)；(32)判断所述滑动操作的滑动距离是否超过阈值，若是，则根据所述滑动操作的滑动方向切换所述Tab标签显示区显示的所述Tab标签及数据区展示的所述用户数据，反之，则执行所述步骤(I);(33)判断所述操作类型是否为长按，若是，则显示所述Tab标签列表并执行步骤(34 )，反之，则执行所述步骤(I);(34)判断所述Tab标签列表中的任一所述Tab标签是否被选中，若是，则执行步骤
(35)，反之，则重复所述步骤(34)；(35)切换所述Tab标签显示区显示的所述Tab标签为选中的所述Tab标签，并切换所述数据区展示的所述用户数据为选中的所述Tab标签对应的所述用户数据。具体地，所述步骤(32)中“根据所述滑动操作的滑动方向切换所述Tab标签显示区显示的所述Tab标签及所述数据区展示的所述用户数据”具体为:当所述滑动操作的滑动方向向上时，切换所述Tab标签显示区显示的所述Tab标签为Tab标签列表中的下一所述Tab标签并同时切换所述数据区展示的所述用户数据为下一所述Tab标签对应的所述用户数据；当所述滑动操作的滑动方向向下时，切换所述Tab标签显示区显示的所述Tab标签为Tab标签列表中的上一所述Tab标签并同时切换所述数据区展示的所述用户数据为上一所述Tab标签对应的所述用户数据。较佳地，所述步骤(3)中实现所述Tab标签显示区显示的Tab标签的切换及所述Tab标签所对应的用户数据的切换时均展现推动式动画效果。相应的，本发明还提供了一种具有多Tab页面切换功能的触摸式移动终端，包括:监测模块，用于监测任一所述Tab标签显示区内是否有触摸操作；获取模块，用于根据所述监测模块的监测结果获取所述触摸操作的操作属性，所述操作属性包括操作类型和操作参数；切换模块，用于根据所述操作属性实现所述Tab标签显示区显示的Tab标签的切换及所述Tab标签所对应的用户数据的切换。具体地,所述触摸式移动终端还包括:建立模块，用于建立每一所述Tab标签显示区对应的Tab标签列表，所述Tab标签列表包括多个所述Tab标签及其对应的所述用户数据。具体地，所述切换模块包括:第一判断单元，用于判断所述操作类型是否为滑动操作；第二判断单元，用于根据所述第一判断单元的判断结果判断所述滑动操作的滑动距离是否超过阈值；第一切换单元，用于根据所述第二判断单元的判断结果和所述滑动操作的滑动方向切换所述Tab标签显示区显示的所述Tab标签及所述数据区展示的所述用户数据；第三判断单元，用于根据所述第一判断单元的判断结果判断所述操作类型是否为长按;显示单元，用于根据所述第三判断单元的判断结果显示对应的所述Tab标签列表中的所有所述Tab标签；第四判断单元，用于判断所述Tab标签列表中的任一所述Tab标签是否被选中；第二切换单元，用于根据所述第四判断单元的判断结果切换所述Tab标签显示区显示的所述Tab标签为选中的所述Tab标签及切换所述数据区展示的所述用户数据为选中的所述Tab标签对应的所述用户数据。具体地，所述第一切换单元包括:第一判断子单元，用于判断所述滑动操作的滑动方向是否向上；第一切换子单元，用于根据所述第一判断子单元的判断结果切换所述Tab标签显示区显示的所述Tab标签为Tab标签列表中的下一所述Tab标签并同时切换所述数据区展示的所述用户数据为下一所述Tab标签对应的所述用户数据；第二判断子单元，用于根据所述第一判断子单元的判断结果判断所述滑动操作的滑动方向是否向下；第二切换子单元，用于根据所述第二判断子单元的判断结果切换所述Tab标签显示区显示的所述Tab标签为Tab标签列表中的上一所述Tab标签并同时切换所述数据区展示的所述用户数据为上一所述Tab标签对应的所述用户数据。较佳地，所述切换模块实现所述Tab标签显示区显示的Tab标签的切换及所述Tab标签所对应的用户数据的切换时均展现推动式动画效果。通过以下的描述并结合附图，本发明将变得更加清晰，这些附图用于解释本发明的实施例。
图1为本发明的实现多Tab页面切换的方法的一实施例流程图。图2为图1中交互界面的一示意图。图3为图1中Tab标签列表的一不意图。图4为图1中Tab标签列表的另一不意图。图5a为图1中交互界面的另一示意图。图5bl为图1中交互界面的另一示意图。图5b2为图1中交互界面的另一示意图。图5cl为图1中交互界面的另一示意图。图5c2为图1中交互界面的另一示意图。图6a为图1中交互界面的另一示意图。图6b为图1中交互界面的另一示意图。图6c为图1中交互界面的另一示意图。图7为本发明的具有多Tab页面切换功能的触摸式移动终端的一实施例结构框图。图8为图7中切换模块的结构框图。图9为图8中第一切换单元的结构框图。
具体实施例方式现在参考附图描述本发明的实施例，附图中类似的元件标号代表类似的元件。参照图1，本发明的实现多Tab页面切换的方法，适用于触摸式移动终端的交互界面，所述交互界面包括Tab区和数据区，所述Tab区包括多个Tab标签显示区，所述Tab标签显示区显示Tab标签，所述数据区展示被选中的所述Tab标签对应的用户数据；如:如图2所示，交互界面200包括Tab区201和数据区202，Tab区201包括Tab标签显示区2011(2012,2013,2014),Tab 标签显示区 2011 (2012、2013、2014)分别显示 Tab 标签“Tab-10”(“Tab-20”、“Tab-12”、“Tab-13”)，所述数据区202展示被选中的Tab标签“Tab-ΙΟ”对应的用户数据 “Content-10”;具体地，所述方法包括如下步骤:步骤SlOl，建立每一所述Tab标签显示区对应的所述Tab标签列表，所述Tab标签列表包括多个所述Tab标签及其对应的所述用户数据；如:如图3所示，建立了图2中Tab标签显示区2013对应的Tab标签列表300，Tab标签列表300包括“Tab-30”、“Tab-31”、“ Tab-32 ” 和 “ Tab-33 ”，以及“ Tab-30 ”对应的用户数据 “ Content-30 ”、“ Tab-31” 对应的用户数据“Content-31”、“Tab-32”对应的用户数据“Content-32”和“Tab-33”对应的用户数据“Content-33”;又如:如图4所示，建立了图2中Tab标签显示区2014对应的Tab标签列表 400，Tab 标签列表 400 包括“丁&13-40”、“丁&13-41”、“丁&13-42”和 “Tab-43”，以及“Tab-40”对应的用户数据“ Content-40 ”、“ Tab-41 ”对应的用户数据“ Content-41”、“ Tab-42 ”对应的用户数据“ Content-42 ”和“ Tab-43 ”对应的用户数据“ Content-43 ” ；步骤S102，监测任一所述Tab标签显示区内是否有触摸操作，若是，则执行步骤S103，反之，则重复所述步骤S102 ;如:监测到Tab标签显示区2014 (如图5a所示)内有触摸操作，于是执行步骤S103 ;又如:监测到Tab标签显示区2013 (如图6a所示)内有触摸操作，于是执行步骤S103;步骤S103，获取所述触摸操作的操作属性，所述操作属性包括操作类型和操作参数；本领域技术人员应当清楚，不同的操作类型(如:单击、双击、长按及滑动等)具有不同的操作参数(如:滑动操作的距离)；如:获取到所述触摸操作的操作类型为滑动操作、滑动方向向上及滑动距离为11个像素；又如:获取到所述触摸操作的操作类型为滑动操作、滑动方向向下及滑动距离为11个像素；又如:获取到所述触摸操作的操作类型为长按；步骤S104，判断所述操作类型是否为滑动操作，若是，则执行步骤S105，反之，则执行步骤SllO ;如:所述操作类型为滑动操作，于是执行步骤S105 ;又如:所述操作类型为长按，于是执行步骤SllO ;步骤S105，判断所述滑动操作的滑动距离是否超过阈值，若是，则执行步骤S106，反之，则重复所述步骤S102至所述步骤S105 ;如:阈值为10个像素，而滑动操作的滑动距离为11个像素，于是执行步骤S106 ；步骤S106，判断所述滑动操作的滑动方向是否向上，若是，则执行步骤S107，反之，则执行步骤S108 ;如:滑动操作的滑动方向向上，于是执行步骤S107 ;又如:滑动操作的滑动方向向下，于是执行步骤S108 ；步骤S107，切换所述Tab标签显示区显示的所述Tab标签为Tab标签列表中的下一所述Tab标签并同时切换所述数据区展示的所述用户数据为下一所述Tab标签对应的所述用户数据；其中，切换所述Tab标签显示区显示的所述Tab标签及所述数据区展示的所述用户数据时均展现推动式动画效果；推动式动画效果具体为先设定动画的总时长(如:500ms)并获取所述Tab标签显示区的高度(如:100个像素)，再设定动画的步调时长(如:50ms)，再由所述Tab标签显示区的高度(如:100个像素)、总时长(如:500ms)及步调时长(如:50ms)计算得出动画的步调高度(如:100*50/500=10，即步调高度为10个像素)，最后在总时长(如:500ms)期限内每隔步调时长(如:50ms)由新Tab标签或新用户数据以步调高度(如:10个像素)逐步覆盖原Tab标签或原用户数据，从而实现推动式的视觉效果；如:如图5a所示，Tab标签显示区2014显示的为“Tab-40 “，再如图4所示，“Tab_40”的下一 Tab标签为“Tab-41 “，而“Tab-41 “对应的用户数据为” Content-41 “，于是展现推动式动画效果，如图5bl所示，在Tab标签显示区2014内“Tab-41 “由下往上缓慢覆盖” Tab-40 “，同时在数据区202内“Content-41”由下往上缓慢覆盖”Content-40 “，最后如图5b2所示，切换后Tab标签显示区2014显示的Tab标签为“Tab_41 “，相应的数据区202展示的用户数据为 “Content-41 ” ；步骤S108，判断所述滑动操作的滑动方向是否向下，若是，则执行步骤S109，反之，则重复所述步骤S102至所述步骤S108 ;如:滑动操作的滑动方向向下，于是执行步骤S109 ；步骤S109，切换所述Tab标签显示区显示的所述Tab标签为Tab标签列表中的上一所述Tab标签并同时切换所述数据区展示的所述用户数据为上一所述Tab标签对应的所述用户数据。其中，切换所述Tab标签显示区显示的所述Tab标签及所述数据区展示的所述用户数据时均展现推动式动画效果。如:如图5a所示，Tab标签显示区2014显示的为“Tab-40 “，再如图4所示，由于“Tab-40”为第一个Tab标签，于是将最后的“Tab_43 “设为“Tab-40”的上一 Tab标签，而“Tab_43 “对应的用户数据为”Content-43 “，于是展现推动式动画效果，如图5cl所示，Tab标签显示区2014内“Tab-43 “由上往下缓慢覆盖”Tab-40 “，同时数据区202内“Content-43”由上往下缓慢覆盖”Content-40 “，最后如图5c2所示，切换后Tab标签显示区2014显示的Tab标签为“Tab_43 “，相应的数据区202展示的用户数据为 “Content-43”；步骤SI 10，判断所述操作类型是否为长按，若是，则显示对应的所述Tab标签列表中的所有所述Tab标签并执行步骤S111，反之，则执行所述步骤S102 ;如:由于所述步骤S102监测到Tab标签显示区2013 (如图6a所示)内有触摸操作，且所述步骤S103获取的所述操作类型为长按，于是显示Tab标签显示区2013 (如图6a所示)对应的所述Tab标签列表中的所有所述Tab标签(如图6b所示)并执行步骤Slll ;步骤SI 11，判断所述Tab标签列表中的任一所述Tab标签是否被选中，若是，则执行步骤SI 12,反之,贝U重复所述步骤Slll ;如:如图6b所示,所述Tab标签列表中的Tab标签“Tab-31”被选中，于是执行步骤SI 12 ；步骤SI 12,切换所述Tab标签显示区显示的所述Tab标签为选中的所述Tab标签及切换所述数据区展示的所述用户数据为选中的所述Tab标签对应的所述用户数据。如:如图6c所示，切换后Tab标签显示区2013显示的Tab标签为“Tab_31”，同时切换数据区202展示的用户数据为“Content-31”。
参照图6，本发明的具有多Tab页面切换功能的触摸式移动终端100，包括:建立模块10，用于建立每一所述Tab标签显示区对应的所述Tab标签列表，所述Tab标签列表包括多个所述Tab标签及其对应的所述用户数据；监测模块20，用于监测任一所述Tab标签显示区内是否有触摸操作；获取模块30，用于根据所述监测模块20的监测结果获取所述触摸操作的操作属性，所述操作属性包括操作类型和操作参数；切换模块40，用于根据所述获取模块30获取的所述操作属性切换所述Tab标签显示区显示的所述Tab标签及所述数据区展示的所述用户数据，其中所述切换模块切换所述Tab标签显示区显示的所述Tab标签及所述数据区展示的所述用户数据时均展现推动式动画效果。具体地,如图8所示,所述切换模块40包括:第一判断单元401，用于判断所述操作类型是否为滑动操作；第二判断单元402，用于根据所述第一判断单元401的判断结果判断所述滑动操作的滑动距离是否超过阈值；第一切换单元403，用于根据所述第二判断单元402的判断结果和所述滑动操作的滑动方向切换所述Tab标签显示区显示的所述Tab标签及所述数据区展示的所述用户数据；第三判断单元404，用于根据所述第一判断单元401的判断结果判断所述操作类型是否为长按；显示单元405，用于根据所述第三判断单元404的判断结果显示对应的所述Tab标签列表中的所有所述Tab标签；第四判断单元406，用于判断所述Tab标签列表中的任一所述Tab标签是否被选中；第二切换单元407，用于根据所述第四判断单元406的判断结果切换所述Tab标签显示区显示的所述Tab标签为选中的所述Tab标签及切换所述数据区展示的所述用户数据为选中的所述Tab标签对应的所述用户数据。具体地,如图9所示,所述第一切换单元403包括:第一判断子单元4031，用于判断所述滑动操作的滑动方向是否向上；第一切换子单元4032，用于根据所述第一判断子单元4031的判断结果切换所述Tab标签显示区显示的所述Tab标签为Tab标签列表中的下一所述Tab标签并同时切换所述数据区展示的所述用户数据为下一所述Tab标签对应的所述用户数据；第二判断子单元4033，用于根据所述第一判断子单元4031的判断结果判断所述滑动操作的滑动方向是否向下；第二切换子单元4034，用于根据所述第二判断子单元4033的判断结果切换所述Tab标签显示区显示的所述Tab标签为Tab标签列表中的上一所述Tab标签并同时切换所述数据区展示的所述用户数据为上一所述Tab标签对应的所述用户数据。根据以上描述可以看出，所述触摸式移动终端100先通过监测模块20监测任一所述Tab标签显示区内是否有触摸操作，再通过判断模块30根据监测结果获取触摸操作的操作属性，最后通过切换模块40根据操作属性切换Tab标签显示区显示的Tab标签及数据区展示的用户数据，实现了 Tab页面对“矩阵式”分类项目的展示，拓展了 Tab页面的应用范围，保持了 Tab页面易操作、切换速度快及用户体验好的优点。以上结合最佳实施例对本发明进行了描述，但本发明并不局限于以上揭示的实施例，而应当涵盖各种根据本发明的本质进行的修改、等效组合。
权利要求
1.一种实现多Tab页面切换的方法，适用于触摸式移动终端的交互界面，其特征在于，包括如下步骤: (1)监测任一Tab标签显示区内是否有触摸操作； (2)根据(I)的监测结果获取所述触摸操作的操作属性，所述操作属性包括操作类型和操作参数； (3)根据所述操作属性实现所述Tab标签显示区显示的Tab标签的切换及所述Tab标签所对应的用户数据的切换。
2.如权利要求1所述的实现多Tab页面切换的方法，其特征在于，所述步骤(I)之前还包括: 建立每一所述Tab标签显示区对应的所述Tab标签列表,所述Tab标签列表包括多个所述Tab标签及所述Tab标签对应的所述用户数据。
3.如权利要求2所述的实 现多Tab页面切换的方法，其特征在于，所述步骤(3)具体包括: (31)判断所述操作类型是否为滑动操作，若是，则执行步骤(32)，反之，则执行步骤(33)； (32)判断所述滑动操作的滑动距离是否超过阈值，若是，则根据所述滑动操作的滑动方向切换所述Tab标签显示区显示的所述Tab标签及数据区展示的所述用户数据，反之，则执行所述步骤(I); (33)判断所述操作类型是否为长按，若是，则显示所述Tab标签列表并执行步骤(34)，反之，则执行所述步骤(I); (34)判断所述Tab标签列表中的任一所述Tab标签是否被选中，若是，则执行步骤(35)，反之，则重复所述步骤(34)； (35)切换所述Tab标签显示区显示的所述Tab标签为选中的所述Tab标签，并切换所述数据区展示的所述用户数据为选中的所述Tab标签对应的所述用户数据。
4.如权利要求3所述的实现多Tab页面切换的方法，其特征在于，所述步骤(32)中“根据所述滑动操作的滑动方向切换所述Tab标签显示区显示的所述Tab标签及数据区展示的所述用户数据”具体为: 当所述滑动操作的滑动方向向上时，切换所述Tab标签显示区显示的所述Tab标签为Tab标签列表中的下一所述Tab标签，并同时切换所述数据区展示的所述用户数据为下一所述Tab标签对应的所述用户数据； 当所述滑动操作的滑动方向向下时，切换所述Tab标签显示区显示的所述Tab标签为Tab标签列表中的上一所述Tab标签，并同时切换所述数据区展示的所述用户数据为上一所述Tab标签对应的所述用户数据。
5.如权利要求1至4任一项所述的实现多Tab页面切换的方法，其特征在于，所述步骤(3)中实现所述Tab标签显示区显示的Tab标签的切换及所述Tab标签所对应的用户数据的切换时均展现推动式动画效果。
6.一种具有多Tab页面切换功能的触摸式移动终端，其特征在于，包括: 监测模块，用于监测任一所述Tab标签显示区内是否有触摸操作； 获取模块，用于根据所述监测模块的监测结果获取所述触摸操作的操作属性，所述操作属性包括操作类型和操作参数； 切换模块，用于根据所述操作属性实现所述Tab标签显示区显示的Tab标签的切换及所述Tab标签所对应的用户数据的切换。
7.如权利要求6所述的具有多Tab页面切换功能的触摸式移动终端，其特征在于，还包括: 建立模块，用于建立每一所述Tab标签显不区对应的Tab标签列表,所述Tab标签列表包括多个所述Tab标签及其对应的所述用户数据。
8.如权利要求7所述的具有多Tab页面切换功能的触摸式移动终端，其特征在于，所述切换模块具体包括: 第一判断单元，用于判断所述操作类型是否为滑动操作； 第二判断单元，用于根据所述第一判断单元的判断结果判断所述滑动操作的滑动距离是否超过阈值； 第一切换单元，用于根据所述第二判断单元的判断结果和所述滑动操作的滑动方向切换所述Tab标签显示区显示的所述Tab标签及所述数据区展示的所述用户数据； 第三判断单元，用于根据所述第一判断单元的判断结果判断所述操作类型是否为长 按; 显示单元，用于根据所述第三判断单元的判断结果显示对应的所述Tab标签列表中的所有所述Tab标签； 第四判断单元，用于判断所述Tab标签列表中的任一所述Tab标签是否被选中；第二切换单元，用于根据所述第四判断单元的判断结果切换所述Tab标签显示区显示的所述Tab标签为选中的所述Tab标签及切换所述数据区展示的所述用户数据为选中的所述Tab标签对应的所述用户数据。
9.如权利要求8所述的具有多Tab页面切换功能的触摸式移动终端，其特征在于，所述第一切换单元具体包括: 第一判断子单元，用于判断所述滑动操作的滑动方向是否向上； 第一切换子单元，用于根据所述第一判断子单元的判断结果切换所述Tab标签显示区显示的所述Tab标签为Tab标签列表中的下一所述Tab标签并同时切换所述数据区展示的所述用户数据为下一所述Tab标签对应的所述用户数据； 第二判断子单元，用于根据所述第一判断子单元的判断结果判断所述滑动操作的滑动方向是否向下； 第二切换子单元，用于根据所述第二判断子单元的判断结果切换所述Tab标签显示区显示的所述Tab标签为Tab标签列表中的上一所述Tab标签并同时切换所述数据区展示的所述用户数据为上一所述Tab标签对应的所述用户数据。
10.如权利要求6至9任一项所述的具有多Tab页面切换功能的触摸式移动终端，其特征在于，所述切换模块实现所述Tab标签显示区显示的Tab标签的切换及所述Tab标签所对应的用户数据的切换时均展现推动式动画效果。
全文摘要
本发明公开了一种实现多Tab页面切换的方法，适用于触摸式移动终端的交互界面，包括步骤(1)监测任一Tab标签显示区内是否有触摸操作；(2)根据(1)的监测结果获取所述触摸操作的操作属性，所述操作属性包括操作类型和操作参数；(3)根据所述操作属性实现所述Tab标签显示区显示的Tab标签的切换及所述Tab标签所对应的用户数据的切换。通过本发明实现了Tab页面对“矩阵式”分类项目的展示，拓展了Tab页面的应用范围，保持了Tab页面易操作、切换速度快及用户体验好的优点。本发明同时公开了一种具有多Tab页面切换功能的触摸式移动终端。
文档编号G06F3/0488GK103218156SQ20131006459
公开日2013年7月24日 申请日期2013年2月28日 优先权日2013年2月28日
发明者范志超 申请人:广东欧珀移动通信有限公司