CN113835610A - 一种终端应用的页面展示方法及装置 - Google Patents
一种终端应用的页面展示方法及装置 Download PDFInfo
- Publication number
- CN113835610A CN113835610A CN202111163545.0A CN202111163545A CN113835610A CN 113835610 A CN113835610 A CN 113835610A CN 202111163545 A CN202111163545 A CN 202111163545A CN 113835610 A CN113835610 A CN 113835610A
- Authority
- CN
- China
- Prior art keywords
- view
- content area
- scrolling
- list
- content
- 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.)
- Granted
Links
- 238000000034 method Methods 0.000 title claims abstract description 59
- 230000009471 action Effects 0.000 claims description 24
- 230000008569 process Effects 0.000 claims description 21
- 239000012634 fragment Substances 0.000 claims description 20
- 238000005096 rolling process Methods 0.000 abstract 2
- 238000004891 communication Methods 0.000 description 7
- 238000010586 diagram Methods 0.000 description 7
- 238000012545 processing Methods 0.000 description 6
- 230000006870 function Effects 0.000 description 5
- 238000005516 engineering process Methods 0.000 description 2
- 238000011161 development Methods 0.000 description 1
- 230000000694 effects Effects 0.000 description 1
- 238000010295 mobile communication Methods 0.000 description 1
- 238000012986 modification Methods 0.000 description 1
- 230000004048 modification Effects 0.000 description 1
- 230000000750 progressive effect Effects 0.000 description 1
Images
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
- G06F3/04883—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 for inputting data by handwriting, e.g. gesture or text
-
- 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/0484—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
- G06F3/04847—Interaction techniques to control parameter settings, e.g. interaction with sliders or dials
-
- 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/0484—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
- G06F3/0485—Scrolling or panning
-
- 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/0484—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
- G06F3/0486—Drag-and-drop
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
- G06F9/451—Execution arrangements for user interfaces
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- General Engineering & Computer Science (AREA)
- Human Computer Interaction (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Software Systems (AREA)
- User Interface Of Digital Computer (AREA)
Abstract
本申请公开了一种终端应用的页面展示方法及装置，该页面包括设有第一标签列表的竖向滚动视图、设有第二标签列表的横向滚动视图和内容区域；所述方法包括：根据监听到的在竖向滚动视图区域内的手势事件，滚动第一标签列表；根据监听到的在横向滚动视图区域内的手势事件，滚动第二标签列表；根据第一标签列表中所选中的第一标签和/或第二标签列表中所选中的第二标签，确定内容区域的视图内容；根据监听到的在内容区域内的手势事件，并结合横向滚动视图及内容区域的状态，显示或隐藏横向滚动视图。本申请从不同角度对待展示内容进行标签分类，丰富了内容区域内的待展示内容的分类方式；同时支持隐藏横向滚动视图，增加了内容区域的有效展示范围。
Description
技术领域
本申请涉及页面展示技术领域，更具体地说，是涉及一种终端应用的页面展示方法及装置。
背景技术
随着互联网的普及，网络购物的优点更加突出，日益成为一种重要的购物形式。而随着移动通信技术的发展，手机等移动终端的网络带宽得到大幅度提升，用户可以随时随地通过手机等移动终端的App进行网络购物。
网络购物中非常重要的一点是对商品的浏览，通过在页面对商品的种类、品牌、功能、款式等进行充分的浏览，有利于帮助用户进行购物决策。而相对于台式机的显示器等显示设备，手机等移动终端的屏幕通常尺寸有限。在尺寸有限的屏幕内丰富页面的显示，提高用户的使用体验，将有利于提高页面的浏览量并减少用户的流失。
发明内容
有鉴于此，本申请提供了一种终端应用的页面展示方法及装置，以在尺寸有限的屏幕内丰富页面的显示。
为实现上述目的，本申请第一方面提供了一种终端应用的页面展示方法，所述页面包括竖向滚动视图、横向滚动视图和内容区域；其中，竖向滚动视图设有第一标签列表；横向滚动视图设有第二标签列表；所述方法包括：
根据监听到的在竖向滚动视图区域内的手势事件，滚动第一标签列表；
根据监听到的在横向滚动视图区域内的手势事件，滚动第二标签列表；
根据第一标签列表中所选中的第一标签和/或第二标签列表中所选中的第二标签，确定内容区域的视图内容；
根据监听到的在内容区域内的手势事件，并结合横向滚动视图及内容区域的状态，显示或隐藏横向滚动视图。
优选地，所述根据监听到的手势事件，并结合横向滚动视图及内容区域的状态，显示或隐藏横向滚动视图的过程，包括：
若监听到内容区域内的手势上滑事件，且横向滚动视图处于显示状态，则隐藏横向滚动视图；
若监听到内容区域内的手势下滑事件，内容区域中的视图内容已经不可向下滑动，且横向滚动视图处于隐藏状态，则显示横向滚动视图。
优选地，若监听到内容区域内的手势下滑事件，内容区域中的视图内容已经不可向下滑动，且横向滚动视图处于隐藏状态，则显示横向滚动视图的过程，包括：
若监听到手势下滑事件，在手势下滑事件的移动动作ACTION_MOVE事件中，根据ACTION_MOVE的上一个按下动作ACTION_DOWN事件所获取到的坐标位置，判断手势的活动范围；
若手势的活动范围落在内容区域内，且内容区域的内容视图不可滑动，则判断横向滚动视图是否处于隐藏状态；
若是，则显示横向滚动视图。
优选地，所述终端应用的页面展示方法还包括：
根据监听到的在内容区域内的手势事件，并结合竖向滚动视图及内容区域的状态，显示或隐藏竖向滚动视图。
优选地，所述根据监听到的手势事件，并结合竖向滚动视图及内容区域的状态，显示或隐藏竖向滚动视图的过程，包括：
若监听到内容区域内的手势左滑事件，且竖向滚动视图处于显示状态，则隐藏竖向滚动视图；
若监听到内容区域内的手势右滑事件，内容区域中的视图内容已经不可向右滑动，且竖向滚动视图处于隐藏状态，则显示竖向滚动视图。
优选地，所述根据监听到的在竖向滚动视图区域内的手势事件，滚动第一标签列表的过程，包括：
当监听到竖向滚动视图区域内的手势拖曳事件，根据拖曳的方向及幅度滑动第一标签列表，所述竖向滚动视图继承滚动视图ScrollView的竖向滑动能力。
优选地，所述根据监听到的在横向滚动视图区域内的手势事件，滚动第二标签列表的过程，包括：
当监听到横向滚动视图区域内的手势拖曳事件，根据拖曳的方向及幅度滑动第二标签列表，所述横向滚动视图继承水平滚动视图Horizontal ScrollView的横向滑动能力。
优选地，所述根据第一标签列表中所选中的第一标签和/或第二标签列表中选中的第二标签，确定内容区域的视图内容的过程，包括：
当第一标签列表中的第一标签被选中时，通过观察者模式，通知内容区域的片段Fragment切换至与所选中的第一标签对应的Fragment；
当第二标签列表中的第二标签被选中时，通过观察者模式，通知内容区域的Fragment切换至与所选中的第二标签对应的Fragment；
通过内容区域的Fragment确定内容区域的视图内容。
优选地，所述竖向滚动视图、横向滚动视图通过适配器模式实现标签视图TabView的多态；
所述第一标签列表及第二标签列表中的标签类型包括文字类型、图片类型和动画类型。
本申请第二方面提供了一种终端应用的页面展示装置，所述页面包括竖向滚动视图、横向滚动视图和内容区域；其中，竖向滚动视图设有第一标签列表；横向滚动视图设有第二标签列表，所述装置包括：
竖向滚动单元，用于根据监听到的在竖向滚动视图区域内的手势事件，滚动第一标签列表；
横向滚动单元，用于根据监听到的在横向滚动视图区域内的手势事件，滚动第二标签列表；
内容确定单元，用于根据第一标签列表中所选中的第一标签和/或第二标签列表中所选中的第二标签，确定内容区域的视图内容；
横向隐藏单元，用于根据监听到的在内容区域内的手势事件，并结合横向滚动视图及内容区域的状态，显示或隐藏横向滚动视图。
经由上述的技术方案可知，本申请在终端应用的页面中设置有竖向滚动视图、横向滚动视图和内容区域。其中，竖向滚动视图包括第一标签列表，横向滚动视图包括第二标签列表。第一标签列表及第二标签列表为相互独立的标签项，可以从不同角度对待展示内容进行标签分类，丰富了内容区域内的待展示内容的分类方式。
根据监听到的在竖向滚动视图区域内的手势事件，滚动第一标签列表；根据监听到的在横向滚动视图区域内的手势事件，滚动第二标签列表。通过滚动，可供用户浏览第一标签列表以及第二标签列表的所有标签。
当第一标签列表或第二标签列表中出现用户感兴趣的标签时，可选中相应的标签。根据第一标签列表中所选中的第一标签和/或第二标签列表中所选中的第二标签，确定内容区域的视图内容，帮助用户快速定位到需要查看的具体内容。
根据监听到的在内容区域内的手势事件，并结合横向滚动视图及内容区域的状态，显示或隐藏横向滚动视图。横向滚动视图的隐藏可以增加内容区域的有效展示范围，丰富了页面中内容的显示。
附图说明
为了更清楚地说明本申请实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本申请的实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据提供的附图获得其他的附图。
图1示例了本申请实施例公开的终端应用的页面的示意图；
图2为本申请实施例公开的终端应用的页面展示方法的示意图；
图3示例了本申请实施例公开的视图组件的示意图；
图4为本申请实施例公开的终端应用的页面展示装置的示意图；
图5为本申请实施例公开的终端应用的页面展示装置的另一示意图；
图6为本申请实施例公开的终端应用的页面展示设备的示意图。
具体实施方式
下面将结合本申请实施例中的附图，对本申请实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本申请一部分实施例，而不是全部的实施例。基于本申请中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本申请保护的范围。
下面介绍本申请实施例提供的终端应用的页面展示方法。请参阅图1，本申请实施例的终端应用的页面展示方法所展示的页面包括竖向滚动视图11、横向滚动视图12和内容区域13。其中，竖向滚动视图11设有第一标签列表，横向滚动视图12设有第二标签列表。
其中，第一标签列表、第二标签列表可以从不同角度对内容区域13待展示的内容进行标签分类。例如，假如内容区域13待展示的内容为服装，那么，第一标签列表可以是服装的类型，如上衣、裤子、裙子等；第二标签列表可以是服装的品牌或商品来源等。
请参阅图2，本申请实施例提供的终端应用的页面展示方法可以包括如下步骤：
步骤S100，根据监听到的在竖向滚动视图区域内的手势事件，滚动第一标签列表。
可以理解的是，本申请实施例对手势事件进行持续监听，根据监听到的手势事件确定相应的操作，本实施例中的各个步骤没有必然的顺序关系。
具体地，在本步骤中，若监听到手势事件，且该手势事件发生在竖向滚动视图11的区域内，则根据该手势事件的类型、位置和路径中的一种或多种属性，滚动竖向滚动视图11的区域内的第一标签列表。
步骤S200，根据监听到的在横向滚动视图区域内的手势事件，滚动第二标签列表。
具体地，在本步骤中，若监听到手势事件，且该手势事件发生在横向滚动视图12的区域内，则根据该手势事件的类型、位置和路径中的一种或多种属性，滚动横向滚动视图12的区域内的第二标签列表。
步骤S300，根据第一标签和第二标签确定内容区域的视图内容。
具体地，根据第一标签列表中所选中的第一标签和第二标签列表中所选中的第二标签中的至少一种标签，确定内容区域13的视图内容。
例如，若第一标签列表中的某一第一标签被选中，则在内容区域13内显示对应于该第一标签的视图内容；若第二标签列表中的某一第二标签被选中，则在内容区域13内显示对应于该第二标签的视图内容。
其中，对应于第一标签的视图内容，与对应于第二标签的视图内容，可以不是互相排斥的内容，而是互相相关的内容。具体地，第一标签列表中的某第一标签对应于内容集合A，第二标签列表中的某第二标签对应于内容集合B，则该第一标签与该第二标签被选中后，内容区域13内展示的内容为内容集合A与内容集合B的交集。
例如，当第一标签列表、第二标签列表分别从不同角度对内容区域13内的待展示内容进行标签分类，
例如，假如第一标签列表为服装的类型，如上衣、裤子、裙子等；第二标签列表为服装的品牌，如品牌A、品牌B。第一标签列表的“上衣”及第二标签列表的“品牌A”被选中，那么，内容区域13内将展示品牌A的上衣。
步骤S400，显示或隐藏横向滚动视图。
具体地，根据监听到的在内容区域13内的手势事件，并结合横向滚动视图12及内容区域13的状态，显示或隐藏横向滚动视图12。
例如，当已经选中第一标签和第二标签后，用户正在对内容区域13内的内容进行浏览，当该内容较多时，可以支持用户在内容区域13内通过上下滑动页面进行内容的查看。此时，通过隐藏横向滚动视图12，可以使得内容区域13的有效显示范围更大。例如，可以设置为当手指向上滑时，隐藏横向滚动视图12；当手指向下滑时，恢复横向滚动视图12的显示状态。
本申请实施例对手势事件进行持续监听，根据监听到的手势事件确定相应的操作，上述步骤S100至步骤S400分别描述了对竖向滚动视图11区域的滑动、横向滚动视图12区域的滑动、对竖向滚动视图11区域及横向滚动视图12区域的选中、内容区域13内的滑动的处理。可以理解的是，本实施例中的各个步骤没有必然的顺序关系。
本申请在终端应用的页面中设置有竖向滚动视图11、横向滚动视图12和内容区域13。其中，竖向滚动视图11包括第一标签列表，横向滚动视图12包括第二标签列表。第一标签列表及第二标签列表为相互独立的标签项，可以从不同角度对待展示内容进行标签分类，丰富了内容区域13内的待展示内容的分类方式。
根据监听到的在竖向滚动视图11区域内的手势事件，滚动第一标签列表；根据监听到的在横向滚动视图12区域内的手势事件，滚动第二标签列表。通过滚动，可供用户浏览第一标签列表以及第二标签列表的所有标签。
当第一标签列表或第二标签列表中出现用户感兴趣的标签时，可选中相应的标签。根据第一标签列表中所选中的第一标签和/或第二标签列表中所选中的第二标签，确定内容区域13的视图内容，帮助用户快速定位到需要查看的具体内容。
根据监听到的在内容区域13内的手势事件，并结合横向滚动视图12及内容区域13的状态，显示或隐藏横向滚动视图12。横向滚动视图12的隐藏可以增加内容区域13的有效展示范围，丰富了页面中内容的显示。
在本申请的一些实施例中，该终端应用的页面展示方法应用于Android系统，上述步骤S100根据监听到的在竖向滚动视图11区域内的手势事件，滚动第一标签列表的过程，可以包括：
当监听到竖向滚动视图11区域内的手势拖曳事件，根据拖曳的方向及幅度滑动第一标签列表。
其中，竖向滚动视图11继承了滚动视图ScrollView的竖向滑动能力。
具体地，当监听到竖向滚动视图11区域内的手势拖曳事件时，会动态计算TabStrip指示器的位置，并根据TabStrip指示器的位置滑动第一标签列表。其中，TabStrip的组成如图3所示。
在本申请的一些实施例中，该终端应用的页面展示方法应用于Android系统，上述步骤S200根据监听到的在横向滚动视图12区域内的手势事件，滚动第二标签列表的过程，可以包括：
当监听到横向滚动视图12区域内的手势拖曳事件，根据拖曳的方向及幅度滑动第二标签列表。
其中，横向滚动视图12继承了水平滚动视图Horizontal ScrollView的横向滑动能力。
具体地，请参阅图3，当监听到横向滚动视图12区域内的手势拖曳事件时，会动态计算TabStrip指示器的位置，并根据TabStrip指示器的位置滑动第二标签列表。
在本申请的一些实施例中，上述步骤S300根据第一标签列表中所选中的第一标签和第二标签列表中选中的第二标签中的至少一种，确定内容区域的视图内容的过程，可以包括：
S1，当第一标签列表中的第一标签被选中时，通过观察者模式，通知内容区域的片段Fragment切换至与所选中的第一标签对应的Fragment。
S2，当第二标签列表中的第二标签被选中时，通过观察者模式，通知内容区域的Fragment切换至与所选中的第二标签对应的Fragment。
S3，通过内容区域的Fragment确定内容区域的视图内容。
其中，Fragment的切换由FragmentManager控制，如图3所示。
在本申请的一些实施例中，请参阅图3，竖向滚动视图11、横向滚动视图12通过适配器(TabViewAdapter)模式实现标签视图TabView的多态。
其中，第一标签列表及第二标签列表中的标签类型可以包括文字类型、图片类型和动画类型。标签的形式可以包括首页标签HomeTabView、搜索标签SearchTabView和自动标签AutoTabView中的一种或多种。
在本申请的一些实施例中，上述步骤S400根据监听到的手势事件，并结合横向滚动视图12及内容区域13的状态，显示或隐藏横向滚动视图12的过程，可以包括：
S1，若监听到内容区域13内的手势上滑事件，且横向滚动视图12处于显示状态，则隐藏横向滚动视图12。
S2，若监听到内容区域内的手势下滑事件，内容区域13中的视图内容已经不可向下滑动，且横向滚动视图12处于隐藏状态，则显示横向滚动视图12。
可以理解的是，当用户通过触摸屏幕进行手势上滑的动作时，可能是尝试隐藏横向滚动视图12，也可能是尝试滑动内容区域13中的视图内容，以查看不同位置的内容。
此时，若在内容区域13内监听到手势上滑事件，若横向滚动视图12处于显示状态，则对其执行隐藏的操作，隐藏横向滚动视图12；若横向滚动视图12已经处于隐藏状态了，则不需要对其执行隐藏的操作。
另一方面，若在内容区域13内监听到手势下滑事件，则有可能是用户尝试滑动内容区域13中的视图内容，以查看不同位置的内容。此时通过判断内容区域13中的视图内容是否可以滑动，判断用户的实际意图。若内容区域13中的视图内容已经到了尽头，不能滑动了，仍然监听到内容区域13内监听到手势下滑事件，则判断为用户想要拉出横向滚动视图12，则显示横向滚动视图12。
在本申请的一些实施例中，该终端应用的页面展示方法应用于Android系统，上述S2中若监听到内容区域13内的手势下滑事件，内容区域13中的视图内容已经不可向下滑动，且横向滚动视图12处于隐藏状态，则显示横向滚动视图12的过程，可以包括：
S21，若监听到手势下滑事件，在手势下滑事件的移动动作ACTION_MO VE事件中，根据ACTION_MOVE的上一个按下动作ACTION_DOWN事件所获取到的坐标位置，判断手势的活动范围。
S22，若手势的活动范围落在内容区域13内，且内容区域13的内容视图不可滑动，则判断横向滚动视图12是否处于隐藏状态；
若是，则显示横向滚动视图12。
通过上述方法可以处理dispatchTouchEvent和onTouchEvent方法的手势事件冲突。
具体地，当内容区域13包含可以竖向滑动的视图(view)时，会出现跟竖向滚动视图11的滑动相冲突的情况。在这种情况下，可以在ACTION_DOWN的时机，获取手指触摸手机屏幕的坐标位置；在ACTION_MOVE滑动的时机，通过上一步获取到的坐标位置来判断手指的触摸范围：
1)如果该触摸范围落在子滑动View的区域内，并且子view尚可滑动，则滑动子View，并且消费手势事件；
2)如果落在子滑动View的区域内，并且子view不可滑动，则手势事件交给竖向滚动视图11处理；
3)如果落在子滑动View的区域外，则手势事件交给竖向滚动视图11处理。
在本申请的一些实施例中，上述终端应用的页面展示方法还可以包括：
根据监听到的在内容区域13内的手势事件，并结合竖向滚动视图11及内容区域13的状态，显示或隐藏竖向滚动视图11。
例如，当已经选中第一标签和第二标签后，用户正在对内容区域13内的内容进行浏览，当该内容较多时，可以支持用户在内容区域13内通过左右滑动页面进行内容的查看。此时，通过隐藏竖向滚动视图11，可以使得内容区域13的有效显示范围更大。例如，可以设置为当手指向左滑时，隐藏竖向滚动视图11；当手指向右滑时，恢复竖向滚动视图11的显示状态。
在本申请的一些实施例中，上述根据监听到的在内容区域13内的手势事件，并结合竖向滚动视图11及内容区域13的状态，显示或隐藏竖向滚动视图11的过程，可以包括：
S1，若监听到内容区域13内的手势左滑事件，且竖向滚动视图11处于显示状态，则隐藏竖向滚动视图11。
S2，若监听到内容区域13内的手势右滑事件，内容区域13中的视图内容已经不可向右滑动，且竖向滚动视图11处于隐藏状态，则显示竖向滚动视图11。
可以理解的是，当用户通过触摸屏幕进行手势左滑的动作时，可能是尝试隐藏竖向滚动视图11，也可能是尝试滑动内容区域13中的视图内容，以查看不同位置的内容。
此时，若在内容区域13内监听到手势左滑事件，若竖向滚动视图11处于显示状态，则对其执行隐藏的操作，隐藏竖向滚动视图11；若竖向滚动视图11已经处于隐藏状态了，则不需要对其执行隐藏的操作。
另一方面，若在内容区域13内监听到手势右滑事件，则有可能是用户尝试滑动内容区域13中的视图内容，以查看不同位置的内容。此时通过判断内容区域13中的视图内容是否可以滑动，判断用户的实际意图。若内容区域13中的视图内容已经到了尽头，不能滑动了，仍然监听到内容区域13内监听到手势右滑事件，则判断为用户想要拉出竖向滚动视图11，则显示竖向滚动视图11。
在本申请的一些实施例中，该终端应用的页面展示方法应用于Android系统，上述S2中若监听到内容区域13内的手势右滑事件，内容区域13中的视图内容已经不可向右滑动，且竖向滚动视图11处于隐藏状态，则显示竖向滚动视图11的过程，可以包括：
S21，若监听到手势右滑事件，在手势右滑事件的移动动作ACTION_MO VE事件中，根据ACTION_MOVE的上一个按下动作ACTION_DOWN事件所获取到的坐标位置，判断手势的活动范围。
S22，若手势的活动范围落在内容区域13内，且内容区域13的内容视图不可滑动，则判断竖向滚动视图11是否处于隐藏状态；
若是，则显示竖向滚动视图11。
通过上述方法可以处理dispatchTouchEvent和onTouchEvent方法的手势事件冲突。
具体地，当内容区域13包含可以横向滑动的视图(view)时，会出现跟横向滚动视图12的滑动相冲突的情况。在这种情况下，可以在ACTION_DOWN的时机，获取手指触摸手机屏幕的坐标位置；在ACTION_MOVE滑动的时机，通过上一步获取到的坐标位置来判断手指的触摸范围：
1)如果该触摸范围落在子滑动View的区域内，并且子view尚可滑动，则滑动子View，并且消费手势事件；
2)如果落在子滑动View的区域内，并且子view不可滑动，则手势事件交给横向滚动视图12处理；
3)如果落在子滑动View的区域外，则手势事件交给横向滚动视图12处理。
下面对本申请实施例提供的终端应用的页面展示装置进行描述，下文描述的终端应用的页面展示装置与上文描述的终端应用的页面展示方法可相互对应参照。
请参阅图1，本申请实施例的终端应用的页面展示装置所展示的页面包括竖向滚动视图11、横向滚动视图12和内容区域13。其中，竖向滚动视图11设有第一标签列表，横向滚动视图12设有第二标签列表。
请参见图4，本申请实施例提供的终端应用的页面展示装置，可以包括：
竖向滚动单元21，用于根据监听到的在竖向滚动视图区域内的手势事件，滚动第一标签列表；
横向滚动单元22，用于根据监听到的在横向滚动视图区域内的手势事件，滚动第二标签列表；
内容确定单元23，用于根据第一标签列表中所选中的第一标签和/或第二标签列表中所选中的第二标签，确定内容区域的视图内容；
横向隐藏单元24，用于根据监听到的在内容区域内的手势事件，并结合横向滚动视图及内容区域的状态，显示或隐藏横向滚动视图。
在本申请的一些实施例中，竖向滚动单元21根据监听到的在竖向滚动视图区域内的手势事件，滚动第一标签列表的过程，包括：
当监听到竖向滚动视图区域内的手势拖曳事件，根据拖曳的方向及幅度滑动第一标签列表，所述竖向滚动视图继承滚动视图ScrollView的竖向滑动能力。
在本申请的一些实施例中，横向滚动单元22根据监听到的在横向滚动视图区域内的手势事件，滚动第二标签列表的过程，可以包括：
当监听到横向滚动视图区域内的手势拖曳事件，根据拖曳的方向及幅度滑动第二标签列表，所述横向滚动视图继承水平滚动视图Horizontal ScrollView的横向滑动能力。
在本申请的一些实施例中，内容确定单元23根据第一标签列表中所选中的第一标签和/或第二标签列表中选中的第二标签，确定内容区域的视图内容的过程，可以包括：
当第一标签列表中的第一标签被选中时，通过观察者模式，通知内容区域的片段Fragment切换至与所选中的第一标签对应的Fragment；
当第二标签列表中的第二标签被选中时，通过观察者模式，通知内容区域的Fragment切换至与所选中的第二标签对应的Fragment；
通过内容区域的Fragment确定内容区域的视图内容。
在本申请的一些实施例中，横向隐藏单元24根据监听到的手势事件，并结合横向滚动视图及内容区域的状态，显示或隐藏横向滚动视图的过程，可以包括：
若监听到内容区域内的手势上滑事件，且横向滚动视图处于显示状态，则隐藏横向滚动视图；
若监听到内容区域内的手势下滑事件，内容区域中的视图内容已经不可向下滑动，且横向滚动视图处于隐藏状态，则显示横向滚动视图。
在本申请的一些实施例中，横向隐藏单元24监听到内容区域内的手势下滑事件，内容区域中的视图内容已经不可向下滑动，且横向滚动视图处于隐藏状态，则显示横向滚动视图的过程，可以包括：
若监听到手势下滑事件，在手势下滑事件的移动动作ACTION_MOVE事件中，根据ACTION_MOVE的上一个按下动作ACTION_DOWN事件所获取到的坐标位置，判断手势的活动范围；
若手势的活动范围落在内容区域内，且内容区域的内容视图不可滑动，则判断横向滚动视图是否处于隐藏状态；
若是，则显示横向滚动视图。
请参阅图5，在本申请的一些实施例中，终端应用的页面展示装置还可以包括：
竖向隐藏单元25，用于根据监听到的在内容区域内的手势事件，并结合竖向滚动视图及内容区域的状态，显示或隐藏竖向滚动视图。
在本申请的一些实施例中，竖向隐藏单元25根据监听到的手势事件，并结合竖向滚动视图及内容区域的状态，显示或隐藏竖向滚动视图的过程，可以包括：
若监听到内容区域内的手势左滑事件，且竖向滚动视图处于显示状态，则隐藏竖向滚动视图；
若监听到内容区域内的手势右滑事件，内容区域中的视图内容已经不可向右滑动，且竖向滚动视图处于隐藏状态，则显示竖向滚动视图。
本申请实施例提供的终端应用的页面展示装置可应用于终端应用的页面展示设备，如手机、平板电脑等移动终端。可选的，图6示出了终端应用的页面展示设备的硬件结构框图，参照图6，终端应用的页面展示设备的硬件结构可以包括：至少一个处理器31，至少一个通信接口32，至少一个存储器33和至少一个通信总线34。
在本申请实施例中，处理器31、通信接口32、存储器33、通信总线34的数量为至少一个，且处理器31、通信接口32、存储器33通过通信总线34完成相互间的通信；
处理器31可能是一个中央处理器CPU，或者是特定集成电路ASIC(ApplicationSpecific Integrated Circuit)，或者是被配置成实施本申请实施例的一个或多个集成电路等；
存储器32可能包含高速RAM存储器，也可能还包括非易失性存储器(non-volatilememory)等，例如至少一个磁盘存储器；
其中，存储器33存储有程序，处理器31可调用存储器33存储的程序，所述程序用于：
根据监听到的在竖向滚动视图区域内的手势事件，滚动第一标签列表；
根据监听到的在横向滚动视图区域内的手势事件，滚动第二标签列表；
根据第一标签列表中所选中的第一标签和/或第二标签列表中所选中的第二标签，确定内容区域的视图内容；
根据监听到的在内容区域内的手势事件，并结合横向滚动视图及内容区域的状态，显示或隐藏横向滚动视图。
可选的，所述程序的细化功能和扩展功能可参照上文描述。
本申请实施例还提供一种存储介质，该存储介质可存储有适于处理器执行的程序，所述程序用于：
根据监听到的在竖向滚动视图区域内的手势事件，滚动第一标签列表；
根据监听到的在横向滚动视图区域内的手势事件，滚动第二标签列表；
根据第一标签列表中所选中的第一标签和/或第二标签列表中所选中的第二标签，确定内容区域的视图内容；
根据监听到的在内容区域内的手势事件，并结合横向滚动视图及内容区域的状态，显示或隐藏横向滚动视图。
可选的，所述程序的细化功能和扩展功能可参照上文描述。
综上所述：
本申请在终端应用的页面中设置有竖向滚动视图、横向滚动视图和内容区域。其中，竖向滚动视图包括第一标签列表，横向滚动视图包括第二标签列表。第一标签列表及第二标签列表为相互独立的标签项，可以从不同角度对待展示内容进行标签分类，丰富了内容区域内的待展示内容的分类方式。
根据监听到的在竖向滚动视图区域内的手势事件，滚动第一标签列表；根据监听到的在横向滚动视图区域内的手势事件，滚动第二标签列表。通过滚动，可供用户浏览第一标签列表以及第二标签列表的所有标签。
当第一标签列表或第二标签列表中出现用户感兴趣的标签时，可选中相应的标签。根据第一标签列表中所选中的第一标签和/或第二标签列表中所选中的第二标签，确定内容区域的视图内容，帮助用户快速定位到需要查看的具体内容。
根据监听到的在内容区域内的手势事件，并结合横向滚动视图及内容区域的状态，显示或隐藏横向滚动视图。横向滚动视图的隐藏可以增加内容区域的有效展示范围，丰富了页面中内容的显示。
最后，还需要说明的是，在本文中，诸如第一和第二等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来，而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。而且，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括所述要素的过程、方法、物品或者设备中还存在另外的相同要素。
本说明书中各个实施例采用递进的方式描述，每个实施例重点说明的都是与其他实施例的不同之处，各个实施例之间可以根据需要进行组合，且相同相似部分互相参见即可。
对所公开的实施例的上述说明，使本领域专业技术人员能够实现或使用本申请。对这些实施例的多种修改对本领域的专业技术人员来说将是显而易见的，本文中所定义的一般原理可以在不脱离本申请的精神或范围的情况下，在其它实施例中实现。因此，本申请将不会被限制于本文所示的这些实施例，而是要符合与本文所公开的原理和新颖特点相一致的最宽的范围。
Claims (10)
1.一种终端应用的页面展示方法，其特征在于，所述页面包括竖向滚动视图、横向滚动视图和内容区域；其中，竖向滚动视图设有第一标签列表；横向滚动视图设有第二标签列表；所述方法包括：
根据监听到的在竖向滚动视图区域内的手势事件，滚动第一标签列表；
根据监听到的在横向滚动视图区域内的手势事件，滚动第二标签列表；
根据第一标签列表中所选中的第一标签和/或第二标签列表中所选中的第二标签，确定内容区域的视图内容；
根据监听到的在内容区域内的手势事件，并结合横向滚动视图及内容区域的状态，显示或隐藏横向滚动视图。
2.根据权利要求1所述的方法，其特征在于，所述根据监听到的手势事件，并结合横向滚动视图及内容区域的状态，显示或隐藏横向滚动视图的过程，包括：
若监听到内容区域内的手势上滑事件，且横向滚动视图处于显示状态，则隐藏横向滚动视图；
若监听到内容区域内的手势下滑事件，内容区域中的视图内容已经不可向下滑动，且横向滚动视图处于隐藏状态，则显示横向滚动视图。
3.根据权利要求2所述的方法，其特征在于，若监听到内容区域内的手势下滑事件，内容区域中的视图内容已经不可向下滑动，且横向滚动视图处于隐藏状态，则显示横向滚动视图的过程，包括：
若监听到手势下滑事件，在手势下滑事件的移动动作ACTION_MOVE事件中，根据ACTION_MOVE的上一个按下动作ACTION_DOWN事件所获取到的坐标位置，判断手势的活动范围；
若手势的活动范围落在内容区域内，且内容区域的内容视图不可滑动，则判断横向滚动视图是否处于隐藏状态；
若是，则显示横向滚动视图。
4.根据权利要求1所述的方法，其特征在于，还包括：
根据监听到的在内容区域内的手势事件，并结合竖向滚动视图及内容区域的状态，显示或隐藏竖向滚动视图。
5.根据权利要求4所述的方法，其特征在于，所述根据监听到的手势事件，并结合竖向滚动视图及内容区域的状态，显示或隐藏竖向滚动视图的过程，包括：
若监听到内容区域内的手势左滑事件，且竖向滚动视图处于显示状态，则隐藏竖向滚动视图；
若监听到内容区域内的手势右滑事件，内容区域中的视图内容已经不可向右滑动，且竖向滚动视图处于隐藏状态，则显示竖向滚动视图。
6.根据权利要求1所述的方法，其特征在于，所述根据监听到的在竖向滚动视图区域内的手势事件，滚动第一标签列表的过程，包括：
当监听到竖向滚动视图区域内的手势拖曳事件，根据拖曳的方向及幅度滑动第一标签列表，所述竖向滚动视图继承滚动视图ScrollView的竖向滑动能力。
7.根据权利要求1所述的方法，其特征在于，所述根据监听到的在横向滚动视图区域内的手势事件，滚动第二标签列表的过程，包括：
当监听到横向滚动视图区域内的手势拖曳事件，根据拖曳的方向及幅度滑动第二标签列表，所述横向滚动视图继承水平滚动视图HorizontalScrollView的横向滑动能力。
8.根据权利要求1所述的方法，其特征在于，所述根据第一标签列表中所选中的第一标签和/或第二标签列表中选中的第二标签，确定内容区域的视图内容的过程，包括：
当第一标签列表中的第一标签被选中时，通过观察者模式，通知内容区域的片段Fragment切换至与所选中的第一标签对应的Fragment；
当第二标签列表中的第二标签被选中时，通过观察者模式，通知内容区域的Fragment切换至与所选中的第二标签对应的Fragment；
通过内容区域的Fragment确定内容区域的视图内容。
9.根据权利要求1所述的方法，其特征在于，所述竖向滚动视图、横向滚动视图通过适配器模式实现标签视图TabView的多态；
所述第一标签列表及第二标签列表中的标签类型包括文字类型、图片类型和动画类型。
10.一种终端应用的页面展示装置，其特征在于，所述页面包括竖向滚动视图、横向滚动视图和内容区域；其中，竖向滚动视图设有第一标签列表；横向滚动视图设有第二标签列表，所述装置包括：
竖向滚动单元，用于根据监听到的在竖向滚动视图区域内的手势事件，滚动第一标签列表；
横向滚动单元，用于根据监听到的在横向滚动视图区域内的手势事件，滚动第二标签列表；
内容确定单元，用于根据第一标签列表中所选中的第一标签和/或第二标签列表中所选中的第二标签，确定内容区域的视图内容；
横向隐藏单元，用于根据监听到的在内容区域内的手势事件，并结合横向滚动视图及内容区域的状态，显示或隐藏横向滚动视图。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202111163545.0A CN113835610B (zh) | 2021-09-30 | 2021-09-30 | 一种终端应用的页面展示方法及装置 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202111163545.0A CN113835610B (zh) | 2021-09-30 | 2021-09-30 | 一种终端应用的页面展示方法及装置 |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN113835610A true CN113835610A (zh) | 2021-12-24 |
| CN113835610B CN113835610B (zh) | 2024-01-23 |
Family
ID=78967882
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202111163545.0A Active CN113835610B (zh) | 2021-09-30 | 2021-09-30 | 一种终端应用的页面展示方法及装置 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN113835610B (zh) |
Cited By (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN114518832A (zh) * | 2022-02-15 | 2022-05-20 | 网易（杭州）网络有限公司 | 触控终端的显示控制方法、装置及电子设备 |
| CN114518832B (zh) * | 2022-02-15 | 2024-05-28 | 网易（杭州）网络有限公司 | 触控终端的显示控制方法、装置及电子设备 |
Citations (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN106445972A (zh) * | 2015-08-11 | 2017-02-22 | 阿里巴巴集团控股有限公司 | 页面显示方法及装置 |
| KR20170046459A (ko) * | 2015-10-21 | 2017-05-02 | 엘지전자 주식회사 | 이동 단말기 및 그 제어방법 |
| WO2021164460A1 (zh) * | 2020-02-19 | 2021-08-26 | Oppo广东移动通信有限公司 | 触摸响应方法、装置、电子设备及存储介质 |
-
2021
- 2021-09-30 CN CN202111163545.0A patent/CN113835610B/zh active Active
Patent Citations (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN106445972A (zh) * | 2015-08-11 | 2017-02-22 | 阿里巴巴集团控股有限公司 | 页面显示方法及装置 |
| KR20170046459A (ko) * | 2015-10-21 | 2017-05-02 | 엘지전자 주식회사 | 이동 단말기 및 그 제어방법 |
| WO2021164460A1 (zh) * | 2020-02-19 | 2021-08-26 | Oppo广东移动通信有限公司 | 触摸响应方法、装置、电子设备及存储介质 |
Cited By (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN114518832A (zh) * | 2022-02-15 | 2022-05-20 | 网易（杭州）网络有限公司 | 触控终端的显示控制方法、装置及电子设备 |
| CN114518832B (zh) * | 2022-02-15 | 2024-05-28 | 网易（杭州）网络有限公司 | 触控终端的显示控制方法、装置及电子设备 |
Also Published As
| Publication number | Publication date |
|---|---|
| CN113835610B (zh) | 2024-01-23 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| RU2679540C2 (ru) | Обнаружение жеста панорамирования и выбора | |
| US9304668B2 (en) | Method and apparatus for customizing a display screen of a user interface | |
| CN105700800B (zh) | 一种页面信息的操作方法、装置及电子设备 | |
| EP2895952B1 (en) | Displaying an application set identifier | |
| US20050114791A1 (en) | Cueing mechanism that indicates a display is able to be scrolled | |
| CN104331246A (zh) | 在终端中进行分屏显示的设备和方法 | |
| CN106325687B (zh) | 一种调用程序的方法及终端 | |
| CN111061419B (zh) | 一种应用栏显示方法及电子设备 | |
| JP6949059B2 (ja) | 動的リストを表示する方法、デバイス、装置及びシステム | |
| CN106681616B (zh) | 一种浏览器功能栏显示方法、装置及设备 | |
| US20150161717A1 (en) | Object selection and presentation of object-related data in one consistent page view | |
| CN108475172B (zh) | 一种信息展示方法、装置及终端设备 | |
| KR20140094407A (ko) | 이동 단말기를 이용한 쇼핑정보 제공방법 및 이동 단말기를 이용하여 쇼핑정보를 제공하는 사용자 인터페이스 | |
| CN108154416B (zh) | 网站浏览优化方法及装置 | |
| KR20160074194A (ko) | 화면 표시를 제어하는 전자 장치 및 방법 | |
| CN111602110B (zh) | 信息提供装置、信息提供方法以及非暂时性记录介质 | |
| CN113325978B (zh) | 消息显示方法、装置和电子设备 | |
| CN110417984B (zh) | 一种在屏幕异形区域实现操作的方法、装置及存储介质 | |
| CN104965858B (zh) | 用于显示标签页的方法和装置 | |
| CN113835610B (zh) | 一种终端应用的页面展示方法及装置 | |
| CN111638828A (zh) | 界面显示方法及装置 | |
| KR20120047588A (ko) | 중력센서를 이용하여 상품의 상세정보 표시가 가능한 단말기 및 이의 기능구현방법 | |
| CN112905075B (zh) | 页面显示方法、装置及介质 | |
| KR102279131B1 (ko) | 웹 브라우저 디스플레이 방법 및 이를 이용하는 단말장치 | |
| JP5809762B1 (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 | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant |