CN109905753B - 角标的显示方法和装置、存储介质、电子装置 - Google Patents

Abstract

本发明公开了一种角标的显示方法和装置、存储介质、电子装置。其中，该方法包括：获取与客户端上播放的目标媒体内容对应的标识信息，其中，客户端为目标应用的客户端；向服务器发送标识信息，并接收服务器返回的指示信息，其中，服务器用于根据标识信息确定指示信息，指示信息用于指示待显示的目标角标；基于指示信息在目标媒体内容的播放界面中显示绘制出的目标角标，其中，目标角标是调用与目标角标的类型对应的控件绘制出的。本发明解决了相关技术中生成角标需要占用较多终端资源的技术问题。

Description

角标的显示方法和装置、存储介质、电子装置

技术领域

本发明涉及互联网领域，具体而言，涉及一种角标的显示方法和装置、存储介质、电子装置。

背景技术

角标是指可打在专辑或者视频海报、媒体流文件等上，用于吸引用户眼球的一种标志，角标在产品侧是一个很微小的组成部分，但是又无处不在，重点明确的角标对于拉用户、抢眼球有很重要的作用，是编辑拉升播放量的重要武器。

一般而言，对于生成系统，为了满足视频娱乐的多样性，可以为大量角标做进行处理，而这些处理大部分是通过控件处理的形式实现的，也这也就也意味着要为这些大量的角标配置大量的控件，在客户端显示这些角标时，由于需要启动大量的控件，从而需要占用大量的终端资源(如CPU资源)。

针对相关技术中生成角标需要占用较多终端资源的技术问题，目前尚未提出有效的解决方案。

发明内容

本发明实施例提供了一种角标的显示方法和装置、存储介质、电子装置，以至少解决相关技术中生成角标需要占用较多终端资源的技术问题。

根据本发明实施例的一个方面，提供了一种角标的显示方法，该方法包括：获取与客户端上播放的目标媒体内容对应的标识信息；向服务器发送标识信息，并接收服务器返回的指示信息，指示信息用于指示待显示的目标角标；基于指示信息在目标媒体内容的播放界面中显示绘制出的目标角标，其中，目标角标是调用与目标角标的类型对应的控件绘制出的。

根据本发明实施例的另一方面，还提供了一种角标的显示装置，该装置包括：获取单元，用于获取与客户端上播放的目标媒体内容对应的标识信息；交互单元，用于向服务器发送标识信息，并接收服务器返回的指示信息，其中，服务器用于根据标识信息确定指示信息，指示信息用于指示待显示的目标角标；显示单元，用于基于指示信息在目标媒体内容的播放界面中显示绘制出的目标角标，其中，目标角标是调用与目标角标的类型对应的控件绘制出的。

根据本发明实施例的另一方面，还提供了一种存储介质，该存储介质包括存储的程序，程序运行时执行上述的方法。

根据本发明实施例的另一方面，还提供了一种电子装置，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，处理器通过计算机程序执行上述的方法。

在本发明实施例中，向服务器发送与客户端上播放的目标媒体内容对应的标识信息，并接收服务器返回的指示信息，指示信息用于指示待显示的目标角标；基于指示信息在目标媒体内容的播放界面中显示绘制出的目标角标，由于目标角标是调用与目标角标的类型对应的控件绘制出的，可以解决相关技术中生成角标需要占用较多终端资源的技术问题，进而达到降低生成角标时所占用的终端资源的技术效果。

附图说明

此处所说明的附图用来提供对本发明的进一步理解，构成本申请的一部分，本发明的示意性实施例及其说明用于解释本发明，并不构成对本发明的不当限定。在附图中：

图1是根据本发明实施例的角标的显示方法的硬件环境的示意图；

图2是根据本发明实施例的一种可选的角标的显示方法的流程图；

图3是相关技术中的一种可选的角标的示意图；

图4是根据本发明实施例的一种可选的角标的显示方法的流程图；

图5是本发明实施例的一种可选的角标的示意图；

图6是本发明实施例的一种可选的包括角标的界面的示意图；

图7是本发明实施例的一种可选的包括角标的界面的示意图；

图8是本发明实施例的一种可选的包括角标的界面的示意图；

图9是本发明实施例的一种可选的包括角标的界面的示意图；

图10是根据本发明实施例的一种可选的角标的显示装置的示意图；以及

图11是根据本发明实施例的一种终端的结构框图。

具体实施方式

为了使本技术领域的人员更好地理解本发明方案，下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分的实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都应当属于本发明保护的范围。

需要说明的是，本发明的说明书和权利要求书及上述附图中的术语“第一”、“第二”等是用于区别类似的对象，而不必用于描述特定的顺序或先后次序。应该理解这样使用的数据在适当情况下可以互换，以便这里描述的本发明的实施例能够以除了在这里图示或描述的那些以外的顺序实施。此外，术语“包括”和“具有”以及他们的任何变形，意图在于覆盖不排他的包含，例如，包含了一系列步骤或单元的过程、方法、系统、产品或设备不必限于清楚地列出的那些步骤或单元，而是可包括没有清楚地列出的或对于这些过程、方法、产品或设备固有的其它步骤或单元。

首先，在对本发明实施例进行描述的过程中出现的部分名词或者术语适用于如下解释：

角标：是指展示界面(如手机等移动终端的显示界面、电脑端的网页、电视或应用等的界面)的边上或四个角等位置上显示的一些信息，可能是文字或图片等信息。

控件：控件是指对数据和方法的封装，控件可以有自己的属性和方法，其中属性是控件数据的简单访问者，方法则是控件的一些简单而可见的功能，如手机系统提供的UI组件，可以用来显示文字，图片，按钮，输入框等，简单易用。

