CN108153526A - 一种可复用的控件圆角化设置方法 - Google Patents

Abstract

本发明公开了一种可复用的控件圆角化设置方法，包括以下步骤：S1：创建一个UIImage的工具类，通过UIImage绘制中心镂空图案为圆角矩形的矩形图片，并将其缓存在系统文件夹中；绘制方法包括：S11：获取一个绘制的上下文，设置绘制参数，包括线宽和向内缩减宽度；S12：绘制外层矩形，设置矩形图片的尺寸；S13：绘制内层的第一圆角矩形，设置第一圆角矩形的尺寸、圆角化位置和圆角的半径尺寸；S14：结束绘制的上下文，得到一张中心镂空图案为圆角矩形的矩形图片；S2：调用上述矩形图片覆盖在需要进行圆角化处理的目标控件的上层；本发明通过调用预先绘制并缓存的矩形图片对目标控件进行圆角化处理，解决现有技术中圆角化数量较多时存在的界面卡顿和离屏渲染的问题。

Description

一种可复用的控件圆角化设置方法

技术领域

本发明属于应用程序界面优化技术领域，更具体地，涉及一种可复用的控件圆角化设置方法。

背景技术

自从IOS 7系统开始，扁平化设计风格就风靡全球，在扁平化设计中，控件圆角化是其中一种常见的美化界面UI的处理方式，因为圆角的润滑带来的视觉舒适感，使很多APP开发过程中都有设置圆角的需求，而IOS 11的出现更是体现了控件的圆角化的重要性。

传统的应用程序控件圆角化处理方法为在应用程序源代码中需要实现控件圆角化的地方增加圆角化的代码，需要进行圆角化处理的控件包括UIView、UIImageView、UIButton、UILable和UITextView等可视化控件；现有技术中，对于单一界面设置普通控件圆角时，通常使用layer层CornerRadius和masksToBound属性项来设置，这种方法在圆角数量比较少的情况下，对系统性能并没有什么明显的影响，但是在圆角数量很大，例如对列表界面中的单元格中的控件进行圆角设置时，就会出现明显的界面卡顿现象；另外通过masksToBound方法设置圆角，会出现离屏渲染的问题，不能给予用户更好的体验。

发明内容

针对现有技术的以上缺陷或改进需求，本发明提供了一种可复用的控件圆角化设置方法，该方法通过调用预先绘制并缓存的中心镂空图案为圆角矩形的矩形图片对目标控件进行圆角化处理，其目的在于解决现有技术中圆角化数量较多时存在的界面卡顿和离屏渲染的问题。

为实现上述目的，按照本发明的一个方面，提供了一种可复用的控件圆角化设置方法，包括以下步骤：

S1：创建一个UIImage的工具类，通过UIImage绘制中心镂空图案为圆角矩形的矩形图片，并将其缓存在系统文件夹中；

S2：调用上述矩形图片覆盖在需要进行圆角化处理的目标控件的上层。

优选的，上述可复用的控件圆角化设置方法，步骤S2之前还包括以下步骤：建立图片的遮盖拉升方法以实现对图片不失真的拉伸或压缩，使矩形图片的尺寸与目标控件的尺寸一致。

优选的，上述可复用的控件圆角化设置方法，步骤S1中绘制中心镂空图案为圆角矩形的矩形图片的方法包括以下步骤：

S11：获取一个绘制的上下文，设置绘制参数，包括线宽和向内缩减宽度；

S12：绘制外层矩形，设置矩形图片的尺寸；

S13：绘制内层的第一圆角矩形，设置第一圆角矩形的尺寸、圆角化位置和圆角的半径尺寸；

S14：设置外层矩形和第一圆角矩形之间的填充颜色，使其与目标控件的颜色一致；

S15：结束绘制的上下文，得到一张中心镂空图案为圆角矩形的矩形图片。

优选的，上述可复用的控件圆角化设置方法，所述外层矩形采用贝塞尔曲线法进行绘制，所述第一圆角矩形采用贝塞尔曲线法或核心绘制法进行绘制。

优选的，上述可复用的控件圆角化设置方法，步骤S14之后还包括以下步骤：在所述第一圆角矩形的内边缘绘制一个第二圆角矩形，设置绘制线宽、绘制颜色和向内缩减宽度。

优选的，上述可复用的控件圆角化设置方法，所述第二圆角矩形采用核心绘制法进行绘制。

优选的，上述可复用的控件圆角化设置方法，所述向内缩减宽度为0.3pixel。

总体而言，通过本发明所构思的以上技术方案与现有技术相比，能够取得下列有益效果：

(1)本发明提供的一种可复用的控件圆角化设置方法，绘制中心镂空图案为圆角矩形的矩形图片并将其缓存在系统文件夹中；当需要为某个页面中带有大量子控件的目标控件设置圆角时，直接调用上述矩形图片覆盖在目标控件的最上层即可；为了避免每个需要设置圆角的目标控件均使用本方法中绘制大量重复图片，导致CPU的性能大量消耗，采用了复用和缓存机制来缓存绘制好的图片；相比传统的代码编写实现圆角化，本方法简化了代码编写过程，减少了代码的冗余，使得应用程序占用的内存空间变少；在界面圆角很多的时候，避免出现界面卡顿和离屏渲染的问题；

