CN112866819A - 基于react native的瀑布流楼层式展示交互方法、介质及设备 - Google Patents

基于react native的瀑布流楼层式展示交互方法、介质及设备 Download PDF

Info

Publication number
CN112866819A
CN112866819A CN202011634775.6A CN202011634775A CN112866819A CN 112866819 A CN112866819 A CN 112866819A CN 202011634775 A CN202011634775 A CN 202011634775A CN 112866819 A CN112866819 A CN 112866819A
Authority
CN
China
Prior art keywords
floor
waterfall flow
interaction method
reactive native
type display
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
Application number
CN202011634775.6A
Other languages
English (en)
Other versions
CN112866819B (zh
Inventor
李希
陈卫
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Bestv Network Television Technology Development Co ltd
Original Assignee
Bestv Network Television Technology Development Co ltd
Priority date (The priority date 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 date listed.)
Filing date
Publication date
Application filed by Bestv Network Television Technology Development Co ltd filed Critical Bestv Network Television Technology Development Co ltd
Priority to CN202011634775.6A priority Critical patent/CN112866819B/zh
Publication of CN112866819A publication Critical patent/CN112866819A/zh
Application granted granted Critical
Publication of CN112866819B publication Critical patent/CN112866819B/zh
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Images

Classifications

    • H—ELECTRICITY
    • H04—ELECTRIC COMMUNICATION TECHNIQUE
    • H04N—PICTORIAL COMMUNICATION, e.g. TELEVISION
    • H04N21/00—Selective content distribution, e.g. interactive television or video on demand [VOD]
    • H04N21/40—Client devices specifically adapted for the reception of or interaction with content, e.g. set-top-box [STB]; Operations thereof
    • H04N21/47—End-user applications
    • H04N21/485—End-user interface for client configuration
    • H04N21/4858—End-user interface for client configuration for modifying screen layout parameters, e.g. fonts, size of the windows
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00—Arrangements for software engineering
    • G06F8/20—Software design
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00—Arrangements for software engineering
    • G06F8/30—Creation or generation of source code
    • G06F8/38—Creation or generation of source code for implementing user interfaces
    • H—ELECTRICITY
    • H04—ELECTRIC COMMUNICATION TECHNIQUE
    • H04N—PICTORIAL COMMUNICATION, e.g. TELEVISION
    • H04N21/00—Selective content distribution, e.g. interactive television or video on demand [VOD]
    • H04N21/40—Client devices specifically adapted for the reception of or interaction with content, e.g. set-top-box [STB]; Operations thereof
    • H04N21/43—Processing of content or additional data, e.g. demultiplexing additional data from a digital video stream; Elementary client operations, e.g. monitoring of home network or synchronising decoder's clock; Client middleware
    • H04N21/431—Generation of visual interfaces for content selection or interaction; Content or additional data rendering
    • H04N21/4312—Generation of visual interfaces for content selection or interaction; Content or additional data rendering involving specific graphical features, e.g. screen layout, special fonts or colors, blinking icons, highlights or animations
    • H—ELECTRICITY
    • H04—ELECTRIC COMMUNICATION TECHNIQUE
    • H04N—PICTORIAL COMMUNICATION, e.g. TELEVISION
    • H04N21/00—Selective content distribution, e.g. interactive television or video on demand [VOD]
    • H04N21/40—Client devices specifically adapted for the reception of or interaction with content, e.g. set-top-box [STB]; Operations thereof
    • H04N21/43—Processing of content or additional data, e.g. demultiplexing additional data from a digital video stream; Elementary client operations, e.g. monitoring of home network or synchronising decoder's clock; Client middleware
    • H04N21/443—OS processes, e.g. booting an STB, implementing a Java virtual machine in an STB or power management in an STB
    • H04N21/4438—Window management, e.g. event handling following interaction with the user interface
    • H—ELECTRICITY
    • H04—ELECTRIC COMMUNICATION TECHNIQUE
    • H04N—PICTORIAL COMMUNICATION, e.g. TELEVISION
    • H04N21/00—Selective content distribution, e.g. interactive television or video on demand [VOD]
    • H04N21/40—Client devices specifically adapted for the reception of or interaction with content, e.g. set-top-box [STB]; Operations thereof
    • H04N21/47—End-user applications
    • H04N21/472—End-user interface for requesting content, additional data or services; End-user interface for interacting with content, e.g. for content reservation or setting reminders, for requesting event notification, for manipulating displayed content

Landscapes

  • Engineering & Computer Science (AREA)
  • Software Systems (AREA)
  • Human Computer Interaction (AREA)
  • Multimedia (AREA)
  • Signal Processing (AREA)
  • General Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Databases & Information Systems (AREA)
  • User Interface Of Digital Computer (AREA)

Abstract

本发明涉及一种基于react native的瀑布流楼层式展示交互方法、介质及设备，包括以下步骤：基于react native框架显示交互菜单内容，该交互菜单内容采用瀑布流楼层式布局，每个楼层内包含多个单元格，所述楼层或单元格基于配置参数显示，所述交互菜单上显示有一可控焦点；响应对所述交互菜单内容的操作指令，控制所述可控焦点的移动或选择。与现有技术相比，本发明具有提高用户体验、性能高等优点。

Description

基于react native的瀑布流楼层式展示交互方法、介质及 设备
技术领域
本发明涉及高清电视和多媒体领域，尤其是涉及一种基于react native的瀑布流楼层式展示交互方法、介质及设备。
背景技术
随着现代社会智能电视的普及，电视或机顶盒所播放的视频内容越来越丰富，涉及的内容范围越来越广，同时也使得电视的操作方式越来越复杂，因此，电视屏幕上视频内容呈现方式和交互操作方法就显得愈发重要。
当前电视屏幕中呈现给用户的页面内容往往比较生硬，一般只有一屏，或者通过上下左右按键操作切换为几屏不同的内容，显得非常单调。或者设置了各类逐层递进地菜单层级，需要用户层层递进地进行选择，进行复杂的逐层操作会带来诸多的不变，操作方法会也显得非常不连贯。同时，现有智能电视或机顶盒开机的界面充斥各类推荐资讯和内容占用了大量本来用于播放视频的屏幕区域，使得对用户的体验也不够友好。
发明内容
本发明的目的就是为了克服上述现有技术存在的缺陷而提供一种提高用户体验、性能高的基于react native的瀑布流楼层式展示交互方法、介质及设备。
本发明的目的可以通过以下技术方案来实现：
一种基于react native的瀑布流楼层式展示交互方法，包括以下步骤：
基于react native框架显示交互菜单内容，该交互菜单内容采用瀑布流楼层式布局，每个楼层内包含多个单元格，所述楼层或单元格基于配置参数显示，所述交互菜单上显示有一可控焦点；
响应对所述交互菜单内容的操作指令，控制所述可控焦点的移动或选择。
进一步地，通过所述配置参数改变交互菜单内容的界面状态，具体通过前端数据流管理框架redux根据所述配置参数改变管理界面样式的数据状态，进而驱使界面发生改变。
进一步地，基于所述配置参数，各所述楼层的排列方式包括从上至下顺序排列、从左至右顺序排列或从里到外层叠排列。
进一步地，基于所述配置参数，楼层内的所述多个单元格的排列方式包括横向排列、纵向排列和二维矩阵排列。
进一步地，所述交互菜单内容包括根视图，通过调整所述根视图的位置调整所述瀑布流楼层式布局中楼层的可见范围，具体地：
需要发生楼层间焦点切换时，判断需切换至的下一楼层是否全部可见，若否，则调节根视图的位置，将不可见区域调整至可见状态。
进一步地，所述将不可见区域调整至可见状态时，对所述根视图的位置添加偏移量。
进一步地，所述操作指令为触屏控制指令或遥控器指令；
对所述触屏控制指令的响应，通过react native封装的PanResponder控制；
对所述遥控器指令的响应，焦点变化的逻辑，在楼层内按照“米”字焦点游走规则，在楼层间按照“十”字游走的规则。
本发明还提供一种计算机可读存储介质，包括供电子设备的一个或多个处理器执行的一个或多个程序，所述一个或多个程序包括用于执行如上所述基于react native的瀑布流楼层式展示交互方法的指令。
本发明还提供一种电子设备，包括：
一个或多个处理器；
存储器；和
被存储在存储器中的一个或多个程序，所述一个或多个程序包括用于执行如上所述基于react native的瀑布流楼层式展示交互方法的指令。
进一步地，所述电子设备包括智能电视或者智能盒子控制的显示设备。
进一步地，所述电子设备为触控设备或通过遥控器控制的设置。
与现有技术相比，本发明具有以下有益效果：
1、本发明基于react native框架显示交互菜单内容，在原生平台的基础上结合了react native框架特点，使用JavaScript语言在React框架上编写原生移动应用，结合了JavaScript Core引擎，调用的却是原生的组件，利用了前端高效的开发优点，以及原生组件高性能的优点。
2、本发明可基于配置参数动态设置每个楼层是否可见，自动补齐不可见的楼层，同时支持添加z轴的布局，具有层叠排列方式，适应移动端和android电视盒子的各种复杂样式布局。
3、本发明可以方便处理触摸屏事件和电视遥控事件，适应性广，数据处理高效，提高用户体验。
附图说明
图1为本发明的瀑布流楼层式布局示意图；
图2为本发明数据流管理框架redux的数据控制示意图；
图3为楼层内单元格控制流程示意图；
图4为楼层间控制流程示意图。
具体实施方式
下面结合附图和具体实施例对本发明进行详细说明。本实施例以本发明技术方案为前提进行实施，给出了详细的实施方式和具体的操作过程，但本发明的保护范围不限于下述的实施例。
实施例1
本实施例提供一种基于react native的瀑布流楼层式展示交互方法，包括以下步骤：
基于react native框架显示交互菜单内容，该交互菜单内容采用瀑布流楼层式布局，如图1所示，每个楼层内包含多个单元格，所述楼层或单元格基于配置参数显示，所述交互菜单上显示有一可控焦点；
响应对所述交互菜单内容的操作指令，控制所述可控焦点的移动或选择。
本实施例中，通过所述配置参数改变交互菜单内容的界面状态，具体是通过前端数据流管理框架redux根据所述配置参数改变管理界面样式的数据状态，进而驱使界面发生改变，如图2所示，让数据的流向清晰可见，状态的变化可预测，提高了维护效率。
在可选的实施方式中，基于所述配置参数，各所述楼层的排列方式包括从上至下顺序排列、从左至右顺序排列或从里到外层叠排列。楼层的状态有四种：1.focus；2.unfocus；3.Visible；4.Unvisible。
在可选的实施方式中，基于所述配置参数，楼层内的所述多个单元格的排列方式包括横向排列、纵向排列和二维矩阵排列。楼层内每个单元有四种状态：1.focus；2.unfocus；3.selected；4.unselected。
优选地，交互菜单内容包括根视图，通过调整所述根视图的位置调整所述瀑布流楼层式布局中楼层的可见范围，具体为：需要发生楼层间焦点切换时，判断需切换至的下一楼层是否全部可见，若否，则调节根视图的位置(top，botto，left，right)，将不可见区域调整至可见状态。进一步地，将不可见区域调整至可见状态时，对所述根视图的位置添加偏移量，以此获取最佳的展现效果。
本实施例的操作指令可为触屏控制指令或遥控器指令；对所述触屏控制指令的响应，通过react native封装的PanResponder控制；对所述遥控器指令的响应，焦点变化的逻辑，在楼层内按照“米”字焦点游走规则，在楼层间按照“十”字游走的规则。
如图3所示，操作指令为遥控器指令时，楼层内单元格二维数组采用“米”字游走，在当前焦点位置，通过遥控器的上下左右操作来定制下一个焦点的位置，设置当前焦点和下一个焦点的获焦状态，从而确定焦点的游走逻辑。具体包括如下步骤：
101)通过遥控器进行上下左右操作；
102)在选择下一个焦点的位置后，判断选择处是否有数据，若是，则执行步骤103)，若否，则执行步骤106)；
103)设置当前单元格状态为unfocus，下一个单元格为focus；
104)判断是否设置unfocus单元格为selected状态，若是，则将其设置为selected状态，若否，则执行步骤107)；
105)判断focus的单元格是否为selected状态，若是，则将其设置为unselected状态，若否，则执行步骤107)；
106)判断是否有楼层数据，若是，则切换楼层，若否，则执行步骤107)；
107)不处理。
如图4所示，楼层间二维数组采用“十”字游走，发生楼层间焦点切换，判断上下左右和返回键是否还有状态为可见的楼层，如果有则落焦到相应楼层，如果此时落焦的楼层不是全部在屏幕可视区域内，则计算不可见的区域高度或宽度，通过重新调节根视图的位置将不可见区域展现出来，同时判断是否有必要加上偏移量，以此获取最佳的展现效果；对于有层叠布局的楼层，通过返回键来切换到下一个楼层，并且隐藏掉当前楼层。具体包括如下步骤：
101)通过遥控器进行上下左右操作或返回操作，若是上下左右操作，则执行步骤102)，若是返回操作，则执行步骤105)；
102)在选择下一个焦点的位置后，判断选择处是否有数据，若是，则执行步骤103)，若否，则不处理；
103)设置当前楼层状态为unfocus，下一个楼层为focus；
104)判断下一楼层是否为visible状态，若是，则落焦到该楼层，若否，则返回步骤101)；
105)判断是否有层叠楼层，若是，则执行步骤106)，若否，则执行步骤107)；
106)判断层叠楼层是否为visible状态，若是，则设置层叠楼层为unfocus和unvisible状态，若否，则执行步骤107)；
107)退出。
上述功能如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本发明的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行本发明各个实施例所述方法的全部或部分步骤。而前述的存储介质包括：U盘、移动硬盘、只读存储器(ROM，Read-Only Memory)、随机存取存储器(RAM，Random Access Memory)、磁碟或者光盘等各种可以存储程序代码的介质。
实施例2
本实施例提供一种电子设备，包括一个或多个处理器、存储器和被存储在存储器中的一个或多个程序，所述一个或多个程序包括用于执行如实施例1所述基于reactnative的瀑布流楼层式展示交互方法的指令。
在可选的实施方式中，电子设备包括智能电视或者智能盒子控制的显示设备。
在可选的实施方式中，电子设备为触控设备或通过遥控器控制的设置。
以上详细描述了本发明的较佳具体实施例。应当理解，本领域的普通技术人员无需创造性劳动就可以根据本发明的构思作出诸多修改和变化。因此，凡本技术领域中技术人员依本发明的构思在现有技术的基础上通过逻辑分析、推理或者有限的实验可以得到的技术方案，皆应在由权利要求书所确定的保护范围内。

