IOS OC UI相关

iOS view任意角圆角

2019-08-05  本文已影响0人  MQ_Twist

宁愿犯错,我不愿什么都不做。

前言

一个月的开发周期过去了,产品上线了,突然又闲了。一个轮回结束,也预示下一个轮回即将开始(一脸憔悴样儿)。趁着闲的时间,赶紧整理下自己觉得不常用的技术点。不多比比,开怼。

TODO

给view某个角或几个角设置圆角

如果你遇到的需求有这样的


1.png

或者这样的


2.png

别停!往下翻!

图一还好,不想做让UI切,图二切的话就没必要了,图片有点大(宽度几乎为屏宽),那我们就可以整个view分类来处理一下

/**
 对view切部分圆角
 
 @param corners 切圆角部位
 @param cornerRadius 圆角大小
 */
- (void)mq_setCornerRect:(UIRectCorner)corners radius:(CGFloat)cornerRadius {
    UIBezierPath *maskPath = [UIBezierPath bezierPathWithRoundedRect:self.bounds
                                                   byRoundingCorners:corners
                                                         cornerRadii:CGSizeMake(cornerRadius, cornerRadius)];
    CAShapeLayer *maskLayer = [CAShapeLayer layer];
    maskLayer.frame = self.bounds;
    maskLayer.path = maskPath.CGPath;
    self.layer.mask = maskLayer;
}

这里面有个关键枚举UIRectCorner

typedef NS_OPTIONS(NSUInteger, UIRectCorner) {
    UIRectCornerTopLeft     = 1 << 0,
    UIRectCornerTopRight    = 1 << 1,
    UIRectCornerBottomLeft  = 1 << 2,
    UIRectCornerBottomRight = 1 << 3,
    UIRectCornerAllCorners  = ~0UL
};

枚举见名知意,前四个对应四个角,最后一个是所有。

UIView *view = [UIView new];
[view mq_setCornerRect:UIRectCornerTopLeft | UIRectCornerBottomLeft radius:view.frame.size.height];
UIView *view = [UIView new];
[view mq_setCornerRect:UIRectCornerTopLeft | UIRectCornerBottomRight radius:view.frame.size.height];

我用的是masonry适配的,我又写了一个方法,或许您也用的到:

/**
 对view切部分圆角
 
 @param bounds view的bounds(针对用masonry布局的)
 @param corners 切圆角部位
 @param cornerRadius 圆角大小
 */
- (void)mq_setRect:(CGRect)bounds cornerRect:(UIRectCorner)corners radius:(CGFloat)cornerRadius {
    UIBezierPath *maskPath = [UIBezierPath bezierPathWithRoundedRect:bounds
                                                   byRoundingCorners:corners
                                                         cornerRadii:CGSizeMake(cornerRadius, cornerRadius)];
    CAShapeLayer *maskLayer = [CAShapeLayer layer];
    maskLayer.frame = bounds;
    maskLayer.path = maskPath.CGPath;
    self.layer.mask = maskLayer;
}

后记

mo得后记,学flutter去了。

上一篇下一篇

猜你喜欢

热点阅读