Article Directory
foreword
In the process of realizing the development of Netease Cloud Music demo, by consulting online materials, we found that we can cut our view to achieve a beautiful expression, for example:
The original rectangular view is cropped into a circle to better fit the public's aesthetics. However, when viewing the view hierarchy, it seems that the view has not been cropped, but it still shows a circular shape. After consulting the data, it is found that the layer that comes with the view is createdCALayerrelated
1. The relationship between UIView and CALayer
Views and layers are two key concepts of interface elements in iOS applications that are closely related and work closely together. In iOS development, we usually use the view (UIView) to build the user interface, and the layer (CALayer) is the basis for the actual drawing and rendering behind the view.
- View (UIView):
View is the basic element of building user interface in iOS application. They are instances of the UIView class, which is part of the UIKit framework. Each view is a rectangular area that can contain other views and form a view hierarchy by nesting.Views handle user interaction events, respond to touches and gestures, and can add animations and transitions.
Views are high-level abstractions that provide convenient methods for managing interface elements, but the views themselves don't actually do the drawing and rendering. Its drawing and rendering work is done by the corresponding layer - Layer (CALayer):
The layer is the actual drawing and rendering engine behind the view. Each view has an associated layer, which can be accessed through the view.layer property. Layers are instances of the CALayer class, which is part of the Core Animation framework. Layers are responsible for the actualDraws the contents of the view, and handles graphics and animation effects.
A layer manages its own content, and it can contain other sublayers, forming a layer tree. Layers provide a set of properties and methods for controlling operations such as drawing, layout, and animation. Using layers, we can draw shapes, gradients, shadows, and other effects on views, as well as apply animations and transitions.
Simply put, the view is responsible for responding to our operations, and the layer is responsible for designing our UI
The relationship between views and layers is one-to-one, and each view has an associated layer, which together constitute the interface elements of an iOS application. The view is a high-level encapsulation of the layer, which provides more convenient interface management functions, and the layer is the actual executor of drawing and rendering the view.
Note: The layer of the view is automatically created and managed by the system. Generally, we do not need to manually create the layer of the view.There is a one-to-one correspondence between views and layers, each view comes with a corresponding layer, but it is not displayed on our hierarchy
Second, the simple use of CALayer
Let's start with the creation of CALayer. We know that when UIView is created, it will automatically create a corresponding CALayer. So if we create a CALayer alone, can it be displayed? Give the code and let's try to run it
You can see that our CALayer has been successfully displayed. Let's take a look at our view hierarchy
and find that it is not displayed as a separate module.This further shows that CALayer does not respond to our events, but is used to draw our views
1. Rounded corners and cropping
Add the following code to the above code:
It shows a circular pattern, because we used cornerRadius to cut the corner of the view. Its Chinese meaning is curvature . When it is 0, it is a right angle. It can be used to cut our view by transforming it.
The appearance of curvature is often accompanied by masksToBounds , its Chinese meaning is to cut the border , only if we set it to yes, can we allow our view to cut our border with CALayer as the model
Let's go back to our original question. If the masksToBounds of the CALayer of our view is no (no by default), the cropping effect will not appear. The reason why the graphics above can be cropped is that it is the part that does not exceed the border after being cropped. What we need to crop is the part that exceeds the border. Take the following code as an example .
Clip our sublayerYes, our avatar above is actually obtained by UIButtom using the setimage method. When using the setimage method, we automatically assign the imageview as a subview to the buttom, so it can be understood that the layer of the buttom is the parent layer, and the layer of the imageview is the sublayer. You can see that I did not actually click on my avatar, but clicked on an area outside the image, but the button still responds, which also proves
ourThe size of the view is unchanged, but the displayed part is cut
Basic code principle:
NO:
Yes :
masksToBounds: This is a property of the CALayer class that controls whether the layer clips the portion of its sublayers that extend beyond the bounds of the layer. When set to YES, the layer will clip the contents of its sublayers so that they do not exceed the bounds of the layer. This is the same as the clipsToBounds property in UIView
2.contents
We know that we can create a UIImageView and assign it to our view to achieve a custom background image, but if we use the contents property of CALayer, we don’t have to worry so
much
CALayer has a property called contents. In Mac OS, it works on both CGImage and NSImage values. But in iOS, if you assign the value of UIImage to it, although it can be compiled, you can only get a blank content. Fortunately, UIImage has a CGImage property, which returns a "CGImageRef" object, which is a Core Foundation type, and you need to use the bridge keyword to convert it to a Cocoa type
3. Border properties
This property is used when designing 3GShare. It has width and background color settings.
borderWidth is used to set the border width, and borderColor is used to set the color.
This is the effect presented
Summarize
In fact, CALayer has many attributes, which I still don’t quite understand. Here is the blog of the boss for everyone to refer to
CALayer for iOS development.
iOS CALayer introduces
the understanding and simple use of iOS CALayer