CN107092413A - 一种可视控件圆角化处理方法及系统 - Google Patents

Abstract

本发明提供一种可视控件圆角化处理方法及系统，所述方法首先定义一个圆角化类，在所述圆角化类中定义各圆角化参数与处理接口；其次在应用程序中调用所述处理接口，基于所述圆角化类中的各圆角化参数对所述应用程序内各可视控件进行圆角化处理。本发明具有以下有益效果：1、当圆角化需求改变时，只需修改所述圆角化类中的参数，极大减轻了代码修改的工作量；2、开发过程中的一次性定义圆角化类，减少了研发过程中的开发效率；3、提升了代码质量；4、减少了代码的冗余，使得应用程序占用的内存空间变少。

Description

一种可视控件圆角化处理方法及系统

技术领域

本发明涉及应用程序界面优化技术领域，更具体地，涉及一种可视化控件圆角化处理方法及系统。

背景技术

目前，随着应用程序，尤其是移动端app的快速发展，app产品的设计不再仅限于功能的实现，而会更加追求用户体验和app的整体美观，可视化控件的圆角化处理就是其中一种常见的美化界面UI的方式。

不同控件的圆角处理方法都大同小异，无非是设置边框颜色、圆角半径、剪切图层等基本方法，被处理的基本控件也大都是UIView、UIImageView、UIButton、UILable、UITextView几中类型。传统的应用程序可视化控件圆角化处理方法在需美化的应用程序源代码中需要实现空间圆角化的地方增加圆角化的代码，从而实现对于应用程序可视化控件的圆角化。

然而，这种传统的圆角处理方法存在一些不足，主要表现在：1、当角化需求改变时，对于代码修改的工作量繁重且易出错；2、降低应用程序的开发效率；3、降低代码质量；4、使得应用程序占用更多的内存空间。

发明内容

本发明为克服上述问题或者至少部分地解决上述问题，提供一种可视控件圆角化处理方法及系统。

根据本发明的一个方面，提供一种可视控件圆角化处理方法，包括：

步骤1，定义一个圆角化类，在所述圆角化类中定义各圆角化参数与处理接口；

步骤2，在应用程序中调用所述处理接口，基于所述圆角化类中的各圆角化参数对所述应用程序内各可视控件进行圆角化处理。

进一步，所述步骤2后还包括：步骤3，基于修改需求，对所述各圆角化参数进行修改。

进一步，所述圆角化类中还包括可视控件的类型，所述各类型可视控件分别对应各自的圆角化参数。

进一步，所述圆角化参数包括：圆角半径、可视控件边框宽度、可视控件边框颜色。

进一步，所述步骤2中进一步包括：判断待圆角化可视控件的类型，根据所述可视控件的类型获取其对应的圆角化参数。

进一步，所述步骤判断待圆角化可视控件的类型，根据所述可视控件的类型获取其对应的圆角化参数前还包括：当待圆角化可视控件的边框宽度参数为空时，将所述边框宽度参数值设置为0；当待圆角化可视控件的颜色参数为空时，将所述边框颜色设置为透明。

进一步，所述步骤判断待圆角化可视控件的类型，根据所述可视控件的类型获取其对应的圆角化参数进一步包括：当待圆角化可视控件的类型属于所述圆角化类中可视控件的类型时，根据所述可视控件的类型获取其对应的圆角化参数；当待圆角化可视控件的类型不属于所述圆角化类中可视化空间的类型时，将所述待圆角化可视控件转换成任一所述圆角化类中可视控件的类型，根据所述可视控件的类型获取其对应的圆角化参数。

进一步，所述圆角化类中进一步包括可视控件中待圆角化处理圆角的位置。

进一步，所述步骤基于所述圆角化类中的各圆角化参数对所述应用程序内各可视控件进行圆角化处理进一步包括：在IOS环境中，基于所述圆角化类中的各圆角化参数，利用UIBezierPath类对所述应用程序内各可视控件进行圆角化处理。

根据本发明的一个方面，提供一种应用程序可视控件圆角化处理系统，包括定义模块和处理模块：

所述定义模块，与所述处理模块相连，用于定义一个圆角化类，在所述圆角化类中定义各圆角化参数与处理接口；

所述处理模块，与所述定义模块相连，用于在应用程序中调用所述处理接口，基于所述圆角化类中的各圆角化参数对所述应用程序内各可视控件进行圆角化处理。

