CN110471737B - 一种沉浸式状态栏设置方法及相关装置 - Google Patents
一种沉浸式状态栏设置方法及相关装置 Download PDFInfo
- Publication number
- CN110471737B CN110471737B CN201910775526.XA CN201910775526A CN110471737B CN 110471737 B CN110471737 B CN 110471737B CN 201910775526 A CN201910775526 A CN 201910775526A CN 110471737 B CN110471737 B CN 110471737B
- Authority
- CN
- China
- Prior art keywords
- setting
- instruction
- frame
- immersive
- status bar
- 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.)
- Active
Links
Images
Classifications
-
- 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)
- Software Systems (AREA)
- Theoretical Computer Science (AREA)
- Human Computer Interaction (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- User Interface Of Digital Computer (AREA)
Abstract
本发明公开了一种沉浸式状态栏设置方法,将原始状态栏的背景色设置为透明,且设置原始状态栏悬浮于当前页面,再通过设置页面容器组件,为页面设置边框,将边框的位置设置为与原始状态栏一致。由于原始状态栏悬浮于页面上层,也就悬浮于边框的上层,且原始状态栏的背景颜色为透明,通过修改边框的背景颜色即可修改状态栏的背景色,从而即可实现沉浸式状态栏。本申请还提供了一种沉浸式状态栏设置系统、装置及计算机可读存储介质,同样可以实现上述技术效果。
Description
技术领域
本发明涉及安卓开发领域,尤其涉及一种沉浸式状态栏设置方法、装置、系统及计算机可读存储介质。
背景技术
随着信息技术的发展,基于安卓系统的智能手机越来越常见。在安卓系统的应用程序页面,最上方会有一个状态栏,用于显示如时间、电量、信号情况、网络情况等状态信息。状态栏的大小以及背景色通常是由安卓系统来定义,通常为固定大小、固定颜色。而当用户打开不同主题颜色的应用程序时,就会使页面十分不美观。
为此,在安卓4.4上,开始引出“沉浸式状态栏”这个概念,简单的来讲就是状态栏会根据手机内容适应性变色。但是对于当前较为流行的移动终端跨平台开发框架ReactNative来说,并未提供一种实现沉浸式状态栏的方案。
因此,如何能够基于React Native框架设置沉浸式状态栏,是本领域技术人员亟待解决的问题。
发明内容
本发明的主要目的在于提供一种沉浸式状态栏设置方法、装置、系统及计算机可读存储介质,以基于React Native框架设置沉浸式状态栏。
为实现上述目的,本发明提供的一种沉浸式状态栏设置方法,所述方法包括:
接收对主题文件的修改指令,响应所述修改指令将所述主题文件中原始状态栏的颜色设置为透明且将所述原始状态栏的设置为悬浮于当前页面状态;
接收页面容器组件的创建指令,响应所述创建指令创建所述页面容器组件,并在所述页面容器组件中设置边框,所述边框位置与所述原始状态栏位置相同;
接收对所述边框的设置指令与沉浸式需求参数,响应所述设置指令按照所述沉浸式需求参数设置所述边框。
可选地,所述接收对所述边框的设置指令与沉浸式需求参数,响应所述设置指令按照所述沉浸式需求参数设置所述边框,包括:
接收设置所述边框宽度的第一指令,响应所述第一指令将所述边框的宽度设置为与所述原始状态栏的宽度相同;
接收设置所述边框的背景颜色的第二指令,响应所述第二指令将所述边框的背景颜色设置为应用程序的主题颜色。
可选地,所述接收对所述边框的设置指令与沉浸式需求参数,响应所述设置指令按照所述沉浸式需求参数设置所述边框,包括:
接收设置所述边框的第三指令,响应所述第三指令将所述边框的宽度设置为0。
可选地,所述方法还包括:
接收Modal组件的封装指令,响应所述封装指令将React Native框架的原始Modal的功能封装至所述Modal组件,并将所述Modal组件中最外层view的高度设置为与屏幕高度相同,且将所述Modal组件中最外层view的宽度设置为与屏幕宽度相同。
可选地,所述方法还包括:
接收对所述Modal组件的设置指令,将所述Modal组件的背景颜色设置为半透明。
本申请还提供一种沉浸式状态栏设置装置,所述装置包括存储器和处理器,所述存储器上存储有可在所述处理器上运行的沉浸式状态栏设置程序,所述沉浸式状态栏设置程序被所述处理器执行时实现以下步骤:
接收对主题文件的修改指令,响应所述修改指令将所述主题文件中原始状态栏的颜色设置为透明且将所述原始状态栏的设置为悬浮于当前页面状态;
接收页面容器组件的创建指令,响应所述创建指令创建所述页面容器组件,并在所述页面容器组件中设置边框,所述边框位置与所述原始状态栏位置相同;
接收对所述边框的设置指令与沉浸式需求参数,响应所述设置指令按照所述沉浸式需求参数设置所述边框。
可选地,所述沉浸式状态栏设置程序被所述处理器执行时,具体实现:
接收设置所述边框宽度的第一指令,响应所述第一指令将所述边框的宽度设置为与所述原始状态栏的宽度相同;
接收设置所述边框的背景颜色的第二指令,响应所述第二指令将所述边框的背景颜色设置为应用程序的主题颜色。
可选地,所述沉浸式状态栏设置程序被所述处理器执行时具体实现:
接收设置所述边框的第三指令,响应所述第三指令将所述边框的宽度设置为0。
为实现上述目的,本申请还提供一种沉浸式状态栏设置系统,所述系统包括:
修改模块,用于接收对主题文件的修改指令,响应所述修改指令将所述主题文件中原始状态栏的颜色设置为透明且将所述原始状态栏的设置为悬浮于当前页面状态;
创建模块,用于接收页面容器组件的创建指令,响应所述创建指令创建所述页面容器组件,并在所述页面容器组件中设置边框,所述边框位置与所述原始状态栏位置相同;
设置模块,用于接收对所述边框的设置指令与沉浸式需求参数,响应所述设置指令按照所述沉浸式需求参数设置所述边框。
为实现上述目的,本申请还提供一种计算机可读存储介质,所述计算机可读存储介质上存储有沉浸式状态栏设置程序,所述沉浸式状态栏设置程序可被一个或多个处理器执行,以实现如任一项所述的沉浸式状态栏设置方法。
为实现上述目的,本发明进一步提供一种计算机程序产品,包括计算机指令,当所述计算机指令在计算机上运行时,使得所述计算机可以执行前述公开的沉浸式状态栏设置方法。
由此可见,本申请将原始状态栏的背景色设置为透明,且设置原始状态栏悬浮于当前页面,再通过设置页面容器组件,为页面设置边框,将边框的位置设置为与原始状态栏一致。由于原始状态栏悬浮于页面上层,也就悬浮于边框的上层,且原始状态栏的背景颜色为透明,通过修改边框的背景颜色即可修改状态栏的背景色,从而即可实现沉浸式状态栏。
附图说明
图1为本发明实施例提供的一种沉浸式状态栏设置方法流程图;
图2为本发明实施例提供的一种具体的沉浸式状态栏设置方法流程图;
图3为本发明实施例提供的一种沉浸式状态栏效果示意图;
图4为本发明实施例提供的一种具体的沉浸式状态栏设置方法流程图;
图5为本发明实施例提供的一种沉浸式状态栏效果示意图;
图6为本发明实施例提供的一种具体的沉浸式状态栏设置方法流程图;
图7为本发明一实施例揭露的沉浸式状态栏设置装置的结构示意图;
图8为本发明一实施例揭露的沉浸式状态栏设置系统的结构示意图。
具体实施方式
为了使本发明的目的、技术方案及优点更加清楚明白,以下结合附图及实施例,对本发明进行进一步详细说明。应当理解,此处所描述的具体实施例仅用以解释本发明,并不用于限定本发明。基于本发明中的实施例,本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例,都属于本发明保护的范围。
本申请的说明书和权利要求书及上述附图中的术语“第一”、“第二”、“第三”、“第四”等(如果存在)是用于区别类似的对象,而不必用于描述特定的顺序或先后次序。应该理解这样使用的数据在适当情况下可以互换,以便这里描述的实施例能够以除了在这里图示或描述的内容以外的顺序实施。此外,术语“包括”和“具有”以及他们的任何变形,意图在于覆盖不排他的包含,例如,包含了一系列步骤或单元的过程、方法、系统、产品或设备不必限于清楚地列出的那些步骤或单元,而是可包括没有清楚地列出的或对于这些过程、方法、产品或设备固有的其它步骤或单元。
需要说明的是,在本发明中涉及“第一”、“第二”等的描述仅用于描述目的,而不能理解为指示或暗示其相对重要性或者隐含指明所指示的技术特征的数量。由此,限定有“第一”、“第二”的特征可以明示或者隐含地包括至少一个该特征。另外,各个实施例之间的技术方案可以相互结合,但是必须是以本领域普通技术人员能够实现为基础,当技术方案的结合出现相互矛盾或无法实现时应当认为这种技术方案的结合不存在,也不在本发明要求的保护范围之内。
本发明提供了一种沉浸式状态栏设置方法、装置、系统及计算机可读存储介质,以基于React Native框架设置沉浸式状态栏。
本发明提供一种沉浸式状态栏设置方法。
参照图1,图1为本发明一实施例的流程示意图。
在一实施例中,该方法包括:
S101,接收对主题文件的修改指令,响应所述修改指令将所述主题文件中原始状态栏的颜色设置为透明且将所述原始状态栏的设置为悬浮于当前页面状态。
在本方案中,首先接收对主题文件的修改指令,从而根据修改指令将原始状态栏的颜色设置为透明,且将原始状态栏设置为悬浮于当前页面的状态,即,使原始状态栏无背景颜色,且不占据应用程序页面的空间。
需要说明的是,主题文件是安卓系统中用来定义显示样式的文件,文件名为styles.xml,存储路径通常为/android/app/src/main/res/values/styles.xml。向styles.xml添加<item name="android:windowTranslucentStatus">true</item>,以使当前页面包含状态栏,且状态栏不占用页面空间,即悬浮于页面上层,同时在MainActivity的onCreate方法中,将状态栏颜色设为透明,此时整个App页面空间将包含状态栏部分,且状态栏为透明背景。
S102,接收页面容器组件的创建指令,响应所述创建指令创建所述页面容器组件,并在所述页面容器组件中设置边框,所述边框位置与所述原始状态栏位置相同。
需要说明的是,通常情况下,应用程序中,非视频或图像播放的页面的实际内容高度不会设置为与屏幕高度相同,会将状态栏部分空余出来,因此,本方案中为应用程序的页面添加上边框,上边框的位置即位于状态栏位置。边框的宽度与页面实际内容高度之和为屏幕高度。
具体的,接收页面容器组件创建指令,为页面创建一个容器,需要说明的是,容器为前端显示的一个概念,在容器中可以定义页面的各个部分,有关容器的具体内容可以参见现有技术,本方案中不再赘述。
在该容器中,为页面添加边框,边框的位置设置为与原始状态栏位置相同,即为页面的上方。
S103,接收对所述边框的设置指令与沉浸式需求参数,响应所述设置指令按照所述沉浸式需求参数设置所述边框。
需要说明的是,上述边框为页面的一部分,由于原始状态栏悬浮于页面上层,也就悬浮于边框的上层,且原始状态栏的背景颜色为透明,通过修改边框的背景颜色即可修改状态栏的背景色,从而即可实现沉浸式状态栏。
由此可见,本申请将原始状态栏的背景色设置为透明,且设置原始状态栏悬浮于当前页面,再通过设置页面容器组件,为页面设置边框,将边框的位置设置为与原始状态栏一致。由于原始状态栏悬浮于页面上层,也就悬浮于边框的上层,且原始状态栏的背景颜色为透明,通过修改边框的背景颜色即可修改状态栏的背景色,从而即可实现沉浸式状态栏。
下面对本申请实施例提供的一种具体的沉浸式状态栏设置方法进行介绍,下文描述的一种具体的沉浸式状态栏设置方法与上述实施例可以相互参照。
参见图2,本申请实施例提供的一种具体的沉浸式状态栏设置方法,具体包括:
S201,接收对主题文件的修改指令,响应所述修改指令将所述主题文件中原始状态栏的颜色设置为透明且将所述原始状态栏的设置为悬浮于当前页面状态。
S202,接收页面容器组件的创建指令,响应所述创建指令创建所述页面容器组件,并在所述页面容器组件中设置边框,所述边框位置与所述原始状态栏位置相同。
S203,接收设置所述边框宽度的第一指令,响应所述第一指令将所述边框的宽度设置为与所述原始状态栏的宽度相同。
在本方案中,沉浸式的状态栏需要被设置为应用程序的主题颜色,因此,为了避免主题颜色的状态栏覆盖页面内容,需要使边框的宽度与原始状态栏的宽度相同,从而使页面的内容会显示在边框外的位置。参见图3,边框与原始状态栏的宽度相同,页面内容在边框外。
具体地,接收设置边框宽度的第一指令,根据第一指令,将边框宽度设置为与原始状态栏的宽度相同。
S204,接收设置所述边框的背景颜色的第二指令,响应所述第二指令将所述边框的背景颜色设置为应用程序的主题颜色。
具体地,由于边框的大小与位置均与原始状态栏相同,而原始状态栏悬浮于边框上方且透明,将边框的背景颜色设置为主题颜色,即可以实现状态栏的背景颜色为主题颜色。
下面对本申请实施例提供的一种具体的沉浸式状态栏设置方法进行介绍,下文描述的一种沉浸式状态栏设置方法与上述任一实施例可以相互参照。
参见图4,本申请实施例提供的一种具体的沉浸式状态栏设置方法,具体包括:
S301,接收对主题文件的修改指令,响应所述修改指令将所述主题文件中原始状态栏的颜色设置为透明且将所述原始状态栏的设置为悬浮于当前页面状态。
S302,接收页面容器组件的创建指令,响应所述创建指令创建所述页面容器组件,并在所述页面容器组件中设置边框,所述边框位置与所述原始状态栏位置相同。
S303,接收设置所述边框的第三指令,响应所述第三指令将所述边框的宽度设置为0。
参见图5,在本方案中,对于一些需要全屏展示的页面,如视频播放页面、图像展示页面,其状态栏的沉浸式效果应该为背景色与页面相同。因此,在本方案中,将边框的宽度设置为0,使页面内容进行全面展示,而由于状态栏悬浮于页面上层,且背景颜色透明,因此即可实现状态栏的背景色即页面的一部分,实现状态栏的沉浸式效果。
下面对本申请实施例提供的一种具体的沉浸式状态栏设置方法进行介绍,下文描述的一种沉浸式状态栏设置方法与上述任一实施例可以相互参照。
参见图6,本申请实施例提供的一种具体的沉浸式状态栏设置方法,具体包括:
S401,接收对主题文件的修改指令,响应所述修改指令将所述主题文件中原始状态栏的颜色设置为透明且将所述原始状态栏的设置为悬浮于当前页面状态。
S402,接收页面容器组件的创建指令,响应所述创建指令创建所述页面容器组件,并在所述页面容器组件中设置边框,所述边框位置与所述原始状态栏位置相同。
S403,接收对所述边框的设置指令与沉浸式需求参数,响应所述设置指令按照所述沉浸式需求参数设置所述边框。
S404,接收对主题文件的修改指令,响应所述修改指令将所述主题文件中原始状态栏的颜色设置为透明且将所述原始状态栏的设置为悬浮于当前页面状态。
S405,接收Modal组件的封装指令,响应所述封装指令将React Native框架的原始Modal的功能封装至所述Modal组件,并将所述Modal组件中最外层view的高度设置为与屏幕高度相同,且将所述Modal组件中最外层view的宽度设置为与屏幕宽度相同。
需要说明的是,在React Native框架中,提供有原始的Modal组件,Modal组件的作用是提供弹窗效果,但是原始的Modal组件提供的弹窗效果,在弹窗出现时,最上端的状态栏会恢复为系统原始的背景颜色,也就是会使沉浸式效果消失,为此,在本方案中通过接收Modal组件的设置指令封装新的Modal组件,将Modal组件最外层view的高度设置为与屏幕高度相同,ReactNative组件View,其作用等同于iOS中的UIView,或是网页中的<div>标签,它是所有组件的父组件,将它的高度设置为屏幕高度后,显示效果即整个弹窗部分会以一个新的占满全屏的页面的形式显示,弹窗中所要显示的内容具体占用的空间和具体内容的设置也在这个最外层view组件内部设置,即,这个占满全屏的页面中包括弹窗内容。
完成封装的新的Modal组件将覆盖全屏,包括状态栏,而不会出现状态栏恢复为系统原始的背景颜色的问题。
在一个优选的实施方式中,所述方法还包括:
接收对所述Modal组件的设置指令,将所述Modal组件的背景颜色设置为半透明。
即,接收对Modal组件的设置指令,根据该指令对Modal组件的背景色进行设置,将其设置为半透明。
设置半透明后,显示效果即能透过当前覆盖全屏的页面看到下层页面,也就能够看到上述实施例介绍的下层页面中设置的沉浸式的状态栏,从而不但能够避免出现状态栏恢复为系统原始的背景颜色的问题,还能实现弹窗模式下,状态栏依然是沉浸式的。
进一步的,本实施例还公开了一种沉浸式状态栏设置装置。
参照图7,图7为本发明一实施例揭露的沉浸式状态栏设置装置的内部结构示意图。图7中,沉浸式状态栏设置装置1包括存储器11和处理器12,所述存储器11上存储有可在所述处理器12上运行的沉浸式状态栏设置程序,所述沉浸式状态栏设置程序被所述处理器12执行时实现如下方法:
接收对主题文件的修改指令,响应所述修改指令将所述主题文件中原始状态栏的颜色设置为透明且将所述原始状态栏的设置为悬浮于当前页面状态;
接收页面容器组件的创建指令,响应所述创建指令创建所述页面容器组件,并在所述页面容器组件中设置边框,所述边框位置与所述原始状态栏位置相同;
接收对所述边框的设置指令与沉浸式需求参数,响应所述设置指令按照所述沉浸式需求参数设置所述边框。
由此可见,本申请将原始状态栏的背景色设置为透明,且设置原始状态栏悬浮于当前页面,再通过设置页面容器组件,为页面设置边框,将边框的位置设置为与原始状态栏一致。由于原始状态栏悬浮于页面上层,也就悬浮于边框的上层,且原始状态栏的背景颜色为透明,通过修改边框的背景颜色即可修改状态栏的背景色,从而即可实现沉浸式状态栏。
所述沉浸式状态栏设置程序被所述处理器12执行时,具体可以实现:接收设置所述边框宽度的第一指令,响应所述第一指令将所述边框的宽度设置为与所述原始状态栏的宽度相同;接收设置所述边框的背景颜色的第二指令,响应所述第二指令将所述边框的背景颜色设置为应用程序的主题颜色。
所述沉浸式状态栏设置程序被所述处理器12执行时,具体可以实现:接收设置所述边框的第三指令,响应所述第三指令将所述边框的宽度设置为0。
所述沉浸式状态栏设置程序被所述处理器12执行时,还可以实现:接收Modal组件的封装指令,响应所述封装指令将React Native框架的原始Modal的功能封装至所述Modal组件,并将所述Modal组件中最外层view的高度设置为与屏幕高度相同,且将所述Modal组件中最外层view的宽度设置为与屏幕宽度相同。
所述沉浸式状态栏设置程序被所述处理器12执行时,还可以实现:接收对所述Modal组件的设置指令,将所述Modal组件的背景颜色设置为半透明。
在本实施例中,所述沉浸式状态栏设置装置1可以是PC(Personal Computer,个人电脑),也可以是智能手机、平板电脑、掌上电脑、便携计算机。
进一步的,参照图7,所述沉浸式状态栏设置装置1还可以包括总线13,其中,所述存储器11和所述处理器12通过所述总线13连接。
其中,存储器11至少包括一种类型的可读存储介质,所述可读存储介质包括闪存、硬盘、多媒体卡、卡型存储器(例如,SD或DX存储器等)、磁性存储器、磁盘、光盘等。存储器11在一些实施例中可以是沉浸式状态栏设置装置1的内部存储单元,例如该沉浸式状态栏设置装置1的硬盘。存储器11在另一些实施例中也可以是沉浸式状态栏设置装置1的外部存储设备,例如沉浸式状态栏设置装置1上配备的插接式硬盘,智能存储卡(Smart Media Card,SMC),安全数字(Secure Digital,SD)卡,闪存卡(Flash Card)等。进一步地,存储器11还可以既包括沉浸式状态栏设置装置1的内部存储单元也包括外部存储设备。存储器11不仅可以用于存储安装于沉浸式状态栏设置装置1的应用软件及各类数据,例如沉浸式状态栏设置程序的代码等,还可以用于暂时地存储已经输出或者将要输出的数据。
处理器12在一些实施例中可以是一中央处理器(Central Processing Unit,CPU)、控制器、微控制器、微处理器或其他数据处理芯片,用于运行存储器11中存储的程序代码或处理数据,例如执行沉浸式状态栏设置程序等。
总线13可以是外设部件互连标准(peripheral component interconnect,简称PCI)总线或扩展工业标准结构(extended industry standard architecture,简称EISA)总线等。该总线可以分为地址总线、数据总线、控制总线等。为便于表示,图7中仅用一条粗线表示,但并不表示仅有一根总线或一种类型的总线。
进一步地,沉浸式状态栏设置装置1还可以包括网络接口14,网络接口14可选的可以包括有线接口和/或无线接口(如WI-FI接口、蓝牙接口等),通常用于在该沉浸式状态栏设置装置1与其他电子设备之间建立通信连接。
可选地,该沉浸式状态栏设置装置1还可以包括用户接口15,用户接口15可以包括显示器(Display)、输入单元比如键盘(Keyboard),可选的用户接口还可以包括标准的有线接口、无线接口。可选地,在一些实施例中,显示器可以是LED显示器、液晶显示器、触控式液晶显示器以及OLED(Organic Light-Emitting Diode,有机发光二极管)触摸器等。其中,显示器也可以适当的称为显示屏或显示单元,用于显示在沉浸式状态栏设置装置1中处理的信息以及用于显示可视化的用户页面。
图7仅示出了具有组件11-15的沉浸式状态栏设置装置1,本领域技术人员可以理解的是,图7示出的结构并不构成对沉浸式状态栏设置装置1的限定,可以包括比图示更少或者更多的部件,或者组合某些部件,或者不同的部件布置。
进一步的,本实施例还公开了一种沉浸式状态栏设置系统。
参照图8,所述沉浸式状态栏设置系统,包括:
修改模块501,用于接收对主题文件的修改指令,响应所述修改指令将所述主题文件中原始状态栏的颜色设置为透明且将所述原始状态栏的设置为悬浮于当前页面状态。
创建模块502,用于接收页面容器组件的创建指令,响应所述创建指令创建所述页面容器组件,并在所述页面容器组件中设置边框,所述边框位置与所述原始状态栏位置相同。
设置模块503,用于接收对所述边框的设置指令与沉浸式需求参数,响应所述设置指令按照所述沉浸式需求参数设置所述边框。
由此可见,本申请将原始状态栏的背景色设置为透明,且设置原始状态栏悬浮于当前页面,再通过设置页面容器组件,为页面设置边框,将边框的位置设置为与原始状态栏一致。由于原始状态栏悬浮于页面上层,也就悬浮于边框的上层,且原始状态栏的背景颜色为透明,通过修改边框的背景颜色即可修改状态栏的背景色,从而即可实现沉浸式状态栏。
可选地,所述设置模块503包括:
第一指令接收单元,用于接收设置所述边框宽度的第一指令,响应所述第一指令将所述边框的宽度设置为与所述原始状态栏的宽度相同;
第二指令接收单元,用于接收设置所述边框的背景颜色的第二指令,响应所述第二指令将所述边框的背景颜色设置为应用程序的主题颜色。
可选地,所述设置模块503具体用于接收设置所述边框的第三指令,响应所述第三指令将所述边框的宽度设置为0。
可选地,所述系统还包括:
Modal组件封装模块,用于接收Modal组件的封装指令,响应所述封装指令将ReactNative框架的原始Modal的功能封装至所述Modal组件,并将所述Modal组件中最外层view的高度设置为与屏幕高度相同,且将所述Modal组件中最外层view的宽度设置为与屏幕宽度相同。
可选地,所述系统还包括:
Modal组件设置模块,用于接收对所述Modal组件的设置指令,将所述Modal组件的背景颜色设置为半透明。
进一步的,本实施例还公开了一种计算机可读存储介质,所述计算机可读存储介质上存储有沉浸式状态栏设置程序,所述沉浸式状态栏设置程序可被一个或多个处理器执行,以实现上述任一实施例所述的沉浸式状态栏设置方法。
在上述实施例中,可以全部或部分地通过软件、硬件、固件或者其任意组合来实现。当使用软件实现时,可以全部或部分地以计算机程序产品的形式实现。
所述计算机程序产品包括一个或多个计算机指令。在计算机上加载和执行所述计算机程序指令时,全部或部分地产生按照本发明实施例所述的流程或功能。所述计算机可以是通用计算机、专用计算机、计算机网络、或者其他可编程装置。所述计算机指令可以存储在计算机可读存储介质中,或者从一个计算机可读存储介质向另一计算机可读存储介质传输,例如,所述计算机指令可以从一个网站站点、计算机、服务器或数据中心通过有线(例如同轴电缆、光纤、数字用户线(DSL))或无线(例如红外、无线、微波等)方式向另一个网站站点、计算机、服务器或数据中心进行传输。所述计算机可读存储介质可以是计算机能够存储的任何可用介质或者是包含一个或多个可用介质集成的服务器、数据中心等数据存储设备。所述可用介质可以是磁性介质,(例如,软盘、硬盘、磁带)、光介质(例如,DVD)、或者半导体介质(例如固态硬盘Solid State Disk(SSD))等。
所属领域的技术人员可以清楚地了解到,为描述的方便和简洁,上述描述的系统,装置和单元的具体工作过程,可以参考前述方法实施例中的对应过程,在此不再赘述。
在本申请所提供的几个实施例中,应该理解到,所揭露的系统,装置和方法,可以通过其它的方式实现。例如,以上所描述的装置实施例仅仅是示意性的,例如,所述单元的划分,仅仅为一种逻辑功能划分,实际实现时可以有另外的划分方式,例如多个单元或组件可以结合或者可以集成到另一个系统,或一些特征可以忽略,或不执行。另一点,所显示或讨论的相互之间的耦合或直接耦合或通信连接可以是通过一些接口,装置或单元的间接耦合或通信连接,可以是电性,机械或其它的形式。
所述作为分离部件说明的单元可以是或者也可以不是物理上分开的,作为单元显示的部件可以是或者也可以不是物理单元,即可以位于一个地方,或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部单元来实现本实施例方案的目的。
另外,在本申请各个实施例中的各功能单元可以集成在一个处理单元中,也可以是各个单元单独物理存在,也可以两个或两个以上单元集成在一个单元中。上述集成的单元既可以采用硬件的形式实现,也可以采用软件功能单元的形式实现。
所述集成的单元如果以软件功能单元的形式实现并作为独立的产品销售或使用时,可以存储在一个计算机可读取存储介质中。基于这样的理解,本申请的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的全部或部分可以以软件产品的形式体现出来,该计算机软件产品存储在一个存储介质中,包括若干指令用以使得一台计算机设备(可以是个人计算机,服务器,或者网络设备等)执行本申请各个实施例所述方法的全部或部分步骤。而前述的存储介质包括:U盘、移动硬盘、只读存储器(ROM,Read-OnlyMemory)、随机存取存储器(RAM,Random Access Memory)、磁碟或者光盘等各种可以存储程序代码的介质。
需要说明的是,上述本发明实施例序号仅仅为了描述,不代表实施例的优劣。并且本文中的术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含,从而使得包括一系列要素的过程、装置、物品或者方法不仅包括那些要素,而且还包括没有明确列出的其他要素,或者是还包括为这种过程、装置、物品或者方法所固有的要素。在没有更多限制的情况下,由语句“包括一个……”限定的要素,并不排除在包括该要素的过程、装置、物品或者方法中还存在另外的相同要素。
以上仅为本发明的优选实施例,并非因此限制本发明的专利范围,凡是利用本发明说明书及附图内容所作的等效结构或等效流程变换,或直接或间接运用在其他相关的技术领域,均同理包括在本发明的专利保护范围内。
Claims (6)
1.一种沉浸式状态栏设置方法,其特征在于,所述方法包括:
接收对主题文件的修改指令,响应所述修改指令将所述主题文件中原始状态栏的颜色设置为透明且将所述原始状态栏的设置为悬浮于当前页面状态;
接收页面容器组件的创建指令,响应所述创建指令创建所述页面容器组件,并在所述页面容器组件中设置边框,所述边框位置与所述原始状态栏位置相同;
接收对所述边框的设置指令与沉浸式需求参数,响应所述设置指令按照所述沉浸式需求参数设置所述边框;
所述接收对所述边框的设置指令与沉浸式需求参数,响应所述设置指令按照所述沉浸式需求参数设置所述边框,包括:
接收设置所述边框宽度的第一指令,响应所述第一指令将所述边框的宽度设置为与所述原始状态栏的宽度相同;
接收设置所述边框的背景颜色的第二指令,响应所述第二指令将所述边框的背景颜色设置为应用程序的主题颜色;
或所述接收对所述边框的设置指令与沉浸式需求参数,响应所述设置指令按照所述沉浸式需求参数设置所述边框,包括:
接收设置所述边框的第三指令,响应所述第三指令将所述边框的宽度设置为0。
2.根据权利要求1所述的方法,其特征在于,所述方法还包括:
接收Modal组件的封装指令,响应所述封装指令将React Native框架的原始Modal的功能封装至所述Modal组件,并将所述Modal组件中最外层view的高度设置为与屏幕高度相同,且将所述Modal组件中最外层view的宽度设置为与屏幕宽度相同。
3.根据权利要求2所述的方法,其特征在于,所述方法还包括:
接收对所述Modal组件的设置指令,将所述Modal组件的背景颜色设置为半透明。
4.一种沉浸式状态栏设置装置,其特征在于,所述装置包括存储器和处理器,所述存储器上存储有可在所述处理器上运行的沉浸式状态栏设置程序,所述沉浸式状态栏设置程序被所述处理器执行时实现以下步骤:
接收对主题文件的修改指令,响应所述修改指令将所述主题文件中原始状态栏的颜色设置为透明且将所述原始状态栏的设置为悬浮于当前页面状态;
接收页面容器组件的创建指令,响应所述创建指令创建所述页面容器组件,并在所述页面容器组件中设置边框,所述边框位置与所述原始状态栏位置相同;
接收对所述边框的设置指令与沉浸式需求参数,响应所述设置指令按照所述沉浸式需求参数设置所述边框;
所述沉浸式状态栏设置程序被所述处理器执行时,具体实现:
接收设置所述边框宽度的第一指令,响应所述第一指令将所述边框的宽度设置为与所述原始状态栏的宽度相同;
接收设置所述边框的背景颜色的第二指令,响应所述第二指令将所述边框的背景颜色设置为应用程序的主题颜色;
或所述沉浸式状态栏设置程序被所述处理器执行时具体实现:
接收设置所述边框的第三指令,响应所述第三指令将所述边框的宽度设置为0。
5.一种沉浸式状态栏设置系统,其特征在于,所述系统包括:
修改模块,用于接收对主题文件的修改指令,响应所述修改指令将所述主题文件中原始状态栏的颜色设置为透明且将所述原始状态栏的设置为悬浮于当前页面状态;
创建模块,用于接收页面容器组件的创建指令,响应所述创建指令创建所述页面容器组件,并在所述页面容器组件中设置边框,所述边框位置与所述原始状态栏位置相同;
设置模块,用于接收对所述边框的设置指令与沉浸式需求参数,响应所述设置指令按照所述沉浸式需求参数设置所述边框;
所述沉浸式状态栏设置系统,还用于:
接收设置所述边框宽度的第一指令,响应所述第一指令将所述边框的宽度设置为与所述原始状态栏的宽度相同;
接收设置所述边框的背景颜色的第二指令,响应所述第二指令将所述边框的背景颜色设置为应用程序的主题颜色;
或所述沉浸式状态栏设置系统,还用于:
接收设置所述边框的第三指令,响应所述第三指令将所述边框的宽度设置为0。
6.一种计算机可读存储介质,其特征在于,所述计算机可读存储介质上存储有沉浸式状态栏设置程序,所述沉浸式状态栏设置程序可被一个或多个处理器执行,以实现如权利要求1至3任一项所述的沉浸式状态栏设置方法。
Priority Applications (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN201910775526.XA CN110471737B (zh) | 2019-08-21 | 2019-08-21 | 一种沉浸式状态栏设置方法及相关装置 |
Applications Claiming Priority (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN201910775526.XA CN110471737B (zh) | 2019-08-21 | 2019-08-21 | 一种沉浸式状态栏设置方法及相关装置 |
Publications (2)
Publication Number | Publication Date |
---|---|
CN110471737A CN110471737A (zh) | 2019-11-19 |
CN110471737B true CN110471737B (zh) | 2022-08-16 |
Family
ID=68512698
Family Applications (1)
Application Number | Title | Priority Date | Filing Date |
---|---|---|---|
CN201910775526.XA Active CN110471737B (zh) | 2019-08-21 | 2019-08-21 | 一种沉浸式状态栏设置方法及相关装置 |
Country Status (1)
Country | Link |
---|---|
CN (1) | CN110471737B (zh) |
Families Citing this family (1)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN113535297B (zh) * | 2021-06-29 | 2023-02-03 | 未鲲(上海)科技服务有限公司 | 应用程序状态栏的显示方法、装置、设备及存储介质 |
Citations (4)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN106970746A (zh) * | 2017-03-31 | 2017-07-21 | 武汉斗鱼网络科技有限公司 | 标题栏设置方法和装置 |
CN108958873A (zh) * | 2018-07-11 | 2018-12-07 | 广州优视网络科技有限公司 | 状态栏沉浸式效果的配置方法、装置、介质和计算机设备 |
CN109508222A (zh) * | 2018-12-21 | 2019-03-22 | 北京金山安全软件有限公司 | 一种状态栏的颜色配置方法及相关设备 |
CN109874048A (zh) * | 2019-01-11 | 2019-06-11 | 平安科技(深圳)有限公司 | 视频窗口组件半透明显示方法、装置以及计算机设备 |
Family Cites Families (2)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN106155454B (zh) * | 2015-03-30 | 2020-06-16 | 阿里巴巴集团控股有限公司 | 一种界面显示方法、装置及电子设备 |
CN109240556A (zh) * | 2017-07-10 | 2019-01-18 | 珠海格力电器股份有限公司 | 自定义终端状态栏的方法、装置及电子设备 |
-
2019
- 2019-08-21 CN CN201910775526.XA patent/CN110471737B/zh active Active
Patent Citations (4)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN106970746A (zh) * | 2017-03-31 | 2017-07-21 | 武汉斗鱼网络科技有限公司 | 标题栏设置方法和装置 |
CN108958873A (zh) * | 2018-07-11 | 2018-12-07 | 广州优视网络科技有限公司 | 状态栏沉浸式效果的配置方法、装置、介质和计算机设备 |
CN109508222A (zh) * | 2018-12-21 | 2019-03-22 | 北京金山安全软件有限公司 | 一种状态栏的颜色配置方法及相关设备 |
CN109874048A (zh) * | 2019-01-11 | 2019-06-11 | 平安科技(深圳)有限公司 | 视频窗口组件半透明显示方法、装置以及计算机设备 |
Non-Patent Citations (1)
Title |
---|
"React-Native实现全屏展示的Modal弹窗";请叫我百米冲刺;《https://www.meiwen.com.cn/subject/hccnbqtx.html》;20190404;第1-5页 * |
Also Published As
Publication number | Publication date |
---|---|
CN110471737A (zh) | 2019-11-19 |
Similar Documents
Publication | Publication Date | Title |
---|---|---|
KR102497195B1 (ko) | 컨텐츠를 처리하는 방법 및 이를 위한 전자 장치 및 저장 매체 | |
CN111062778A (zh) | 产品浏览方法、装置、设备及存储介质 | |
AU2013225479B2 (en) | Application display method and terminal | |
CN107818008B (zh) | 页面加载方法及装置 | |
US20170123783A1 (en) | Method for displaying plug-in view elements in host application page and electronic device | |
WO2020048326A1 (zh) | 一种界面显示方法、系统及终端设备 | |
CN106293584A (zh) | 一种双屏显示方法及终端 | |
US20170235473A1 (en) | Method and Apparatus for Loading Application Program View, and Electronic Terminal | |
CN106933629B (zh) | 加载浏览器插件图标的方法及浏览器 | |
EP2988198B1 (en) | Apparatus and method for processing drag and drop | |
CN110019464B (zh) | 页面处理方法及装置 | |
CN103309616A (zh) | 软键盘的显示方法和终端 | |
KR20150072819A (ko) | 전자장치에서 디지털 콘텐츠를 디스플레이하기 위한 방법 및 장치 | |
JP6501893B2 (ja) | デスクトップ共有方法及びモバイル端末 | |
CN111737618A (zh) | 用于Web端的矢量图显示方法、装置和计算机设备 | |
CN111367518A (zh) | 页面布局方法、装置、计算设备及计算机存储介质 | |
US20200249965A1 (en) | Display Device with Built-In Web Browser for Graphical User Interface in an Embedded System | |
CN110471737B (zh) | 一种沉浸式状态栏设置方法及相关装置 | |
CN112540817A (zh) | 开机logo图片显示的方法、装置、设备及存储介质 | |
CN113784194A (zh) | 一种视频播放器的嵌入方法和装置 | |
CN109086342B (zh) | 批量化生产和运维网站模板的方法、介质和终端 | |
CN112307377A (zh) | 信息展示方法、装置及电子设备 | |
CN110475141B (zh) | 基于rn的视频播放方法、系统及电子设备和存储介质 | |
CN114020362A (zh) | 一种图层合并方法、装置、设备及存储介质 | |
CN113515210A (zh) | 一种显示方法、装置、电子设备以及存储介质 |
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 |