CN109799988A - iOS页面布局方法、终端设备及计算机可读存储介质 - Google Patents

Abstract

本申请公开了一种iOS页面布局方法、终端设备及计算机可读存储介质，应用于软件开发技术领域。其中，该方法包括：确定待布局的iOS页面所需的目标样式，并获取所述目标样式对应的目标CSS源码；将所述目标CSS源码输入预先配置的CSS解释器，以得到所述目标CSS源码对应的目标iOS布局代码，所述CSS解释器用于根据预设的CSS源码和iOS布局代码的对应关系将输入的CSS源码转换为iOS布局代码；使用所述目标iOS布局代码对所述iOS页面进行布局，以得到包括所述目标样式的布局页面。采用本申请，能够在实现iOS页面布局的同时降低代码冗余，便于开发和调试。

Description

iOS页面布局方法、终端设备及计算机可读存储介质

技术领域

本申请涉及软件开发技术领域，尤其涉及一种iOS页面布局方法、终端设备及计算机可读存储介质。

背景技术

目前，iOS系统原生布局是使用系统自动布局如NSLayoutConstraint和可视化格式语言(Visual Format Language，缩写：VFL)等方式进行布局。其中，采用NSLayoutConstraint进行布局时，即使进行一个很简单的布局，也要编写大量代码，如果视图层级复杂，代码量可想而知，而且这些代码之间并不能复用，导致工作量较大，布局效率较低。而VFL是苹果公司定义的一种描述视图关系的标记语言，其可以和NSLayoutConstraint结合使用，然而，VFL这种语言的可读性太差，不利于开发和调试。也就是说，目前的iOS系统原生布局方式总体来说无法法复用，增加代码冗余，可读性较差，不利于开发和调试。

发明内容

本申请实施例提供一种iOS页面布局方法、终端设备及计算机可读存储介质，能够在实现iOS页面布局的同时降低代码冗余，增强可读性，且能够复用代码，便于开发和调试。

第一方面，本申请实施例提供了一种iOS页面布局方法，应用于终端设备，包括：

确定待布局的iOS页面所需的目标样式，并获取所述目标样式对应的目标CSS源码；

将所述目标CSS源码输入预先配置的CSS解释器，以得到所述目标CSS源码对应的目标iOS布局代码，所述CSS解释器用于根据预设的CSS源码和iOS布局代码的对应关系将输入的CSS源码转换为iOS布局代码，所述iOS布局代码包括objective-c代码或swift代码；

使用所述目标iOS布局代码对所述iOS页面进行布局，以得到包括所述目标样式的布局页面。

可选的，所述获取所述目标样式对应的目标CSS源码，包括：

检测预先存储的CSS源码集合中是否存在与所述目标样式的标签相同的标签，所述CSS源码集合包括多个标签以及与每一标签对应的CSS源码；

如果存在与所述目标样式的标签相同的标签，将所述CSS源码集合中所述相同的标签对应的CSS源码作为所述目标样式对应的目标CSS源码。

可选的，所述检测预先存储的CSS源码集合中是否存在与所述目标样式的标签相同的标签，包括：

确定所述终端设备的目标设备类型，并从预设的数据库中选取与所述目标设备类型对应的CSS源码集合，所述数据库包括不同设备类型对应的CSS源码集合，且每个CSS源码集合包括多个标签以及与每一标签对应的CSS源码；

检测选取的所述CSS源码集合中是否存在与所述目标样式的标签相同的标签。

可选的，所述获取所述目标样式对应的目标CSS源码，包括：

检测预先存储的CSS源码集合中是否存在与所述目标样式的标签相同的标签，所述CSS源码集合包括多个标签以及与每一标签对应的CSS源码；

如果存在与所述目标样式的标签相同的标签，将所述CSS源码集合中所述相同的标签对应的CSS源码作为基准CSS源码，并确定所述终端设备的目标设备类型；

根据所述目标设备类型所指示的代码调整规则对所述基准CSS源码进行调整，并将调整后的CSS源码作为所述目标样式对应的目标CSS源码。

可选的，所述将所述目标CSS源码输入预先配置的CSS解释器，以得到所述目标CSS源码对应的目标iOS布局代码，包括：

将所述目标CSS源码输入预先配置的CSS解释器；

输出提示消息，所述提示消息用于提示用户选择将所述目标CSS源码转换为的iOS布局代码的类型；

当接收到用户输入的选择指令时，调用所述CSS解释器根据所述选择指令指示的类型对所述目标CSS源码进行代码转换，以得到所述目标CSS源码对应的目标iOS布局代码；其中，所述目标iOS布局代码的类型与所述选择指令指示的类型相同。

可选的，所述将所述目标CSS源码输入预先配置的CSS解释器，以得到所述目标CSS源码对应的目标iOS布局代码，包括：

分别获取所述终端设备在历史时间范围内针对不同类型的iOS布局代码的使用频率，并确定出所述不同类型的iOS布局代码的使用频率中最高使用频率对应的iOS布局代码的类型；

将所述目标CSS源码输入预先配置的CSS解释器，并调用所述CSS解释器根据所述最高使用频率对应的iOS布局代码的类型对所述目标CSS源码进行代码转换，以得到所述目标CSS源码对应的目标iOS布局代码；其中，所述目标iOS布局代码的类型与所述最高使用频率对应的iOS布局代码的类型相同。

