CN109783100B - 查看用户界面元素属性的方法、装置及电子设备 - Google Patents

查看用户界面元素属性的方法、装置及电子设备 Download PDF

Info

Publication number
CN109783100B
CN109783100B CN201910069450.9A CN201910069450A CN109783100B CN 109783100 B CN109783100 B CN 109783100B CN 201910069450 A CN201910069450 A CN 201910069450A CN 109783100 B CN109783100 B CN 109783100B
Authority
CN
China
Prior art keywords
attribute
user interface
attribute information
target element
determining
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
Application number
CN201910069450.9A
Other languages
English (en)
Other versions
CN109783100A (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.)
Tiktok Technology Co ltd
Original Assignee
Beijing Microlive Vision Technology 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 Beijing Microlive Vision Technology Co Ltd filed Critical Beijing Microlive Vision Technology Co Ltd
Priority to CN201910069450.9A priority Critical patent/CN109783100B/zh
Publication of CN109783100A publication Critical patent/CN109783100A/zh
Application granted granted Critical
Publication of CN109783100B publication Critical patent/CN109783100B/zh
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Classifications

    • YGENERAL TAGGING OF NEW TECHNOLOGICAL DEVELOPMENTS; GENERAL TAGGING OF CROSS-SECTIONAL TECHNOLOGIES SPANNING OVER SEVERAL SECTIONS OF THE IPC; TECHNICAL SUBJECTS COVERED BY FORMER USPC CROSS-REFERENCE ART COLLECTIONS [XRACs] AND DIGESTS
    • Y02TECHNOLOGIES OR APPLICATIONS FOR MITIGATION OR ADAPTATION AGAINST CLIMATE CHANGE
    • Y02DCLIMATE CHANGE MITIGATION TECHNOLOGIES IN INFORMATION AND COMMUNICATION TECHNOLOGIES [ICT], I.E. INFORMATION AND COMMUNICATION TECHNOLOGIES AIMING AT THE REDUCTION OF THEIR OWN ENERGY USE
    • Y02D10/00Energy efficient computing, e.g. low power processors, power management or thermal management

Landscapes

  • User Interface Of Digital Computer (AREA)

Abstract

本公开提供了一种查看用户界面元素属性的方法、装置及电子设备。该方法包括:确定待查看的目标元素属性,确定用户界面中的元素对应目标元素属性的属性信息,将属性信息在用户界面中进行展示,使得在核查用户界面的元素属性时,无需关注相关代码是如何实现的,直接通过可视化的界面进行查看即可,能够有效提高核查的效率和正确率,并且无论是开发人员还是UI设计师都可以对当前用户界面的元素属性一目了然,非常方便后续对用户界面的核查和完善。

Description

