标题栏设置方法和装置与流程

文档序号:11690875阅读:307来源:国知局
标题栏设置方法和装置与流程

本发明涉及智能系统开发领域,具体而言,涉及标题栏设置方法和装置。



背景技术:

reactnative:(简称rn)是facebook于2015年4月开源的跨平台移动应用开发框架,是facebook早先开源的ui框架react在原生移动应用平台的衍生产物,目前支持ios和安卓两大平台。rn使用javascript语言,类似于html的jsx来开发移动应用。

所述智能系统在进行应用设置时,设置状态栏和标题栏,以进行相关数据显示。状态栏,是指移动终端上方显示电池电量,信号强度,时间等信息的一栏。所述标题栏,是指移动终端的应用中紧接状态栏下面的一栏,用于放置界面返回按钮,显示界面标题的一栏。

在现有的跨平台方案中,需要针对不同的智能系统设置专用的标题栏,即为给ios平台做一套标题栏,再给安卓平台做一套标题栏,从而造成程序设置效率低下,且一套标题栏要维护二套代码,增设了代码维护成本。产生这种现象的根本原因是ios平台的标题栏会默认直接覆盖掉状态栏,安卓平台的标题栏默认是在状态栏下方,难以做到标题栏样式的统一格式显示。



技术实现要素:

本发明提供的标题栏设置方法和装置,旨在改善上述问题。

第一方面,本发明实施例提供的一种标题栏设置方法,应用于移动终端的智能系统的标题栏设置。所述方法包括:按照所述智能系统默认的标题栏设置标准,设置原始标题栏和延伸标题栏,其中,所述原始标题栏与所述延伸标题栏的背景色被设置为相同,所述延伸标题栏的位置被设置为与所述智能系统的状态栏的状态一致。当所述智能系统为安卓系统时,在所述状态栏的位置显示所述延伸标题栏的背景色。

第二方面,本发明实施例提供的一种标题栏设置方法,应用于ios系统的标题栏设置。所述方法包括:根据所述ios系统默认的标题栏设置标准,设置所述ios系统的原始标题栏;设置延伸标题栏,其中,所述延伸标题栏与所述原始标题栏的背景色被设置为相同,所述延伸标题栏的位置被设置为与所述ios系统的状态栏的位置一致。

第三方面,本发明实施例提供的一种标题栏设置装置,应用于移动终端的智能系统的标题栏设置。所述装置包括:设置模块,用于按照所述智能系统默认的标题栏设置标准,设置原始标题栏和延伸标题栏,其中,所述原始标题栏与所述延伸标题栏的背景色被设置为相同,所述延伸标题栏的位置被设置为与所述智能系统的状态栏的状态一致。显示模块,用于当所述智能系统为安卓系统时,在所述状态栏的位置显示所述延伸标题栏的背景色。

第四方面,本发明实施例提供的一种标题栏设置装置,应用于ios系统的标题栏设置。所述标题栏设置装置包括:原始标题栏设置模块,用于根据所述ios系统默认的标题栏设置标准,设置所述ios系统的原始标题栏。延伸标题栏设置模块,用于设置延伸标题栏,其中,所述延伸标题栏与所述原始标题栏的背景色被设置为相同,所述延伸标题栏的位置被设置为与所述ios系统的状态栏的位置一致。

本发明实施例提供的标题栏设置方法和装置,应用于移动终端的智能系统的标题栏设置,可以设置应用安卓系统和ios系统的标题栏设置。首先根据智能系统默认的标题栏设置标准,在智能系统的预定的标题栏位置设置原始标题栏,在预设的状态栏位置设置延伸标题栏。在设置过程中,将所述延伸标题栏的位置设置在所述智能系统的预定的状态栏的位置,并且所述原始标题栏的背景色和所述延伸标题栏的背景色被设置为相同,以使所述原始标题栏的背景色显示效果与所述延伸标题栏的背景色显示效果相同。