可选的，在所述使用所述目标iOS布局代码对所述iOS页面进行布局之后，所述方法还包括：

接收针对所述目标CSS源码的修改指令，所述修改指令包括修改位置信息和修改内容；

使用所述修改内容替换所述目标CSS源码中所述修改位置信息指示的CSS源码，以得到修改后的目标CSS源码；

将所述修改后的目标CSS源码输入预先配置的CSS解释器，以得到所述修改后的目标CSS源码对应的iOS布局代码，并使用所述iOS布局代码对所述iOS页面进行布局。

可选的，所述CSS源码集合可包括用于H5页面布局的CSS源码。

第二方面，本申请实施例提供了一种终端设备，该终端设备包括用于执行上述第一方面的方法的单元。

第三方面，本申请实施例提供了另一种终端设备，包括处理器和存储器，所述处理器和存储器相互连接，其中，所述存储器用于存储支持终端设备执行上述方法的计算机程序，所述计算机程序包括程序指令，所述处理器被配置用于调用所述程序指令，执行上述第一方面的方法。可选的，该终端设备还可包括用户接口和/或通信接口。

第四方面，本申请实施例提供了一种计算机可读存储介质，所述计算机可读存储介质存储有计算机程序，所述计算机程序包括程序指令，所述程序指令当被处理器执行时使所述处理器执行上述第一方面的方法。

本申请实施例能够通过获取待布局iOS页面的样式所对应的目标CSS源码，并通过配置的CSS解释器将该目标CSS源码转换为iOS原生布局使用的iOS布局代码，以使用该iOS原生布局使用的iOS布局代码进行iOS页面布局，从而实现了通过CSS的方式来实现iOS原生的布局，使得能够在实现iOS页面布局的同时降低代码冗余，并可复用布局源码，且布局源码即CSS源码可读性较好，便于开发和调试。

附图说明

为了更清楚地说明本申请实施例技术方案，下面将对实施例描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图是本申请的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。

图1是本申请实施例提供的一种iOS页面布局方法的流程示意图；

图2是本申请实施例提供的另一种iOS页面布局方法的流程示意图；

图3是本申请实施例提供的一种终端设备的结构示意图；

图4是本申请实施例提供的另一种终端设备的结构示意图。

具体实施方式

下面将结合本申请实施例中的附图，对本申请实施例中的技术方案进行描述，显然，所描述的实施例是本申请一部分实施例，而不是全部的实施例。基于本申请中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本申请保护的范围。

本申请的技术方案可应用于终端设备中，该终端设备例如可以是手机、电脑、平板、个人计算机、智能手表等，本申请不做限定。

层叠样式表(Cascading Style Sheets，缩写：CSS)是一种描述视图关系的计算机语言，可用于表现超文本标记语言(Hyper Text Markup Language，缩写：HTML)或可扩展标记语言(eXtensible Markup Language，缩写：XML)等文件样式。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化，其支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力，灵活性较好。而且CSS能够对网页中元素位置的排版进行像素级精确控制，可靠性较高。

由于CSS和iOS原生的布局方式是不相通的，其为两个完全不同的体系，iOS系统的应用是使用objective-c或swift语言等进行开发的。因此，本申请可通过开发CSS解释器，将CSS源码转换成(翻译成)iOS原生布局使用的NSLayoutConstraint等方式对应的objective-c或swift代码，以实现将CSS描述的布局翻译为使用NSLayoutConstraint等描述的布局。从而可通过CSS的方式来实现iOS原生的布局，而不必关心怎么使用复杂的NSLayoutConstraint等方式来进行布局，这就可以减少代码冗余，并可复用布局源码，且布局源码即CSS源码可读性较好，便于开发和调试。以下分别详细说明。

请参见图1，图1是本申请实施例提供的一种iOS页面布局方法的流程示意图。具体的，本实施例的方法可应用于上述的终端设备中。如图1所示，该iOS页面布局方法可以包括以下步骤：

101、确定待布局的iOS页面所需的目标样式，并获取该目标样式对应的目标CSS源码。

在需要对某一iOS页面进行布局时，可通过确定该iOS页面所需的目标样式，即待布局的样式(或功能、页面等)，来获取用于实现该布局的CSS源码即目标CSS源码。可选的，该目标样式可以是根据用户输入的样式信息(如样式标签、样式描述信息)确定的；或者可以是通过输出各样式标签以供用户选择，将用户选择的样式标签确定的样式作为该目标样式；或者还可以是通过其他方式确定的，此处不一一列举。

进一步可选的，该目标CSS源码可以是用户输入的；或者，该目标CSS源码也可以是从预设的CSS源码集合中选取出的，比如根据该目标样式的信息从该CSS源码集合中选取出的用于实现该目标样式的目标CSS源码；或者，该目标CSS源码也可以是从预设的CSS源码集合中选取出该目标样式对应的CSS源码之后，基于接收到的修改指令对该CSS源码修改后确定的，比如将该修改后的CSS源码作为该目标CSS源码，等等，本申请不做限定。

102、将该目标CSS源码输入预先配置的CSS解释器，以得到该目标CSS源码对应的目标iOS布局代码。

其中，该CSS解释器可用于根据预设的CSS源码和iOS布局代码的对应关系将输入的CSS源码转换为iOS布局代码，该iOS布局代码包括objective-c代码或swift代码或其他iOS原生布局使用的代码。