查看用户界面元素属性的方法、装置及电子设备
技术领域
本公开涉及软件开发技术领域,具体而言,本公开涉及一种查看用户界面元素属性的方法、装置及电子设备。
背景技术
一个完整的软件开发过程离不开对UI(User Interface,用户界面)的设计,即面向用户的界面形式设计。尤其是随着软件编码开发实现的功能日益强大,用户对软件的美观度及交互的舒适度提出了更高的要求。好的UI设计能够提升一个软件的市场竞争力,这种现象使得UI设计在整个软件开发过程中被提升到了一个相当高的高度,从而引发了新一轮的UI设计热潮。
在软件开发过程中,编码开发人员需要严格按照UI设计师的设计来设置界面元素的属性,才能将UI的开发做到极致。目前,仅能通过查看编码开发人员编写的相关代码来核查设置的元素属性是否与UI设计师设计的相同,这样的核查工作无疑会占用UI开发的时间成本,从而影响到整个软件的开发周期;并且核查工作存在一定的难度,没有掌握代码知识的UI设计师可能无法执行核查工作,最重要的是,这种核查方式不够直观,容易出现不必要的失误。
发明内容
为克服上述技术问题或者至少部分地解决上述技术问题,特提出以下技术方案:
第一方面,本公开提供了一种查看用户界面元素属性的方法,该方法包括:
确定待查看的目标元素属性;
确定用户界面中的元素对应所述目标元素属性的属性信息;
将所述属性信息在所述用户界面中进行展示。
在一种可选的实现方式中,所述目标元素属性,包括以下至少一项:
元素边框、元素外边距、元素内边距、元素圆角大小、元素尺寸、元素中的字体大小、元素中的字体颜色、元素背景色、元素类型、元素颜色变化效果、元素布局树、元素层级、元素属性单位。
在一种可选的实现方式中,将所述属性信息在所述用户界面中进行展示,包括:
根据所述属性信息,生成属性信息显示浮层;
将所述属性信息显示浮层在所述用户界面中进行展示。
在一种可选的实现方式中,所述确定用户界面中的元素对应所述目标元素属性的属性信息,包括:
确定用户界面中的各个元素是否存在所述目标元素属性;
对存在所述目标元素属性的目标元素确定对应所述目标元素属性的属性信息。
在一种可选的实现方式中,将所述属性信息在所述用户界面中进行展示,包括:
确定所述目标元素的位置信息;
根据所述位置信息,在所述用户界面的相应位置将所述属性信息进行展示。
在一种可选的实现方式中,所述确定所述目标元素的位置信息,包括:
确定所述用户界面的根布局;
基于所述根布局,确定所述目标元素的位置信息。
在一种可选的实现方式中,将所述属性信息显示浮层在所述用户界面中进行展示之后,还包括:
在接收到对所述属性信息显示浮层的点击指令后,展示对所述属性信息的多个操作选项;
在接收到对任一操作选项的选择指令后,对所述属性信息显示浮层执行与所述任一操作选项相应的处理。
第二方面,本公开提供了一种查看用户界面元素属性的装置,该装置包括:
第一确定模块,用于确定待查看的目标元素属性;
第二确定模块,用于确定用户界面中的元素对应所述目标元素属性的属性信息;
展示模块,用于将所述属性信息在所述用户界面中进行展示。
在一种可选的实现方式中,所述目标元素属性,包括以下至少一项:
元素边框、元素外边距、元素内边距、元素圆角大小、元素尺寸、元素中的字体大小、元素中的字体颜色、元素背景色、元素类型、元素颜色变化效果、元素布局树、元素层级、元素属性单位。
在一种可选的实现方式中,所述展示模块具体用于根据所述属性信息,生成属性信息显示浮层;将所述属性信息显示浮层在所述用户界面中进行展示。
在一种可选的实现方式中,所述第二确定模块具体用于确定用户界面中的各个元素是否存在所述目标元素属性;对存在所述目标元素属性的目标元素确定对应所述目标元素属性的属性信息。
在一种可选的实现方式中,所述展示模块具体用于确定所述目标元素的位置信息;根据所述位置信息,在所述用户界面的相应位置将所述属性信息进行展示。
在一种可选的实现方式中,所述展示模块具体用于确定所述用户界面的根布局;基于所述根布局,确定所述目标元素的位置信息。
在一种可选的实现方式中,所述展示模块还用于在接收到对所述属性信息显示浮层的点击指令后,展示对所述属性信息的多个操作选项;在接收到对任一操作选项的选择指令后,对所述属性信息显示浮层执行与所述任一操作选项相应的处理。
第三方面,本公开提供了一种电子设备,该电子设备包括:
处理器和存储器,存储器存储有至少一条指令、至少一段程序、代码集或指令集,至少一条指令、至少一段程序、代码集或指令集由处理器加载并执行以实现如本公开的第一方面或第一方面的任一可选的实现方式中所示的方法。
第四方面,本公开提供了一种计算机可读存储介质,计算机存储介质用于存储计算机指令、程序、代码集或指令集,当其在计算机上运行时,使得计算机执行如本公开的第一方面或第一方面的任一可选的实现方式中所示的方法。
本公开提供的查看用户界面元素属性的方法、装置及电子设备,通过确定待查看的目标元素属性,来确定用户界面中的元素对应目标元素属性的属性信息,并将属性信息在用户界面中进行展示,使得在核查用户界面的元素属性时,无需关注相关代码是如何实现的,直接通过可视化的界面进行查看即可,能够有效提高核查的效率和正确率,并且无论是开发人员还是UI设计师都可以对当前用户界面的元素属性一目了然,非常方便后续对用户界面的核查和完善。
附图说明
为了更清楚地说明本公开实施例中的技术方案,下面将对本公开实施例描述中所需要使用的附图做简单的介绍。
图1为本公开实施例提供的一种查看用户界面元素属性的方法的流程示意图;
图2为本公开实施例提供的一种用户界面展示效果的示例图;
图3为本公开实施例提供的一种查看用户界面元素属性的装置的结构示意图;
图4为本公开实施例提供的一种电子设备的结构示意图。
具体实施方式
下面详细描述本公开的实施例,所述实施例的示例在附图中示出,其中自始至终相同或类似的标号表示相同或类似的元件或具有相同或类似功能的元件。下面通过参考附图描述的实施例是示例性的,仅用于解释本公开,而不能解释为对本公开的限制。
本技术领域技术人员可以理解,除非特意声明,这里使用的单数形式“一”、“一个”、“所述”和“该”也可包括复数形式。应该进一步理解的是,本公开的说明书中使用的措辞“包括”是指存在所述特征、整数、步骤、操作、元件和/或组件,但是并不排除存在或添加一个或多个其他特征、整数、步骤、操作、元件、组件和/或它们的组。应该理解,当我们称元件被“连接”或“耦接”到另一元件时,它可以直接连接或耦接到其他元件,或者也可以存在中间元件。此外,这里使用的“连接”或“耦接”可以包括无线连接或无线耦接。这里使用的措辞“和/或”包括一个或更多个相关联的列出项的全部或任一单元和全部组合。
为使本公开的目的、技术方案和优点更加清楚,下面将结合附图对本公开实施方式作进一步地详细描述。
本公开实施例提供了一种查看用户界面元素属性的方法,如图1所示,该方法包括:
步骤S101:确定待查看的目标元素属性;
对于本公开实施例,该方法的执行主体可以为移动终端,也可以为安装于移动终端上的客户端。实际应用中,该方法也可以通过预设的插件或工具实现,由客户端预配置该插件或工具来执行。下文中,将以执行主体为客户端为例进行介绍。
实际应用中,用户界面中的元素通常以控件(View)的形式存在,是实现用户界面的基本单位。控件作为用户界面布局信息的数据载体,会包含至少一种属性,例如尺寸、颜色、位置等。
在本步骤中,可以根据使用者触发的查看指令来确定待查看的目标元素属性。该方案适用于软件开发阶段,使用者可以为UI设计师、编码开发人员等,本公开实施例在此不做限定。
可选地,使用者可以通过命令行来输入查看指令,也可以通过鼠标点击、触碰显示屏、手势触发等方式来生成查看指令。
本公开实施例中,还可以根据不同的元素属性提供不同的选项供使用者选择,并将使用者的选择确定为待查看的目标元素属性。
其中,确定出的待查看的目标元素属性可以为一种或多种属性。
步骤S102:确定用户界面中的元素对应目标元素属性的属性信息;
其中,可以直接设置为确定用户界面中的全部元素对应目标元素属性的属性信息,也可以设置为根据一定的规则选择用户界面中的一个或多个元素,或者也可以设置为根据使用者触发的指令选择用户界面中的一个或多个元素,并确定一个或多个元素对应目标元素属性的属性信息。
实际应用中,任一元素对应任一元素属性的属性信息可能是直接获取的,也可能是根据获取的一些参数计算得到的,本领域技术人员可以针对不同的元素属性采用合适的属性信息确定方式。
步骤S103:将属性信息在用户界面中进行展示。
在用户界面中展示步骤S102确定出的各个属性信息,例如将各个属性信息关联相应的元素进行展示。可以理解,针对用户界面中的每个元素的每种元素属性,均可以通过上述方法查看到,即可以通过可视化的界面查看用户界面中的全部元素的各种元素属性。
那么,通过本公开实施例提供的查看用户界面元素属性的方法,使用者核查用户界面的元素属性时,无需关注相关代码是如何实现的,直接通过可视化的界面进行查看即可,能够有效提高核查的效率和正确率,并且无论是开发人员还是UI设计师都可以对当前用户界面的元素属性一目了然,非常方便后续对用户界面的核查和完善。
本公开实施例提供了一种可能的实现方式,其中,元素属性的种类可以包括但不限于:元素边框、元素外边距、元素内边距、元素圆角大小、元素尺寸、元素中的字体大小、元素中的字体颜色、元素背景色、元素类型、元素颜色变化效果、元素布局树、元素层级、元素属性单位等。
实际应用中,可以选择上述元素属性种类中的至少一项作为目标元素属性来进行查看。
具体而言,元素边框可以理解为控件的边界,沿着控件的边界可以绘制一个矩形框,即可显示为元素边框,在本公开实施例中,可以对元素边框的矩形框进行展示,例如如图2所示,用户界面中的各个元素的边框已示出。
具体而言,元素内边距(padding)即元素边框内到元素内容之间的空白区域的距离,包括PT(padding-top,上侧内边距)、PR(padding-right,右侧内边距)、PB(padding-bottom,下侧内边距)及PL(padding-left,左侧内边距)。在本公开实施例中,可以对元素内边距的值进行展示,例如如图2中右侧的“关注”按钮示出PL8、PR8及PB2等信息,用户界面中的其它元素的该元素属性可依此进行相应的展示,在此不再赘述。
具体而言,元素外边距(Margin)即元素边框外的空白区域的边距,包括MT(margin-top,上侧外边距)、MR(margin-right,右侧外边距)、MB(margin-bottom,下侧外边距)及ML(margin-left,左侧外边距)。在本公开实施例中,可以对元素外边距的值进行展示,具体可参见对元素内边距的介绍,在此不再赘述。
具体而言,元素的圆角化是用户界面设计的一种常用手段,能带来圆润和谐的视觉感受,在本公开实施例中,可以对元素圆角大小的值进行展示。
具体而言,元素尺寸可以理解为控件的宽和高,在本公开实施例中,可以对元素尺寸的值进行展示,例如如图2中上方的文字控件“消息”示出的为36和44即分别为该元素的高和宽,用户界面中的其它元素的该元素属性可依此进行相应的展示,在此不再赘述。
具体而言,一些元素中会包含文字内容,而文字内容的字体大小也可以进行设计,本公开实施例中,可以对元素中的字体大小的值进行展示,例如14Sp、18Sp或其它数值等。
同理地,元素中的字体颜色也可以进行设计,本公开实施例中,可以对元素中的字体颜色的值进行展示,例如#ffff003b等,其中,该颜色的值中包括透明度的值ff及RGB颜色的值ff003b。用户界面中的其它元素的该元素属性可依此进行相应的展示,在此不再赘述。
具体而言,元素背景色(BackgroundColor)也可以自行设计,本公开实施例中,可以对元素背景色进行展示,具体可参见对上述字体颜色类似的描述,在此不再赘述。
具体而言,元素类型包括但不限于按钮、文本、列表、图片、输入框等等,本公开实施例中,可以对元素的具体类型进行展示,便于使用者进行核查。
具体而言,元素颜色变化效果包括对元素中的字体颜色及元素背景色分别对应的变化效果,例如渐变、阴影等。本公开实施例中,可以对元素颜色变化效果进行展示,便于使用者进行核查。
具体而言,本公开实施例中,对于TreeView类型的控件,可以通过树结构的形式展示其分层数据,即展示元素布局树。进一步地,还可以对TreeView类型控件的层级关系进行展示,即展示元素层级。
本公开实施例中,还可以通过不同类型的属性单位来展示元素的长度类型的属性,例如通过Dp(pt,point,标准的长度单位,1pt=1/72英寸)、Origin(px,pixels,像素)、Sp(scaled pixels,放大像素)等。
本公开实施例提供了一种可能的实现方式,在步骤S103中,如图2所示,在用户界面中通过透明浮层对确定出的属性信息进行展示,即显示的元素属性信息是覆盖在元素之上的。
在具体的实现过程中,可以包括以下几个步骤:
步骤S3021:根据属性信息,生成属性信息显示浮层;
步骤S3022:将属性信息显示浮层在用户界面中进行展示。
其中,在步骤S3021中,根据不同元素的属性信息,可以共同生成一个属性信息显示浮层,也可以生成与元素属性分别对应的多个属性信息显示浮层,本公开实施例在此不做限定。
可选地,当一个元素对应有多个属性信息显示浮层时,该多个属性信息显示浮层可以采用叠加、并排和/或并列等排列方式,本领域技术人员可以根据实际情况进行设置。
进一步地,在步骤S1022中,还需要判断属性信息显示浮层所要显示的位置,例如在各个元素的相关位置在用户界面进行显示,以明确与属性信息与元素之间的对应关系。
本公开实施例还提供了一种可能的实现方式,在步骤S102中,考虑到用户界面中每个元素所具备的属性不完全相同,例如有些元素会包含文字内容,而有些元素并不包含文字内容,为了提升本方案的执行效率,节约计算资源,可以在步骤S101中确定出待查看的目标元素属性之后,确定用户界面中的各个元素是否存在目标元素属性。
随后,仅对存在目标元素属性的目标元素确定对应目标元素属性的属性信息,并在步骤S103中,确定该目标元素的位置信息;再根据位置信息,在用户界面的相应位置将属性信息进行展示,以明确与属性信息与目标元素之间的对应关系。对不存在目标元素属性的目标元素,无需显示相关的属性信息,也无需对属性信息进行确定。
具体而言,可以通过用户界面的根布局来确定目标元素的位置信息,在具体的实现过程中,在确定用户界面的根布局之后,就可以基于根布局,确定目标元素的位置信息。
实际应用中,可以通过函数接口获取用户界面的根布局。接着,对获取的根布局进行解析,得到每个元素的位置信息。
一种可能的实现方式中,获取的每个元素的位置信息为坐标信息,例如元素四个顶点的坐标,或对应的其中一个顶点的坐标信息等,进而根据这些坐标信息,确定属性信息的展示位置,例如属性信息显示浮层的显示位置,以在用户界面的相应位置将属性信息进行展示。
本公开实施例还提供了一种可行的实现方式,步骤S103中在用户界面中通过浮层对确定出的属性信息进行展示之后,还包括步骤:
步骤S104:在接收到对属性信息显示浮层的点击指令后,展示对属性信息的多个操作选项;
步骤S105:在接收到对任一操作选项的选择指令后,对属性信息显示浮层执行与任一操作选项相应的处理。
通过步骤S104和步骤S105能够在使用者核查用户界面的元素属性时,提供良好的交互功能。
具体而言,每个属性信息显示浮层都提供了归类、缩放、拖动、浮层层级改动等操作,使用者可以点击需要进行操作的浮层,执行相应的操作。
步骤S104中,客户端在接收到在接收到使用者对任一个属性信息显示浮层的点击指令后,展示多个操作选项,例如,“属性信息正确,隐藏浮层”、“属性信息有误,高亮浮层”、“放大显示”、“缩小显示”、“置于顶层”、“置于底层”等。
进而步骤S105中,客户端在接收到对任一操作选项的选择指令后,对该属性信息显示浮层执行与使用者选择的操作选项相应的处理,例如将隐藏浮层、高亮浮层、放大浮层、缩小浮层、置顶浮层、置底浮层等,方便使用者更方便、更直观地对用户界面的元素属性进行核查。
本公开实施例提供的查看用户界面元素属性的方法,在使用者核查用户界面的元素属性时,无需关注相关代码是如何实现的,直接通过可视化的界面进行查看即可,能够有效提高核查的效率和正确率,并且无论是开发人员还是UI设计师都可以对当前用户界面的元素属性一目了然,非常方便后续对用户界面的核查和完善。
本公开实施例还提供了一种查看用户界面元素属性的装置,如图3所示,该装置30可以包括:第一确定模块301、第二确定模块302以及展示模块303,其中,
第一确定模块301用于确定待查看的目标元素属性;
第二确定模块302用于确定用户界面中的元素对应目标元素属性的属性信息;
展示模块303用于将属性信息在用户界面中进行展示。
在一种可选的实现方式中,目标元素属性,包括以下至少一项:
元素边框、元素外边距、元素内边距、元素圆角大小、元素尺寸、元素中的字体大小、元素中的字体颜色、元素背景色、元素类型、元素颜色变化效果、元素布局树、元素层级、元素属性单位。
在一种可选的实现方式中,展示模块303具体用于根据属性信息,生成属性信息显示浮层;将属性信息显示浮层在用户界面中进行展示。
在一种可选的实现方式中,第二确定模块302具体用于确定用户界面中的各个元素是否存在目标元素属性;对存在目标元素属性的目标元素确定对应目标元素属性的属性信息。
在一种可选的实现方式中,展示模块303具体用于确定目标元素的位置信息;根据位置信息,在用户界面的相应位置将属性信息进行展示。
在一种可选的实现方式中,展示模块303具体用于确定用户界面的根布局;基于根布局,确定目标元素的位置信息。
在一种可选的实现方式中,展示模块303还用于在接收到对属性信息显示浮层的点击指令后,展示对属性信息的多个操作选项;在接收到对任一操作选项的选择指令后,对属性信息显示浮层执行与任一操作选项相应的处理。
本公开实施例所提供的查看用户界面元素属性的装置,可以为设备上的特定硬件或者安装于设备上的软件或固件等,其实现原理及产生的技术效果和前述方法实施例相同,为简要描述,设备实施例部分未提及之处,可参考前述方法实施例中相应内容,在此不再赘述。
通过本公开实施例提供的查看用户界面元素属性的装置,在使用者核查用户界面的元素属性时,无需关注相关代码是如何实现的,直接通过可视化的界面进行查看即可,能够有效提高核查的效率和正确率,并且无论是开发人员还是UI设计师都可以对当前用户界面的元素属性一目了然,非常方便后续对用户界面的核查和完善。
基于与本公开实施例中查看用户界面元素属性的方法相同的原理,本公开实施例还提供了一种电子设备,该电子设备包括存储器和处理器,存储器存储有至少一条指令、至少一段程序、代码集或指令集,至少一条指令、至少一段程序、代码集或指令集由处理器加载并执行本公开上述任一实施例所示的方法。
基于与本公开实施例中查看用户界面元素属性的法相同的原理,本公开实施例中还提供了一种计算机可读存储介质,计算机存储介质用于存储计算机指令、程序、代码集或指令集,当其在计算机上运行时,使得计算机执行本公开上述任一实施例所示的方法。
下面参考图4,其示出了适于用来实现本公开实施例的电子设备(例如图1对应的移动终端)40的结构示意图。本公开实施例中的电子设备可以包括但不限于诸如移动电话、笔记本电脑、数字广播接收器、PDA(个人数字助理)、PAD(平板电脑)、PMP(便携式多媒体播放器)、车载终端(例如车载导航终端)等等的移动终端以及诸如数字TV、台式计算机等等的固定终端。图4示出的电子设备仅仅是一个示例,不应对本公开实施例的功能和使用范围带来任何限制。
如图4所示,电子设备40可以包括处理装置(例如中央处理器、图形处理器等)401,其可以根据存储在只读存储器(ROM)402中的程序或者从存储装置408加载到随机访问存储器(RAM)403中的程序而执行各种适当的动作和处理。在RAM 403中,还存储有电子设备40操作所需的各种程序和数据。处理装置401、ROM402以及RAM 403通过总线404彼此相连。输入/输出(I/O)接口405也连接至总线404。
通常,以下装置可以连接至I/O接口405:包括例如触摸屏、触摸板、键盘、鼠标、摄像头、麦克风、加速度计、陀螺仪等的输入装置406;包括例如液晶显示器(LCD)、扬声器、振动器等的输出装置407;包括例如磁带、硬盘等的存储装置408;以及通信装置409。通信装置409可以允许电子设备40与其他设备进行无线或有线通信以交换数据。虽然图4示出了具有各种装置的电子设备40,但是应理解的是,并不要求实施或具备所有示出的装置。可以替代地实施或具备更多或更少的装置。
特别地,根据本公开的实施例,上文参考流程图描述的过程可以被实现为计算机软件程序。例如,本公开的实施例包括一种计算机程序产品,其包括承载在计算机可读介质上的计算机程序,该计算机程序包含用于执行流程图所示的方法的程序代码。在这样的实施例中,该计算机程序可以通过通信装置409从网络上被下载和安装,或者从存储装置408被安装,或者从ROM 402被安装。在该计算机程序被处理装置401执行时,执行本公开实施例的方法中限定的上述功能。
需要说明的是,本公开上述的计算机可读介质可以是计算机可读信号介质或者计算机可读存储介质或者是上述两者的任意组合。计算机可读存储介质例如可以是——但不限于——电、磁、光、电磁、红外线、或半导体的系统、装置或器件,或者任意以上的组合。计算机可读存储介质的更具体的例子可以包括但不限于:具有一个或多个导线的电连接、便携式计算机磁盘、硬盘、随机访问存储器(RAM)、只读存储器(ROM)、可擦式可编程只读存储器(EPROM或闪存)、光纤、便携式紧凑磁盘只读存储器(CD-ROM)、光存储器件、磁存储器件、或者上述的任意合适的组合。在本公开中,计算机可读存储介质可以是任何包含或存储程序的有形介质,该程序可以被指令执行系统、装置或者器件使用或者与其结合使用。而在本公开中,计算机可读信号介质可以包括在基带中或者作为载波一部分传播的数据信号,其中承载了计算机可读的程序代码。这种传播的数据信号可以采用多种形式,包括但不限于电磁信号、光信号或上述的任意合适的组合。计算机可读信号介质还可以是计算机可读存储介质以外的任何计算机可读介质,该计算机可读信号介质可以发送、传播或者传输用于由指令执行系统、装置或者器件使用或者与其结合使用的程序。计算机可读介质上包含的程序代码可以用任何适当的介质传输,包括但不限于:电线、光缆、RF(射频)等等,或者上述的任意合适的组合。
上述计算机可读介质可以是上述电子设备中所包含的;也可以是单独存在,而未装配入该电子设备中。
上述计算机可读介质承载有一个或者多个程序,当上述一个或者多个程序被该电子设备执行时,使得该电子设备:确定待查看的目标元素属性;确定用户界面中的元素对应目标元素属性的属性信息;将属性信息在用户界面中进行展示。
可以以一种或多种程序设计语言或其组合来编写用于执行本公开的操作的计算机程序代码,上述程序设计语言包括面向对象的程序设计语言—诸如Java、Smalltalk、C++,还包括常规的过程式程序设计语言—诸如“C”语言或类似的程序设计语言。程序代码可以完全地在用户计算机上执行、部分地在用户计算机上执行、作为一个独立的软件包执行、部分在用户计算机上部分在远程计算机上执行、或者完全在远程计算机或服务器上执行。在涉及远程计算机的情形中,远程计算机可以通过任意种类的网络——包括局域网(LAN)或广域网(WAN)—连接到用户计算机,或者,可以连接到外部计算机(例如利用因特网服务提供商来通过因特网连接)。
附图中的流程图和框图,图示了按照本公开各种实施例的系统、方法和计算机程序产品的可能实现的体系架构、功能和操作。在这点上,流程图或框图中的每个方框可以代表一个模块、程序段、或代码的一部分,该模块、程序段、或代码的一部分包含一个或多个用于实现规定的逻辑功能的可执行指令。也应当注意,在有些作为替换的实现中,方框中所标注的功能也可以以不同于附图中所标注的顺序发生。例如,两个接连地表示的方框实际上可以基本并行地执行,它们有时也可以按相反的顺序执行,这依所涉及的功能而定。也要注意的是,框图和/或流程图中的每个方框、以及框图和/或流程图中的方框的组合,可以用执行规定的功能或操作的专用的基于硬件的系统来实现,或者可以用专用硬件与计算机指令的组合来实现。
描述于本公开实施例中所涉及到的单元可以通过软件的方式实现,也可以通过硬件的方式来实现。其中,单元的名称在某种情况下并不构成对该单元本身的限定,例如,第一获取单元还可以被描述为“获取至少两个网际协议地址的单元”。
以上描述仅为本公开的较佳实施例以及对所运用技术原理的说明。本领域技术人员应当理解,本公开中所涉及的公开范围,并不限于上述技术特征的特定组合而成的技术方案,同时也应涵盖在不脱离上述公开构思的情况下,由上述技术特征或其等同特征进行任意组合而形成的其它技术方案。例如上述特征与本公开中公开的(但不限于)具有类似功能的技术特征进行互相替换而形成的技术方案。
应该理解的是,虽然附图的流程图中的各个步骤按照箭头的指示依次显示,但是这些步骤并不是必然按照箭头指示的顺序依次执行。除非本文中有明确的说明,这些步骤的执行并没有严格的顺序限制,其可以以其他的顺序执行。而且,附图的流程图中的至少一部分步骤可以包括多个子步骤或者多个阶段,这些子步骤或者阶段并不必然是在同一时刻执行完成,而是可以在不同的时刻执行,其执行顺序也不必然是依次进行,而是可以与其他步骤或者其他步骤的子步骤或者阶段的至少一部分轮流或者交替地执行。
以上所述仅是本公开的部分实施方式,应当指出,对于本技术领域的普通技术人员来说,在不脱离本公开原理的前提下,还可以做出若干改进和润饰,这些改进和润饰也应视为本公开的保护范围。

