[iOS imageView]headImage 异形图片的画法(小技巧记录)

先看成品

[iOS imageView]headImage 异形图片的画法(小技巧记录)_第1张图片
头像上既不是圆形,也不是方形,好像iOS的控件里也没有这样的异形控件

这样的效果其实是这样做的,
首先
问设计要这样两张图
图一
[iOS imageView]headImage 异形图片的画法(小技巧记录)_第2张图片

图二
[iOS imageView]headImage 异形图片的画法(小技巧记录)_第3张图片

关键步骤一
将图二添加到图一中 (小图上添加了一个大图)


    UIImageView *imageV = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"sidebar_icon_tx_kb"]];
    UIImageView *imageMaskV = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"sidebar_icon_txwk1"]];

为了看的更清楚明白,我self.view的背景色调整一下
于是 会有这种效果
[iOS imageView]headImage 异形图片的画法(小技巧记录)_第4张图片
继续调整
把图二的center配置到图一的center

 [imageMaskV mas_makeConstraints:^(MASConstraintMaker *make) {
        make.center.equalTo(imageV);
    }];

于是
[iOS imageView]headImage 异形图片的画法(小技巧记录)_第5张图片
填上图片看看效果
[iOS imageView]headImage 异形图片的画法(小技巧记录)_第6张图片
继续调整
把图一的内边距和图二对齐

[imageMaskV mas_makeConstraints:^(MASConstraintMaker *make) {
        make.edges.equalTo(imageV).insets(UIEdgeInsetsZero);
    }];

[iOS imageView]headImage 异形图片的画法(小技巧记录)_第7张图片
然后去掉背景色 添加上我们的图 看看效果

[iOS imageView]headImage 异形图片的画法(小技巧记录)_第8张图片

完整代码


#import "ViewController.h"
#import "Masonry.h"
@interface ViewController ()
{

}
@property (nonatomic,strong)UIImageView *imageHeadView;

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.
//    self.view.backgroundColor = [UIColor orangeColor];

    self.imageHeadView.frame = CGRectMake(30, 30, 60, 60);

    self.imageHeadView.image  = [UIImage imageNamed:@"22"];
    [self.view addSubview:self.imageHeadView];


}


-(UIImageView*)imageHeadView{

    if (!_imageHeadView) {
        _imageHeadView = [self headImage];
    }
    return _imageHeadView;
}


-(UIImageView*)headImage{

    UIImageView *imageV = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"sidebar_icon_tx_kb"]];
    UIImageView *imageMaskV = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"sidebar_icon_txwk1"]];
       [imageV addSubview:imageMaskV];
    [imageMaskV mas_makeConstraints:^(MASConstraintMaker *make) {
        make.center.equalTo(imageV);
    }];



    [imageMaskV mas_makeConstraints:^(MASConstraintMaker *make) {
        make.edges.equalTo(imageV).insets(UIEdgeInsetsZero);
    }];

    return imageV;

}




- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}

@end

你可能感兴趣的:(iOS,#,iOS,绘图,动画,#,iOS,系统控件,ios,imageview,图片,控件,异形)