具体的，本申请可通过预先开发CSS解释器，以实现CSS源码和iOS布局代码之间的转换。其中，该CSS解释器可配置有不同布局样式(或功能、页面等)的CSS源码与iOS布局代码(如objective-c和/或swift代码)的映射关系(或者称为对应关系)，以实现代码转换。可选的，该映射关系可通过大量的CSS源码及iOS布局代码如objective-c、swift代码等确定出，比如通过各种样式的CSS源码及对应的iOS布局代码进行学习训练得到。进一步可选的，该映射关系还可结合终端设备的设备类型分别预置得到，即不同设备类型的终端设备对应的映射关系可以不同，例如，可分别为PC端预置不同布局样式(或功能、页面等)的CSS源码与iOS布局代码之间的映射关系，以及为移动端预置不同布局样式(或功能、页面等)的CSS源码与iOS布局代码之间的映射关系，进而能够通过获取终端设备的目标设备类型，根据该设备类型和该目标CSS源码进行代码转换，以得到与该目标设备类型相匹配的布局页面，从而提升页面布局效果。因不同设备类型的终端设备使用相同的代码布局时容易导致设备页面无法显示等问题，布局效果较差；由此，通过为不同类型的终端设备分别配置不同设备类型的CSS源码和iOS布局代码之间的映射关系，能够提升布局可靠性和布局效果，有助于防止页面无法显示的问题。

可以理解，在其他实施例中，该CSS解释器还可叫做其余名称，比如叫做CSS翻译器、转换器等等，本申请不做限定。

103、使用该目标iOS布局代码对该iOS页面进行布局，以得到包括该目标样式的布局页面。

在通过该CSS解释器转码得到用于实现该目标样式布局的iOS布局代码之后，即可使用该iOS布局代码进行iOS页面布局，以实现基于CSS的iOS页面布局。

在本实施例中，终端设备能够通过获取待布局iOS页面的样式所对应的目标CSS源码，并通过配置的CSS解释器将该目标CSS源码转换为iOS布局代码，以使用该iOS布局代码进行iOS页面布局，从而可通过CSS的方式来实现iOS原生的布局，从而能够在实现iOS页面布局的同时降低代码冗余，并可复用布局源码，且布局源码即CSS源码可读性较好，便于开发和调试。

请参见图2，图2是本申请实施例提供的另一种iOS页面布局方法的流程示意图。具体的，如图2所示，该iOS页面布局方法可以包括以下步骤：

201、确定待布局的iOS页面所需的目标样式，并检测预先存储的CSS源码集合中是否存在与该目标样式的标签相同的标签。

其中，该CSS源码集合可预先配置得到，该CSS源码集合可包括多个标签以及与每一标签对应的CSS源码。可选的，该标签可包括样式标签、页面标签、功能标签等标签中的任一种或多种，即可根据CSS源码对应的各样式、页面、功能等为CSS源码添加标签，得到包括不同CSS源码及其对应标签的CSS源码集合。进一步可选的，每个标签对应的CSS源码可存储于一携带该标签CSS文件中，比如样式标签对应的CSS源码可存储于CSS样式文件中，该CSS样式文件携带有该样式标签。

202、如果存在与该目标样式的标签相同的标签，根据该CSS源码集合中该相同的标签对应的CSS源码确定该目标样式对应的目标CSS源码。

可选的，终端设备可通过确定待布局的iOS页面的样式即目标样式的标签，并根据该目标样式的标签查询预置的CSS源码集合中是否存在该目标样式对应的目标CSS源码，例如，可通过查询该CSS源码集合中是否存在与该目标样式的标签相同的标签，如与该目标样式的样式标签相同的样式标签，又如与该目标样式对应的页面标签相同的页面标签等等。并在存在与该目标样式的标签相同的标签时，确定存在该目标样式对应的目标CSS源码，也即该相同标签对应的CSS源码，以便于基于该目标CSS源码进行代码转换以实现针对该目标样式的iOS页面布局。举例来说，终端设备可输出布局提示信息，以展示多种样式标签以供用户选择，并在接收到用户针对该多种样式标签中的任一标签的选择指令时，将该选择指令对应的标签所对应的样式确定为待布局的iOS页面所需的目标样式，并将该CSS源码集合中该选择指令对应的样式标签所对应的CSS源码确定为该目标CSS源码。以便于根据标签快速查找到对应样式的CSS源码，进而进行代码转换，以实现iOS系统页面布局。

如果该CSS源码集合中不存在与该目标样式的标签相同的标签，即不存在目标样式对应的目标CSS源码时，终端设备可输出第一提示消息，以提示用户输入/编写该目标样式对应的目标CSS源码；或者，可选的，终端设备还可根据CSS源码集合中各标签与该目标样式的标签的相似度，确定出与该目标样式的标签的相似度最高的标签(如标签的关键字的重合率超过预设阈值的标签，或者预先设置有关联关系的标签等等)对应的CSS源码，并输出第二提示消息，该第二提示消息可包括该相似度最高的标签对应的CSS源码，以便于用户在该相似度最高的标签对应的CSS源码的基础上进行修改，得到该目标CSS源码，以快速确定出布局的CSS源码，从而减少了相关用户如开发人员的开发工作量。进一步可选的，终端设备在接收到针对该相似度最高的标签对应的CSS源码的修改指令以得到该目标CSS源码之后，或者在接收到用户输入的目标CSS源码之后，还可将该目标CSS源码及该目标样式的标签关联存储于该CSS源码集合中，以便于后续快速调用该CSS源码，实现布局源码的复用。

