This is the 16th day of my participation in Gwen Challenge

This article is received at the time of reading the Kingfisher source.

Kingfisher (1)

Kingfisher source code reading Notes (2)

Kingfisher source code reading Notes (3)

Kingfisher source code reading Notes (4)

Kingfisher source code reading notes (5)

There is a protocol ImageModifier in Kingfisher for modifying the attributes of an image after the image cache has been serialized but before it is actually used. This modified image is only used for rendering purposes, and does not affect the serialization and caching process.

The author provides three implementation structure RenderingModeImageModifier ImageModifier agreement, FlipsForRightToLeftLayoutDirectionImageModifier, AlignmentRectInsetsImageModifier. The following describes their application scenarios.

RenderingModeImageModifier

The renderingMode property used to modify UIImage is defined as follows:

 public enum RenderingMode : Int {
    case automatic = 0 // Use the default rendering mode for the context where the image is used
    case alwaysOriginal = 1 // Always draw the original image, without treating it as a template
    case alwaysTemplate = 2 // Always draw the image as a template image, ignoring its color information
}
Copy the code
  • Automatic: Render images in their original state or as templates, depending on the current context. For example, UINavigationBar, UITabBar, UIToolBar, UISegmentedControl and other controls can automatically render the foreground images as the template. UIImageView, UIWebView will render the original state of the image.
  • Alwaysorinal: Render using raw state.
  • AlwaysTemplate: Render as a template.

The template ignores all opaque color information of the image and replaces it with the tintColor of the control it is in. When creating a UIImage, the default renderingMode is.automatic. So when you set the UINavigationBar image, the image will be displayed as a solid color image of tintColor.

So, in the UINavigationBar, UITabBar these have a context on the control network to load images, you can use RenderingModeImageModifier to modify images.

FlipsForRightToLeftLayoutDirectionImageModifier

Used to call before using UIImage imageFlippedForRightToLeftLayoutDirection (). When UIImage is in a right-to-left layout, a new UIImage is returned that flips the current image horizontally.

In dealing with the internationalization, especially want to consider the state of reading from right to left, you can use FlipsForRightToLeftLayoutDirectionImageModifier to process images.

AlignmentRectInsetsImageModifier

Call withAlignmentRectInsets(_:) before using UIImage.

If the image UIImageView wants to display contains decorative elements such as shadows, badges, etc., there are two ways to apply a constraint to UIImageView:

  1. Set UIImageView to the size of the entire image;
  2. Ignore the decorator element and constrain the size of the UIImageView based on the core region. This can be achieved by modifying the alignmentRect of UIImage, adjusting the alignment rectangle, and inserting the inner margin.

In the case of UIView, you can adjust the alignment rectangle by overriding the UIView method alignmentRectInsets.

AlignmentRect visualization

Visualize alignmentRect by adding -UIViewShowalignmentRects YES to Arguments in Scheme.

let image = UIImage(named: "HOT")
        
leftImageView.image = image?.withAlignmentRectInsets(UIEdgeInsets(top: 10, left: 0, bottom: 0, right: 10))

rightImageView.image = image
Copy the code

HOT pictures are:

Runtime effects

reference

IOS Tip: Render mode of UIImage