所述延伸标题栏的位置被设置为与所述状态栏的位置相同,则对应ios系统来说,所述智能系统的标题栏与所述状态栏的背景色显示效果均相同。由于安卓系统状态栏的沉浸属性,延伸标题栏会在状态栏的下方,因此当所述智能系统为安卓系统时,通过状态栏沉浸模式等方式,在所述状态栏的位置显示所述延伸标题栏的背景色,以使所述状态栏的位置和所述标题栏的位置显示效果一致,且同一套标题栏设置代码维护不同智能系统,节省了代码维护成本,且在所述智能系统上的显示效果相同,提高了用户体验。

附图说明

为了更清楚地说明本发明实施例的技术方案,下面将对实施例中所需要使用的附图作简单地介绍,应当理解,以下附图仅示出了本发明的某些实施例,因此不应被看作是对范围的限定,对于本领域普通技术人员来讲,在不付出创造性劳动的前提下,还可以根据这些附图获得其他相关的附图。

图1是本发明实施例提供的状态栏设置系统内的服务器和移动终端的交互图;

图2是本发明第一实施例提供的状态栏设置方法的步骤流程图;

图3是本发明第一实施例提供的状态栏设置方法的标题栏显示界面示意图;

图4是本发明第二实施例提供的状态栏设置装置的功能模块图;

图5是本发明第三实施例提供的状态栏设置方法的步骤流程图;

图6是本发明第四实施例提供的状态栏设置装置的功能模块图。

具体实施方式

鉴于此,本发明的设计者通过长期的探索和尝试,以及多次的实验和努力,不断的改革创新,得出本方案所示的状态栏设置方法和装置及应用响应方法和装置。

如图1所示,是本发明实施例提供的标题栏设置方法和装置所应用的移动终端100的方框示意图。所述移动终端100包括标题栏设置装置、存储器102、存储控制器103、处理器104、外设接口105、输入输出单元106、显示单元101。

所述存储器102、存储控制器103、处理器104、外设接口105、输入输出单元106、显示单元107,各元件相互之间直接或间接地电性连接,以实现数据的传输或交互。例如,这些元件相互之间可通过一条或多条通讯总线或信号线实现电性连接。所述标题栏设置装置包括至少一个可以软件或固件(firmware)的形式存储于所述存储器中或固化在所述移动终端100的操作系统(operatingsystem,os)中的软件功能模块。所述处理器104用于执行存储器102中存储的可执行模块,例如所述标题栏设置装置包括的软件功能模块或计算机程序。

其中,存储器102可以是,但不限于,随机存取存储器(randomaccessmemory,ram),只读存储器(readonlymemory,rom),可编程只读存储器(programmableread-onlymemory,prom),可擦除只读存储器(erasableprogrammableread-onlymemory,eprom),电可擦除只读存储器(electricerasableprogrammableread-onlymemory,eeprom)等。其中,存储器102用于存储程序,所述处理器104在接收到执行指令后,执行所述程序,后续本发明实施例任一实施例揭示的过程定义的移动终端100所执行的方法可以应用于处理器104中,或者由处理器104实现。

处理器104可能是一种集成电路芯片,具有信号的处理能力。上述的处理器可以是通用处理器,包括中央处理器(centralprocessingunit,简称cpu)、网络处理器(networkprocessor,简称np)等;还可以是数字信号处理器(dsp)、专用集成电路(asic)、现成可编程门阵列(fpga)或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件。可以实现或者执行本发明实施例中的公开的各方法、步骤及逻辑框图。通用处理器104可以是微处理器或者该处理器也可以是任何常规的处理器等。

所述外设接口105将各种输入输出单元106耦合至处理器104以及存储器102。在一些实施例中,外设接口,处理器以及存储控制器可以在单个芯片中实现。在其他一些实例中,他们可以分别由独立的芯片实现。

输入输出单元106用于提供给用户输入数据实现用户与数据采集终端的交互。所述输入输出单元可以是,但不限于,鼠标和键盘等。

显示单元101在所述移动终端与用户之间提供一个交互界面,例如用户操作界面,或用于显示图像数据给用户参考。在本实施例中,所述显示单元可以是液晶显示器或触控显示器。若为触控显示器,其可为支持单点和多点触控操作的电容式触控屏或电阻式触控屏等。支持单点和多点触控操作是指触控显示器能感应到来自该触控显示器上一个或多个位置处同时产生的触控操作,并将该感应到的触控操作交由处理器进行计算和处理。