本申请提出一种可视控件圆角化处理方法及系统，所述方法首先定义一个圆角化类，在所述圆角化类中定义各圆角化参数与处理接口；其次在应用程序中调用所述处理接口，基于所述圆角化类中的各圆角化参数对所述应用程序内各可视控件进行圆角化处理。本发明具有以下有益效果：1、当圆角化需求改变时，只需修改所述圆角化类中的参数，极大减轻了代码修改的工作量；2、开发过程中的一次性定义圆角化类，减少了研发过程中的开发效率；3、提升了代码质量；4、减少了代码的冗余，使得应用程序占用的内存空间变少。

附图说明

图1为根据本发明实施例一种可视化控件圆角化处理方法的整体流程示意图；

图2为根据本发明实施例一种可视化控件圆角化处理系统的整体框架示意图；

图3为根据本发明实施例一种可视化控件圆角化处理方法的测试设备整体框架示意图。

具体实施方式

下面结合附图和实施例，对本发明的具体实施方式作进一步详细描述。以下实施例用于说明本发明，但不用来限制本发明的范围。

随着应用程序，尤其是移动端app的快速发展，app产品的设计不再仅限于功能的实现，而会更加追求用户体验和app的整体美观，可视化控件的圆角化处理就是其中一种常见的美化界面UI的方式。不同控件的圆角处理方法都大同小异，无非是设置边框颜色、圆角半径、剪切图层等基本方法，被处理的基本控件也大都是UIView、UIImageView、UIButton、UILable、UITextView几中类型。传统的应用程序可视化控件圆角化处理方法在需美化的应用程序源代码中需要实现空间圆角化的地方增加圆角化的代码，从而实现对于应用程序可视化控件的圆角化。这种传统的圆角处理方法存在一些不足，主要表现在：1、当角化需求改变时，对于代码修改的工作量繁重且易出错；2、降低应用程序的开发效率；3、降低代码质量；4、使得应用程序占用更多的内存空间。

本发明为解决上述问题，提出一种可视化控件圆角化处理方法及系统。

如图1，示出本发明一个具体实施例中一种可视控件圆角化处理方法整体流程示意图。总体上，包括：步骤1，定义一个圆角化类，在所述圆角化类中定义各圆角化参数与处理接口；步骤2，在应用程序中调用所述处理接口，基于所述圆角化类中的各圆角化参数对所述应用程序内各可视控件进行圆角化处理。本具体实施例具有以下有益效果：当圆角化需求改变时，只需修改所述圆角化类中的参数，极大减轻了代码修改的工作量；开发过程中的一次性定义圆角化类，减少了研发过程中的开发效率；提升了代码质量；减少了代码的冗余，使得应用程序占用的内存空间变少。

在本发明另一个具体实施例中，一种可视控件圆角化处理方法，所述步骤2后还包括：步骤3，基于修改需求，对所述各圆角化参数进行修改。本具体实施例中，当产品需求进行改变，需要改变圆角化需求时，只需将先前圆角化类中的相应部分进行修改，即可快速进行修改，相比现有技术，减少了研发人员代码修改工作量。

在本发明另一个具体实施例中，一种可视控件圆角化处理方法，所述圆角化参数包括：圆角半径、可视控件边框宽度、可视控件边框颜色。

在本发明另一个具体实施例中，一种可视控件圆角化处理方法，所述步骤2中进一步包括：判断待圆角化可视控件的类型，根据所述可视控件的类型获取其对应的圆角化参数。本实施例中，由于应用程序在对其中各可视控件进行圆角化优化时，很有可能针对不同的可视控件类型进行不同视觉风格的圆角化处理，所以根据不同的可视控件类型对应加载不同的圆角化参数，从而达到一类可视控件、一类圆角化风格的有益效果。

在本发明另一个具体实施例中，一种可视控件圆角化处理方法，所述步骤判断待圆角化可视控件的类型，根据所述可视控件的类型获取其对应的圆角化参数前还包括：当待圆角化可视控件的边框宽度参数为空时，将所述边框宽度参数值设置为0；当待圆角化可视控件的颜色参数为空时，将所述边框颜色设置为透明。