自绘：是指系统提供另一种UI显示方案，相对于控件会更底层一点，但是灵活度高，且使用难度较大。

Canvas：中文名称叫“画布”，它是应用中所有UI组件的“容器”，一个场景中，可以允许多个Canvas对象的存在，还允许Canvas之间可以进行“嵌套”使用，如自绘可将UI效果先绘制在Canvas上，然后交给手机系统去显示，控件可理解为对Canvas的上层封装。

根据本发明实施例的一方面，提供了一种角标的显示方法的方法实施例。

可选地，在本实施例中，上述角标的显示方法可以应用于如图1所示的由服务器102和终端104所构成的硬件环境中。如图1所示，服务器102通过网络与终端104进行连接，上述网络包括但不限于：广域网、城域网或局域网，终端104并不限定于PC、手机、平板电脑、智能电视等。本发明实施例的角标的显示方法可以由服务器102来执行，也可以由终端104来执行，还可以是由服务器102和终端104共同执行。其中，终端104执行本发明实施例的角标的显示方法也可以是由安装在其上的客户端来执行。

需要说明的是，图1中的硬件环境仅用于示意性地对本申请的技术方案进行描述，实际应用中可以包括比图1中更多或更少的硬件部件，如不包括数据库，或包括更多的服务器；另，图1中虽然示出了多种类型的终端，但是实际应用中可选择其中一种或多种，或选择其他类型的终端，本申请对此不做限定。

客户端播放的目标媒体内容从服务器请求获取，服务器接收到客户端的请求后，可从数据库中进行读取，并将目标媒体内容返回客户端进行播放，在播放的过程中，可以客户端按照如下所示的步骤执行，来显示相应的角标。

步骤S11，终端获取客户端上播放的目标媒体内容的标识信息。

步骤S12，终端将获取的标识信息发送给服务器。

步骤S13，服务器根据标识信息确定用于指示待在客户端上显示的目标角标的指示信息，并返回指示信息给终端的客户端。

步骤S14，调用与目标角标的类型对应的控件绘制出与指示信息对应的目标角标(也即进行角标的渲染)。

步骤S141，确定指示信息所指示的待绘制的目标角标的类型。

步骤S142，调用与目标角标的类型对应的控件，按照指示信息的指示绘制出目标角标。

步骤S15，在客户端上显示绘制出的目标角标。

上述步骤为将本申请的技术方案应用到视频应用的角标显示的完整流程，本申请的技术方案主要涉及对步骤S14及相关步骤的改进，下面结合图2进行详述。

图2是根据本发明实施例的一种可选的角标的显示方法的流程图，如图2所示，该方法可以包括以下步骤：

步骤S202，获取与客户端上播放的目标媒体内容对应的标识信息，客户端可以为目标应用的客户端。

上述的客户端可以为视频客户端、音乐客户端、直播类客户端、游戏客户端、新闻客户端等可以播放媒体内容的客户端，可安装在上述的PC、手机、平板电脑、智能电视等终端上；上述的目标媒体内容为在客户端上当前播放的媒体内容，如视频、音乐、新闻、直播内容等。

上述的标识信息是用于对目标媒体内容进行标识的信息。

步骤S204，向服务器发送标识信息，并接收服务器返回的指示信息。

上述的服务器用于根据标识信息确定指示信息，该指示信息是用于指示待在客户端上显示的目标角标的信息，如指示目标角标的类型、角标信息或角标信息的来源等。

步骤S206，基于指示信息在目标媒体内容的播放界面中显示绘制出的目标角标，目标角标是调用与目标角标的类型对应的控件绘制出的。

需要说明的是，在本申请的技术方案不是为每个角标配置相应的控件的进行角标信息的绘制，而是相同类型的角标使用同一控件进行绘制，即调用与角标的类型对应的控件进行绘制，意即相同类型的控件可以仅保留一个即可，可以消除大部分重复的控件，从而可以降低角标绘制过程中由于调用控件引起的终端资源消耗。

通过上述步骤S202至步骤S206，向服务器发送与客户端上播放的目标媒体内容对应的标识信息，并接收服务器返回的指示信息，指示信息用于指示待显示的目标角标；基于指示信息在目标媒体内容的播放界面中显示绘制出的目标角标，由于目标角标是调用与目标角标的类型对应的控件绘制出的，可以解决相关技术中生成角标需要占用较多终端资源的技术问题，进而达到降低生成角标时所占用的终端资源的技术效果。

相关技术中的角标显示方案采用的一个角标对应一个基础子控件，需要显示某个角标时，隐藏其他所有的控件，存在的问题是，由于角标类型和角标位置种类繁多，角标视图View需要包含的子控件非常多，同时随着需求演进，子控件还有可能更多。相关技术中进行角标显示的方案具体如下：

步骤S21，角标View要一次性将如图3所示的所有位置(包括左上角、左下角、右上角、右下角等位置的角标)的所有类型的子控件(如图片控件、文本控件)全部加载进来；

步骤S22，解析服务器下发的角标数据，传递到各个角标的视图View；

步骤S23，根据角标数据，决定哪些位置的哪些类型的子控件显示，同时隐藏所有其他子控件；

步骤S24，根据角标数据，设置子控件的文本，图片URL等内容，令其展示出来；

步骤S25，当角标View在List里面时，发生角标View被重用后，需要先隐藏所有的子控件，并重新开始。

申请人经过对相关技术进行了分析，认识到上述方案主要的缺陷是由于后台下发的不确定性，因此角标View需要加载并控制所有子控件的隐藏显示逻辑，最终导致角标View非常的臃肿，往往仅仅为了显示一个图片，就需要加载全套子控件，维护和修改会变得非常困难，同时带来严重的UI性能问题。

