CN109426495A - 一种视图组件的布局方法及设备 - Google Patents

Abstract

本申请公开了一种视图组件的布局方法及设备，包括：确定布局容器中包含的第一视图组件和第二视图组件；加载显示所述第一视图组件和所述第二视图组件，所述第一视图组件与所述第二视图组件呈层叠式布局。也就是说，通过本申请实施例提供的技术方案能够有效实现布局容器中的不同视图组件之间呈层叠式布局，有效提高了用户的视觉效果，与平铺布局相比，增加了不同视图组件之间的紧凑性，在展示商品对象的某种属性时，使得用户能够快速确定其区别，提升用户对商品对象的用户体验。

Description

一种视图组件的布局方法及设备

技术领域

本申请涉及互联网信息处理技术领域以及计算机技术领域，尤其涉及一种视图组件的布局方法及设备。

背景技术

客户端的用户界面(User Interface，UI)是用户与客户端进行交互时，用户操作的对象。UI是由视图组件(view)组成的，客户端根据不同的布局逻辑对UI中的view进行布局，可以实现不同的布局样式。

目前，常见的布局样式是平铺样式。如图1所示，为现有技术中常见的平铺样式的示意图。从图1中可以看出，UI中的视图组件采用水平线性布局方式(视图组件1与视图组件2、视图组件3与视图组件4、视图组件5与视图组件6)/垂直线性布局方式(视图组件1、视图组件3与视图组件5；视图组件2、视图组件4与视图组件6)排列。

但是，在通过视图组件展示商品对象的某种属性时，采用这种布局样式，使用户的视觉体验较差，无法较好的选择商品对象，降低用户对商品对象的用户体验。

发明内容

有鉴于此，本申请实施例提供了一种视图组件的布局方法及设备，用于解决现有技术中平铺样式存在的用户的视觉体验较差的问题。

本申请实施例采用下述技术方案：

本申请实施例提供一种视图组件的布局方法，包括：

确定布局容器中包含的第一视图组件和第二视图组件；

加载显示所述第一视图组件和所述第二视图组件，所述第一视图组件与所述第二视图组件呈层叠式布局。

本申请实施例还提供一种视图组件的布局方法，包括：

确定布局容器中包含的第一视图组件和第二视图组件，所述第一视图组件与所述第二视图组件之间的间隔为负值；

加载显示所述第一视图组件和所述第二视图组件，所述第一视图组件与所述第二视图组件呈层叠式布局。

本申请实施例还提供一种视图组件的布局方法，包括：

确定布局容器中包含的第一视图组件和第二视图组件，所述第一视图组件和所述第二视图组件上按照设定路径创建蒙层；

加载显示所述第一视图组件和所述第二视图组件，所述第一视图组件与所述第二视图组件呈层叠式布局。

本申请实施例还提供了一种视图组件的布局设备，包括：

确定单元，确定布局容器中包含的第一视图组件和第二视图组件；

处理单元，加载显示所述第一视图组件和所述第二视图组件，所述第一视图组件与所述第二视图组件呈层叠式布局。

本申请实施例还提供了一种视图组件的布局设备，包括：

确定单元，确定布局容器中包含的第一视图组件和第二视图组件，所述第一视图组件与所述第二视图组件之间的间隔为负值；

处理单元，加载显示所述第一视图组件和所述第二视图组件，所述第一视图组件与所述第二视图组件呈层叠式布局。

本申请实施例还提供了一种视图组件的布局设备，包括：

确定单元，确定布局容器中包含的第一视图组件和第二视图组件，所述第一视图组件和所述第二视图组件上按照设定路径创建蒙层；

处理单元，加载显示所述第一视图组件和所述第二视图组件，所述第一视图组件与所述第二视图组件呈层叠式布局。

本申请实施例采用的上述至少一个技术方案能够达到以下有益效果：

通过确定布局容器中包含的第一视图组件和第二视图组件；加载显示所述第一视图组件和所述第二视图组件，所述第一视图组件与所述第二视图组件呈层叠式布局。也就是说，通过本申请实施例提供的技术方案能够有效实现布局容器中的不同视图组件之间呈层叠式布局，有效提高了用户的视觉效果，与平铺布局相比，增加了不同视图组件之间的紧凑性，在展示商品对象的某种属性时，使得用户能够快速确定其区别，提升用户对商品对象的用户体验。

附图说明

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

图1为现有技术中常见的平铺样式的示意图；

图2为本申请实施例提供的一种视图组件的布局方法的流程示意图；

图2(a)为本申请实施例提供的一种视图组件的绘制路径的示意图；

图2(b)为本申请实施例提供的一种视图组件的绘制路径的示意图；

图3为本申请实施例提供的一种层叠式布局的示意图；

图3(a)为本申请实施例图3所示的层叠式布局中视图组件的展开状态示意图；

图3(b)为本申请实施例图3所示的层叠式布局中视图组件的收缩状态示意图；

图4为本申请实施例提供的另一种层叠式布局的示意图；

图4(a)为本申请实施例图4所示的层叠式布局中视图组件的展开状态示意图；

图4(b)为本申请实施例图4所示的层叠式布局中视图组件的收缩状态示意图；

图5为本申请实施例提供的一种视图组件的布局方法的流程示意图；