Claims (6)

1.一种查看用户界面元素属性的方法,其特征在于,包括:
确定待查看的目标元素属性;
确定用户界面中的元素对应所述目标元素属性的属性信息;
将所述属性信息在所述用户界面中进行展示;
所述确定用户界面中的元素对应所述目标元素属性的属性信息,包括:
确定用户界面中的各个元素是否存在所述目标元素属性;
对存在所述目标元素属性的目标元素确定对应所述目标元素属性的属性信息;
所述将所述属性信息在所述用户界面中进行展示,包括:
确定所述目标元素的位置信息,其中所述位置信息为所述目标元素的顶点的坐标信息;
根据所述目标元素与所述属性信息的对应关系及所述位置信息,根据对应的所述属性信息,生成属性信息显示浮层,在所述用户界面与所述坐标信息对应的位置将对应的所述属性信息显示浮层进行展示;
所述确定所述目标元素的位置信息,包括:
通过函数接口确定所述用户界面的根布局;
基于所述根布局,确定所述目标元素的位置信息。
2.根据权利要求1所述的方法,其特征在于,所述目标元素属性,包括以下至少一项:
元素边框、元素外边距、元素内边距、元素圆角大小、元素尺寸、元素中的字体大小、元素中的字体颜色、元素背景色、元素类型、元素颜色变化效果、元素布局树、元素层级、元素属性单位。
3.根据权利要求1所述的方法,其特征在于,将所述属性信息显示浮层在所述用户界面中进行展示之后,还包括:
在接收到对所述属性信息显示浮层的点击指令后,展示对所述属性信息的多个操作选项;
在接收到对任一操作选项的选择指令后,对所述属性信息显示浮层执行与所述任一操作选项相应的处理。
4.一种查看用户界面元素属性的装置,其特征在于,包括:
第一确定模块,用于确定待查看的目标元素属性;
第二确定模块,用于确定用户界面中的元素对应所述目标元素属性的属性信息;
展示模块,用于将所述属性信息在所述用户界面中进行展示;
第二确定模块具体用于:确定用户界面中的各个元素是否存在所述目标元素属性;对存在所述目标元素属性的目标元素确定对应所述目标元素属性的属性信息;
展示模块具体用于:确定所述目标元素的位置信息,其中所述位置信息为所述目标元素的顶点的坐标信息;根据所述目标元素与所述属性信息的对应关系及所述位置信息,根据对应的所述属性信息,生成属性信息显示浮层,在所述用户界面与所述坐标信息对应的位置将对应的所述属性信息显示浮层进行展示;所述确定所述目标元素的位置信息,包括:通过函数接口确定所述用户界面的根布局;基于所述根布局,确定所述目标元素的位置信息。
5.一种电子设备,其特征在于,包括:
处理器和存储器,所述存储器存储有至少一条指令、至少一段程序、代码集或指令集,所述至少一条指令、所述至少一段程序、所述代码集或指令集由所述处理器加载并执行以实现如权利要求1-3任一项所述的方法。
6.一种计算机可读存储介质,其特征在于,所述计算机可读存储介质用于存储计算机指令、程序、代码集或指令集,当其在计算机上运行时,使得计算机执行如权利要求1-3任一项所述的方法。
CN201910069450.9A 2019-01-24 2019-01-24 查看用户界面元素属性的方法、装置及电子设备 Active CN109783100B (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN201910069450.9A CN109783100B (zh) 2019-01-24 2019-01-24 查看用户界面元素属性的方法、装置及电子设备

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201910069450.9A CN109783100B (zh) 2019-01-24 2019-01-24 查看用户界面元素属性的方法、装置及电子设备

Publications (2)

Publication Number Publication Date
CN109783100A CN109783100A (zh) 2019-05-21
CN109783100B true CN109783100B (zh) 2023-07-18

Family

ID=66501326

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201910069450.9A Active CN109783100B (zh) 2019-01-24 2019-01-24 查看用户界面元素属性的方法、装置及电子设备

Country Status (1)

Country Link
CN (1) CN109783100B (zh)

Citations (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN101196811A (zh) * 2007-12-07 2008-06-11 炬才微电子(深圳)有限公司 嵌入式软件的开发方法

Family Cites Families (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN105988699A (zh) * 2015-02-10 2016-10-05 阿里巴巴集团控股有限公司 终端屏幕上信息显示的方法及其装置
CN105511864A (zh) * 2015-11-30 2016-04-20 青岛海信移动通信技术股份有限公司 一种资源定位方法及装置
CN107038112B (zh) * 2016-10-13 2020-09-01 腾讯科技(北京)有限公司 应用界面的调试方法及装置
US11100084B2 (en) * 2017-05-05 2021-08-24 Servicenow, Inc. Configuration management identification rule testing
CN107391656B (zh) * 2017-07-18 2019-01-29 彭志勇 基于蒙版的web表单设计方法

Patent Citations (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN101196811A (zh) * 2007-12-07 2008-06-11 炬才微电子(深圳)有限公司 嵌入式软件的开发方法

Also Published As

Publication number Publication date
CN109783100A (zh) 2019-05-21

Similar Documents

Publication Publication Date Title
CN109408685B (zh) 思维导图展示方法和装置
CN106648337B (zh) 显示展示列表中内容的方法和装置、电子设备
CN109471626B (zh) 页面逻辑结构、页面生成方法、页面数据处理方法及装置
US20120311501A1 (en) Displaying graphical object relationships in a workspace
US20190012821A1 (en) Displaying images associated with apps based on app processing task progress statuses
US20120124492A1 (en) Display and Resolution of Incompatible Layout Constraints
CN113031946B (zh) 一种渲染页面组件的方法和装置
CN110766772A (zh) 基于Flutter跨平台海报制作方法装置介质和设备
AU2016256364B2 (en) Rendering graphical assets natively on multiple screens of electronic devices
US10157046B2 (en) Method and apparatus for generating an explorer for user interface prototyping
US20130191778A1 (en) Semantic Zooming in Regions of a User Interface
CN107978018B (zh) 立体图形模型的构建方法、装置、电子设备及存储介质
WO2018226989A1 (en) Displaying images associated with apps based on app processing task progress statuses
CN115935925A (zh) 表格适配方法、电子设备及计算机可读存储介质
US20140351745A1 (en) Content navigation having a selection function and visual indicator thereof
EP2632130A1 (en) System and method for displaying a user interface across multiple electronic devices
CN109783100B (zh) 查看用户界面元素属性的方法、装置及电子设备
CN109669589B (zh) 文档编辑方法和装置
CN111324347A (zh) 组件构造方法、装置、系统、页面生成方法、设备及介质
CN110673908A (zh) 一种界面生成方法、装置、介质和电子设备
CN113110837B (zh) 一种处理页面信息的方法和装置
US20100192074A1 (en) Pluggable margin extension
CN111506841A (zh) 网页展示方法、装置、设备及可读存储介质
CN112445478B (zh) 图形文件的处理方法、装置、设备及介质
US20140365955A1 (en) Window reshaping by selective edge revisions

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
CP03 Change of name, title or address

Address after: 408, 4th floor, 51 Zhichun Road, Haidian District, Beijing 100086

Patentee after: Tiktok Technology Co.,Ltd.

Country or region after: China

Address before: 408, 4th floor, 51 Zhichun Road, Haidian District, Beijing 100086

Patentee before: BEIJING MICROLIVE VISION TECHNOLOGY Co.,Ltd.

Country or region before: China

CP03 Change of name, title or address