从上述内容可知，相关技术中的隐藏显示方案，会导致角标视图View非常臃肿，存在大量冗余的子控件，导致修改维护非常困难，最终也会带来性能问题，导致页面加载速度变慢，而利用本申请的技术方案，恰可以解决该问题，下面结合图2所示的步骤详述本申请的技术方案：

在步骤S202提供的技术方案中，获取与客户端上播放的目标媒体内容对应的标识信息。

需要说明的是，上述目标媒体内容可以是预先缓存好的媒体内容(如视频、音频等)、也可为流媒体信息(客户端可一边下载以便播放)。

上述的标识信息可以是媒体内容的内容标识、媒体内容的播放状态信息(如播放进度位置、客户端时间戳、处于播放中、处于暂停中等状态)、请求该目标媒体内容的帐号等。

触发上述方法执行的条件包括但不局限于：客户端开始播放目标媒体内容(可以是从初始位置开始播放、从用户指定的位置开始播放、延续上一次退出时的位置继续播放等)、当前时间为某个固定时刻时(如正午12点、下午6点、视频播放的第20分钟等时间)、用户在客户端上的操作(如点击暂停、点击客户端上某个特殊区域等)、服务器主动下发的请求。

在步骤S204提供的技术方案中，向服务器发送标识信息，服务器根据标识信息确定指示信息，并返回指示信息给客户端，通过指示信息指示待在客户端上显示的目标角标。

可选地，服务器根据标识信息确定指示信息包括但不局限于如下方式：

1)不同阶段(可以是自然时间的时间段，如12点至13点；也可以是目标媒体内容的播放时间段，如第5分钟至第10分钟等；还可以是进入目标媒体内容时等情况)可以对应不同的角标，因此，可以根据播放进度位置或者客户端时间戳等来查找对应的角标；

2)目标媒体内容的不同播放状态(如播放中、暂停播放、快进、快退等)对应不同的角标，因此，可以根据客户端反馈的播放状态来查找对应的角标；

3)不同类型的用户帐号对应不同的角标(如帐号类型可分为充值帐号和非充值帐号)，因此，可以根据客户端反馈的帐号来查找对应的角标。

在步骤S206提供的技术方案中，基于指示信息在目标媒体内容的播放界面中显示绘制出的目标角标，目标角标是调用与目标角标的类型对应的控件绘制出的。

在本申请的实施例中，基于指示信息在目标媒体内容的播放界面中显示绘制出的目标角标可以通过如下方式实现：确定指示信息所指示的待绘制的目标角标的类型；调用与目标角标的类型对应的控件，在客户端上显示按照指示信息的指示绘制出的目标角标。

上述的角标的类型包括但不局限于：文本类型(即用于表示文字的角标)、媒体类型(即用于表示图片、动态图、短视频等媒体信息的角标)、图标icon等。

可选地，上述的角标的类型还可文本类型、媒体类型、图标icon中的至少两种的组合。

例如，为文本类型和图片类型(媒体类型)这一组合(为了便于描述，下称组合类型)，对于这一类型，调用控件的方式包括如下两种：

1)第一控件(处理文本的控件)和第二控件(处理图片的控件)是通用的，每个类型的角标均是调用该第一控件和第二控件，那么，对这一组合类型的角标，可分别调用第一控件和第二控件即可；

2)每个类型对应的控件已经组合好，例如，已经为上述组合类型配置好一组控件(即第一控件和第二控件)，那么只要是组合类型的角标，直接调用配置好的这组控件即可。

可选地，可以事先约定“角标的类型”对应的编码，如“01”对应文本类型，“10”对应媒体类型，“11”对应文本类型和媒体类型，则在上述步骤“确定指示信息所指示的待绘制的目标角标的类型”中，可以直接解析指示信息中的编码信息来确定角标的类型。

可选地，上述技术方案“调用与目标角标的类型对应的控件，在客户端上显示按照指示信息的指示绘制出的目标角标”可以通过如下步骤实现：

步骤S31，获取指示信息所指示的角标信息，目标角标用于表示角标信息。

上述的角标信息即在目标角标中显示的信息，目标角标还可包括区域于角标区域于其他区域的边框、边框区域内的底色等，具体而言，角标信息可是在目标角标中显示的信息，例如文本、多媒体信息(如短视频、图片、动态图片等)。

可选地，服务器可以直接将角标信息携带于指示信息中下发给客户端，那么客户端在获取指示信息所指示的角标信息时，直接从指示信息中获取角标信息即可。

在角标信息的数据量较大的情况下，服务器也可将存储角标信息用的地址信息通过指示信息下发给客户端，那么客户端可按照指示信息所指示的地址获取角标信息。

步骤S32，调用与目标角标的类型对应的控件在目标视图中绘制出角标信息，目标视图是目标角标的视图。

可选地，上述的调用与目标角标的类型对应的控件在目标视图中绘制出角标信息可以包括：

步骤S321，在目标角标的类型包括文本类型的情况下，调用第一控件在目标视图中绘制出角标信息中的文本信息(如HTML文案)。

上述的第一控件是用于绘制为文本类型的文本信息(文本信息可以为上述的HTML文案，还可为其他类型的文本字符)的控件，具体而言，可以选择相应系统下的用于绘制文本信息的控件，如在安卓Android系统中的“StaticLayout”控件，而不是“Canvas.drawText()”控件。

在Canvas.drawText(text,x,y,paint)中，第一个参数“text”是需要绘制的文本，第四个参数“paint”是选择的画笔，而第二和第三个参数的含义在不同的情况下的含义可能是不一样的，“x”默认是这个字符串的左边在屏幕的位置，如果设置了控件paint.setTextAlign()，那就是字符的中心，y是这个字符的基线baseline在屏幕上的位置。

