用两张图片实现类似于聊天气泡等的特殊轮廓图片的效果(已封装可以自定义修改)

最新推荐文章于 2024-03-17 18:29:23 发布

放空di自己

最新推荐文章于 2024-03-17 18:29:23 发布

阅读量1.5k

点赞数 1

分类专栏： iOS开发文章标签： ios开发即时通讯聊天气泡特殊轮廓外形图片

本文链接：https://blog.csdn.net/wqs1028/article/details/50370333

版权

iOS开发专栏收录该内容

51 篇文章 0 订阅

订阅专栏

本文介绍如何使用Objective-C语言新建一个继承于UIView的类，并通过CALayer和CAShapeLayer实现一个带有特殊轮廓的图片视图。通过两张图片的组合，可以自定义实现复杂的视觉效果。

摘要由CSDN通过智能技术生成

新建一个类继承于UIView

.h文件如下

#import <UIKit/UIKit.h>

@interface WQChatImgaView : UIView
/**
 *  给外部提供一个image属性
 */
@property (nonatomic, strong) UIImage *image;

@end

.m实现如下

#import "WQChatImgaView.h"

@implementation WQChatImgaView

{
    CALayer      *_contentLayer;
    CAShapeLayer *_maskLayer;
}
- (instancetype)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self) {
        [self setup];
    }
    return self;
}
- (void)setup
{
    _maskLayer = [CAShapeLayer layer];
    _maskLayer.fillColor = [UIColor blackColor].CGColor;
    _maskLayer.strokeColor = [UIColor clearColor].CGColor;
    _maskLayer.frame = self.bounds;
    _maskLayer.contentsCenter = CGRectMake(0.5, 0.5, 0.1, 0.1);
    //非常关键设置自动拉伸的效果且不变形
    _maskLayer.contentsScale = [UIScreen mainScreen].scale;
    _maskLayer.contents = (id)[UIImage imageNamed:@"chat_send_nor@2x"].CGImage;
    
    _contentLayer = [CALayer layer];
    _contentLayer.mask = _maskLayer;
    _contentLayer.frame = self.bounds;
    [self.layer addSublayer:_contentLayer];
    
}

- (void)setImage:(UIImage *)image
{
    _contentLayer.contents = (id)image.CGImage;
}


@end

在控制器中的使用

#import "ViewController.h"
#import "WQChatImgaView.h"
@interface ViewController ()

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
 
    // 1.直接初始化
    WQChatImgaView *shapedImageView = [[WQChatImgaView alloc] initWithFrame:CGRectMake(50, 50, 100, 100)];
    // 2.设置imgage
    shapedImageView.image = [UIImage imageNamed:@"u=2366071268,3648144310&fm=58"];
    [self.view addSubview:shapedImageView];
}

@end

最终实现效果如下