图6为本申请实施例提供的一种视图组件的布局方法的流程示意图；

图7为本申请实施例提供的一种视图组件的布局设备的结构示意图；

图8为本申请实施例提供的一种视图组件的布局设备的结构示意图；

图9为本申请实施例提供的一种视图组件的布局设备的结构示意图。

具体实施方式

为了实现本申请的目的，本申请实施例提供了一种视图组件的布局方法及设备，通过确定布局容器中包含的第一视图组件和第二视图组件；加载显示所述第一视图组件和所述第二视图组件，所述第一视图组件与所述第二视图组件呈层叠式布局。也就是说，通过本申请实施例提供的技术方案能够有效实现布局容器中的不同视图组件之间呈层叠式布局，有效提高了用户的视觉效果，与平铺布局相比，增加了不同视图组件之间的紧凑性，在展示商品对象的某种属性时，使得用户能够快速确定其区别，提升用户对商品对象的用户体验。

需要说明的是，本申请实施例中所记载的布局容器可以理解为视图组件的集合，在布局容器中包含了多个视图组件，并且布局容器中包含这些视图组件的布局逻辑，这里的布局逻辑包含视图组件的排列顺序(例如：线性排列等等)，不同视图组件之间的相对位置关系，等等。通过布局控制器可以实现对布局容器中包含的视图组件的布局。

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

以下结合附图，详细说明本申请各实施例提供的技术方案。

图2为本申请实施例提供的一种视图组件的布局方法的流程示意图。所述方法可以如下所示。

步骤201：确定布局容器中包含的第一视图组件和第二视图组件。

在本申请实施例中，在确定布局容器中包含的第一视图组件和第二视图组件之前，所述方法还包括：

绘制第一视图组件和第二视图组件。

由于操作系统不同，那么绘制视图组件的方式不同。这里以操作系统为Android操作系统和iOS操作系统为例分别进行说明。

下面以操作系统为Android操作系统为例说明如何绘制得到第一视图组件和第二视图组件的。

首先，绘制第一视图组件的边框和第二视图组件的边框。

在本申请实施例中第一视图组件和第二视图组件的边框可以是规则形状，也可以是不规则形状，这里不做具体限定。

以不规则形状为例绘制得到视图组件的边框。第一步，初始化视图组件的宽度值、高度值、四周圆角的半径值，设置边框画笔Paint、颜色画笔Paint(这里包含设置去锯齿、空心等参数)。

第二步，创建边框绘制路径Path、颜色绘制路径Path。

绘制路径Path起点为绘制矩形的左上角圆弧，绘制顺序为：绘制矩形左上角的圆弧、绘制凸起多边形的上边、绘制凸起多边形右下角的圆弧、绘制凸起多边形的右边、绘制矩形的上边、绘制矩形右上角的圆弧、绘制矩形的右边、绘制矩形右下角圆弧、绘制矩形的下边、绘制矩形左下角的圆弧、绘制矩形的左边、回到起点。

第三步，通过画布Canvas画边框以及画颜色。第四步，绘制视图组件四周阴影。

图2(a)为本申请实施例提供的一种视图组件的绘制路径的示意图。

从图2(a)中可以看到通过上述方式绘制得到的视图组件。

其次，调用类目间隔Item Decoration，将所述第一视图组件与所述第二视图组件之间的间隔设置为负值。

具体地，若所述第一视图组件的边框的样式和所述第二视图组件的边框的样式为上边框的左上角/右上角凸起的矩形，那么将所述第一视图组件与所述第二视图组件之间的间隔的大小值设置为凸起的高度。

在本申请实施例中利用RecyclerView分割线的可扩展性以及能自定义的特性。通过继承ItemDecoration抽象方法，并重载其getItemOffset()方法，将不同视图组件(相邻分布的视图组件之间)之间的分割线的数值设置为负值，即将平铺逻辑对应的相邻分布的两个视图组件之间的间隔设置为负值，从而使相邻分布的两个视图组件形成叠加效果。

进而，利用适配器设置多个这样的视图组件，那么适配器对应的布局容器中的多个视图组件可以形成叠加的层叠式布局。

下面以操作系统为iOS操作系统为例说明如何绘制得到第一视图组件的。

首先，绘制第一视图组件的边框，所述边框为矩形。

其次，在所述第一视图组件上按照设定路径创建CAShapeLayer，所述CAShapeLayer为所述第一视图组件的蒙层。

其中，所述设定路径为：

A(0，R)—〉B(W2，R)—〉C(W1，R)—〉D(W1，H+R)—〉E(W2，H+R)—〉F(0，H+R)—〉A(0，R)的闭合曲线；

其中，以所述第一视图组件的边框的左上角顶点为坐标系的原点，AB与所述第一视图组件的上边框形成凸起曲线，BC、CD和DE为线段，EF与所述第一视图组件的下边框形成凸起曲线，R为凸起曲线的半径，W1为所述第一视图组件的边框的宽度，W2为凸起曲线的宽度，H为所述第一视图组件的边框的高度。

图2(b)为本申请实施例提供的一种视图组件的绘制路径的示意图。

从图2(b)中可以看到通过上述方式绘制得到的视图组件。