可见，“Canvas.drawText()”控件并不能对文本信息的显示进行灵活的调整。

在StaticLayout(CharSequence source,int bufstart,int bufend,TextPaintpaint,int outerwidth,Alignment align,float spacingmult,float spacingadd,boolean includepad,TextUtils.TruncateAt ellipsize,int ellipsizedWidth)中：

参数CharSequence source表示需要绘制的字符串；

参数intbufstart表示绘制的字符串从第几个字符的位置开始；

参数intbufend表示绘制的字符串从第几个字符的位置结束；

参数TextPaint paint表示绘制文本的画笔，包含颜色，字体大小等属性；

参数int outerwidth表示允许字符的最大宽度，字符串超出宽度时自动换行；

参数Alignment align表示选择的文本对齐方式，有居中ALIGN_CENTER，正常ALIGN_NORMAL，反向对齐ALIGN_OPPOSITE三种；

参数float spacingmult表示相对行间距，相对字体大小，1.5f表示行间距为1.5倍的字体高度；

参数float spacingadd表示在基础行距上添加多少行距，实际行间距等于这两者的和；

参数booleanincludepad表示是否需要包含文本的上下空白区域；

参数TextUtils.TruncateAtellipsize表示省略文本的位置；参数intellipsizedWidth表示超过多少个字符开始省略，需要指出的是这layout是默认画在Canvas的(0,0)点的，如果需要调整位置只能在draw前移Canvas的起始坐标canvas.translate(x,y)。

从上述内容可知，利用“StaticLayout”控件，可以实现“换行”、“字体调整”、“文本省略显示”、“行距调整”、“分行显示”等效果。

在HTML文案中，可以给部分文字添加特殊属性，包括粗体，斜体，下划线，文字变大，文字变色等展示效果。这样的话后台随意的去修改文本的显示风格，终端(如手机客户端)不需要修改逻辑代码，Android系统这边的drawText函数不支持这些属性，会自动忽略掉，因此需要用StaticLayout来支持。

在“HTML文案”中可以对文本的样式、模板等进行调整，配合“StaticLayout”控件一起使用，便于显示方式的调整(用户可以根据需要通过调整该控件的参数来实现各种样式)，而不用重新配置一个新的控件，由此可见，既降低了对设备的资源消耗，还能降低开发者的工作量，同时还能提高观众的用户体验。

步骤S322，在目标角标的类型包括媒体类型的情况下，调用第二控件在目标视图中绘制出角标信息中的媒体信息。

上述的第二控件是用于绘制为媒体类型的媒体信息的控件。与上述第一控件类似，可以选择相应系统下的用于绘制文本信息的控件，如在安卓Android系统中的“drawBitmap()”控件。

如利用drawBitmap(Bitmap bitmap,float left,float top,Paint paint)实现基本的图片绘制，其中，Bitmap表示待绘制的图片对象，left表示偏移左边的位置，top表示偏移顶部的位置，paint表示所选择的画笔。

可选地，还可利用drawBitmap(Bitmap bitmap,Rect src,RectF dst,Paintpaint)对图片进行剪接和限定显示区域，其中，Rect src是对图片进行裁截，若是空null则显示整个图片，RectF dst是图片在Canvas画布中显示的区域，大于src则把src的裁截区放大，小于src则把src的裁截区缩小。

也即在上述实施例中，可以通过“RectF dst”对待绘制图形进行缩放。

可选地，上述的调用与目标角标的类型对应的控件在目标视图中绘制出角标信息还可以包括：

步骤S323，在角标信息中的文本信息的长度超过目标长度的情况下，调用第三控件对文本信息的显示方式进行配置，第三控件用于按照配置参数在目标视图中配置文本信息的显示方式。

需要说明的是，在调用与目标角标的类型对应的控件在目标视图中绘制出角标信息之前，可预先创建第三控件的控件对象(如StaticLayout对象)，并将控件对象保存在内存中，其中，控件对象用于在文本信息的长度超过目标长度的情况下被调用。

这样，在调用第三控件对文本信息的显示方式进行配置时，可直接从内存中调用控件对象对文本信息的显示方式进行配置。

上述步骤S323可以与步骤S321同时运行，或在之前运行，其目的在于配置超长文本的显示方式，该控件的选择与上述的第一控件和第二控件类似，如在安卓系统中，第三控件可以是与第一控件相同的控件，可以为StaticLayout控件。

StaticLayout是Android系统中处理文字换行的一个工具类，StaticLayout可以用于实现文本绘制换行处理，如配置需要分行的字符串、需要分行的字符串从第几个字符的位置开始、需要分行的字符串到哪里结束、字符串超出宽度时自动换行、相对行间距、相对字体大小等信息，具体见上述记载。

步骤S33，在目标媒体内容的播放界面中显示绘制完角标信息的目标视图。

可选地，在本申请的技术方案中，除了可以采用基于“StaticLayout”控件和“drawBitmap()”控件，还可使用“SurfaceView()”，“GLSurfaceView”等提供的自绘方案。

在本申请的技术方案中，可以完全消除角标View的子控件，使得角标View变得非常轻量级，提升页面加载速度和滑动流畅度，同时抽取了网络图片和HTML的自绘实现组件，非常利于后续的扩展和维护。

上述方案以在Android系统中实现为例，但是本申请的方法也可应用于IOS、Linux、Windows等操作系统，仅仅在于调用的控件名称不同而已，使用对应功能的控件进行调用即可。

作为一种可选的实施例，下面以在Android操作系统为例进一步详述本申请的实施例。

在本申请的技术方案中，可根据后台配置参数，基于Canvas绘制的方式将要显示的UI画在同一个视图View中，实现轻量级UI且灵活多变易扩展的效果。