(2)本发明提供的一种可复用的控件圆角化设置方法，预先建立图片的遮盖拉升方法以在实现对矩形图片的不失真的拉伸和压缩；当缓存的矩形图片的大小和目标控件的大小不一致，则调用上述遮盖拉升方法对缓存的矩形图片进行拉伸或压缩，得到和目标控件同样大小的图片，然后分别覆盖到目标控件上，使缓存的矩形图片可适用于大小不一的各个目标控件，避免绘制并缓存大量图片导致CPU的性能大量消耗；

(3)本发明提供的一种可复用的控件圆角化设置方法，通过在矩形图片的内层边缘绘制一个第二圆角矩形，并设置绘制线宽、绘制颜色和向内缩减宽度，满足对控件进行圆角化处理的同时还需要设置控件的边框宽度和颜色的需求，设置向内缩减宽度可防止边框出现圆角锯齿。

附图说明

图1是本发明的一个具体实施例所提供的一种可复用的控件圆角化设置方法的流程图；

图2是本发明实施例提供的一种图片绘制方法的流程图；

图3是本发明实施例提供的另一种图片绘制方法的流程图；

图4是本发明的另一个具体实施例所提供的一种可复用的控件圆角化设置方法的流程图。

具体实施方式

为了使本发明的目的、技术方案及优点更加清楚明白，以下结合附图及实施例，对本发明进行进一步详细说明。应当理解，此处所描述的具体实施例仅仅用以解释本发明，并不用于限定本发明。此外，下面所描述的本发明各个实施方式中所涉及到的技术特征只要彼此之间未构成冲突就可以相互组合。

图1是本发明的一个具体实施例所提供的一种可复用的控件圆角化设置方法的流程图；如图1所示，本发明提供的一种可复用的控件圆角化设置方法，包括以下步骤：

S1：在项目文件的分类文件夹中，创建一个UIImage的工具类，通过UIImage绘制中心镂空图案为圆角矩形的矩形图片，并将其缓存在系统文件夹中；

S2：调用上述矩形图片覆盖在需要进行圆角化处理的目标控件的上层。

图2是本发明实施例提供的一种图片绘制方法的流程图；如图2所示，步骤S1中绘制中心镂空图案为圆角矩形的矩形图片的方法包括以下步骤：

S11：通过UIGraphicsGetCurrentContext函数获取一个绘制的上下文，设置绘制参数，包括线宽和向内缩减宽度；设置向内缩减宽度是为了防止边框出现圆角锯齿，本实施例优选该参数设置为0.3pixel；

S12：绘制外层矩形，设置矩形图片的尺寸；

S13：绘制内层的圆角矩形，设置圆角矩形的尺寸、圆角化位置和圆角的半径尺寸；

S14：设置外层矩形和内层圆角矩形之间的填充颜色，使其与目标控件的颜色一致；

S15：结束绘制的上下文，得到一张中心镂空图案为圆角矩形的矩形图片。

作为本实施例的一个优选，采用贝塞尔曲线法进行图片绘制，外层的矩形和内层的圆角矩形分别绘制；外层矩形的绘制函数为：(instancetype)bezierPathWithrect：(CGRect)rect；其中，rect传入绘制图片的尺寸，通过rect参数设置矩形图片的大小；内层的圆角矩形的绘制函数为：(instancetype)bezierPathWithRoundedRect：(CGRect)rectbyRoundingCorners:(UIRectCorner)corners cornerRadii：(CGSize)cornerRadii；其中，rect传入绘制图片的尺寸；corner表示矩形的四角中需要进行圆角化处理的角位置，是个枚举变量，通过这个参数可以方便的对剪切的圆角进行控制；cornerRadii是圆角的半径尺寸，通过这个函数设置圆角矩形的大小，圆角的位置和半径；绘制完成后，使用CGContextSetFillColorWithColor(context，color.CGColor)方法来设置外层矩形和内层圆角矩形之间的填充颜色，其中，context是绘制的上下文参数，color.CGColor传入待设置的填充颜色，使填充的颜色和目标控件的颜色一致。

作为本实施例的另一个优选，采用核心绘制法绘制内层的圆角矩形；内层的圆角矩形的绘制函数为：CGContextAddArcToPoint(context，x1.x，x1.y，x2.x，x2.y，cornerRadius)，其中，cornerRadius表示圆角的半径，context是绘制的上下文参数，x1，x2表示圆角矩形目标圆角的两条边上的两点，这两个点与目标圆角所在矩形端点的距离必须大于cornerRadius的值。

