在UIImageView上添加右下角有个尖角其他三个角是圆角的角标
![](https://img.haomeiwen.com/i17245177/bb7f0fb2c5165973.jpeg)
步骤一:采用贝塞尔画图
.h文件中:
/** 遮罩 */
@property (nonatomic, strong) CAShapeLayer *maskLayer;
/** 路径 */
@property (nonatomic, strong) UIBezierPath *borderPath;
.m文件中:
- (instancetype)initWithFrame:(CGRect)frame {
if(self= [superinitWithFrame:frame]) {
// 初始化遮罩
self.maskLayer= [CAShapeLayerlayer];
// 设置遮罩
[self.layersetMask:self.maskLayer];
// 初始化路径
self.borderPath= [UIBezierPathbezierPath];
}
return self;
}
- (void)layoutSubviews {
[super layoutSubviews];
// 遮罩层frame
self.maskLayer.frame = self.bounds;
// 设置path起点
[self.borderPath moveToPoint:CGPointMake(0, 10)];
// 左上角的圆角
[self.borderPath addQuadCurveToPoint:CGPointMake(10, 0) controlPoint:CGPointMake(0, 0)];
// 直线,到右上角
[self.borderPath addLineToPoint:CGPointMake(self.bounds.size.width - 10, 0)];
// 右上角的圆角
[self.borderPath addQuadCurveToPoint:CGPointMake(self.bounds.size.width, 10) controlPoint:CGPointMake(self.bounds.size.width, 0)];
// 直线,到右下角
[self.borderPath addLineToPoint:CGPointMake(self.bounds.size.width, self.bounds.size.height-10)];
//右下角的圆角
[self.borderPath addQuadCurveToPoint:CGPointMake(self.bounds.size.width-10, self.bounds.size.height) controlPoint:CGPointMake(self.bounds.size.width, self.bounds.size.height)];
// 直线,到左下角
[self.borderPath addLineToPoint:CGPointMake(0, self.bounds.size.height)];
// 直线,回到起点
[self.borderPath addLineToPoint:CGPointMake(0, 10)];
// 将这个path赋值给maskLayer的path
self.maskLayer.path = self.borderPath.CGPath;
}
步骤二:创建一个Objective-C File,File Type 选择Category,Class选择UIImageView,名称为badgeView
UIImageView+Badge.h中:
@property (strong, nonatomic) UILabel *badge;
/**
* 角标显示的信息,可以为数字和文字
*/
@property (nonatomic) NSString *badgeValue;
UIImageView+Badge.m中:
做一个自适应角标
-(void) setBadgeValue:(NSString*)badgeValue
{
objc_setAssociatedObject(self, &badgeValueKey, badgeValue, OBJC_ASSOCIATION_RETAIN_NONATOMIC);
// 当角标信息不存在,或者为空,则移除
if(!badgeValue || [badgeValueisEqualToString:@""] || ([badgeValueisEqualToString:@"0"] &&self.shouldHideBadgeAtZero)) {
[selfremoveBadge];
}elseif(!self.badge) {
//当又有值时,重新设置角标
self.badge = [[RRBezierPathLabelalloc]initWithFrame:CGRectMake(self.badgeOriginX,self.badgeOriginY,20,20)];
[selfbadgeInit];
[selfaddSubview:self.badge];
[self updateBadgeValue];
}else{
[self updateBadgeValue];
}
}
// 角标值变化
- (void)updateBadgeValue
{
self.badge.text = self.badgeValue;
[self updateBadgeFrame];
}
- (void)updateBadgeFrame
{
CGSizeexpectedLabelSize = [self badgeExpectedSize];
CGFloatminHeight = expectedLabelSize.height;
// 判断如果小于最小size,则为最小size
minHeight = (minHeight
CGFloatminWidth = expectedLabelSize.width;
CGFloat padding = self.badgePadding;
// 填充边界
minWidth = (minWidth < minHeight) ? minHeight : expectedLabelSize.width;
//设置最大size
minWidth = ( minWidth > (ScreenWidth/16+8) )? (ScreenWidth/16+8): minWidth;
self.badge.frame=CGRectMake(self.badgeOriginX,self.badgeOriginY, minWidth + padding, minHeight + padding);
}
- (CGSize) badgeExpectedSize
{
// 自适应角标
RRBezierPathLabel *frameLabel = [self duplicateLabel:self.badge];
[frameLabelsizeToFit];
CGSizeexpectedLabelSize = frameLabel.frame.size;
returnexpectedLabelSize;
}
- (RRBezierPathLabel *)duplicateLabel:(RRBezierPathLabel *)labelToCopy
{
RRBezierPathLabel *duplicateLabel = [[RRBezierPathLabel alloc]initWithFrame:labelToCopy.frame];
duplicateLabel.text= labelToCopy.text;
duplicateLabel.font= labelToCopy.font;
returnduplicateLabel;
}
使用:
cell.infoImage.badgeValue = @"推荐";
网友评论