步骤S401，在客户端上实现HTML文案和远程图片的绘制工具类(如图5所示)。

(1)实现HTML文案绘制工具类

步骤S41，绘制HTML(HyperText Markup Language，即超级文本标记语言)文案需要使用Android系统提供的StaticLayout类；

步骤S42，如果要实现单行超长以后的Ellipsize效果(即文字超长后的显示效果)，StaticLayout的该构造函数是处于隐藏hide状态，不能直接调用，因此需要利用到Java的反射技术(即上述的StaticLayout类)来创建。

正常情况下，HTML文案的显示如图6所示的“VIP”，由于字符串未超长，可不用实现Ellipsize效果；若HTML文案为超长文本，如图7所示，“旁白：若是敌人追上门该怎么是好？”超过了一行的最长字数，则可以通过StaticLayout对象(或称为控件)实现如图7所示的换行效果，也可实现如图8所示的效果，将一行不能显示完的内容用省略号“…”表示，此处的表示形式具体可以通过配置实现。

步骤S43，相关技术中StaticLayout对象每帧绘制都需要重新创建，这样会带来性能问题。在本申请的技术方案中可使用内存池缓存已经创建的StaticLayout对象，方便共用，解决重复创建带来的性能问题。

步骤S44，调用StaticLayout的draw函数在步骤S42绘制文本，基于绘制工具类，实现多种角标类型的绘制类。

(2)实现图片绘制的工具类。

步骤S51，图片的URL可能指向本地图片资源，也可能指向远端的图片服务器，可做对应的区分，来分别获取位图文件Bitmap对象。

步骤S52，远端图片服务器的图片URL，需要调用图片库获取Bitmap对象，图片库可以是开源的Fresco，Glide等，也可以自己开发的，能下载并获取到Bitmap就行。

步骤S53，根据Bitmap的尺寸和角标位置属性等，计算得出Bitmap的绘制矩形坐标。

步骤S54，利用“drawBitmap()”将Bitmap绘制到Canvas上，如图9所示的绘制有“对战游戏”广告图片的角标。

步骤S402，实现多种角标类型的绘制类。

以图片上叠文字类型的绘制工具类为例：

步骤S61，按照上述方式创建文本绘制工具类的对象。

步骤S62，按照上述方式创建图片绘制工具类的对象。

步骤S63，根据外部参数，调用图片绘制工具类对象，完成图片绘制。

步骤S64，根据外部参数，调用文本绘制工具类对象，完成文本绘制。

基于上述的绘制工具类，可以实现各种角标类型的绘制类，其他类的绘制工具类，由此类推，可完成其他角标类型绘制类的工具。

步骤S403，解析后台参数，决定当前需要绘制的角标类型。

对后台角标参数(即指示信息)如何解析，可由前后端协议决定，具体可以是Json(JavaScript Object Notation，即JS对象标记，是一种轻量级的数据交换格式)，XML(Extensible Markup Language，可扩展标记语言，是一种用于标记电子文件使其具有结构性的标记语言)，protobuf(一种数据交换的格式，它独立于语言，独立于平台)等交换协议。

上述角标参数带的信息包括：角标位置、角标类型、角标内容信息(即角标信息)等。

步骤S404，根据后台参数，基于角标类型绘制类，将最终的UI绘制角标视图View上。

步骤S71，角标参数传递到角标View对象之后，角标View对象根据角标参数里的角标类型，从实现的角标类型绘制类里，挑一个出来创建，如果是多个角标的情况，就会创建多个角标类型的工具类。

步骤S72，将角标参数里的角标位置，角标内容信息，以及从角标View中获取的Canvas，传递到角标类型绘制类里面，那么所有的角标UI就可以绘制到Canvas上。

步骤S73，Android系统将Canvas上的角标UI，显示到屏幕上。

在本申请的技术方案中，克服了普通的Canvas.drawText()无法实现HTML文案的绘制的问题，通过用StaticLayout实现了HTML文案的绘制；为了避免在绘制中产生大量的StaticLayout对象，导致性能问题，采用对象池的方案复用StaticLayout，达到灵活机动的效果。

需要说明的是，对于前述的各方法实施例，为了简单描述，故将其都表述为一系列的动作组合，但是本领域技术人员应该知悉，本发明并不受所描述的动作顺序的限制，因为依据本发明，某些步骤可以采用其他顺序或者同时进行。其次，本领域技术人员也应该知悉，说明书中所描述的实施例均属于优选实施例，所涉及的动作和模块并不一定是本发明所必须的。

通过以上的实施方式的描述，本领域的技术人员可以清楚地了解到根据上述实施例的方法可借助软件加必需的通用硬件平台的方式来实现，当然也可以通过硬件，但很多情况下前者是更佳的实施方式。基于这样的理解，本发明的技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质(如ROM/RAM、磁碟、光盘)中，包括若干指令用以使得一台终端设备(可以是手机，计算机，服务器，或者网络设备等)执行本发明各个实施例所述的方法。

根据本发明实施例的另一个方面，还提供了一种用于实施上述角标的显示方法的角标的显示装置。图10是根据本发明实施例的一种可选的角标的显示装置的示意图，如图10所示，该装置可以包括：获取单元1001、交互单元1003以及显示单元1005。

获取单元1001，用于获取与客户端上播放的目标媒体内容对应的标识信息。

上述的客户端可以为视频客户端、音乐客户端、直播类客户端、游戏客户端、新闻客户端等可以播放媒体内容的客户端；上述的目标媒体内容为在客户端上当前播放的媒体内容，如视频、音乐、新闻、直播内容等。

上述的标识信息是用于对目标媒体内容进行标识的信息。

交互单元1003，用于向服务器发送标识信息，并接收服务器返回的指示信息，其中，服务器用于根据标识信息确定指示信息，指示信息用于指示待显示的目标角标。