步骤202：加载显示所述第一视图组件和所述第二视图组件，所述第一视图组件与所述第二视图组件呈层叠式布局。

在本申请实施例中，若第一视图组件与第二视图组件采用图2(a)所示的绘制路径得到，那么在加载显示所述第一视图组件和所述第二视图组件后，所述第一视图组件与所述第二视图组件呈层叠式布局，如图3所示，为本申请实施例提供的一种层叠式布局的示意图。

从图3中可以看出，第一视图组件与第二视图组件呈叠加效果。

针对图3中所示的各视图组件，可以对这些视图组件执行操作，实现视图组件的展开与收缩。

较优地，所述方法还包括：

接收用户发送的触控指令，所述触控指令用于变更被触控的视图组件的显示状态；

在确定所述被触控的视图组件的显示状态为收缩状态时，将所述被触控的视图组件的显示状态由收缩状态调整为展开状态；

在确定所述被触控的视图组件的显示状态为展开状态时，将所述被触控的视图组件的显示状态由展开状态调整为收缩状态。

这里以单个视图组件的显示状态发生变化为例进行说明。

在将所述被触控的视图组件的显示状态由收缩状态调整为展开状态时，调用ValueAnimatorSet，基于所述被触控的视图组件的显示位置和设置的高度属性值，将所述被触控的视图组件展开设定高度属性值对应的高度，视为将所述被触控的视图组件的显示状态由收缩状态调整为展开状态。

图3(a)为本申请实施例图3所示的层叠式布局中视图组件的展开状态示意图。

较优地，在将所述被触控的视图组件展开设定高度后，所述方法还包括：

若ValueAnimatorSet中还包含纹理属性值，那么根据所述纹理属性值，在展开的所述被触控的视图组件中动态显示所述纹理属性值对应的纹理状态。

在此，如果再次接收到用户发送的触控指令，由于此时所述被触控的视图组件的显示状态为展开状态，那么将所述被触控的视图组件的显示状态由展开状态调整为收缩状态，如图3(b)所示，为本申请实施例图3所示的层叠式布局中视图组件的收缩状态示意图。

在本申请实施例中，在将所述被触控的视图组件展开设定高度前，所述方法还包括：

确定所述布局容器中是否存在其他视图组件处于展开状态；

若存在，则将所述其他视图组件的显示状态由展开状态调整为收缩状态。

也就是，可以在不同的视图组件之间实现展开与收缩的切换操作。

例如：当当前触控指令所对应的第一视图组件处于上一次触控操作的第二视图组件的上方时，第一视图组件的高度增加，同时第二视图组件的显示高度减小，模拟形成向下伸展的动画，此时第一视图组件的显示状态由收缩状态调整为展开状态，而第二视图组件的显示状态由展开状态调整为收缩状态。

再例如：当当前触控指令所对应的第一视图组件处于上一次触控操作的第二视图组件的下方时，第一视图组件的高度增加，同时第二视图组件的显示高度减小，模拟形成向上伸展的动画，此时第一视图组件的显示状态由收缩状态调整为展开状态，而第二视图组件的显示状态由展开状态调整为收缩状态。

在本申请实施例中，若第一视图组件与第二视图组件采用图2(b)所示的绘制路径得到，那么在加载显示所述第一视图组件和所述第二视图组件后，所述第一视图组件与所述第二视图组件呈层叠式布局，如图4所示，为本申请实施例提供的一种层叠式布局的示意图。

从图4中可以看出，第一视图组件与第二视图组件呈叠加效果。

针对图4中所示的各视图组件，可以对这些视图组件执行操作，实现视图组件的展开与收缩。

较优地，所述方法还包括：

接收用户发送的触控指令，所述触控指令用于变更被触控的视图组件的显示状态；

在确定所述被触控的视图组件的显示状态为收缩状态时，将所述被触控的视图组件的显示状态由收缩状态调整为展开状态；

在确定所述被触控的视图组件的显示状态为展开状态时，将所述被触控的视图组件的显示状态由展开状态调整为收缩状态。

这里以单个视图组件的显示状态发生变化为例进行说明。

在将所述被触控的视图组件的显示状态由收缩状态调整为展开状态时，调用TableView，增加所述被触控的视图组件的第一显示高度；

根据增加的第一显示高度，调整该被触控的视图组件上的蒙层的第二显示高度，所述第二显示高度与所述第一显示高度相同。

图4(a)为本申请实施例图4所示的层叠式布局中视图组件的展开状态示意图。

较优地，所述方法还包括：

根据布局逻辑和所述第一显示高度，将位于所述被触控的视图组件之后的其他视图组件的位置向下移动所述第一显示高度。

较优地，所述方法还包括：

为了防止灰色背景的大小与tableview中视图组件的显示内容大小一致，可以启动监听事件，该监听事件用于计算视图组件的显示内容大小的变化，并根据显示内容大小的变化，调整灰色背景的大小，使得灰色背景与视图组件的显示内容大小一致。

在此，如果再次接收到用户发送的触控指令，由于此时所述被触控的视图组件的显示状态为展开状态，那么将所述被触控的视图组件的显示状态由展开状态调整为收缩状态，如图4(b)所示，为本申请实施例图4所示的层叠式布局中视图组件的收缩状态示意图。

