CN113515338A - Ui界面的布局方法、显示终端及存储介质 - Google Patents
Ui界面的布局方法、显示终端及存储介质 Download PDFInfo
- Publication number
- CN113515338A CN113515338A CN202110754220.3A CN202110754220A CN113515338A CN 113515338 A CN113515338 A CN 113515338A CN 202110754220 A CN202110754220 A CN 202110754220A CN 113515338 A CN113515338 A CN 113515338A
- Authority
- CN
- China
- Prior art keywords
- layout
- mode
- interface
- language
- ltr
- 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.)
- Pending
Links
- 238000000034 method Methods 0.000 title claims abstract description 55
- 238000004590 computer program Methods 0.000 claims description 7
- 230000003044 adaptive effect Effects 0.000 abstract description 3
- 238000010586 diagram Methods 0.000 description 9
- 230000008569 process Effects 0.000 description 9
- 230000006978 adaptation Effects 0.000 description 6
- 230000000694 effects Effects 0.000 description 6
- 230000006870 function Effects 0.000 description 6
- 238000004891 communication Methods 0.000 description 4
- 238000013519 translation Methods 0.000 description 4
- 230000008859 change Effects 0.000 description 3
- 238000006243 chemical reaction Methods 0.000 description 2
- 229910017052 cobalt Inorganic materials 0.000 description 2
- 239000010941 cobalt Substances 0.000 description 2
- GUTLYIVDDKVIGB-UHFFFAOYSA-N cobalt atom Chemical compound [Co] GUTLYIVDDKVIGB-UHFFFAOYSA-N 0.000 description 2
- 230000004048 modification Effects 0.000 description 2
- 238000012986 modification Methods 0.000 description 2
- 230000002159 abnormal effect Effects 0.000 description 1
- 230000006399 behavior Effects 0.000 description 1
- 229910002056 binary alloy Inorganic materials 0.000 description 1
- 238000005516 engineering process Methods 0.000 description 1
- 238000009434 installation Methods 0.000 description 1
- 230000003287 optical effect Effects 0.000 description 1
- 238000012545 processing Methods 0.000 description 1
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
- G06F9/454—Multi-language systems; Localisation; Internationalisation
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
本发明公开了一种UI界面的布局方法、显示终端及存储介质。其中,该方法包括:获取UI界面当前设置的系统语言;从预存关联数据表中确定与所述系统语言关联的UI全局的文本编码方式,文本编码方式包括从右到左RTL语言的文本编码方式、以及从左到右LTR语言的文本编码方式;判断所述文本编码方式是否与UI全局的布局方式匹配,所述布局方式包括RTL语言的RTL布局方式和LTR语言的LTR布局方式;若文本编码方式与所述布局方式不匹配,则根据文本编码方式对所述布局方式进行调整。本发明能将UI界面的布局方式自动调整为与当前系统语言适配的布局方式,从而提高显示终端调整UI界面布局的智能性。
Description
技术领域
本发明涉及显示技术领域,尤其涉及一种UI界面的布局方法、显示终端及存储介质。
背景技术
目前智能电视需要满足用户日益增长的需求,对于用户操作界面来说,功能更加丰富也更为复杂。为了方便使用不同语言的用户的使用,智能电视的UI(User Interface,用户界面)显示界面需要按照两种不同的布局方式进行显示,其可以按照从左向右的布局方式进行显示,也可以按照从右向左的布局方式进行显示。例如,当智能电视使用的系统语言从LTR(Left to Right,从左到右)语言改变为RTL(Right to Left,从右到左)语言时,需要将智能电视的UI界面中需要显示的字符、图片以及控件等的布局方式进行调整,即将从左到右的布局方式修改为从右到左的布局方式。
但是,在实际应用中,当智能电视当前使用的系统语言发生变化时,现有的智能电视无法自动将UI界面的布局方式调整为该系统语言适配的布局方式,例如该系统语言从LTR语言改变为RTL语言时,布局方式无法自动进行相应的调整,严重影响用户的体验。
发明内容
本发明实施例提供一种UI界面的布局方法、显示终端及存储介质,旨在提高显示终端调整UI界面布局的智能性。
为实现上述目的,本发明提供一种UI界面的布局方法,该方法包括:
获取UI界面当前设置的系统语言;
从预存关联数据表中确定与所述系统语言关联的UI全局的文本编码方式,其中,所述文本编码方式包括从右到左RTL语言的文本编码方式、以及从左到右LTR语言的文本编码方式;
判断所述文本编码方式是否与当前UI全局的布局方式匹配,其中,所述布局方式包括RTL语言的RTL布局方式和LTR语言的LTR布局方式;
若所述文本编码方式与所述布局方式不匹配,则根据所述文本编码方式对所述布局方式进行调整。
可选地,所述根据所述文本编码方式对所述布局方式进行调整的步骤之后,包括:
对当前UI全局的左右键键值进行镜像配置。
可选地,所述对当前UI全局的左右键键值进行镜像配置的步骤之后包括:
判断所述布局方式是否为所述RTL布局方式;
若所述布局方式为所述RTL布局方式,则分别识别当前UI全局中各子模块是否属于通用UI模块;
将当前UI全局中属于通用UI模块的子模块的布局方式,调整为所述LTR布局方式。
可选地,所述将当前UI全局中属于通用UI模块的子模块的布局方式,调整为所述LTR布局方式的步骤之后包括:
将当前UI全局中属于通用UI模块的子模块的左右键键值,再次进行镜像配置。
可选地,所述通用UI模块包括播放器、软键盘、图标、阿拉伯数字和进度条。
可选地,所述根据所述文本编码方式对所述布局方式进行调整的步骤包括:
若所述文本编码方式为从右到左RTL语言的编码方式,则调整所述布局方式为所述RTL布局方式;
若所述文本编码方式为从左到右LTR语言的编码方式,则调整所述布局方式为所述LTR布局方式。
可选地,所述获取UI界面当前设置的系统语言的步骤包括:
当UI界面进行初始化时,调用预设接口从显示终端系统中获取UI界面当前设置的系统语言。
可选地,该方法还包括:
当接收系统语言切换指令时,根据所述系统语言切换指令更新UI界面当前设置的系统语言,并执行:所述获取UI界面当前设置的系统语言的步骤。
本发明还提供了一种显示终端,包括存储器、处理器、以及存储在所述存储器上并可在所述处理器上运行的计算机程序,所述计算机程序被处理器执行时实现如上述中任一项所述UI界面的布局方法的步骤。
本发明还提供了一种存储介质,所述存储介质上存储有计算机程序,所述计算机程序被处理器执行时实现如上述中任一项所述UI界面的布局方法的步骤。
本发明通过获取UI界面当前设置的系统语言,从预存关联数据表中确定与所述系统语言关联的UI全局的文本编码方式的步骤,确定与该系统语言对应的文本编码方式,再进一步通过判断所述文本编码方式是否与当前UI全局的布局方式匹配,若所述文本编码方式与所述布局方式不匹配,则根据所述文本编码方式对所述布局方式进行调整的步骤,来确定与该系统语言相适配的布局方式,以对UI界面的布局进行自动调整,从而提高了显示终端调整UI界面布局的智能性,同时UI界面的布局也符合了使用不同语言的用户的阅读习惯,提高了用户体验。
附图说明
图1是本发明实施例UI界面的布局方法的显示终端的结构示意图;
图2为本发明UI界面的布局方法第一实施例的流程示意图;
图3为本发明UI界面的布局方法第二实施例的流程示意图;
图4为本发明第一实施例中系统语言为英文的UI界面示意图;
图5为本发明基于第一实施例,系统语言从英文切换为阿拉伯文的UI界面示意图;
图6为本发明第二实施例中系统语言为阿拉伯文的UI界面示意图;
图7为本发明第三实施例中系统语言为阿拉伯文的UI界面示意图;
图8为本发明一实施例的LTR语言转换为RTL语言的字符对比示意图;
图9为本发明实施例一中基于WebOS进行镜像操作的流程示意图
本发明目的的实现、功能特点及优点将结合实施例,参照附图做进一步说明。
具体实施方式
应当理解,此处所描述的具体实施例仅仅用以解释本发明,并不用于限定本发明。
本领域技术人员可以理解的,本发明UI界面的布局方法的实施例中的实施主体可以是显示终端,例如电视机、平板电脑、笔记本电脑、掌上电脑、手机等显示终端,也可以是其他任何可实现本发明UI界面的布局方法的装置,OLED屏修复的装置可以是安装于计算机、平板电脑、手机等显示终端中,也可以独立于上述显示终端,仅与上述显示终端进行通信连接,或者是其他任何适用的安装和使用方式,本发明UI界面的布局方法的实施例中优选显示终端作为实施主体。
如图1所示,图1是本发明实施例方案涉及的硬件运行环境的显示终端结构示意图。
本发明实施例显示终端可以是PC,也可以是智能手机、平板电脑、电子书阅读器、便携计算机等具有显示功能的可移动式显示终端设备。如图1所示,该显示终端可以包括:处理器1001,例如CPU,网络接口1004,用户接口1003,存储器1005,通信总线1002。其中,通信总线1002用于实现这些组件之间的连接通信。用户接口1003可以包括显示屏(Display)、输入单元比如键盘(Keyboard),可选用户接口1003还可以包括标准的有线接口、无线接口。网络接口1004可选的可以包括标准的有线接口、无线接口(如WI-FI接口)。存储器1005可以是高速RAM存储器,也可以是稳定的存储器(non-volatile memory),例如磁盘存储器。存储器1005可选的还可以是独立于前述处理器1001的存储装置。可选地,显示终端还可以包括显示屏、摄像头、RF(Radio Frequency,射频)电路,传感器、音频电路、WiFi模块等等。
全世界大部分的国家以及地区的语言是LTR(Left to Right,从左到右)语言,然而其中免不了有“反常态”的语种,比如:阿拉伯语、波斯语、希伯来语等RTL(Right toLeft,从右到左)语言。使用不同语言的用户的阅读习惯可能不同,例如,使用英语和汉语等LTR语言的用户的书写和阅读习惯都是从左至右,文本左对齐,而使用阿拉伯语、波斯语和希伯来语等RTL语言书写和阅读习惯都是从右至左,文本右对齐。在一实施例中,如图8所示,LTR语言中的中文和英文与RTL语言中的阿拉伯文对比。为了方便使用不同语言的用户的使用,UI界面需要按照不同的布局方向进行显示,其可以按照从左向右的布局方向进行显示,也可以按照从右向左的布局方向进行显示。而当显示终端的系统中配置的系统语言发生变化时,如使用的系统语言从LTR语言改变为RTL语言时,界面布局往往进行相应的转换,而重新编写代码的方式会造成时间成本、人力成本的浪费。
在实际应用中,当智能电视当前使用的系统语言发生变化时,现有的智能电视无法自动将UI界面的布局方式调整为该系统语言适配的布局方式,例如该系统语言从LTR语言改变为RTL语言时,布局方式无法自动进行相应的调整,严重影响用户的体验。
对此,本发明提出一种UI界面的布局方法。
参照图2,图2为本发明UI界面的布局方法第一实施例的流程示意图。
步骤S100,获取UI界面当前设置的系统语言;
其中,该系统语言可以为世界各国官方语言中的任意一种语言,例如:中文、英文、法文、俄文或阿拉伯文等。
进一步地,所述步骤S100包括:当UI界面进行初始化时,调用预设接口从显示终端系统中获取UI界面当前设置的系统语言。
可以理解的是,显示终端在开机时,或显示终端在接收系统语言切换指令时,UI界面会进入初始化进程。
其中,可通过使用遥控器打开显示终端,UI界面进入初始化进程,并通过调用预设接口获取UI界面当前设置的系统语言。
步骤S200,从预存关联数据表中确定与所述系统语言关联的UI全局的文本编码方式;
需要说明的是,所述文本编码方式包括从右到左RTL语言的文本编码方式、以及从左到右LTR语言的文本编码方式。该预存关联数据表为本领域技术人员预存于显示终端系统中,系统语言与文本编码方式关联的数据表。可以理解的是,RTL语言代表阅读顺序为由右往左的语言,例如阿拉伯文、希伯来文和波斯文等。LTR语言代表阅读顺序为由左往右的语言,例如中文、英文、法文和俄文等。
其中,文本编码可代表一种建立字符和二进制的关系时制定的编码规范,用于表示不同语言的字符,不同语言可对应不同的文本编码方式,常见的文本编码包括Unicode、ASCII、GBK、GB2312和UTF-8等。
步骤S300,判断所述文本编码方式是否与当前UI全局的布局方式匹配;
可以理解的是,所述布局方式包括RTL语言的RTL布局方式和LTR语言的LTR布局方式。
其中,若所述文本编码方式为从右到左RTL语言的编码方式,且当前UI全局的布局方式为RTL布局方式,则确定所述文本编码方式与当前UI全局的布局方式匹配。
若所述文本编码方式为从左到右LTR语言的编码方式,且当前UI全局的布局方式为LTR布局方式,则确定所述文本编码方式与当前UI全局的布局方式匹配。
若所述文本编码方式为从右到左RTL语言的编码方式,且当前UI全局的布局方式为LTR布局方式,则确定所述文本编码方式与当前UI全局的布局方式不匹配。
若所述文本编码方式为从左到右LTR语言的编码方式,且当前UI全局的布局方式为RTL布局方式,则确定所述文本编码方式与当前UI全局的布局方式不匹配。
步骤S400,若所述文本编码方式与所述布局方式不匹配,则根据所述文本编码方式对所述布局方式进行调整。
其中,若所述文本编码方式为从右到左RTL语言的编码方式,则调整所述布局方式为所述RTL布局方式;若所述文本编码方式为从左到右LTR语言的编码方式,则调整所述布局方式为所述LTR布局方式。
需要说明的是,对UI界面的布局方式进行调整可包括UI界面的字符、图片以及控件等。
进一步的,若所述文本编码方式与所述布局方式不匹配,则根据所述文本编码方式和类选择器对所述布局方式进行调整。
其中,通过文本编码方式对UI界面的字符等进行调整,通过类选择器对UI界面的图片和控件等进行调整。
可以理解的是,一般情况下,对UI界面的字符、图片和控件的调整为位置的镜像调整。
通过文本编码方式对UI界面的字符等进行调整的一实施例中,显示终端的处理器在识别若所述文本编码方式与所述布局方式不匹配时,对UI界面的字符进行位置镜像,其中,可通过在系统中的html标签上的增加dir="rtl"属性,实现对UI界面的字符完成位置镜像。
通过类选择器对UI界面的图片和控件等进行调整的一实施例中,该类选择器包括用于适配LTR的绝对定位和适配RTL的绝对定位。如果当前UI界面上的图片或控件为LTR布局方式,则类选择器选择使用适配RTL的绝对定位,以完成UI界面上图片或控件的位置镜像。如果当前UI界面上的图片或控件为RTL布局方式,则类选择器选择使用适配LTR的绝对定位,以完成UI界面上图片或控件的位置镜像。
本实施例通过使用串联选择器选择适配UI界面不同系统语言的图片或控件的布局方式。
进一步地,所述步骤S400之后包括:对当前UI全局的左右键键值进行镜像配置。
在本发明实施例中,当对UI全局的布局方式进行调整后,左右键键值如果没有镜像配置,此时,左右键的遥控方向将是相反的,例如:遥控器上按左键控制UI的焦点左移,焦点实际上向右移动,遥控器上按右键移动UI的焦点右移,焦点实际上向左移动,因此需对左右键键值键值做镜像调整。在步骤S400之后,本实施例通过左右键键值颠倒的镜像方式修改键值配置数据,以使遥控器或显示终端上的的控制按钮能与该控制按钮对应的操控功能匹配。
进一步地,本发明实施例UI界面的布局方法还包括:当接收系统语言切换指令时,根据所述系统语言切换指令更新UI界面当前设置的系统语言,并执行所述步骤S100。
其中,在用户使用显示终端的过程中,如果不习惯使用UI界面当前应用的系统语言,用户可以通过操控遥控器或显示终端上的控制按钮对UI界面当前设置的系统语言进行更改。
需要说明的是,系统语言切换指令应该至少包括:UI界面需要切换的系统语言的信息。例如UI界面当前的系统语言为中文,用户通过操控遥控器或显示终端上的控制按钮等输出系统语言切换指令时,该系统语言切换指令包括了UI界面需要切换的系统语言为阿拉伯文,则当接收该系统语言切换指令时,根据该系统语言切换指令将UI界面当前设置的系统语言中文更新为阿拉伯文。
本实施例通过当接收系统语言切换指令时,根据所述系统语言切换指令更新UI界面当前设置的系统语言,并执行所述步骤S100的步骤,便于使用不同语言的用户更换显示终端中系统配置的系统语言,并且,当用户通过操控遥控器或显示终端上的控制按钮切换系统语言时,能通过与系统语言适配的布局方式实时地将当前UI界面自动调整成符合用户阅读习惯的UI界面,从而兼容不同国家/地区的语言使用背景,提供了符合用户行为习惯的产品体验,同时使用户在使用显示终端过程中,能够享受到产品的专业化、全球化技术服务。
进一步地,可将翻译好的各国语言的文本进行国际化配置,也就是为每中系统语言的文本数据转换成一个对应json文件,json文件并为每一条翻译文本配置一个自定义字符串作为id。然后使用国际化配置工具中的相关方法通过id值进行绑定翻译结果,当接收系统语言切换指令时,翻译内容则切换到对应的json文件,并根据绑定的id值转换为系统语言对应的显示文本,从而实现各种语言的显示文本的快速切换效果。
本实施例通过获取UI界面当前设置的系统语言,从预存关联数据表中确定与所述系统语言关联的UI全局的文本编码方式的步骤,确定与该系统语言对应的文本编码方式,再进一步通过判断所述文本编码方式是否与当前UI全局的布局方式匹配,若所述文本编码方式与所述布局方式不匹配,则根据所述文本编码方式对所述布局方式进行调整的步骤,来确定与该系统语言相适配的布局方式,以对UI界面的布局进行自动调整,从而提高显示终端调整UI界面布局的智能性,同时UI界面的布局也符合了使用不同语言的用户的阅读习惯,提高了用户体验。
本实施例通过从预存关联数据表中确定与所述系统语言关联的UI全局的文本编码方式其中,所述文本编码方式包括从右到左RTL语言的文本编码方式、以及从左到右LTR语言的文本编码方式,再进一步通过判断所述文本编码方式是否与当前UI全局的布局方式匹配,若所述文本编码方式与所述布局方式不匹配,则根据所述文本编码方式对所述布局方式进行调整的步骤,无需技术人员编写多套与系统语言对应的页面布局代码,减少了技术人员的工作量,且在用户更换显示终端系统配置的系统语言而需调整UI界面的布局时,无需重新加载与系统语言对应的页面布局代码,从而减少加载页面的时间,提高用户体验。
进一步地,参照图3,为本发明UI界面的布局方法第二实施例流程示意图,基于上述实施例,所述对当前UI全局的左右键键值进行镜像配置的步骤之后还包括:
步骤S500,判断所述布局方式是否为所述RTL布局方式;
步骤S600,若所述布局方式为所述RTL布局方式,则分别识别当前UI全局中各子模块是否属于通用UI模块;
步骤S700,将当前UI全局中属于通用UI模块的子模块的布局方式,调整为所述LTR布局方式。
需要说明的是,UI全局包括UI界面的所有子模块。而UI界面中的子模块可能包括一些通用UI模块,该通用UI模块包括播放器、软键盘、图标、英文通用缩写、阿拉伯数字和进度条等。该通用UI模块在世界各地都是符合LTR语言的LTR布局方式,而如果直接通过对UI全局的布局进行位置的镜像调整,将UI全局的布局方式变更为RTL语言的RTL布局方式,那么也会将该通用UI模块统一完成了位置的镜像调整,以使UI界面中通用UI模块的布局错乱,严重影响用户的阅读体验。
如图4为一实施例的英文(LTR语言)的布局方式的UI界面示意图。图5为图4的UI界面转换到阿拉伯文(RTL语言)的布局方式的UI界面示意图。其中并非所有的子模块都需要镜像,因为有些元素本身就已经符合全世界各国的阅读习惯,如图标、阿拉伯数字、英文和进度条等国际通用的元素无需镜像。如图4所示,需将该UI界面的系统语言从英文切换为阿拉伯文,由于该UI界面中存在进度条和阿拉伯数字,属于通用UI模块。通过在对UI全局的位置进行镜像调整后,再通过结合本实施例的步骤S500、步骤S600和步骤S700,可实现系统语言从英文(LTR语言)到阿拉伯文(RTL语言)的UI界面的转换,转换后UI界面的布局版本效果,如图5所示,进度条和阿拉伯数字的子模块本身并没有进行位置镜像。
在一具体实施例中,可通过类选择器将通用UI模块的图片或控件设置为LTR布局,通用UI模块的控件包括播放器和软键盘等,通用UI模块的图片包括图标等。例如,UI界面中存在软键盘,属于通用UI模块。若未通过类选择器将该通用UI模块设置为LTR布局,则软键盘的版本效果,请参照图6。而若通过类选择器将该通用UI模块设置为LTR布局,则软键盘的版本效果,请参照图7。
在一具体实施例中,UI界面的所有子模块统一发生了位置镜像,但由于并非UI界面的所有子模块都需要位置镜像,所以需要针对性的对UI界面局部的子模块(通用UI模块)做调整适配。
本实施例通过定义遥控器左右键键值镜像配置方法,避免遥控方向错误问题。通过判断所述布局方式是否为所述RTL布局方式;若所述布局方式为所述RTL布局方式,则分别识别当前UI全局中各子模块是否属于通用UI模块;将当前UI全局中属于通用UI模块的子模块的布局方式,调整为所述LTR布局方式的步骤,从而提高布局UI界面中各子模块的准确性和鲁棒性,进而提升用户的使用体验。
进一步地,所述步骤S700之后包括:将当前UI全局中属于通用UI模块的子模块的左右键键值,再次进行镜像配置。
可以理解的是,由于之前对UI全局进行镜像调整时,已经对UI界面的所有子模块进行了左右键键值的镜像配置,而当将UI全局中属于通用UI模块的子模块,从RTL布局方式调整为LTR布局方式时,对应的左右键键值也应随之更新,本实施例通过在所述步骤S700进行将当前UI全局中属于通用UI模块的子模块的左右键键值,再次进行镜像配置的步骤,从而使得遥控器或显示终端上的控制按钮能匹配与该控制按钮对应的操控功能。
为了便于充分理解本发明,本发明下面列举实施例一,下述实施例一中阐述了很多具体细节以便于充分理解本发明。但是本发明能够以很多不同于在此描述的其它方式来实施,本领域技术人员可以在不违背本发明内涵的情况下做类似推广,因此本发明不受实施例一的限制。
实施例一:请参照图9,图9为本发明实施例一中基于WebOS(Palm webOS,嵌入式操作系统)进行镜像操作的流程示意图。使用遥控器并按Power键开机将自动打开Cobalt浏览器,等待WebOS启动并初始化完成后,通过调用接口获取当前系统语言。如果系统语言为阿拉伯语、波斯语或希伯来语等RTL语言,则在显示终端系统的html标签上增加dir="rtl"属性,对UI全局的文本进行镜像调整,如果存在UI界面的子模块的布局方式为通用UI模块,即该子模块为LTR语言的LTR布局方式,则需要强制在该子模块的div标签上设置dir="ltr"属性来达到无需镜像的目的。
若遥控器切换UI界面的系统语言,将阿拉伯文等RTL语言切换为中文等LTR语言时,则在显示终端系统的html标签上移除dir="rtl",文本则去除了镜像效果。将中文等LTR语言切换为阿拉伯文等RTL语言时,UI全局需进行镜像翻转,则又在显示终端系统的html标签上增加dir="rtl",文本则又恢复了镜像效果,而在UI界面的局部属于通用UI模块的某些子模块则无需镜像调整,此时通过在该子模块的div标签上增加dir="ltr"属性,实现强制限制该子模块为LTR语言的LTR布局方式。
当显示终端系统的html标签中增加dir="rtl"属性后,由于并非全部UI布局都需要位置镜像,所以需要针对性的对局部模块做调整适配。如图6,其中阿拉伯数字软键盘进行了位置镜像翻转,不符合标准的阅读习惯,造成了较差的用户体验,该阿拉伯数字软键盘应该是LTR的布局方式,通过在该阿拉伯数字软键盘的div标签上强制设置dir="ltr"属性就可以实现如图7的布局。
而在CSS样式控制上则直接使用默认的CSS样式,由于该阿拉伯数字软键盘不需要镜像,因此遥控器的左右键键值也应再次镜像配置,以返回默认的键值配置。
为了改动最小、同时适配方案最优,在适配过程中通过使用CSS串联选择器,即一个标签使用两个类选择器来控制实现。第一个类选择器为左右布局通用的样式,例如字体或图片的大小、透明度和背景颜色等,第二个类选择器则用于切换UI界面各子模块的布局方式使用,第二个类选择器包括用于适配LTR绝对定位和用于适配RTL绝对定位。在UI界面各子模块的布局方式选择过程中,如果当前UI界面的子模块是绝对定位,则增加并使用第二个类选择器。如果UI界面的子模块需要镜像,则通过使用第二个类选择器控制该子模块进行位置镜像,并且同时相应进行左右键键值镜像配置。
本实施例解决了基于轻量级的Cobalt浏览器上运行WebOS的UI镜像的适配问题,实现了绝对定位的UI界面的各子模块的位置镜像、文本排版以及阅读方向镜像和左右键键值的镜像配置。并且要在不影响原来的技术方案基础上解决这些问题,通过了解RTL的国家/地区的文本阅读习惯并结合当地的习俗,然后做出最优的技术处理方案。该技术方案便于快速适配,同时改动量相对较小。
本发明还提出一种存储介质,其上存储有计算机程序。所述计算机存储介质可以是图1的显示终端中的存储器02,也可以是如ROM(Read-OnlyMemory,只读存储器)/RAM(Random Access Memory,随机存取存储器)、磁碟、光盘中的至少一种,所述存储介质包括若干信息用以使得显示终端执行本发明各个实施例所述的方法。
本发明存储介质的具体实施例与上述UI界面的布局方法各实施例基本相同,在此不作赘述。
需要说明的是,在本文中,术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含,从而使得包括一系列要素的过程、方法、物品或者系统不仅包括那些要素,而且还包括没有明确列出的其他要素,或者是还包括为这种过程、方法、物品或者系统所固有的要素。在没有更多限制的情况下,由语句“包括一个……”限定的要素,并不排除在包括该要素的过程、方法、物品或者系统中还存在另外的相同要素。
上述本发明实施例序号仅仅为了描述,不代表实施例的优劣。
通过以上的实施方式的描述,本领域的技术人员可以清楚地了解到上述实施例方法可借助软件加必需的通用硬件平台的方式来实现,当然也可以通过硬件,但很多情况下前者是更佳的实施方式。
以上仅为本发明的优选实施例,并非因此限制本发明的专利范围,凡是利用本发明说明书及附图内容所作的等效结构或等效流程变换,或直接或间接运用在其他相关的技术领域,均同理包括在本发明的专利保护范围内。
Claims (10)
1.一种UI界面的布局方法,其特征在于,该方法包括:
获取UI界面当前设置的系统语言;
从预存关联数据表中确定与所述系统语言关联的UI全局的文本编码方式,其中,所述文本编码方式包括从右到左RTL语言的文本编码方式、以及从左到右LTR语言的文本编码方式;
判断所述文本编码方式是否与当前UI全局的布局方式匹配,其中,所述布局方式包括RTL语言的RTL布局方式和LTR语言的LTR布局方式;
若所述文本编码方式与所述布局方式不匹配,则根据所述文本编码方式对所述布局方式进行调整。
2.如权利要求1所述的UI界面的布局方法,其特征在于,所述根据所述文本编码方式对所述布局方式进行调整的步骤之后,包括:
对当前UI全局的左右键键值进行镜像配置。
3.如权利要求2所述的UI界面的布局方法,其特征在于,所述对当前UI全局的左右键键值进行镜像配置的步骤之后包括:
判断所述布局方式是否为所述RTL布局方式;
若所述布局方式为所述RTL布局方式,则分别识别当前UI全局中各子模块是否属于通用UI模块;
将当前UI全局中属于通用UI模块的子模块的布局方式,调整为所述LTR布局方式。
4.如权利要求3所述的UI界面的布局方法,其特征在于,所述将当前UI全局中属于通用UI模块的子模块的布局方式,调整为所述LTR布局方式的步骤之后包括:
将当前UI全局中属于通用UI模块的子模块的左右键键值,再次进行镜像配置。
5.如权利要求3或4任一项所述的UI界面的布局方法,其特征在于,所述通用UI模块包括播放器、软键盘、图标、阿拉伯数字和进度条。
6.如权利要求1所述的UI界面的布局方法,其特征在于,所述根据所述文本编码方式对所述布局方式进行调整的步骤包括:
若所述文本编码方式为从右到左RTL语言的编码方式,则调整所述布局方式为所述RTL布局方式;
若所述文本编码方式为从左到右LTR语言的编码方式,则调整所述布局方式为所述LTR布局方式。
7.如权利要求1所述的UI界面的布局方法,其特征在于,所述获取UI界面当前设置的系统语言的步骤包括:
当UI界面进行初始化时,调用预设接口从显示终端系统中获取UI界面当前设置的系统语言。
8.如权利要求1所述的UI界面的布局方法,其特征在于,该方法还包括:
当接收系统语言切换指令时,根据所述系统语言切换指令更新UI界面当前设置的系统语言,并执行:所述获取UI界面当前设置的系统语言的步骤。
9.一种显示终端,其特征在于,包括存储器、处理器、以及存储在所述存储器上并可在所述处理器上运行的计算机程序,所述计算机程序被处理器执行时实现如权利要求1至8中任一项所述UI界面的布局方法的步骤。
10.一种存储介质,其特征在于,所述存储介质上存储有计算机程序,所述计算机程序被处理器执行时实现如权利要求1至8中任一项UI界面的布局方法的步骤。
Priority Applications (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN202110754220.3A CN113515338A (zh) | 2021-07-01 | 2021-07-01 | Ui界面的布局方法、显示终端及存储介质 |
Applications Claiming Priority (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN202110754220.3A CN113515338A (zh) | 2021-07-01 | 2021-07-01 | Ui界面的布局方法、显示终端及存储介质 |
Publications (1)
Publication Number | Publication Date |
---|---|
CN113515338A true CN113515338A (zh) | 2021-10-19 |
Family
ID=78066458
Family Applications (1)
Application Number | Title | Priority Date | Filing Date |
---|---|---|---|
CN202110754220.3A Pending CN113515338A (zh) | 2021-07-01 | 2021-07-01 | Ui界面的布局方法、显示终端及存储介质 |
Country Status (1)
Country | Link |
---|---|
CN (1) | CN113515338A (zh) |
Cited By (1)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN114385303A (zh) * | 2022-01-24 | 2022-04-22 | 北京智象信息技术有限公司 | 一种智能电视机前端web系统多语言切换方法、系统及介质 |
Citations (6)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
EP1221650A2 (en) * | 2001-01-05 | 2002-07-10 | Microsoft Corporation | System and method for user interface mirroring utilizing a layout manager |
US20090199165A1 (en) * | 2008-01-31 | 2009-08-06 | International Business Machines Corporation | Methods, systems, and computer program products for internationalizing user interface control layouts |
CN109710364A (zh) * | 2018-12-27 | 2019-05-03 | 北京微播视界科技有限公司 | 调整布局方式的方法、装置、电子设备及存储介质 |
US20190243878A1 (en) * | 2018-02-06 | 2019-08-08 | International Business Machines Corporation | Layout detection for bidirectional text documents having hebrew text |
CN111479155A (zh) * | 2020-04-02 | 2020-07-31 | 青岛海信传媒网络技术有限公司 | 显示设备及用户界面显示方法 |
CN112068764A (zh) * | 2020-09-03 | 2020-12-11 | 北京搜狗科技发展有限公司 | 一种语言切换方法、装置和用于语言切换的装置 |
-
2021
- 2021-07-01 CN CN202110754220.3A patent/CN113515338A/zh active Pending
Patent Citations (6)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
EP1221650A2 (en) * | 2001-01-05 | 2002-07-10 | Microsoft Corporation | System and method for user interface mirroring utilizing a layout manager |
US20090199165A1 (en) * | 2008-01-31 | 2009-08-06 | International Business Machines Corporation | Methods, systems, and computer program products for internationalizing user interface control layouts |
US20190243878A1 (en) * | 2018-02-06 | 2019-08-08 | International Business Machines Corporation | Layout detection for bidirectional text documents having hebrew text |
CN109710364A (zh) * | 2018-12-27 | 2019-05-03 | 北京微播视界科技有限公司 | 调整布局方式的方法、装置、电子设备及存储介质 |
CN111479155A (zh) * | 2020-04-02 | 2020-07-31 | 青岛海信传媒网络技术有限公司 | 显示设备及用户界面显示方法 |
CN112068764A (zh) * | 2020-09-03 | 2020-12-11 | 北京搜狗科技发展有限公司 | 一种语言切换方法、装置和用于语言切换的装置 |
Cited By (1)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN114385303A (zh) * | 2022-01-24 | 2022-04-22 | 北京智象信息技术有限公司 | 一种智能电视机前端web系统多语言切换方法、系统及介质 |
Similar Documents
Publication | Publication Date | Title |
---|---|---|
US9606989B2 (en) | Multiple input language selection | |
US20130298071A1 (en) | Finger text-entry overlay | |
US20050184999A1 (en) | Portable information apparatus, character display method in portable information apparatus, and program product for implementing the method | |
US20120017161A1 (en) | System and method for user interface | |
US20110078593A1 (en) | Web browser transmission server and method of controlling operation of same | |
CN108256523B (zh) | 基于移动终端的识别方法、装置及计算机可读存储介质 | |
US8694885B2 (en) | Keyboard input method and assistant system thereof | |
KR20160060110A (ko) | 온스크린 키보드에 대한 빠른 작업 | |
CN106127837A (zh) | 网络漫画的多国语言支持系统 | |
WO2016027482A1 (ja) | プリンタ、印刷システムおよび印刷制御方法 | |
CN103384244A (zh) | 针对网络浏览器配置键盘的方法和装置 | |
JP2005100186A (ja) | ソフトウェアキーボード表示装置および表示プログラム | |
CN113515338A (zh) | Ui界面的布局方法、显示终端及存储介质 | |
CN107665046A (zh) | 一种输入方法和装置、一种用于输入的装置 | |
CN103106194A (zh) | 移动终端语言转换方法及其移动终端 | |
US9208143B2 (en) | Electronic device and dictionary data display method | |
KR102206486B1 (ko) | 입력 어플리케이션을 이용한 번역 서비스 제공 방법 및 이를 이용하는 단말장치 | |
CN108170365B (zh) | 智能电视输入方法、装置及计算机可读存储介质 | |
US10372829B2 (en) | Method and computer readable recording medium for providing translation using image | |
CN112764551A (zh) | 词汇显示方法、装置和电子设备 | |
CN108700953B (zh) | 输入辅助装置、智能电话以及输入辅助方法 | |
CN112306488A (zh) | 组合图标生成方法、装置、设备与计算机可读存储介质 | |
EP3428786A1 (en) | System and method for area of interest enhancement in a semi-transparent keyboard | |
JP5141047B2 (ja) | 情報表示装置及び情報表示プログラム | |
JP5359457B2 (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 |