进一步可选的，在确定CSS源码集合时，终端设备还可根据不同设备类型分别预置CSS源码集合，以便于结合设备类型快速确定出适用于对应设备类型的终端设备的CSS源码。则在检测预先存储的CSS源码集合中是否存在与该目标样式的标签相同的标签时，终端设备可通过确定该终端设备的目标设备类型，并从预设的数据库中选取与该目标设备类型对应的CSS源码集合，该数据库包括不同设备类型对应的CSS源码集合，且每个CSS源码集合包括多个标签以及与每一标签对应的CSS源码；进而检测选取的该CSS源码集合中是否存在与该目标样式的标签相同的标签。例如，预设的数据库包括PC端对应的CSS源码集合和移动端对应的CSS源码集合，假设终端设备的设备类型为移动端设备，则可在移动端对应的CSS源码集合中确定是否存在与该目标样式的标签相同的标签，也即确定该移动端对应的CSS源码集合中是否存在该目标样式对应的CSS源码。从而有助于避免因不同设备类型的设备采用相同CSS源码导致显示效果差，页面布局效果不佳的问题，以便于实现相同样式在不同类型的设备的可靠展现，提升布局可靠性和布局效果。

或者，进一步可选的，该CSS源码集合中的CSS源码可以为各设备类型对应的基准CSS源码。如果存在与该目标样式的标签相同的标签，终端设备可以将该CSS源码集合中该相同的标签对应的CSS源码作为基准CSS源码，并确定该终端设备的目标设备类型，进而根据该目标设备类型所指示的代码调整规则对该基准CSS源码进行调整，并将调整后的CSS源码作为该目标样式对应的目标CSS源码。可选的，根据该目标设备类型所指示的代码调整规则进行的调整可以是对该基准CSS源码的属性值或其他值进行调整，调整的具体值可预先设置得到，比如可预先设置得到调整值、样式和设备类型的映射关系。也就是说，在进行代码转换之前，还可以确定进行页面布局的终端设备的设备类型，比如为PC端还是移动端，根据不同的类型对获取的样式的基准CSS源码(比如为PC端的CSS源码或移动端的CSS源码或其他基准值)进行调整，并将调整后的CSS通过CSS解释器进行转码，以实现相同样式在不同类型的设备的可靠展现。举例来说，对于页面中的某一图片，在PC端中的宽和高均为100像素，在移动端的宽和高只需要60像素，如果将PC端的样式的CSS码作为基准CSS源码，且检测到当前是在移动端侧进行页面布局，则可将该图片对应的宽和高由100调整为60以后再通过CSS翻译器进行转换，从而能够提升布局可靠性和布局效果。从而能够根据样式和设备的类型来确定对应的CSS源码进行转换，以基于CSS实现iOS页面布局。

203、将该目标CSS源码输入预先配置的CSS解释器，以得到该目标CSS源码对应的目标iOS布局代码。

其中，该CSS解释器可用于根据预设的CSS源码和iOS布局代码的对应关系将输入的CSS源码转换为iOS布局代码，该iOS布局代码可包括objective-c代码或swift代码等iOS原生布局语言的代码。

可选的，该CSS解释器可以为一套或多套(一个或多个)，即可预先开发一套或多套CSS解释器。例如，可分别开发用于将CSS源码转换成objective-c代码的解释器以及用于将CSS源码转换成swift代码的解释器；或者开发一个均支持将CSS源码转换成objective-c代码和swift代码的解释器。又如，可以根据不同的设备类型(如PC端、移动端等等)来开发CSS解释器，如针对PC端和移动端(如手机端)WEB界面的CSS解释器可以不同。因不同设备类型的终端设备使用相同的CSS源码(样式文件)时容易导致某一类型的设备页面无法显示等问题，适应性较差；由此，通过为不同类型的终端设备分别开发CSS解释器，通过不同的CSS解释器配置不同设备类型的CSS源码和iOS布局代码(如objective-c和/或swift代码)的映射关系，则能够提升布局可靠性和布局效果，有助于防止页面无法显示的问题。

进一步可选的，本申请能够根据不同的方式(场景)来选择将该目标CSS源码转换为的iOS布局代码的类型(使用的开发语言)，比如选择是将CSS源码转换成objective-c代码，还是将CSS源码转换成swift代码。从而能够提升代码转换的灵活性和可靠性。

作为一种可能的实施方式，在进行代码转换时，终端设备可将该目标CSS源码输入预先配置的CSS解释器；输出提示消息，该提示消息用于提示用户选择将该目标CSS源码转换为的iOS布局代码的类型；当接收到用户输入的选择指令时，调用该CSS解释器根据该选择指令指示的类型对该目标CSS源码进行代码转换，以得到该目标CSS源码对应的目标iOS布局代码；其中，该目标iOS布局代码的类型与该选择指令指示的类型相同。