较优地，在将所述被触控的视图组件的显示状态由展开状态调整为收缩状态后，所述方法还包括：

在确定有空白区域出现时，根据所述布局容器中的布局逻辑，在所述空白区域中加载显示其他视图组件。

通过本申请实施例提供的技术方案，通过确定布局容器中包含的第一视图组件和第二视图组件；加载显示所述第一视图组件和所述第二视图组件，所述第一视图组件与所述第二视图组件呈层叠式布局。也就是说，通过本申请实施例提供的技术方案能够有效实现布局容器中的不同视图组件之间呈层叠式布局，有效提高了用户的视觉效果，与平铺布局相比，增加了不同视图组件之间的紧凑性，在展示商品对象的某种属性时，使得用户能够快速确定其区别，提升用户对商品对象的用户体验。

图5为本申请实施例提供的一种视图组件的布局方法的流程示意图。所述方法可以如下所示。

步骤501：确定布局容器中包含的第一视图组件和第二视图组件，所述第一视图组件与所述第二视图组件之间的间隔为负值。

步骤502：加载显示所述第一视图组件和所述第二视图组件，所述第一视图组件与所述第二视图组件呈层叠式布局。

步骤503：接收用户发送的触控指令，所述触控指令用于变更被触控的视图组件的显示状态。

步骤504：在确定所述被触控的视图组件的显示状态为收缩状态时，调用ValueAnimatorSet，基于所述被触控的视图组件的显示位置和设置的高度属性值，将所述被触控的视图组件展开设定高度属性值对应的高度，视为将所述被触控的视图组件的显示状态由收缩状态调整为展开状态。

较优地，在将所述被触控的视图组件展开设定高度前，所述方法还包括：

确定所述布局容器中是否存在其他视图组件处于展开状态；

若存在，则将所述其他视图组件的显示状态由展开状态调整为收缩状态。

较优地，在将所述被触控的视图组件展开设定高度后，所述方法还包括：

若ValueAnimatorSet中还包含纹理属性值，那么根据所述纹理属性值，在展开的所述被触控的视图组件中动态显示所述纹理属性值对应的纹理状态。

步骤505：在确定所述被触控的视图组件的显示状态为展开状态时，将所述被触控的视图组件的显示状态由展开状态调整为收缩状态。

图6为本申请实施例提供的一种视图组件的布局方法的流程示意图。所述方法可以如下所示。

步骤601：确定布局容器中包含的第一视图组件和第二视图组件，所述第一视图组件和所述第二视图组件上按照设定路径创建蒙层。

步骤602：加载显示所述第一视图组件和所述第二视图组件，所述第一视图组件与所述第二视图组件呈层叠式布局。

较优地，所述设定路径为：

A(0，R)—〉B(W2，R)—〉C(W1，R)—〉D(W1，H+R)—〉E(W2，H+R)—〉F(0，H+R)—〉A(0，R)的闭合曲线；

其中，以所述第一视图组件的边框的左上角顶点为坐标系的原点，AB与所述第一视图组件的上边框形成凸起曲线，BC、CD和DE为线段，EF与所述第一视图组件的下边框形成凸起曲线，R为凸起曲线的半径，W1为所述第一视图组件的边框的宽度，W2为凸起曲线的宽度，H为所述第一视图组件的边框的高度。

步骤603：接收用户发送的触控指令，所述触控指令用于变更被触控的视图组件的显示状态。

步骤604：在确定所述被触控的视图组件的显示状态为收缩状态时，调用TableView，增加所述被触控的视图组件的第一显示高度。

步骤605：根据增加的第一显示高度，调整所述蒙层的第二显示高度，所述第二显示高度与所述第一显示高度相同。

步骤606：根据布局逻辑和所述第一显示高度，将位于所述被触控的视图组件之后的其他视图组件的位置向下移动所述第一显示高度。

较优地，在将所述被触控的视图组件的显示状态由展开状态调整为收缩状态后，所述方法还包括：

在确定有空白区域出现时，根据所述布局容器中的布局逻辑，在所述空白区域中加载显示其他视图组件。

步骤607：在确定所述被触控的视图组件的显示状态为展开状态时，将所述被触控的视图组件的显示状态由展开状态调整为收缩状态。

图7为本申请实施例提供的一种视图组件的布局设备的结构示意图。所述布局设备包括：确定单元701和处理单元702，其中：

确定单元701，确定布局容器中包含的第一视图组件和第二视图组件；

处理单元702，加载显示所述第一视图组件和所述第二视图组件，所述第一视图组件与所述第二视图组件呈层叠式布局。

在本申请的另一个实施例中，所述布局设备还包括：绘制单元703，其中：

所述绘制单元703，在确定布局容器中包含的第一视图组件和第二视图组件之前，绘制第一视图组件和第二视图组件。

在本申请的另一个实施例中，所述绘制单元703绘制第一视图组件和第二视图组件，包括：

绘制第一视图组件的边框和第二视图组件的边框；

调用类目间隔Item Decoration，将所述第一视图组件与所述第二视图组件之间的间隔设置为负值。

在本申请的另一个实施例中，所述绘制单元703，若所述第一视图组件的边框的样式和所述第二视图组件的边框的样式为上边框的左上角/右上角凸起的矩形，那么将所述第一视图组件与所述第二视图组件之间的间隔的大小值设置为凸起的高度。