上述的服务器用于根据标识信息确定指示信息，该指示信息是用于指示待在客户端上显示的目标角标的信息，如指示目标角标的类型、角标信息或角标信息的来源等。

显示单元1005，用于基于指示信息在目标媒体内容的播放界面中显示绘制出的目标角标，其中，目标角标是调用与目标角标的类型对应的控件绘制出的。

需要说明的是，在本申请的技术方案不是为每个角标配置相应的控件的进行角标信息的绘制，而是相同类型的角标使用同一控件进行绘制，即调用与角标的类型对应的控件进行绘制，意即相同类型的控件可以仅保留一个即可，可以消除大部分重复的控件，从而可以降低角标绘制过程中由于调用控件引起的终端资源消耗。

需要说明的是，该实施例中的获取单元1001可以用于执行本申请实施例中的步骤S202，该实施例中的交互单元1003可以用于执行本申请实施例中的步骤S204，该实施例中的显示单元1005可以用于执行本申请实施例中的步骤S206。

此处需要说明的是，上述模块与对应的步骤所实现的示例和应用场景相同，但不限于上述实施例所公开的内容。需要说明的是，上述模块作为装置的一部分可以运行在如图1所示的硬件环境中，可以通过软件实现，也可以通过硬件实现。

通过上述模块，向服务器发送与客户端上播放的目标媒体内容对应的标识信息，并接收服务器返回的指示信息，指示信息用于指示待显示的目标角标；基于指示信息在目标媒体内容的播放界面中显示绘制出的目标角标，由于目标角标是调用与目标角标的类型对应的控件绘制出的，可以解决相关技术中生成角标需要占用较多终端资源的技术问题，进而达到降低生成角标时所占用的终端资源的技术效果。

相关技术中的角标显示方案采用的一个角标对应一个基础子控件，需要显示某个角标时，隐藏其他所有的控件，存在的问题是，由于角标类型和角标位置种类繁多，角标视图View需要包含的子控件非常多，同时随着需求演进，子控件还有可能更多。相关技术中进行角标显示的方案具体如下：

步骤S21，角标View要一次性将如图3所示的所有位置(包括左上角、左下角、右上角、右下角等位置的角标)的所有类型的子控件全部加载进来；

步骤S22，解析服务器下发的角标数据，传递到各个角标的视图View；

步骤S23，根据角标数据，决定哪些位置的哪些类型的子控件显示，同时隐藏所有其他子控件；

步骤S24，根据角标数据，设置子控件的文本，图片URL等内容，令其展示出来；

步骤S25，当角标View在List里面时，发生角标View被重用后，需要先隐藏所有的子控件，并重新开始。

申请人经过对相关技术进行了分析，认识到上述方案主要的缺陷是由于后台下发的不确定性，因此角标View需要加载并控制所有子控件的隐藏显示逻辑，最终导致角标View非常的臃肿，往往仅仅为了显示一个图片，就需要加载全套子控件，维护和修改会变得非常困难，同时带来严重的UI性能问题。

从上述内容可知，相关技术中的隐藏显示方案，会导致角标视图View非常臃肿，存在大量冗余的子控件，导致修改维护非常困难，最终也会带来性能问题，导致页面加载速度变慢，而利用本申请的技术方案，恰可以解决该问题，下面结合图10所示的装置详述本申请的技术方案：

上述的显示单元可包括：确定模块，用于确定指示信息所指示的待绘制的目标角标的类型；显示模块，用于调用与目标角标的类型对应的控件，在客户端上显示按照指示信息的指示绘制出的目标角标。

可选地，显示模块可包括：获取子模块，用于获取指示信息所指示的角标信息，其中，目标角标用于表示角标信息；绘制子模块，用于调用与目标角标的类型对应的控件在目标视图中绘制出角标信息，其中，目标视图是用于表示目标角标的视图；显示子模块，用于在目标媒体内容的播放界面中显示绘制完角标信息的目标视图。

可选地，绘制子模块还可用于：在目标角标的类型包括文本类型的情况下，调用第一控件在目标视图中绘制出角标信息中的文本信息，其中，第一控件是用于绘制为文本类型的文本信息的控件；在目标角标的类型包括媒体类型的情况下，调用第二控件在目标视图中绘制出角标信息中的媒体信息，其中，第二控件是用于绘制为媒体类型的媒体信息的控件。

可选地，绘制子模块还可用于：在角标信息中的文本信息的长度超过目标长度的情况下，调用第三控件对文本信息的显示方式进行配置，其中，第三控件用于按照配置参数在目标视图中配置文本信息的显示方式。

可选地，本申请的装置还可包括：创建单元，用于在调用与目标角标的类型对应的控件在目标视图中绘制出角标信息之前，创建第三控件的控件对象，其中，目标线程用于在文本信息的长度超过目标长度的情况下被调用。

可选地，获取子模块还可用于：从指示信息中获取角标信息；按照指示信息所指示的地址获取角标信息。

在本申请的技术方案中，克服了普通的Canvas.drawText()无法实现HTML文案的绘制的问题，通过用StaticLayout实现了HTML文案的绘制；为了避免在绘制中产生大量的StaticLayout对象，导致性能问题，采用对象池的方案复用StaticLayout，达到灵活机动的效果。

此处需要说明的是，上述模块与对应的步骤所实现的示例和应用场景相同，但不限于上述实施例所公开的内容。需要说明的是，上述模块作为装置的一部分可以运行在如图1所示的硬件环境中，可以通过软件实现，也可以通过硬件实现，其中，硬件环境包括网络环境。

根据本发明实施例的另一个方面，还提供了一种用于实施上述角标的显示方法的服务器或终端。

