美文网首页
设置角标

设置角标

作者: 琪琪_729b | 来源:发表于2019-04-24 15:19 被阅读0次

在UIImageView上添加右下角有个尖角其他三个角是圆角的角标

步骤一:采用贝塞尔画图

.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 = @"推荐";

相关文章

网友评论

      本文标题:设置角标

      本文链接:https://www.haomeiwen.com/subject/ehspiqtx.html