在本申请的另一个实施例中，所述绘制单元703绘制第一视图组件，包括：

绘制第一视图组件的边框，所述边框为矩形；

在所述第一视图组件上按照设定路径创建CAShapeLayer，所述CAShapeLayer为所述第一视图组件的蒙层。

在本申请的另一个实施例中，所述设定路径为：

A(0，R)—〉B(W2，R)—〉C(W1，R)—〉D(W1，H+R)—〉E(W2，H+R)—〉F(0，H+R)—〉A(0，R)的闭合曲线；

其中，以所述第一视图组件的边框的左上角顶点为坐标系的原点，AB与所述第一视图组件的上边框形成凸起曲线，BC、CD和DE为线段，EF与所述第一视图组件的下边框形成凸起曲线，R为凸起曲线的半径，W1为所述第一视图组件的边框的宽度，W2为凸起曲线的宽度，H为所述第一视图组件的边框的高度。

在本申请的另一个实施例中，所述布局设备还包括：接收单元704和调整单元705，其中：

所述接收单元704，接收用户发送的触控指令，所述触控指令用于变更被触控的视图组件的显示状态；

所述调整单元705，在确定所述被触控的视图组件的显示状态为收缩状态时，将所述被触控的视图组件的显示状态由收缩状态调整为展开状态；

在确定所述被触控的视图组件的显示状态为展开状态时，将所述被触控的视图组件的显示状态由展开状态调整为收缩状态。

在本申请的另一个实施例中，所述调整单元705将所述被触控的视图组件的显示状态由收缩状态调整为展开状态，包括：

调用ValueAnimatorSet，基于所述被触控的视图组件的显示位置和设置的高度属性值，将所述被触控的视图组件展开设定高度属性值对应的高度，视为将所述被触控的视图组件的显示状态由收缩状态调整为展开状态。

在本申请的另一个实施例中，所述调整单元705在将所述被触控的视图组件展开设定高度前，确定所述布局容器中是否存在其他视图组件处于展开状态；

若存在，则将所述其他视图组件的显示状态由展开状态调整为收缩状态。

在本申请的另一个实施例中，所述调整单元705在将所述被触控的视图组件展开设定高度后，若ValueAnimatorSet中还包含纹理属性值，那么根据所述纹理属性值，在展开的所述被触控的视图组件中动态显示所述纹理属性值对应的纹理状态。

在本申请的另一个实施例中，所述调整单元705将所述被触控的视图组件的显示状态由收缩状态调整为展开状态，包括：

若所述被触控的视图组件中包含蒙层，那么调用TableView，增加所述被触控的视图组件的第一显示高度；

根据增加的第一显示高度，调整所述蒙层的第二显示高度，所述第二显示高度与所述第一显示高度相同。

在本申请的另一个实施例中，所述调整单元705，根据布局逻辑和所述第一显示高度，将位于所述被触控的视图组件之后的其他视图组件的位置向下移动所述第一显示高度。

在本申请的另一个实施例中，所述布局设备还包括：加载单元706，其中：

所述加载单元706，在将所述被触控的视图组件的显示状态由展开状态调整为收缩状态后，在确定有空白区域出现时，根据所述布局容器中的布局逻辑，在所述空白区域中加载显示其他视图组件。

需要说明的是，本申请实施例提供的布局设备可以通过软件方式实现，也可以通过硬件方式实现，这里不做具体限定。布局设备通过确定布局容器中包含的第一视图组件和第二视图组件；加载显示所述第一视图组件和所述第二视图组件，所述第一视图组件与所述第二视图组件呈层叠式布局。也就是说，通过本申请实施例提供的技术方案能够有效实现布局容器中的不同视图组件之间呈层叠式布局，有效提高了用户的视觉效果，与平铺布局相比，增加了不同视图组件之间的紧凑性，在展示商品对象的某种属性时，使得用户能够快速确定其区别，提升用户对商品对象的用户体验。

图8为本申请实施例提供的一种视图组件的布局设备的结构示意图。所述布局设备包括：确定单元801和处理单元802，其中：

确定单元801，确定布局容器中包含的第一视图组件和第二视图组件，所述第一视图组件与所述第二视图组件之间的间隔为负值；

处理单元802，加载显示所述第一视图组件和所述第二视图组件，所述第一视图组件与所述第二视图组件呈层叠式布局。

在本申请的另一个实施例中，所述布局设备还包括：接收单元803和调整单元804，其中：

所述接收单元803，接收用户发送的触控指令，所述触控指令用于变更被触控的视图组件的显示状态；

所述调整单元804，在确定所述被触控的视图组件的显示状态为收缩状态时，将所述被触控的视图组件的显示状态由收缩状态调整为展开状态；

在确定所述被触控的视图组件的显示状态为展开状态时，将所述被触控的视图组件的显示状态由展开状态调整为收缩状态。

在本申请的另一个实施例中，所述调整单元804将所述被触控的视图组件的显示状态由收缩状态调整为展开状态，包括：

调用ValueAnimatorSet，基于所述被触控的视图组件的显示位置和设置的高度属性值，将所述被触控的视图组件展开设定高度属性值对应的高度，视为将所述被触控的视图组件的显示状态由收缩状态调整为展开状态。