请参见图2,为本发明第一实施例提供的标题栏设置方法的步骤流程图,应用于移动终端100的智能系统的标题栏设置。下面将对图2所示的步骤进行具体解释。

步骤s201,按照所述智能系统默认的标题栏设置标准,设置原始标题栏和延伸标题栏。

本实施例设置的智能系统的标题栏设置规则,设置所述移动终端的智能系统的标题栏,优选设置所述移动终端可以运行的安卓系统和ios系统的标题栏,其设置过程主要包括原始标题栏设置和延伸标题栏设置。其中,设置所述原始标题栏,即在所述智能系统的预定的标题栏位置设置原始标题栏及相关显示属性。设置所述延伸标题栏,即在所述智能系统的预定的状态栏位置设置延伸标题栏及相关显示属性,所述延伸标题栏的相关显示属性与所述原始标题栏一致,从而使得所述智能系统的预定的标题栏和状态栏的位置显示效果保持一致,以达到更好的显示效果。

根据预设的智能系统的标题栏设置标准,设置所述原始标题栏的过程可以为:在预定的标题栏的位置新建空白标题栏,设置所述空白标题栏的预设属性。其中,所述空白标题栏的预设属性可以包括背景色、字体布局和字体格式等。其具体设置过程可以为:

新建headbar.js,用于封装标题栏部分代码,整个标题栏通过<view>标签包裹,标题栏的设置代码可以为:<viewstyle={{backgroundcolor:‘#ff5722’,alignitems:‘center’,justifycontent:‘space-between’,height:55}}>。其中,backgroundcolor是设置标题栏的背景色,优选设置背景色颜色值为ff5722,alignitems:‘center’用于设置标题栏的字体布局,一般优选使标题栏内部控件水平居中。justifycontent:‘space-between’是设置标题栏内部控件的排布,当前排布方式为向两边排布。其预设属性的设置还可以包括:<textstyle={{fontsize:20,color:‘#fff’}}>标签,用于设置标题栏标题。fontsize是设置标题字体,当前设置的标题栏字体大小为20,color是设置标题颜色,当前设置的标题颜色为fff颜色值。通过上述预设属性的设置,即可实现对原始标题栏相关显示特性的设置。

根据预设的标题栏设置规则,在智能系统的预定的状态栏的位置设置延伸标题栏,并设置所述延伸标题栏的相关显示属性与所述原始标题栏显示属性相同,以使所述延伸标题栏与所述原始标题栏的显示状态保持一致。所述延伸标题栏的设置过程可以为:

在上述原始标题栏设置过程中的<view>标签内再新增一个<view>标签,设置<viewstyle={{backgroundcolor:‘#ff5722’,height:20}}>。可以得出,延伸标题栏的背景色backgroundcolor的颜色值是ff5722,同原始标题栏的背景色的颜色值是一致的,即可达到原始标题栏与延伸标题栏相同显示效果的目的。

考虑到所述延伸标题栏的设置目的是覆盖预定的状态栏的部分属性后优先于所述状态栏,以使所述状态栏显示所述延伸标题栏的部分特性,因此将所述延伸状态栏的设置位置同所述状态栏的位置相同。在当前的智能系统中,以所述智能系统的显示界面的上下顺序为正方向,所述预定的状态栏位置一般设置在原始标题栏位置的上边缘同所述显示界面的顶部边缘之间的区域,所述状态栏的高度一般为15mm-30mm,优选地,所述状态栏的高度为20mm。因此为了达到统一的覆盖显示效果,优选将所述延伸标题栏设置在所述原始标题栏的上边缘与当前显示界面顶部边缘之间的区域,设置所述延伸标题栏的高度同所述状态栏的高度保持一致。考虑到ios系统的状态栏的高度为20mm,标题栏为55mm,优选设置所述延伸标题栏的20mm,以使所述延伸标题栏能完全覆盖所述状态栏显示,而且能使得ios系统和安卓系统的状态栏均使用上述的view代替,以实现显示样式统一的效果。通过上述延伸标题栏的设置和预设属性的限定,达到了ios系统和安卓系统的显示效果相同,以及系统标题栏位置和状态栏位置显示效果相同的技术效果,进而达到显示样式的统一,且减少了代码冗余,提高程序维护效率和代码简洁性。

不同智能系统的状态栏和标题栏的显示属性不同,安卓系统的标题栏会默认在状态栏下方,使得所述状态栏的背景色等属性会优先于所述延伸标题蓝的背景色显示,而ios系统的标题栏会默认直接覆盖掉状态栏,因此所述ios系统的延伸标题栏的背景色会优先于所述状态栏的背景色显示。请参见图3,通过上述步骤设置所述智能系统的延伸标题栏(如图3中a所示)和原始标题栏(如图3中b所示)及其相关显示属性后,ios系统的标题栏显示效果已经达到预设的统一显示效果(如图3中1图所示),安卓系统的标题栏显示效果还未达到预设的统一显示效果(如图3中2所示),需要通过针对安卓系统进行修正,以达到预设的统一显示效果。

步骤s202,当所述智能系统为安卓系统时,在所述状态栏的位置显示所述延伸标题栏的背景色。

依据上述步骤完成所述原始标题栏和预设标题栏的设置操作后,针对安卓系统还需要显示修正操作。判断当前智能系统是否为安卓系统,如果当前智能系统为安卓系统,则在所述状态栏位置显示所述延伸标题栏,如果当前智能系统为ios系统,则所述ios系统的标题栏设置操作已经完成,可以结束此次标题栏设置操作。本发明相关实施例仅例举了针对安卓系统和ios系统的不同设置,其他智能系统的类似设置过程也可参见本发明的相关实施例,在此不做限定。

判断当前智能系统是否为安卓系统的方式可以有多种,可以直接根据预设的智能系统的标识符判断当前智能系统是否为安卓系统,也可以通过安卓系统与ios系统的某些区别属性来判断。在一种实施方式中,所述安卓系统的标识符为1,ios系统的标识符为0,则获取当前的智能系统的标识符,并判断是否为1,若是,则判定当前智能系统为安卓系统,否则判定为非安卓系统。

在其他实施方式中,考虑到安卓系统的状态栏存在沉浸模式,而ios系统的状态栏不存在沉浸模式,因此可以判断所述智能系统的所述状态栏是否存在沉浸模式,若是则判定所述智能系统为安卓系统,若否则判定所述智能系统为ios系统。其他能判定智能系统为安卓系统或者ios系统的方式均可适用于本实施例,在此不做限定。

针对安卓系统的状态栏位置的显示修正操作中,为了实现在所述安卓系统的状态栏的位置显示所述延伸标题栏,可以将所述状态栏的背景色设置为透明色,开启所述状态栏的沉浸模式,以使所述状态栏退到下一层,使得在所述状态栏位置的所述延伸标题栏的背景色优先显示。其设置过程可以为:

在整个标题栏布局上方继续加入针对安卓系统的状态栏布局代码<statusbarbackgroundcolor=’#00000000’translucent={true}>。其中,statusbar是状态栏样式,backgroundcolor=’#00000000’是让状态栏的背景色为透明色,translucent={true}是让安卓系统的状态栏开启沉浸模式,则所述延伸标题栏的背景色就会覆盖掉状态栏的背景色显示,以使所述状态栏位置显示所述延伸标题栏的背景色,使得所述状态栏位置与所述标题栏位置的背景色显示效果一致(如图3中1所示)。

上述本发明实施例提供的标题栏设置方法,应用于移动终端的智能系统的标题栏设置,可以设置应用安卓系统和ios系统的标题栏设置。首先根据智能系统默认的标题栏设置标准,在智能系统的预定的标题栏位置设置原始标题栏,在预设的状态栏位置设置延伸标题栏。在设置过程中,将所述延伸标题栏的位置设置在所述智能系统的预定的状态栏的位置,并且所述原始标题栏的背景色和所述延伸标题栏的背景色被设置为相同,以使所述原始标题栏的背景色显示效果与所述延伸标题栏的背景色显示效果相同。针对所述延伸标题栏的位置被设置为与所述状态栏的位置相同,则对应ios系统来说,所述智能系统的标题栏与所述状态栏的背景色显示效果均相同。由于安卓系统状态栏的沉浸属性,延伸标题栏会在状态栏的下方,因此当所述智能系统为安卓系统时,通过状态栏沉浸模式等方式,在所述状态栏的位置显示所述延伸标题栏的背景色,以使所述状态栏的位置和所述标题栏的位置显示效果一致,且同一套标题栏设置代码维护不同智能系统,节省了代码维护成本,且在所述智能系统上的显示效果相同,提高了用户体验。

请参见图4,为本发明第二实施例提供的标题栏设置装置400的功能模块图,所述标题栏设置装置400应用于移动终端的智能系统的标题栏设置。所述标题栏设置装置400包括:设置模块401和显示模块402。

设置模块401,用于按照所述智能系统默认的标题栏设置标准,设置原始标题栏和延伸标题栏,其中,所述原始标题栏与所述延伸标题栏的背景色被设置为相同,所述延伸标题栏的位置被设置为与所述智能系统的状态栏的状态一致;

显示模块402,用于当所述智能系统为安卓系统时,在所述状态栏的位置显示所述延伸标题栏的背景色。

上述本发明实施例提供的标题栏设置装置,应用于移动终端的智能系统的标题栏设置,可以设置应用安卓系统和ios系统的标题栏设置。首先根据智能系统默认的标题栏设置标准,在智能系统的预定的标题栏位置设置原始标题栏,在预设的状态栏位置设置延伸标题栏。在设置过程中,将所述延伸标题栏的位置设置在所述智能系统的预定的状态栏的位置,并且所述原始标题栏的背景色和所述延伸标题栏的背景色被设置为相同,以使所述原始标题栏的背景色显示效果与所述延伸标题栏的背景色显示效果相同。针对所述延伸标题栏的位置被设置为与所述状态栏的位置相同,则对应ios系统来说,所述智能系统的标题栏与所述状态栏的背景色显示效果均相同。由于安卓系统状态栏的沉浸属性,延伸标题栏会在状态栏的下方,因此当所述智能系统为安卓系统时,通过状态栏沉浸模式等方式,在所述状态栏的位置显示所述延伸标题栏的背景色,以使所述状态栏的位置和所述标题栏的位置显示效果一致,且同一套标题栏设置代码维护不同智能系统,节省了代码维护成本,且在所述智能系统上的显示效果相同,提高了用户体验。本发明实施例提供的标题栏设置装置的具体实施过程请参见上述方法实施例,在此不再一一赘述。

请参见图5,为本发明第三实施例提供的标题栏设置方法,应用于ios系统的标题栏设置。下面将结合图5,对本发明实施例提供的标题栏设置方法进行具体解释。

步骤s501,根据所述ios系统默认的标题栏设置标准,设置所述ios系统的原始标题栏。

根据ios系统的标题栏设置标准,在所述ios系统的预定的标题栏位置设置原始标题栏及相关显示属性。设置所述原始标题栏的过程可以为:在预定的标题栏的位置新建空白标题栏,设置所述空白标题栏的预设属性。其中,所述空白标题栏的预设属性可以包括背景色、字体布局和字体格式等。

步骤s502,设置延伸标题栏,其中,所述延伸标题栏与所述原始标题栏的背景色被设置为相同,所述延伸标题栏的位置被设置为与所述ios系统的状态栏的位置一致。

根据预设的标题栏设置规则,在ios系统的预定的状态栏的位置设置延伸标题栏,并设置所述延伸标题栏的相关显示属性与所述原始标题栏显示属性相同,以使所述延伸标题栏与所述原始标题栏的显示状态保持一致。

考虑到所述延伸标题栏的设置目的是覆盖预定的状态栏的部分属性后优先于所述状态栏,以使所述状态栏显示所述延伸标题栏的部分特性,因此将所述延伸状态栏的设置位置同所述状态栏的位置相同。在当前的智能系统中,以所述智能系统的显示界面的上下顺序为正方向,所述预定的状态栏位置一般设置在原始标题栏位置的上边缘同所述显示界面的顶部边缘之间的区域,所述状态栏的高度一般为20mm。因此为了达到统一的覆盖显示效果,优选将所述延伸标题栏设置在所述原始标题栏的上边缘与当前显示界面顶部边缘之间的区域,设置所述延伸标题栏的高度同所述状态栏的高度保持一致。考虑到ios系统的状态栏的高度为20mm,优选设置所述延伸标题栏的20mm,以使所述延伸标题栏能完全覆盖所述状态栏显示,而且能使得ios系统和安卓系统的状态栏均使用上述的view代替,以实现显示样式统一的效果。

上述本发明实施例提供的标题栏设置方法,应用于移动终端的ios系统的标题栏设置,可以设置应用ios系统的标题栏设置。首先根据ios系统默认的标题栏设置标准,在预定的标题栏位置设置原始标题栏,在预设的状态栏位置设置延伸标题栏。在设置过程中,将所述延伸标题栏的位置设置在所述智能系统的预定的状态栏的位置,并且所述原始标题栏的背景色和所述延伸标题栏的背景色被设置为相同,以使所述原始标题栏的背景色显示效果与所述延伸标题栏的背景色显示效果相同。针对所述延伸标题栏的位置被设置为与所述状态栏的位置相同,则对应ios系统来说,所述智能系统的标题栏与所述状态栏的背景色显示效果均相同。通过上述延伸标题栏的设置和预设属性的限定,达到了ios系统的标题栏位置和状态栏位置显示效果相同的技术效果,进而达到显示样式的统一,且减少了代码冗余,提高程序维护效率和代码简洁性。本发明实施例提供的对应ios系统的标题栏设置方法的具体实施过程请参见上述实施例,在此不再一一赘述。

请参见图6,为本发明第四实施例提供的标题栏设置装置600的功能模块图,应用于ios系统的标题栏设置,所述标题栏设置装置600包括:原始标题栏设置模块601和延伸标题栏设置模块602。

原始标题栏设置模块601,用于根据所述ios系统默认的标题栏设置标准,设置所述ios系统的原始标题栏;

延伸标题栏设置模块602,用于设置延伸标题栏,其中,所述延伸标题栏与所述原始标题栏的背景色被设置为相同,所述延伸标题栏的位置被设置为与所述ios系统的状态栏的位置一致。

上述本发明实施例提供的标题栏设置装置,应用于移动终端的ios系统的标题栏设置,可以设置应用ios系统的标题栏设置。首先根据ios系统默认的标题栏设置标准,在预定的标题栏位置设置原始标题栏,在预设的状态栏位置设置延伸标题栏。在设置过程中,将所述延伸标题栏的位置设置在所述智能系统的预定的状态栏的位置,并且所述原始标题栏的背景色和所述延伸标题栏的背景色被设置为相同,以使所述原始标题栏的背景色显示效果与所述延伸标题栏的背景色显示效果相同。针对所述延伸标题栏的位置被设置为与所述状态栏的位置相同,则对应ios系统来说,所述智能系统的标题栏与所述状态栏的背景色显示效果均相同。通过上述延伸标题栏的设置和预设属性的限定,达到了ios系统的标题栏位置和状态栏位置显示效果相同的技术效果,进而达到显示样式的统一,且减少了代码冗余,提高程序维护效率和代码简洁性。本发明实施例提供的对应ios系统的标题栏设置方法的具体实施过程请参见上述实施例,在此不再一一赘述。

以上仅为本发明的优选实施例而已,不用于限制本发明,对于本领域的技术人员来说,可以有各种更改和变化。凡在本发明的精神和原则之内,所作的任何修改、等同替换、改进等,均应包含在本发明的保护范围之内。

当前第1页1 2 
网友询问留言 已有0条留言
  • 还没有人留言评论。精彩留言会获得点赞!
1