图11是根据本发明实施例的一种终端的结构框图，如图11所示，该终端可以包括：一个或多个(图11中仅示出一个)处理器1101、存储器1103、以及传输装置1105(如上述实施例中的发送装置)，如图11所示，该终端还可以包括输入输出设备1107。

其中，存储器1103可用于存储软件程序以及模块，如本发明实施例中的角标的显示方法和装置对应的程序指令/模块，处理器1101通过运行存储在存储器1103内的软件程序以及模块，从而执行各种功能应用以及数据处理，即实现上述的角标的显示方法。存储器1103可包括高速随机存储器，还可以包括非易失性存储器，如一个或者多个磁性存储装置、闪存、或者其他非易失性固态存储器。在一些实例中，存储器1103可进一步包括相对于处理器1101远程设置的存储器，这些远程存储器可以通过网络连接至终端。上述网络的实例包括但不限于互联网、企业内部网、局域网、移动通信网及其组合。

上述的传输装置1105用于经由一个网络接收或者发送数据，还可以用于处理器与存储器之间的数据传输。上述的网络具体实例可包括有线网络及无线网络。在一个实例中，传输装置1105包括一个网络适配器(Network Interface Controller，NIC)，其可通过网线与其他网络设备与路由器相连从而可与互联网或局域网进行通讯。在一个实例中，传输装置1105为射频(Radio Frequency，RF)模块，其用于通过无线方式与互联网进行通讯。

其中，具体地，存储器1103用于存储应用程序。

处理器1101可以通过传输装置1105调用存储器1103存储的应用程序，以执行下述步骤：

获取与客户端上播放的目标媒体内容对应的标识信息；

向服务器发送标识信息，并接收服务器返回的指示信息，其中，服务器用于根据标识信息确定指示信息，指示信息用于指示待显示的目标角标；

基于指示信息在目标媒体内容的播放界面中显示绘制出的目标角标，其中，目标角标是调用与目标角标的类型对应的控件绘制出的。

处理器1101还用于执行下述步骤：

在目标角标的类型包括文本类型的情况下，调用第一控件在目标视图中绘制出角标信息中的文本信息，其中，第一控件是用于绘制为文本类型的文本信息的控件；

在目标角标的类型包括媒体类型的情况下，调用第二控件在目标视图中绘制出角标信息中的媒体信息，其中，第二控件是用于绘制为媒体类型的媒体信息的控件。

采用本发明实施例，向服务器发送与客户端上播放的目标媒体内容对应的标识信息，并接收服务器返回的指示信息，指示信息用于指示待显示的目标角标；基于指示信息在目标媒体内容的播放界面中显示绘制出的目标角标，由于目标角标是调用与目标角标的类型对应的控件绘制出的，可以解决相关技术中生成角标需要占用较多终端资源的技术问题，进而达到降低生成角标时所占用的终端资源的技术效果。

可选地，本实施例中的具体示例可以参考上述实施例中所描述的示例，本实施例在此不再赘述。

本领域普通技术人员可以理解，图11所示的结构仅为示意，终端可以是智能手机(如Android手机、iOS手机等)、平板电脑、掌上电脑以及移动互联网设备(Mobile InternetDevices，MID)、PAD等终端设备。图11其并不对上述电子装置的结构造成限定。例如，终端还可包括比图11中所示更多或者更少的组件(如网络接口、显示装置等)，或者具有与图11所示不同的配置。

本领域普通技术人员可以理解上述实施例的各种方法中的全部或部分步骤是可以通过程序来指令终端设备相关的硬件来完成，该程序可以存储于一计算机可读存储介质中，存储介质可以包括：闪存盘、只读存储器(Read-Only Memory，ROM)、随机存取器(RandomAccess Memory，RAM)、磁盘或光盘等。

本发明的实施例还提供了一种存储介质。可选地，在本实施例中，上述存储介质可以用于执行角标的显示方法的程序代码。

可选地，在本实施例中，上述存储介质可以位于上述实施例所示的网络中的多个网络设备中的至少一个网络设备上。

可选地，在本实施例中，存储介质被设置为存储用于执行以下步骤的程序代码：

S81，获取与客户端上播放的目标媒体内容对应的标识信息；

S82，向服务器发送标识信息，并接收服务器返回的指示信息，其中，服务器用于根据标识信息确定指示信息，指示信息用于指示待显示的目标角标；

S83，基于指示信息在目标媒体内容的播放界面中显示绘制出的目标角标，其中，目标角标是调用与目标角标的类型对应的控件绘制出的。

可选地，存储介质还被设置为存储用于执行以下步骤的程序代码：

S91，在目标角标的类型包括文本类型的情况下，调用第一控件在目标视图中绘制出角标信息中的文本信息，其中，第一控件是用于绘制为文本类型的文本信息的控件；

S92，在目标角标的类型包括媒体类型的情况下，调用第二控件在目标视图中绘制出角标信息中的媒体信息，其中，第二控件是用于绘制为媒体类型的媒体信息的控件。

可选地，本实施例中的具体示例可以参考上述实施例中所描述的示例，本实施例在此不再赘述。

可选地，在本实施例中，上述存储介质可以包括但不限于：U盘、只读存储器(ROM，Read-Only Memory)、随机存取存储器(RAM，Random Access Memory)、移动硬盘、磁碟或者光盘等各种可以存储程序代码的介质。

上述本发明实施例序号仅仅为了描述，不代表实施例的优劣。

上述实施例中的集成的单元如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在上述计算机可读取的存储介质中。基于这样的理解，本发明的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的全部或部分可以以软件产品的形式体现出来，该计算机软件产品存储在存储介质中，包括若干指令用以使得一台或多台计算机设备(可为个人计算机、服务器或者网络设备等)执行本发明各个实施例所述方法的全部或部分步骤。