在本发明的另一个具体实施例中，提供了另一种可复用的控件圆角化设置方法，如图3所示，步骤S14之后还包括以下步骤：在上述矩形图片的圆角矩形的内边缘再绘制一个圆角矩形，设置绘制线宽、绘制颜色和向内缩减宽度；上述圆角矩形的绘制线宽就是边框线宽，其绘制颜色即为边框颜色；设置向内缩减宽度同样是为了防止边框出现圆角锯齿；此方法是为了满足对控件进行圆角化处理的同时还需要设置控件的边框宽度和颜色需求，作为本实施例的一个优选，采用核心绘制法进行绘制，具体的绘制函数为CGContextEOFillPath(context)。

上述两个具体实施例提供的控件圆角化设置方法适用于矩形图片的大小和圆角弧度均与目标控件一致的情况，绘制完成的中心镂空图案为圆角矩形的矩形图片缓存在系统文件夹中，当有目标控件需要进行圆角化处理时，调用缓存图片直接使用addSubview函数覆盖在控件的最上层即可。

图4是本发明的另一个具体实施例所提供的一种可复用的控件圆角化设置方法的流程图；本发明的另一个具体实施例提供的一种可复用的控件圆角化设置方法，如图4所示，步骤S2之前还包括以下步骤：建立图片的遮盖拉升方法以实现对图片不失真的拉伸或压缩，使矩形图片的尺寸与目标控件的尺寸一致；如果缓存的矩形图片的大小和目标控件的大小不一致，则调用上述遮盖拉升方法对缓存的矩形图片进行拉伸或压缩，得到和目标控件同样大小的图片，然后分别覆盖到目标控件上；实现拉伸和压缩方法的函数为：(UIImage*)stretchableImageWithLeftCapWidth：(NSInteger)leftCap WidthtopCapHeight：(NSInteger)topCapHeight；或者(UIImage*)resizableImageWithCapInsets：(UIEdgeInsets)capInsets resizingMode：(UIImageResizingMode)resizingMode。

本发明提供的一种可复用的控件圆角化设置方法，绘制中心镂空图案为圆角矩形的矩形图片，并将其缓存在系统文件夹中；当需要为某个页面中带有大量子控件的目标控件设置圆角时，如果目标控件的大小与缓存图片的大小一致，则直接使用缓存的图片覆盖在目标控件的最上层即可；目标控件的大小与缓存图片的大小不一致，则调用遮盖拉升方法对缓存的矩形图片进行拉伸或压缩，得到和目标控件同样大小的图片，然后分别覆盖到目标控件上；相比传统的通过代码编写实现控件圆角化，本方法简化了代码编写过程，减少了代码的冗余，使得应用程序占用的内存空间变少；在界面圆角很多的时候，避免出现界面卡顿和离屏渲染的问题。

本领域的技术人员容易理解，以上所述仅为本发明的较佳实施例而已，并不用以限制本发明，凡在本发明的精神和原则之内所作的任何修改、等同替换和改进等，均应包含在本发明的保护范围之内。

Claims (7)

1.一种可复用的控件圆角化设置方法，其特征在于，包括以下步骤：

S1：创建一个UIImage的工具类，通过UIImage绘制中心镂空图案为圆角矩形的矩形图片，并将其缓存；

S2：调用所述矩形图片覆盖在需要进行圆角化处理的目标控件的上层。

2.如权利要求1所述的可复用的控件圆角化设置方法，其特征在于，步骤S2之前还包括以下步骤：建立图片的遮盖拉升方法以实现对矩形图片不失真的拉伸或压缩，使矩形图片的尺寸与目标控件的尺寸一致。

3.如权利要求1或2所述的可复用的控件圆角化设置方法，其特征在于，步骤S1中绘制中心镂空图案为圆角矩形的矩形图片的方法包括以下步骤：

S11：获取一个绘制的上下文，设置绘制参数，包括线宽和向内缩减宽度；

S12：绘制外层矩形，设置矩形图片的尺寸；

S13：绘制内层的第一圆角矩形，设置第一圆角矩形的尺寸、圆角化位置和圆角的半径尺寸；

S14：设置外层矩形和第一圆角矩形之间的填充颜色，使其与目标控件的颜色一致；

S15：结束绘制的上下文，得到中心镂空图案为圆角矩形的矩形图片。

4.如权利要求3所述的可复用的控件圆角化设置方法，其特征在于，所述外层矩形采用贝塞尔曲线法进行绘制，所述第一圆角矩形采用贝塞尔曲线法或核心绘制法进行绘制。

5.如权利要求3所述的可复用的控件圆角化设置方法，其特征在于，步骤S14之后还包括以下步骤：在所述第一圆角矩形的内边缘绘制一个第二圆角矩形，设置绘制线宽、绘制颜色和向内缩减宽度。

6.如权利要求5所述的可复用的控件圆角化设置方法，其特征在于，所述第二圆角矩形采用核心绘制法进行绘制。

7.如权利要求3或5所述的可复用的控件圆角化设置方法，其特征在于，所述向内缩减宽度为0.3pixel。