在本发明另一个具体实施例中，一种可视控件圆角化处理方法，步骤判断待圆角化可视控件的类型，根据所述可视控件的类型获取其对应的圆角化参数进一步包括：当待圆角化可视控件的类型属于所述圆角化类中可视控件的类型时，根据所述可视控件的类型获取其对应的圆角化参数；当待圆角化可视控件的类型不属于所述圆角化类中可视化空间的类型时，将所述待圆角化可视控件转换成任一所述圆角化类中可视控件的类型，根据所述可视控件的类型获取其对应的圆角化参数。在本发明上述具体实施例中，对应用程序可视控件进行圆角化优化的过程中多数情况的待优化可视控件是可以在预先定义的圆角化类中找到的，我们可以直接调用该类型的可视化控件相对应的视觉优化参数，对所述可视控件进行圆角化优化操作。但难免很多时候应用程序中待优化的可视控件并不属于先前定义的可视化类中，所以为了该种可视控件同样进行圆角化操作，在此需要先将所述待圆角化可视控件转换成任一所述圆角化类中可视控件的类型，再根据所述可视控件的类型获取其对应的圆角化参数。

在本发明另一个具体实施例中，一种可视控件圆角化处理方法，所述圆角化类中进一步包括可视控件中待圆角化处理圆角的位置。本发明上述具体实施例中，当需要针对可视控件四周(左上、左下、右上、右下)同时/或部分设置圆角的处理方法，如果开发中遇到只需要设置上左等部分圆角的需求，则可以使用上述具体实施例所述方法进行实现。

在本发明另一个具体实施例中，一种可视控件圆角化处理方法，所述步骤基于所述圆角化类中的各圆角化参数对所述应用程序内各可视控件进行圆角化处理进一步包括：在IOS环境中，基于所述圆角化类中的各圆角化参数，利用UIBezierPath类对所述应用程序内各可视控件进行圆角化处理。使用UIBezierPath类进行圆角处理，这是一种从CALayer层面进行圆角剪切的，这种可以减少离屏渲染，效率更高，占用的内存更少。

如图2，示出本发明一个具体实施例中一种应用程序可视控件圆角化处理系统整体框架示意图。总体上，包括：定义模块A1和处理模块A2：

所述定义模块A1，与所述处理模块A2相连，用于定义一个圆角化类，在所述圆角化类中定义各圆角化参数与处理接口；

所述处理模块A2，与所述定义模块A1相连，用于在应用程序中调用所述处理接口，基于所述圆角化类中的各圆角化参数对所述应用程序内各可视控件进行圆角化处理。

在本发明另一个具体实施例中，一种可视控件圆角化处理系统，所述系统还包括：修改模块，与所述定义模块相连，用于基于修改需求，对所述各圆角化参数进行修改。

在本发明另一个具体实施例中，一种可视控件圆角化处理系统，所述圆角化类中还包括可视控件的类型，所述各类型可视控件分别对应各自的圆角化参数。

在本发明另一个具体实施例中，一种可视控件圆角化处理系统，所述圆角化参数包括：圆角半径、可视控件边框宽度、可视控件边框颜色。

在本发明另一个具体实施例中，一种可视控件圆角化处理系统，所述处理模块还用于判断待圆角化可视控件的类型，根据所述可视控件的类型获取其对应的圆角化参数。

在本发明另一个具体实施例中，一种可视控件圆角化处理系统，所述处理模块还用于当待圆角化可视控件的边框宽度参数为空时，将所述边框宽度参数值设置为0；当待圆角化可视控件的颜色参数为空时，将所述边框颜色设置为透明。

在本发明另一个具体实施例中，一种可视控件圆角化处理系统，所述处理模块还用于当待圆角化可视控件的类型属于所述圆角化类中可视控件的类型时，根据所述可视控件的类型获取其对应的圆角化参数；当待圆角化可视控件的类型不属于所述圆角化类中可视化空间的类型时，将所述待圆角化可视控件转换成任一所述圆角化类中可视控件的类型，根据所述可视控件的类型获取其对应的圆角化参数。

在本发明另一个具体实施例中，一种可视控件圆角化处理系统，所述圆角化类中进一步包括可视控件中待圆角化处理圆角的位置。

在本发明另一个具体实施例中，一种可视控件圆角化处理系统，所述处理模块还用于在IOS环境中，基于所述圆角化类中的各圆角化参数，利用UIBezierPath类对所述应用程序内各可视控件进行圆角化处理。