在本申请的另一个实施例中，所述调整单元804，在将所述被触控的视图组件展开设定高度前，确定所述布局容器中是否存在其他视图组件处于展开状态；

若存在，则将所述其他视图组件的显示状态由展开状态调整为收缩状态。

在本申请的另一个实施例中，所述调整单元804，在将所述被触控的视图组件展开设定高度后，若ValueAnimatorSet中还包含纹理属性值，那么根据所述纹理属性值，在展开的所述被触控的视图组件中动态显示所述纹理属性值对应的纹理状态。

需要说明的是，本申请实施例提供的布局设备可以通过软件方式实现，也可以通过硬件方式实现，这里不做具体限定。布局设备通过本申请实施例提供的技术方案能够有效实现布局容器中的不同视图组件之间呈层叠式布局，有效提高了用户的视觉效果，与平铺布局相比，增加了不同视图组件之间的紧凑性，在展示商品对象的某种属性时，使得用户能够快速确定其区别，提升用户对商品对象的用户体验。

图9为本申请实施例提供的一种视图组件的布局设备的结构示意图。所述布局设备包括：确定单元901和处理单元902，其中：

确定单元901，确定布局容器中包含的第一视图组件和第二视图组件，所述第一视图组件和所述第二视图组件上按照设定路径创建蒙层；

处理单元902，加载显示所述第一视图组件和所述第二视图组件，所述第一视图组件与所述第二视图组件呈层叠式布局。

在本申请的另一个实施例中，所述设定路径为：

A(0，R)—〉B(W2，R)—〉C(W1，R)—〉D(W1，H+R)—〉E(W2，H+R)—〉F(0，H+R)—〉A(0，R)的闭合曲线；

其中，以所述第一视图组件的边框的左上角顶点为坐标系的原点，AB与所述第一视图组件的上边框形成凸起曲线，BC、CD和DE为线段，EF与所述第一视图组件的下边框形成凸起曲线，R为凸起曲线的半径，W1为所述第一视图组件的边框的宽度，W2为凸起曲线的宽度，H为所述第一视图组件的边框的高度。

在本申请的另一个实施例中，所述布局设备还包括：接收单元903和调整单元904，其中：

所述接收单元903，接收用户发送的触控指令，所述触控指令用于变更被触控的视图组件的显示状态；

所述调整单元904，在确定所述被触控的视图组件的显示状态为收缩状态时，将所述被触控的视图组件的显示状态由收缩状态调整为展开状态；

在确定所述被触控的视图组件的显示状态为展开状态时，将所述被触控的视图组件的显示状态由展开状态调整为收缩状态。

在本申请的另一个实施例中，所述调整单元904将所述被触控的视图组件的显示状态由收缩状态调整为展开状态，包括：

若所述被触控的视图组件中包含蒙层，那么调用TableView，增加所述被触控的视图组件的第一显示高度；

根据增加的第一显示高度，调整所述蒙层的第二显示高度，所述第二显示高度与所述第一显示高度相同。

在本申请的另一个实施例中，所述调整单元904，根据布局逻辑和所述第一显示高度，将位于所述被触控的视图组件之后的其他视图组件的位置向下移动所述第一显示高度。

在本申请的另一个实施例中，所述布局设备还包括：加载单元905，其中：

所述加载单元905，在将所述被触控的视图组件的显示状态由展开状态调整为收缩状态后，在确定有空白区域出现时，根据所述布局容器中的布局逻辑，在所述空白区域中加载显示其他视图组件。

需要说明的是，本申请实施例提供的布局设备可以通过软件方式实现，也可以通过硬件方式实现，这里不做具体限定。布局设备通过本申请实施例提供的技术方案能够有效实现布局容器中的不同视图组件之间呈层叠式布局，有效提高了用户的视觉效果，与平铺布局相比，增加了不同视图组件之间的紧凑性，在展示商品对象的某种属性时，使得用户能够快速确定其区别，提升用户对商品对象的用户体验。

本领域内的技术人员应明白，本发明的实施例可提供为方法、系统、或计算机程序产品。因此，本发明可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且，本发明可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、CD-ROM、光学存储器等)上实施的计算机程序产品的形式。

本发明是参照根据本发明实施例的方法、设备(系统)、和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。

这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品，该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。

这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上，使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。

在一个典型的配置中，计算设备包括一个或多个处理器(CPU)、输入/输出接口、网络接口和内存。

内存可能包括计算机可读介质中的非永久性存储器，随机存取存储器(RAM)和/或非易失性内存等形式，如只读存储器(ROM)或闪存(flash RAM)。内存是计算机可读介质的示例。

计算机可读介质包括永久性和非永久性、可移动和非可移动媒体可以由任何方法或技术来实现信息存储。信息可以是计算机可读指令、数据结构、程序的模块或其他数据。计算机的存储介质的例子包括，但不限于相变内存(PRAM)、静态随机存取存储器(SRAM)、动态随机存取存储器(DRAM)、其他类型的随机存取存储器(RAM)、只读存储器(ROM)、电可擦除可编程只读存储器(EEPROM)、快闪记忆体或其他内存技术、只读光盘只读存储器(CD-ROM)、数字多功能光盘(DVD)或其他光学存储、磁盒式磁带，磁带磁磁盘存储或其他磁性存储设备或任何其他非传输介质，可用于存储可以被计算设备访问的信息。按照本文中的界定，计算机可读介质不包括暂存电脑可读媒体(transitory media)，如调制的数据信号和载波。