作为一种可能的实施方式，在进行代码转换时，终端设备可分别获取该终端设备在历史时间范围内针对不同类型的iOS布局代码的使用频率，并确定出该不同类型的iOS布局代码的使用频率中最高使用频率对应的iOS布局代码的类型；将该目标CSS源码输入预先配置的CSS解释器，并调用该CSS解释器根据该最高使用频率对应的iOS布局代码的类型对该目标CSS源码进行代码转换，以得到该目标CSS源码对应的目标iOS布局代码；其中，该目标iOS布局代码的类型与该最高使用频率对应的iOS布局代码的类型相同。

作为一种可能的实施方式，在进行代码转换时，终端设备还可通过检测iOS当前应用即进行iOS页面布局的应用使用的开发语言，或者通过大数据分析以确定该当前应用使用频率最高的开发语言，根据该开发语言对应的代码如objective-c代码进行转换。

作为一种可能的实施方式，在进行代码转换时，终端设备还可通过检测该终端设备上一次使用的开发语言，根据该开发语言对应的代码如objective-c代码进行转换。

作为一种可能的实施方式，该转换成的代码类型可预先固定设置得到，比如设置为objective-c代码，进而将CSS源码转换为objective-c代码。可选的，还可设置该转换成的代码类型的周期，如1个月，并可在该1个月内进行代码转换时，均默认转换成该固定设置得到的代码类型的代码。进一步可选的，还可设置该转换成的代码类型对应的应用标识，进而可在该应用标识对应的应用进行代码转换时，按照该设置的代码类型进行代码转换，不同应用进行代码转换时的代码类型可以相同，也可以不同。

可选的，该CSS源码集合可包括用于H5页面布局的CSS源码。目前，H5的页面布局就是使用的CSS布局，且同一套CSS描述的布局可以用在不同的页面上。由此，该CSS解释器还可以和H5的页面布局共用一套CSS源码集合，也即，该用于iOS页面布局的CSS源码可从该终端设备中用于H5页面布局的CSS码中确定出。这就有助于降低代码冗余，并可复用布局源码，降低开发人员开发工作量。

204、使用该目标iOS布局代码对该iOS页面进行布局，以得到包括该目标样式的布局页面。

在进行代码转换得到iOS原生布局使用的iOS布局代码之后，即可使用该目标iOS布局代码对该iOS页面进行布局，以实现通过iOS系统原生的布局方式将该目标样式添加到各个视图上，实现iOS页面布局。

205、接收针对该目标CSS源码的修改指令，该修改指令包括修改位置信息和修改内容。

可选的，在通过该目标CSS源码实现iOS页面布局之后，还可检测是否接收到修改指令，以便于根据该修改指令实现对iOS布局的调整。

206、使用该修改内容替换该目标CSS源码中该修改位置信息指示的CSS源码，以得到修改后的目标CSS源码。

其中，该修改位置信息可用于指示该目标源码中待修改的位置(内容)，该修改内容可用于指示该待修改的位置的修改内容，以便于将该修改内容替换该修改位置信息指示的位置的内容，以实现对该目标CSS源码的修改。

207、将该修改后的目标CSS源码输入预先配置的CSS解释器，以得到该修改后的目标CSS源码对应的iOS布局代码，并使用该iOS布局代码对该iOS页面进行布局。

在实现对该目标CSS源码的修改之后，即可通过该CSS解释器重新对该修改后的目标CSS源码进行代码转换，以进行iOS页面布局的调整或更新。也就是说，终端设备还可通过检测是否接收到针对CSS源码的修改指令，如果接收到该CSS源码的修改指令，还可通过该CSS解释器将修改后的CSS源码转换为objective-c或swift代码，以实现对iOS页面布局的快速、便捷调整。

在本实施例中，终端设备可通过开发CSS解释器，进而在进行iOS页面布局时，可通过获取待布局iOS页面的样式所对应的目标CSS源码，并通过配置的CSS解释器将该目标CSS源码转换为iOS布局代码，即实现将CSS源码转换成iOS原生布局使用的NSLayoutConstraint等方式对应的objective-c或swift代码，以实现将CSS描述的布局翻译为使用NSLayoutConstraint等描述的布局，从而可通过编辑CSS源码对应的CSS文件来修改iOS原生的布局，而不必关心怎么使用复杂的NSLayoutConstraint来进行布局，这就可以减少代码冗余，并可复用布局源码，且布局源码即CSS源码可读性较好，便于开发和调试。

上述方法实施例都是对本申请的iOS页面布局方法的举例说明，对各个实施例的描述都各有侧重，某个实施例中没有详述的部分，可以参见其他实施例的相关描述。

请参见图3，图3是本申请实施例提供的一种终端设备的结构示意图。本申请实施例的终端设备包括用于执行上述iOS页面布局方法的单元。具体的，本实施例的终端设备300可包括：获取单元301、转码单元302和页面布局单元303。其中，

获取单元301，用于确定待布局的iOS页面所需的目标样式，并获取所述目标样式对应的目标CSS源码；

转码单元302，用于将所述目标CSS源码输入预先配置的CSS解释器，以得到所述目标CSS源码对应的目标iOS布局代码，所述CSS解释器用于根据预设的CSS源码和iOS布局代码的对应关系将输入的CSS源码转换为iOS布局代码，所述iOS布局代码包括objective-c代码或swift代码；

页面布局单元303，用于使用所述目标iOS布局代码对所述iOS页面进行布局，以得到包括所述目标样式的布局页面。