在本发明的上述实施例中，对各个实施例的描述都各有侧重，某个实施例中没有详述的部分，可以参见其他实施例的相关描述。

在本申请所提供的几个实施例中，应该理解到，所揭露的客户端，可通过其它的方式实现。其中，以上所描述的装置实施例仅仅是示意性的，例如所述单元的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式，例如多个单元或组件可以结合或者可以集成到另一个系统，或一些特征可以忽略，或不执行。另一点，所显示或讨论的相互之间的耦合或直接耦合或通信连接可以是通过一些接口，单元或模块的间接耦合或通信连接，可以是电性或其它的形式。

所述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部单元来实现本实施例方案的目的。

另外，在本发明各个实施例中的各功能单元可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个单元中。上述集成的单元既可以采用硬件的形式实现，也可以采用软件功能单元的形式实现。

以上所述仅是本发明的优选实施方式，应当指出，对于本技术领域的普通技术人员来说，在不脱离本发明原理的前提下，还可以做出若干改进和润饰，这些改进和润饰也应视为本发明的保护范围。

Claims (10)

1.一种角标的显示方法，其特征在于，包括：

获取与客户端上播放的目标媒体内容对应的标识信息；

向服务器发送所述标识信息，并接收所述服务器返回的指示信息，其中，所述服务器用于根据所述标识信息确定所述指示信息，所述指示信息用于指示待显示的目标角标；

确定所述指示信息所指示的所述目标角标的类型，获取所述指示信息所指示的所述角标信息，其中，从所述指示信息中获取所述角标信息或按照所述指示信息所指示的地址获取所述角标信息；

调用与所述目标角标的类型对应的控件在目标视图中绘制出所述角标信息，其中，所述目标视图是用于表示所述目标角标的视图；

在所述目标媒体内容的播放界面中显示绘制完所述角标信息的所述目标视图，以显示出所述目标角标。

2.根据权利要求1所述的方法，其特征在于，调用与所述目标角标的类型对应的控件在目标视图中绘制出所述角标信息包括：

在所述目标角标的类型包括文本类型的情况下，调用第一控件在所述目标视图中绘制出所述角标信息中的文本信息，其中，所述第一控件是用于绘制为所述文本类型的信息的控件；

在所述目标角标的类型包括媒体类型的情况下，调用第二控件在所述目标视图中绘制出所述角标信息中的媒体信息，其中，所述第二控件是用于绘制为所述媒体类型的信息的控件。

3.根据权利要求1所述的方法，其特征在于，调用与所述目标角标的类型对应的控件在目标视图中绘制出所述角标信息包括：

在所述角标信息中的文本信息的长度超过目标长度的情况下，调用第三控件对所述文本信息的显示方式进行配置，其中，所述第三控件用于按照配置参数在所述目标视图中配置所述文本信息的显示方式。

4.根据权利要求3所述的方法，其特征在于，

在调用与所述目标角标的类型对应的控件在目标视图中绘制出所述角标信息之前，所述方法还包括：创建所述第三控件的控件对象，并将所述控件对象保存在内存中，其中，所述控件对象用于在文本信息的长度超过目标长度的情况下被调用；

调用第三控件对所述文本信息的显示方式进行配置包括：从所述内存中调用所述控件对象对所述文本信息的显示方式进行配置。

5.一种角标的显示装置，其特征在于，包括：

获取单元，用于获取与客户端上播放的目标媒体内容对应的标识信息；

交互单元，用于向服务器发送所述标识信息，并接收所述服务器返回的指示信息，其中，所述服务器用于根据所述标识信息确定指示信息，所述指示信息用于指示待显示的目标角标；

显示单元，用于确定所述指示信息所指示的所述目标角标的类型，获取所述指示信息所指示的所述角标信息，其中，从所述指示信息中获取所述角标信息或按照所述指示信息所指示的地址获取所述角标信息；

调用与所述目标角标的类型对应的控件在目标视图中绘制出所述角标信息，其中，所述目标视图是用于表示所述目标角标的视图；

在所述目标媒体内容的播放界面中显示绘制完所述角标信息的所述目标视图，以显示出所述目标角标。

6.根据权利要求5所述的装置，其特征在于，所述显示单元还用于：

在所述目标角标的类型包括文本类型的情况下，调用第一控件在所述目标视图中绘制出所述角标信息中的文本信息，其中，所述第一控件是用于绘制为所述文本类型的文本的控件；

在所述目标角标的类型包括媒体类型的情况下，调用第二控件在所述目标视图中绘制出所述角标信息中的媒体信息，其中，所述第二控件是用于绘制为所述媒体类型的媒体的控件。

7.根据权利要求5所述的装置，其特征在于，所述显示单元还用于：

在所述角标信息中的文本信息的长度超过目标长度的情况下，调用第三控件对所述文本信息的显示方式进行配置，其中，所述第三控件用于按照配置参数在所述目标视图中配置所述文本信息的显示方式。

8.根据权利要求7所述的装置，其特征在于，所述装置还包括：

创建单元，用于在调用与所述目标角标的类型对应的控件在目标视图中绘制出所述角标信息之前，创建所述第三控件的控件对象，并将所述控件对象保存在内存中，其中，所述控件对象用于在文本信息的长度超过目标长度的情况下被调用。

9.一种存储介质，其特征在于，所述存储介质包括存储的程序，其中，所述程序在被网络设备运行时执行上述权利要求1至4任一项中所述的方法。

10.一种电子装置，包括存储器、处理器及存储在所述存储器上并可在所述处理器上运行的计算机程序，其特征在于，所述处理器通过所述计算机程序执行上述权利要求1至4任一项中所述的方法。

Images