还需要说明的是，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、商品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、商品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括所述要素的过程、方法、商品或者设备中还存在另外的相同要素。

本领域技术人员应明白，本申请的实施例可提供为方法、系统或计算机程序产品。因此，本申请可采用完全硬件实施例、完全软件实施例或结合软件和硬件方面的实施例的形式。而且，本申请可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、CD-ROM、光学存储器等)上实施的计算机程序产品的形式。

以上所述仅为本申请的实施例而已，并不用于限制本申请。对于本领域技术人员来说，本申请可以有各种更改和变化。凡在本申请的精神和原理之内所作的任何修改、等同替换、改进等，均应包含在本申请的权利要求范围之内。

Claims (27)

1.一种视图组件的布局方法，其特征在于，包括：

确定布局容器中包含的第一视图组件和第二视图组件；

加载显示所述第一视图组件和所述第二视图组件，所述第一视图组件与所述第二视图组件呈层叠式布局。

2.根据权利要求1所述的布局方法，其特征在于，在确定布局容器中包含的第一视图组件和第二视图组件之前，所述方法还包括：

绘制第一视图组件和第二视图组件。

3.根据权利要求2所述的布局方法，其特征在于，绘制第一视图组件和第二视图组件，包括：

绘制第一视图组件的边框和第二视图组件的边框；

调用类目间隔Item Decoration，将所述第一视图组件与所述第二视图组件之间的间隔设置为负值。

4.根据权利要求3所述的布局方法，其特征在于，所述方法还包括：

若所述第一视图组件的边框的样式和所述第二视图组件的边框的样式为上边框的左上角/右上角凸起的矩形，那么将所述第一视图组件与所述第二视图组件之间的间隔的大小值设置为凸起的高度。

5.根据权利要求2所述的布局方法，其特征在于，绘制第一视图组件，包括：

绘制第一视图组件的边框，所述边框为矩形；

在所述第一视图组件上按照设定路径创建CAShapeLayer，所述CAShapeLayer为所述第一视图组件的蒙层。

6.根据权利要求5所述的布局方法，其特征在于，所述设定路径为：

A(0，R)—〉B(W2，R)—〉C(W1，R)—〉D(W1，H+R)—〉E(W2，H+R)—〉F(0，H+R)—〉A(0，R)的闭合曲线；

其中，以所述第一视图组件的边框的左上角顶点为坐标系的原点，AB与所述第一视图组件的上边框形成凸起曲线，BC、CD和DE为线段，EF与所述第一视图组件的下边框形成凸起曲线，R为凸起曲线的半径，W1为所述第一视图组件的边框的宽度，W2为凸起曲线的宽度，H为所述第一视图组件的边框的高度。

7.根据权利要求1所述的布局方法，其特征在于，所述方法还包括：

接收用户发送的触控指令，所述触控指令用于变更被触控的视图组件的显示状态；

在确定所述被触控的视图组件的显示状态为收缩状态时，将所述被触控的视图组件的显示状态由收缩状态调整为展开状态；

在确定所述被触控的视图组件的显示状态为展开状态时，将所述被触控的视图组件的显示状态由展开状态调整为收缩状态。

8.根据权利要求7所述的布局方法，其特征在于，将所述被触控的视图组件的显示状态由收缩状态调整为展开状态，包括：

调用ValueAnimatorSet，基于所述被触控的视图组件的显示位置和设置的高度属性值，将所述被触控的视图组件展开设定高度属性值对应的高度，视为将所述被触控的视图组件的显示状态由收缩状态调整为展开状态。

9.根据权利要求8所述的布局方法，其特征在于，在将所述被触控的视图组件展开设定高度前，所述方法还包括：

确定所述布局容器中是否存在其他视图组件处于展开状态；

若存在，则将所述其他视图组件的显示状态由展开状态调整为收缩状态。

10.根据权利要求8所述的布局方法，其特征在于，在将所述被触控的视图组件展开设定高度后，所述方法还包括：

若ValueAnimatorSet中还包含纹理属性值，那么根据所述纹理属性值，在展开的所述被触控的视图组件中动态显示所述纹理属性值对应的纹理状态。

11.根据权利要求7所述的布局方法，其特征在于，将所述被触控的视图组件的显示状态由收缩状态调整为展开状态，包括：

若所述被触控的视图组件中包含蒙层，那么调用TableView，增加所述被触控的视图组件的第一显示高度；

根据增加的第一显示高度，调整所述蒙层的第二显示高度，所述第二显示高度与所述第一显示高度相同。

12.根据权利要求11所述的布局方法，其特征在于，所述方法还包括：

根据布局逻辑和所述第一显示高度，将位于所述被触控的视图组件之后的其他视图组件的位置向下移动所述第一显示高度。

13.根据权利要求7所述的布局方法，其特征在于，在将所述被触控的视图组件的显示状态由展开状态调整为收缩状态后，所述方法还包括：