可选的，所述获取单元301，可具体用于检测预先存储的CSS源码集合中是否存在与所述目标样式的标签相同的标签，所述CSS源码集合包括多个标签以及与每一标签对应的CSS源码；如果存在与所述目标样式的标签相同的标签，将所述CSS源码集合中所述相同的标签对应的CSS源码作为所述目标样式对应的目标CSS源码。

进一步可选的，所述获取单元301在执行所述检测预先存储的CSS源码集合中是否存在与所述目标样式的标签相同的标签时，可具体用于：

确定所述终端设备的目标设备类型，并从预设的数据库中选取与所述目标设备类型对应的CSS源码集合，所述数据库包括不同设备类型对应的CSS源码集合，且每个CSS源码集合包括多个标签以及与每一标签对应的CSS源码；

检测选取的所述CSS源码集合中是否存在与所述目标样式的标签相同的标签。

可选的，所述获取单元301，可具体用于检测预先存储的CSS源码集合中是否存在与所述目标样式的标签相同的标签，所述CSS源码集合包括多个标签以及与每一标签对应的CSS源码；如果存在与所述目标样式的标签相同的标签，将所述CSS源码集合中所述相同的标签对应的CSS源码作为基准CSS源码，并确定所述终端设备的目标设备类型；根据所述目标设备类型所指示的代码调整规则对所述基准CSS源码进行调整，并将调整后的CSS源码作为所述目标样式对应的目标CSS源码。

可选的，所述转码单元302，可具体用于将所述目标CSS源码输入预先配置的CSS解释器；输出提示消息，所述提示消息用于提示用户选择将所述目标CSS源码转换为的iOS布局代码的类型；当接收到用户输入的选择指令时，调用所述CSS解释器根据所述选择指令指示的类型对所述目标CSS源码进行代码转换，以得到所述目标CSS源码对应的目标iOS布局代码。

其中，所述目标iOS布局代码的类型与所述选择指令指示的类型相同。

可选的，所述转码单元302，可具体用于分别获取所述终端设备在历史时间范围内针对不同类型的iOS布局代码的使用频率，并确定出所述不同类型的iOS布局代码的使用频率中最高使用频率对应的iOS布局代码的类型；将所述目标CSS源码输入预先配置的CSS解释器，并调用所述CSS解释器根据所述最高使用频率对应的iOS布局代码的类型对所述目标CSS源码进行代码转换，以得到所述目标CSS源码对应的目标iOS布局代码。

其中，所述目标iOS布局代码的类型与所述最高使用频率对应的iOS布局代码的类型相同。

可选的，所述获取单元301，还可用于接收针对所述目标CSS源码的修改指令，所述修改指令包括修改位置信息和修改内容；使用所述修改内容替换所述目标CSS源码中所述修改位置信息指示的CSS源码，以得到修改后的目标CSS源码；

所述转码单元302，还可用于将所述修改后的目标CSS源码输入预先配置的CSS解释器，以得到所述修改后的目标CSS源码对应的iOS布局代码；

所述页面布局单元303，还可用于使用所述iOS布局代码对所述iOS页面进行布局。

具体的，该终端设备可通过上述单元实现上述图1至图2所示实施例中的iOS页面布局方法中的部分或全部步骤，此处不赘述。应理解，本申请实施例是对应方法实施例的装置实施例，对方法实施例的描述，也适用于本申请实施例。

在本实施例中，终端设备能够通过获取待布局iOS页面的样式所对应的目标CSS源码，并通过配置的CSS解释器将该目标CSS源码转换为iOS布局代码，以使用该iOS布局代码进行iOS页面布局，从而可通过CSS的方式来实现iOS原生的布局，从而能够在实现iOS页面布局的同时降低代码冗余，并可复用布局源码，且布局源码即CSS源码可读性较好，便于开发和调试。

请参见图4，图4是本申请实施例提供的另一种终端设备的结构示意图。该终端设备用于执行上述的iOS页面布局方法。如图4所示，本实施例中的终端设备400可以包括：一个或多个处理器401和存储器402。可选的，该终端设备还可包括一个或多个用户接口403，和/或，一个或多个通信接口404。上述处理器401、用户接口403、通信接口404和存储器402可通过总线405连接，或者可以通过其他方式连接，图4中以总线方式进行示例说明。其中，存储器402用于存储计算机程序，所述计算机程序包括程序指令，处理器401可用于执行存储器402存储的程序指令。

其中，处理器401可用于调用所述程序指令执行以下步骤：

确定待布局的iOS页面所需的目标样式，并获取所述目标样式对应的目标CSS源码；将所述目标CSS源码输入预先配置的CSS解释器，以得到所述目标CSS源码对应的目标iOS布局代码，所述CSS解释器用于根据预设的CSS源码和iOS布局代码的对应关系将输入的CSS源码转换为iOS布局代码，所述iOS布局代码包括objective-c代码或swift代码；使用所述目标iOS布局代码对所述iOS页面进行布局，以得到包括所述目标样式的布局页面。

可选的，处理器401在执行所述获取所述目标样式对应的目标CSS源码时，可具体执行以下步骤：

检测预先存储的CSS源码集合中是否存在与所述目标样式的标签相同的标签，所述CSS源码集合包括多个标签以及与每一标签对应的CSS源码；

如果存在与所述目标样式的标签相同的标签，将所述CSS源码集合中所述相同的标签对应的CSS源码作为所述目标样式对应的目标CSS源码。

