使用`contentGravity`解决寄宿图变形

版权声明：本文为博主原创文章，转载请注明文章出处。 https://blog.csdn.net/qfeung/article/details/88094901

概述

使用CALayer的contents属性可以为普通图片添加寄宿图, 效果等同于 UIImageView, 和 UIImageView 一样, 图片的内容填充一定会涉及到无法避免的问题 - 边界对齐和等比缩放. UIImageView 使用contentMode属性来解决, 而 Layer 也具有功效等同的接口属性 - contentGravity.

contentGravity 与 contentMode 的对比

1. contentMode是枚举类型, 而 contentGravity 是字符串类型;
2. 命名的差异, 个人感觉 contentGravity 的命名更加优雅和见闻知意;

取值范围

// contentMode的取值范围
typedef NS_ENUM(NSInteger, UIViewContentMode) {
    UIViewContentModeScaleToFill,
    UIViewContentModeScaleAspectFit,      // contents scaled to fit with fixed aspect. remainder is transparent
    UIViewContentModeScaleAspectFill,     // contents scaled to fill with fixed aspect. some portion of content may be clipped.
    UIViewContentModeRedraw,              // redraw on bounds change (calls -setNeedsDisplay)
    UIViewContentModeCenter,              // contents remain same size. positioned adjusted.
    UIViewContentModeTop,
    UIViewContentModeBottom,
    UIViewContentModeLeft,
    UIViewContentModeRight,
    UIViewContentModeTopLeft,
    UIViewContentModeTopRight,
    UIViewContentModeBottomLeft,
    UIViewContentModeBottomRight,
};

// contentGravity的取值范围
/** Layer `contentsGravity' values. **/

CA_EXTERN CALayerContentsGravity const kCAGravityCenter
    API_AVAILABLE(macos(10.5), ios(2.0), watchos(2.0), tvos(9.0));
CA_EXTERN CALayerContentsGravity const kCAGravityTop
    API_AVAILABLE(macos(10.5), ios(2.0), watchos(2.0), tvos(9.0));
CA_EXTERN CALayerContentsGravity const kCAGravityBottom
    API_AVAILABLE(macos(10.5), ios(2.0), watchos(2.0), tvos(9.0));
CA_EXTERN CALayerContentsGravity const kCAGravityLeft
    API_AVAILABLE(macos(10.5), ios(2.0), watchos(2.0), tvos(9.0));
CA_EXTERN CALayerContentsGravity const kCAGravityRight
    API_AVAILABLE(macos(10.5), ios(2.0), watchos(2.0), tvos(9.0));
CA_EXTERN CALayerContentsGravity const kCAGravityTopLeft
    API_AVAILABLE(macos(10.5), ios(2.0), watchos(2.0), tvos(9.0));
CA_EXTERN CALayerContentsGravity const kCAGravityTopRight
    API_AVAILABLE(macos(10.5), ios(2.0), watchos(2.0), tvos(9.0));
CA_EXTERN CALayerContentsGravity const kCAGravityBottomLeft
    API_AVAILABLE(macos(10.5), ios(2.0), watchos(2.0), tvos(9.0));
CA_EXTERN CALayerContentsGravity const kCAGravityBottomRight
    API_AVAILABLE(macos(10.5), ios(2.0), watchos(2.0), tvos(9.0));
CA_EXTERN CALayerContentsGravity const kCAGravityResize
    API_AVAILABLE(macos(10.5), ios(2.0), watchos(2.0), tvos(9.0));
CA_EXTERN CALayerContentsGravity const kCAGravityResizeAspect
    API_AVAILABLE(macos(10.5), ios(2.0), watchos(2.0), tvos(9.0));
CA_EXTERN CALayerContentsGravity const kCAGravityResizeAspectFill
    API_AVAILABLE(macos(10.5), ios(2.0), watchos(2.0), tvos(9.0));

示例代码

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.
    
    CALayer *layer = [CALayer layer];
    layer.backgroundColor = [UIColor magentaColor].CGColor;
    layer.frame = CGRectMake(([UIScreen mainScreen].bounds.size.width - 200) / 2, 200, 200, 200);
    layer.contents = (__bridge id _Nullable)([UIImage imageNamed:@"SQIImg"].CGImage);
    layer.masksToBounds = YES;
    layer.contentsGravity = kCAGravityResizeAspectFill;
    [self.view.layer addSublayer:layer];
}

效果对比