一种可视控件圆角化处理方法在IOS开发环境下的具体应用实施例：创建一个继承于UIView的工具类，提供一个设置圆角的类方法，同时传入控件、圆角半径、边框宽度和边框颜色等基本参数，为圆角设置做准备。处理圆角的函数是：+(void)clipCornerView:(id)view Radius:(CGFloat)radius borderWidth:(CGFloat)borderWidth borderColor:(UIColor*)borderColor；其中，view传入了控件的类型，radius是圆角半径，borderWidth是边框宽度，borderColor是边框颜色。这个函数的特点是，在任何需要设置圆角的地方，只需要调用该函数，传入以上几个参数，就可以针对UIView、UIImageView、UIButton、UILable、UITextView等不同的控件，设置出颜色自定义、宽度自定义、大小自定义的圆角。这个函数的编写过程如下：分别判断borderWidth和borderColor是否为空，如果borderWidth为空，边框宽度设为0；如果borderColor为空，边框颜色设为透明；调用isKindOfClass函数判断控件类型，获取控件的具体类型，实现圆角的精准处理。拿到圆角的layer，通过cornerRadius、borderWidth、borderColor、masksToBounds几个属性实现圆角的设置。

上述具体实施例具有如下有益效果：将设置圆角的需要的要素:设置圆角的对象view，边框的宽度borderWidth，边框的颜色borderColor，圆角的大小radius，都当做参数传入到这个自己编写的函数，项目中会有其他的地方几百处，甚至上千处剪切圆角的地方，不管需要设置四个圆角，都只需要调用这一行代码就可以实现。无论控件是什么类型(UIView、UIImageView、UIButton、UILable、UITextView，任一种)都可以用一行代码设置圆角。控件的对象是id类型的，外面调用这个函数的时候无需关心什么类型，只需要调用这个编写的函数就可以设置圆角，在这个函数的底层就可以实现判断是什么类型，作对应的圆角化处理。所有的圆角都使用一种方法便于对圆角剪切进行统一管理，如果项目需求改动了(比如随着技术发展让圆角更高效等)，只需要改动这个函数的实现，就可以，其他调用这个函数的地方无需更改。

一种可视控件圆角化处理方法在IOS开发环境下的具体应用实施例：上述一个具体实施例主要是针对控件四周(左上、左下、右上、右下)同时设置圆角的处理方法，如果开发中遇到只需要设置上左等部分圆角的需求，则可以使用下面这个函数来实现，具体的函数是：+(void)clipCorerView:(id)view radius:(CGFloat)radiusRectCorner:(UIRectCorner)rectCorner；其中，view传入了控件的类型，radius是圆角半径，rectCorner是待设置的圆角。这个函数的特点是，在任何需要设置圆角的地方，只需要调用该函数，传入以上几个参数，就可以设置指定位置的圆角。

这个函数的编写过程是：

调用isKindOfClass函数判断控件类型，如果是UIView(或者其他类型控件)，就进行圆角处理，并将view强制转换成UIView(其他类型的控件)。

用UIBezierPath类调用bezierPathWithRoundedRect:bezierPathWithRoundedRect:viewNew.bounds byRoundingCorners:rectCornercornerRadii:CGSizeMake(dadius，dadius)方法，设置指定位置的圆角。

用[CAShapeLayer layer]创建一个maskLayer，设置frame、path属性；将maskLayer赋值给viewNew.layer.mask；如果是其他的类型的控件，比如是UIView、UIImageView、UIButton、UILable、UITextView等其他控件都可以使用。

上述具体实施例具有如下有益效果：使用UIBezierPath类进行圆角处理，这是一种从CALayer层面进行圆角剪切的，这种可以减少离屏渲染，效率更高，占用的内存更少。

这种圆角方案，在列表的使用中，界面圆角很多的时候，为了提高性能有很好的优势。

UIRectCorner，是一个枚举类型的参数，通过这个参数可以实现只剪切(左上，右上，左下，右下中的某一个圆角)，方便的对剪切的圆角进行控制，在直播app的礼物面板有使用。

图3是示出本申请实施例的可视控件圆角化处理方法的测试设备的结构框图。

参照图3，所述可视控件圆角化处理方法的测试设备，包括：处理器(processor)301、存储器(memory)302、通信接口(Communications Interface)303和总线304；

其中，

所述处理器301、存储器302、通信接口303通过所述总线304完成相互间的通信；

所述通信接口303用于该测试设备与可视控件圆角化处理方法的通信设备之间的信息传输；

所述处理器301用于调用所述存储器302中的程序指令，以执行上述各方法实施例所提供的方法，例如包括：定义一个圆角化类，在所述圆角化类中定义各圆角化参数与处理接口；在应用程序中调用所述处理接口，基于所述圆角化类中的各圆角化参数对所述应用程序内各可视控件进行圆角化处理。