可选的，所述检测预先存储的CSS源码集合中是否存在与所述目标样式的标签相同的标签时，可具体执行以下步骤：

确定所述终端设备的目标设备类型，并从预设的数据库中选取与所述目标设备类型对应的CSS源码集合，所述数据库包括不同设备类型对应的CSS源码集合，且每个CSS源码集合包括多个标签以及与每一标签对应的CSS源码；

检测选取的所述CSS源码集合中是否存在与所述目标样式的标签相同的标签。

可选的，所述获取所述目标样式对应的目标CSS源码时，可具体执行以下步骤：

检测预先存储的CSS源码集合中是否存在与所述目标样式的标签相同的标签，所述CSS源码集合包括多个标签以及与每一标签对应的CSS源码；

如果存在与所述目标样式的标签相同的标签，将所述CSS源码集合中所述相同的标签对应的CSS源码作为基准CSS源码，并确定所述终端设备的目标设备类型；

根据所述目标设备类型所指示的代码调整规则对所述基准CSS源码进行调整，并将调整后的CSS源码作为所述目标样式对应的目标CSS源码。

可选的，所述将所述目标CSS源码输入预先配置的CSS解释器，以得到所述目标CSS源码对应的目标iOS布局代码时，可具体执行以下步骤：

将所述目标CSS源码输入预先配置的CSS解释器；

调用用户接口403输出提示消息，所述提示消息用于提示用户选择将所述目标CSS源码转换为的iOS布局代码的类型；

当接收到用户输入的选择指令时，调用所述CSS解释器根据所述选择指令指示的类型对所述目标CSS源码进行代码转换，以得到所述目标CSS源码对应的目标iOS布局代码；其中，所述目标iOS布局代码的类型与所述选择指令指示的类型相同。

可选的，所述将所述目标CSS源码输入预先配置的CSS解释器，以得到所述目标CSS源码对应的目标iOS布局代码时，可具体执行以下步骤：

分别获取所述终端设备在历史时间范围内针对不同类型的iOS布局代码的使用频率，并确定出所述不同类型的iOS布局代码的使用频率中最高使用频率对应的iOS布局代码的类型；

将所述目标CSS源码输入预先配置的CSS解释器，并调用所述CSS解释器根据所述最高使用频率对应的iOS布局代码的类型对所述目标CSS源码进行代码转换，以得到所述目标CSS源码对应的目标iOS布局代码；其中，所述目标iOS布局代码的类型与所述最高使用频率对应的iOS布局代码的类型相同。

可选的，处理器401在执行所述使用所述目标iOS布局代码对所述iOS页面进行布局之后，还可用于执行以下步骤：

调用用户接口403接收针对所述目标CSS源码的修改指令，所述修改指令包括修改位置信息和修改内容；

使用所述修改内容替换所述目标CSS源码中所述修改位置信息指示的CSS源码，以得到修改后的目标CSS源码；

将所述修改后的目标CSS源码输入预先配置的CSS解释器，以得到所述修改后的目标CSS源码对应的iOS布局代码，并使用所述iOS布局代码对所述iOS页面进行布局。

其中，所述处理器401可以是中央处理单元(Central Processing Unit，CPU)，该处理器还可以是其他通用处理器、数字信号处理器(Digital Signal Processor，DSP)、专用集成电路(Application Specific Integrated Circuit，ASIC)、现成可编程门阵列(Field-Programmable Gate Array，FPGA)或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件等。通用处理器可以是微处理器或者该处理器也可以是任何常规的处理器等。

用户接口403可包括输入设备和输出设备，输入设备可以包括触控板、麦克风等，输出设备可以包括显示器(LCD等)、扬声器等。

通信接口404可包括接收器和发射器，用于与其他设备进行通信。

存储器402可以包括只读存储器和随机存取存储器，并向处理器401提供指令和数据。存储器402的一部分还可以包括非易失性随机存取存储器。例如，存储器402还可以存储上述的函数指针和函数的对应关系等等。

具体实现中，本申请实施例中所描述的处理器401等可执行上述图1至图2所示的方法实施例中所描述的实现方式，也可执行本申请实施例图3所描述的各单元的实现方式，此处不赘述。

本申请实施例还提供了一种计算机可读存储介质，所述计算机可读存储介质存储有计算机程序，所述计算机程序被处理器执行时可实现图1至图2所对应实施例中描述的iOS页面布局方法中的部分或全部步骤，也可实现本申请图3或图4所示实施例的终端设备的功能，此处不赘述。

本申请实施例还提供了一种包含指令的计算机程序产品，当其在计算机上运行时，使得计算机执行上述方法中的部分或全部步骤。

所述计算机可读存储介质可以是前述任一实施例所述的终端设备的内部存储单元，例如终端设备的硬盘或内存。所述计算机可读存储介质也可以是所述终端设备的外部存储设备，例如所述终端设备上配备的插接式硬盘，智能存储卡(Smart Media Card,SMC)，安全数字(Secure Digital,SD)卡，闪存卡(Flash Card)等。

在本申请中，术语“和/或”，仅仅是一种描述关联对象的关联关系，表示可以存在三种关系，例如，A和/或B，可以表示：单独存在A，同时存在A和B，单独存在B这三种情况。另外，本文中字符“/”，一般表示前后关联对象是一种“或”的关系。