Claims (10)

1.一种基于react native的瀑布流楼层式展示交互方法，其特征在于，包括以下步骤：
基于react native框架显示交互菜单内容，该交互菜单内容采用瀑布流楼层式布局，每个楼层内包含多个单元格，所述楼层或单元格基于配置参数显示，所述交互菜单上显示有一可控焦点；
响应对所述交互菜单内容的操作指令，控制所述可控焦点的移动或选择。
2.根据权利要求1所述的基于react native的瀑布流楼层式展示交互方法，其特征在于，基于所述配置参数，各所述楼层的排列方式包括从上至下顺序排列、从左至右顺序排列或从里到外层叠排列。
3.根据权利要求1所述的基于react native的瀑布流楼层式展示交互方法，其特征在于，基于所述配置参数，楼层内的所述多个单元格的排列方式包括横向排列、纵向排列和二维矩阵排列。
4.根据权利要求1所述的基于react native的瀑布流楼层式展示交互方法，其特征在于，所述交互菜单内容包括根视图，通过调整所述根视图的位置调整所述瀑布流楼层式布局中楼层的可见范围，具体地：
需要发生楼层间焦点切换时，判断需切换至的下一楼层是否全部可见，若否，则调节根视图的位置，将不可见区域调整至可见状态。
5.根据权利要求4所述的基于react native的瀑布流楼层式展示交互方法，其特征在于，所述将不可见区域调整至可见状态时，对所述根视图的位置添加偏移量。
6.根据权利要求1所述的基于react native的瀑布流楼层式展示交互方法，其特征在于，所述操作指令为触屏控制指令或遥控器指令；
对所述触屏控制指令的响应，通过react native封装的PanResponder控制；
对所述遥控器指令的响应，焦点变化的逻辑，在楼层内按照“米”字焦点游走规则，在楼层间按照“十”字游走的规则。
7.一种计算机可读存储介质，其特征在于，包括供电子设备的一个或多个处理器执行的一个或多个程序，所述一个或多个程序包括用于执行如权利要求1-6任一所述基于reactnative的瀑布流楼层式展示交互方法的指令。
8.一种电子设备，其特征在于，包括：
一个或多个处理器；
存储器；和
被存储在存储器中的一个或多个程序，所述一个或多个程序包括用于执行如权利要求1-6任一所述基于react native的瀑布流楼层式展示交互方法的指令。
9.根据权利要求8所述的电子设备，其特征在于，所述电子设备包括智能电视或者智能盒子控制的显示设备。
10.根据权利要求8所述的电子设备，其特征在于，所述电子设备为触控设备或通过遥控器控制的设置。
CN202011634775.6A 2020-12-31 2020-12-31 基于react native的瀑布流楼层式展示交互方法、介质及设备 Active CN112866819B (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202011634775.6A CN112866819B (zh) 2020-12-31 2020-12-31 基于react native的瀑布流楼层式展示交互方法、介质及设备

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202011634775.6A CN112866819B (zh) 2020-12-31 2020-12-31 基于react native的瀑布流楼层式展示交互方法、介质及设备

Publications (2)

Publication Number Publication Date
CN112866819A true CN112866819A (zh) 2021-05-28
CN112866819B CN112866819B (zh) 2023-04-18

Family

ID=76000235

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202011634775.6A Active CN112866819B (zh) 2020-12-31 2020-12-31 基于react native的瀑布流楼层式展示交互方法、介质及设备

Country Status (1)

Country Link
CN (1) CN112866819B (zh)

Cited By (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
WO2023005444A1 (zh) * 2021-07-30 2023-02-02 中兴通讯股份有限公司 一种终端桌面显示方法、装置及电子设备

Citations (7)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN103702230A (zh) * 2013-12-13 2014-04-02 乐视网信息技术（北京）股份有限公司 图像显示方法及装置
CN105224556A (zh) * 2014-06-13 2016-01-06 腾讯科技（北京）有限公司 瀑布流界面显示方法及装置
CN105824900A (zh) * 2016-03-14 2016-08-03 传线网络科技（上海）有限公司 一种基于react-native的页面展示系统
CN109743605A (zh) * 2018-12-27 2019-05-10 百视通网络电视技术发展有限责任公司 一种基于机顶盒的高清电视界面交互方法、系统及机顶盒
WO2020015535A1 (zh) * 2018-07-17 2020-01-23 腾讯科技（深圳）有限公司 多媒体播放控制方法、装置、终端及存储介质
CN111294635A (zh) * 2018-12-06 2020-06-16 Tcl集团股份有限公司 一种编排桌面布局的方法、装置及服务器
CN111385629A (zh) * 2018-12-29 2020-07-07 深圳Tcl新技术有限公司 一种界面的布局方法、智能电视及存储介质

Patent Citations (7)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN103702230A (zh) * 2013-12-13 2014-04-02 乐视网信息技术（北京）股份有限公司 图像显示方法及装置
CN105224556A (zh) * 2014-06-13 2016-01-06 腾讯科技（北京）有限公司 瀑布流界面显示方法及装置
CN105824900A (zh) * 2016-03-14 2016-08-03 传线网络科技（上海）有限公司 一种基于react-native的页面展示系统
WO2020015535A1 (zh) * 2018-07-17 2020-01-23 腾讯科技（深圳）有限公司 多媒体播放控制方法、装置、终端及存储介质
CN111294635A (zh) * 2018-12-06 2020-06-16 Tcl集团股份有限公司 一种编排桌面布局的方法、装置及服务器
CN109743605A (zh) * 2018-12-27 2019-05-10 百视通网络电视技术发展有限责任公司 一种基于机顶盒的高清电视界面交互方法、系统及机顶盒
CN111385629A (zh) * 2018-12-29 2020-07-07 深圳Tcl新技术有限公司 一种界面的布局方法、智能电视及存储介质

Non-Patent Citations (1)

* Cited by examiner, † Cited by third party
Title
徐晔;: "基于瀑布流式布局的展示类网站界面设计研究" *

Cited By (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
WO2023005444A1 (zh) * 2021-07-30 2023-02-02 中兴通讯股份有限公司 一种终端桌面显示方法、装置及电子设备

Also Published As

Publication number Publication date
CN112866819B (zh) 2023-04-18

Similar Documents

Publication Publication Date Title
US11369872B2 (en) Storage medium storing game program, game processing method, and information processing apparatus
US11800192B2 (en) Bullet screen processing method and apparatus, electronic device, and computer-readable storage medium
CN100495294C (zh) 多平面的三维用户界面
WO2019228269A1 (zh) 电视中的应用排序设置方法和装置
US8591303B2 (en) Device for providing a game
CN103634686A (zh) 一种用于预览视频的方法及装置
CN103218111A (zh) 用于提供图形用户界面的设备和方法
CN1795674A (zh) 多媒体再现装置和再现方法
CN105278799A (zh) 界面切换方法及装置
CN111432264B (zh) 基于媒体信息流的内容展示方法、装置、设备及存储介质
CN112866819B (zh) 基于react native的瀑布流楼层式展示交互方法、介质及设备
CN106572381A (zh) 一种图片缩略图的处理方法和智能电视
US20170266555A1 (en) Recording medium storing game program, game processing method, and information processing apparatus
CN102611902A (zh) 游戏显示模式自适应切换方法和装置
US8917356B2 (en) Play control system and method
CN103051967A (zh) 一种智能电视功能配置的用户引导方法及系统
US20150126285A1 (en) Server and method for providing game
CN106162299A (zh) 一种osd动画素材数据的播放方法和装置
CN100435096C (zh) 基于c语言微型操作系统的图形处理方法
CN114240469A (zh) 一种数据展示方法、装置以及计算机可读存储介质
CN102609206A (zh) 软件中功能选项的交互方法
CN112351328A (zh) 智能电视焦点的呈现方法、设备及存储介质
CN111428455A (zh) 表格管理方法、装置、设备及存储介质
CN114640891B (zh) 一种iptv中可上下左右循环展示专题内容的方法
CN107977130B (zh) Flash播放器的交互方法、装置及服务器

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