在确定有空白区域出现时，根据所述布局容器中的布局逻辑，在所述空白区域中加载显示其他视图组件。

14.一种视图组件的布局方法，其特征在于，包括：

确定布局容器中包含的第一视图组件和第二视图组件，所述第一视图组件与所述第二视图组件之间的间隔为负值；

加载显示所述第一视图组件和所述第二视图组件，所述第一视图组件与所述第二视图组件呈层叠式布局。

15.根据权利要求14所述的布局方法，其特征在于，所述方法还包括：

接收用户发送的触控指令，所述触控指令用于变更被触控的视图组件的显示状态；

在确定所述被触控的视图组件的显示状态为收缩状态时，将所述被触控的视图组件的显示状态由收缩状态调整为展开状态；

在确定所述被触控的视图组件的显示状态为展开状态时，将所述被触控的视图组件的显示状态由展开状态调整为收缩状态。

16.根据权利要求15所述的布局方法，其特征在于，将所述被触控的视图组件的显示状态由收缩状态调整为展开状态，包括：

调用ValueAnimatorSet，基于所述被触控的视图组件的显示位置和设置的高度属性值，将所述被触控的视图组件展开设定高度属性值对应的高度，视为将所述被触控的视图组件的显示状态由收缩状态调整为展开状态。

17.根据权利要求16所述的布局方法，其特征在于，在将所述被触控的视图组件展开设定高度前，所述方法还包括：

确定所述布局容器中是否存在其他视图组件处于展开状态；

若存在，则将所述其他视图组件的显示状态由展开状态调整为收缩状态。

18.根据权利要求16所述的布局方法，其特征在于，在将所述被触控的视图组件展开设定高度后，所述方法还包括：

若ValueAnimatorSet中还包含纹理属性值，那么根据所述纹理属性值，在展开的所述被触控的视图组件中动态显示所述纹理属性值对应的纹理状态。

19.一种视图组件的布局方法，其特征在于，包括：

确定布局容器中包含的第一视图组件和第二视图组件，所述第一视图组件和所述第二视图组件上按照设定路径创建蒙层；

加载显示所述第一视图组件和所述第二视图组件，所述第一视图组件与所述第二视图组件呈层叠式布局。

20.根据权利要求19所述的布局方法，其特征在于，所述设定路径为：

A(0，R)—〉B(W2，R)—〉C(W1，R)—〉D(W1，H+R)—〉E(W2，H+R)—〉F(0，H+R)—〉A(0，R)的闭合曲线；

其中，以所述第一视图组件的边框的左上角顶点为坐标系的原点，AB与所述第一视图组件的上边框形成凸起曲线，BC、CD和DE为线段，EF与所述第一视图组件的下边框形成凸起曲线，R为凸起曲线的半径，W1为所述第一视图组件的边框的宽度，W2为凸起曲线的宽度，H为所述第一视图组件的边框的高度。

21.根据权利要求19所述的布局方法，其特征在于，所述方法还包括：

接收用户发送的触控指令，所述触控指令用于变更被触控的视图组件的显示状态；

在确定所述被触控的视图组件的显示状态为收缩状态时，将所述被触控的视图组件的显示状态由收缩状态调整为展开状态；

在确定所述被触控的视图组件的显示状态为展开状态时，将所述被触控的视图组件的显示状态由展开状态调整为收缩状态。

22.根据权利要求21所述的布局方法，其特征在于，将所述被触控的视图组件的显示状态由收缩状态调整为展开状态，包括：

若所述被触控的视图组件中包含蒙层，那么调用TableView，增加所述被触控的视图组件的第一显示高度；

根据增加的第一显示高度，调整所述蒙层的第二显示高度，所述第二显示高度与所述第一显示高度相同。

23.根据权利要求22所述的布局方法，其特征在于，所述方法还包括：

根据布局逻辑和所述第一显示高度，将位于所述被触控的视图组件之后的其他视图组件的位置向下移动所述第一显示高度。

24.根据权利要求21所述的布局方法，其特征在于，在将所述被触控的视图组件的显示状态由展开状态调整为收缩状态后，所述方法还包括：

在确定有空白区域出现时，根据所述布局容器中的布局逻辑，在所述空白区域中加载显示其他视图组件。

25.一种视图组件的布局设备，其特征在于，包括：

确定单元，确定布局容器中包含的第一视图组件和第二视图组件；

处理单元，加载显示所述第一视图组件和所述第二视图组件，所述第一视图组件与所述第二视图组件呈层叠式布局。

26.一种视图组件的布局设备，其特征在于，包括：

确定单元，确定布局容器中包含的第一视图组件和第二视图组件，所述第一视图组件与所述第二视图组件之间的间隔为负值；

处理单元，加载显示所述第一视图组件和所述第二视图组件，所述第一视图组件与所述第二视图组件呈层叠式布局。

27.一种视图组件的布局设备，其特征在于，包括：

确定单元，确定布局容器中包含的第一视图组件和第二视图组件，所述第一视图组件和所述第二视图组件上按照设定路径创建蒙层；

处理单元，加载显示所述第一视图组件和所述第二视图组件，所述第一视图组件与所述第二视图组件呈层叠式布局。