在本申请的各种实施例中，上述各过程的序号的大小并不意味着执行顺序的先后，各过程的执行顺序应以其功能和内在逻辑确定，而不应对本申请实施例的实施过程构成任何限定。

以上所述，仅为本申请的部分实施方式，但本申请的保护范围并不局限于此，任何熟悉本技术领域的技术人员在本申请揭露的技术范围内，可轻易想到各种等效的修改或替换，这些修改或替换都应涵盖在本申请的保护范围之内。

Claims (10)

1.一种iOS页面布局方法，应用于终端设备，其特征在于，包括：

确定待布局的iOS页面所需的目标样式，并获取所述目标样式对应的目标层叠样式表CSS源码；

将所述目标CSS源码输入预先配置的CSS解释器，以得到所述目标CSS源码对应的目标iOS布局代码，所述CSS解释器用于根据预设的CSS源码和iOS布局代码的对应关系将输入的CSS源码转换为iOS布局代码，所述iOS布局代码包括objective-c代码或swift代码；

使用所述目标iOS布局代码对所述iOS页面进行布局，以得到包括所述目标样式的布局页面。

2.根据权利要求1所述的方法，其特征在于，所述获取所述目标样式对应的目标CSS源码，包括：

检测预先存储的CSS源码集合中是否存在与所述目标样式的标签相同的标签，所述CSS源码集合包括多个标签以及与每一标签对应的CSS源码；

如果存在与所述目标样式的标签相同的标签，将所述CSS源码集合中所述相同的标签对应的CSS源码作为所述目标样式对应的目标CSS源码。

3.根据权利要求2所述的方法，其特征在于，所述检测预先存储的CSS源码集合中是否存在与所述目标样式的标签相同的标签，包括：

确定所述终端设备的目标设备类型，并从预设的数据库中选取与所述目标设备类型对应的CSS源码集合，所述数据库包括不同设备类型对应的CSS源码集合，且每个CSS源码集合包括多个标签以及与每一标签对应的CSS源码；

检测选取的所述CSS源码集合中是否存在与所述目标样式的标签相同的标签。

4.根据权利要求1所述的方法，其特征在于，所述获取所述目标样式对应的目标CSS源码，包括：

检测预先存储的CSS源码集合中是否存在与所述目标样式的标签相同的标签，所述CSS源码集合包括多个标签以及与每一标签对应的CSS源码；

如果存在与所述目标样式的标签相同的标签，将所述CSS源码集合中所述相同的标签对应的CSS源码作为基准CSS源码，并确定所述终端设备的目标设备类型；

根据所述目标设备类型所指示的代码调整规则对所述基准CSS源码进行调整，并将调整后的CSS源码作为所述目标样式对应的目标CSS源码。

5.根据权利要求1-4任一项所述的方法，其特征在于，所述将所述目标CSS源码输入预先配置的CSS解释器，以得到所述目标CSS源码对应的目标iOS布局代码，包括：

将所述目标CSS源码输入预先配置的CSS解释器；

输出提示消息，所述提示消息用于提示用户选择将所述目标CSS源码转换为的iOS布局代码的类型；

当接收到用户输入的选择指令时，调用所述CSS解释器根据所述选择指令指示的类型对所述目标CSS源码进行代码转换，以得到所述目标CSS源码对应的目标iOS布局代码；其中，所述目标iOS布局代码的类型与所述选择指令指示的类型相同。

6.根据权利要求1-4任一项所述的方法，其特征在于，所述将所述目标CSS源码输入预先配置的CSS解释器，以得到所述目标CSS源码对应的目标iOS布局代码，包括：

分别获取所述终端设备在历史时间范围内针对不同类型的iOS布局代码的使用频率，并确定出所述不同类型的iOS布局代码的使用频率中最高使用频率对应的iOS布局代码的类型；

将所述目标CSS源码输入预先配置的CSS解释器，并调用所述CSS解释器根据所述最高使用频率对应的iOS布局代码的类型对所述目标CSS源码进行代码转换，以得到所述目标CSS源码对应的目标iOS布局代码；其中，所述目标iOS布局代码的类型与所述最高使用频率对应的iOS布局代码的类型相同。

7.根据权利要求1-4任一项所述的方法，其特征在于，在所述使用所述目标iOS布局代码对所述iOS页面进行布局之后，所述方法还包括：

接收针对所述目标CSS源码的修改指令，所述修改指令包括修改位置信息和修改内容；

使用所述修改内容替换所述目标CSS源码中所述修改位置信息指示的CSS源码，以得到修改后的目标CSS源码；

将所述修改后的目标CSS源码输入预先配置的CSS解释器，以得到所述修改后的目标CSS源码对应的iOS布局代码，并使用所述iOS布局代码对所述iOS页面进行布局。

8.一种终端设备，其特征在于，包括用于执行如权利要求1-7任一项权利要求所述的方法的单元。

9.一种终端设备，其特征在于，包括处理器和存储器，所述处理器和存储器相互连接，其中，所述存储器用于存储计算机程序，所述计算机程序包括程序指令，所述处理器被配置用于调用所述程序指令，执行如权利要求1-7任一项所述的方法。

10.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质存储有计算机程序，所述计算机程序包括程序指令，所述程序指令当被处理器执行时使所述处理器执行如权利要求1-7任一项所述的方法。