本实施例公开一种计算机程序产品，所述计算机程序产品包括存储在非暂态计算机可读存储介质上的计算机程序，所述计算机程序包括程序指令，当所述程序指令被计算机执行时，计算机能够执行上述各方法实施例所提供的方法，例如包括：定义一个圆角化类，在所述圆角化类中定义各圆角化参数与处理接口；在应用程序中调用所述处理接口，基于所述圆角化类中的各圆角化参数对所述应用程序内各可视控件进行圆角化处理。

本实施例提供一种非暂态计算机可读存储介质，所述非暂态计算机可读存储介质存储计算机指令，所述计算机指令使所述计算机执行上述各方法实施例所提供的方法，例如包括：定义一个圆角化类，在所述圆角化类中定义各圆角化参数与处理接口；在应用程序中调用所述处理接口，基于所述圆角化类中的各圆角化参数对所述应用程序内各可视控件进行圆角化处理。

本领域普通技术人员可以理解：实现上述方法实施例的全部或部分步骤可以通过程序指令相关的硬件来完成，前述的程序可以存储于一计算机可读取存储介质中，该程序在执行时，执行包括上述方法实施例的步骤；而前述的存储介质包括：ROM、RAM、磁碟或者光盘等各种可以存储程序代码的介质。

以上所描述的可视控件圆角化处理方法的测试设备等实施例仅仅是示意性的，其中所述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部模块来实现本实施例方案的目的。本领域普通技术人员在不付出创造性的劳动的情况下，即可以理解并实施。

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

最后，本申请的方法仅为较佳的实施方案，并非用于限定本发明的保护范围。凡在本发明的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本发明的保护范围之内。

Claims (10)

1.一种可视控件圆角化处理方法，其特征在于，包括：

步骤1，定义一个圆角化类，在所述圆角化类中定义各圆角化参数与处理接口；

步骤2，在应用程序中调用所述处理接口，基于所述圆角化类中的各圆角化参数对所述应用程序内各可视控件进行圆角化处理。

2.如权利要求1所述的方法，其特征在于，所述步骤2后还包括：步骤3，基于修改需求，对所述各圆角化参数进行修改。

3.如权利要求1所述的方法，其特征在于，所述圆角化类中还包括可视控件的类型，所述各类型可视控件分别对应各自的圆角化参数。

4.如权利要求3所述的方法，其特征在于，所述圆角化参数包括：圆角半径、可视控件边框宽度、可视控件边框颜色。

5.如权利要求4所述的方法，其特征在于，所述步骤2中进一步包括：判断待圆角化可视控件的类型，根据所述可视控件的类型获取其对应的圆角化参数。

6.如权利要求5所述的方法，其特征在于，所述步骤判断待圆角化可视控件的类型，根据所述可视控件的类型获取其对应的圆角化参数前还包括：当待圆角化可视控件的边框宽度参数为空时，将所述边框宽度参数值设置为0；当待圆角化可视控件的颜色参数为空时，将所述边框颜色设置为透明。

7.如权利要求5-6所述的方法，其特征在于，所述步骤判断待圆角化可视控件的类型，根据所述可视控件的类型获取其对应的圆角化参数进一步包括：当待圆角化可视控件的类型属于所述圆角化类中可视控件的类型时，根据所述可视控件的类型获取其对应的圆角化参数；当待圆角化可视控件的类型不属于所述圆角化类中可视化空间的类型时，将所述待圆角化可视控件转换成任一所述圆角化类中可视控件的类型，根据所述可视控件的类型获取其对应的圆角化参数。

8.如权利要求5-6所述的方法，其特征在于，所述圆角化类中进一步包括可视控件中待圆角化处理圆角的位置。

9.如权利要求1所述的方法，其特征在于，所述步骤基于所述圆角化类中的各圆角化参数对所述应用程序内各可视控件进行圆角化处理进一步包括：在IOS环境中，基于所述圆角化类中的各圆角化参数，利用UIBezierPath类对所述应用程序内各可视控件进行圆角化处理。

10.一种应用程序可视控件圆角化处理系统，其特征在于，包括定义模块和处理模块：

所述定义模块，与所述处理模块相连，用于定义一个圆角化类，在所述圆角化类中定义各圆角化参数与处理接口；

所述处理模块，与所述定义模块相连，用于在应用程序中调用所述处理接口，基于所述圆角化类中的各圆角化参数对所述应用程序内各可视控件进行圆角化处理。