当前位置: 首页 > 工具软件 > JSBadgeView > 使用案例 >

JSBadgeView适配iOS7、8,和超快速使用

呼延骏俊
2023-12-01

不废话,直接上代码!

  1. //新标识视图  
  2. self.badgeView = [[JSBadgeView alloc]initWithParentView:parentView alignment:JSBadgeViewAlignmentTopRight];  //在父控件(parentView)上显示,显示的位置TopRight  
  3.   //self.badgeView.badgePositionAdjustment = CGPointMake(-15, 10);  //如果显示的位置不对,可以自己调整,超爽啊!  
  4. self.badgeView.tag = IN_AREA_NEW_TASKS_TAG; //如果多个的badge,可以设置tag要辨别  
  5. /****如果系统是7.0以上,图标扁平化,可以设置颜色****/  
  6. if (SYSTEM_VERSION_GREATER_THAN_OR_EQUAL_TO(@"7.0"))  
  7. {  
  8.     self.badgeView.badgeBackgroundColor = [UIColor redColor];  
  9.     self.badgeView.badgeOverlayColor = [UIColor clearColor];//没有反光面  
  10.     self.badgeView.badgeStrokeColor = [UIColor redColor];//外圈的颜色,默认是白色  
  11. }  
  12. else //如果iOS版本小于7.0,用类似系统的图标  
  13. {  
  14.     self.badgeView1.badgeBackgroundColor = [UIColor redColor];  
  15.   
  16. }  
  17.   
  18. /*****设置数字****/  
  19. self.badgeView.badgeText = @"1";//如果不显示就</span>设置为空  
  20. self.badgeView.badgeText = nil//清空数字  
  21.   
  22. [self.badgeView setNeedsLayout];//当更新数字时,最好刷新,不然由于frame固定的,导致图片变形  


原JSBadgeView(修改过,适配iOS7、8的扁平化)的代码

  1. /* 
  2.  Copyright 2012 Javier Soto (ios@javisoto.es) 
  3.   
  4.  Licensed under the Apache License, Version 2.0 (the "License"); 
  5.  you may not use this file except in compliance with the License. 
  6.  You may obtain a copy of the License at 
  7.   
  8.  http://www.apache.org/licenses/LICENSE-2.0 
  9.   
  10.  Unless required by applicable law or agreed to in writing, software 
  11.  distributed under the License is distributed on an "AS IS" BASIS, 
  12.  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 
  13.  See the License for the specific language governing permissions and 
  14.  limitations under the License. 
  15.  */  
  16.   
  17. #import <UIKit/UIKit.h>  
  18.   
  19. typedef enum {  
  20.     JSBadgeViewAlignmentTopLeft,  
  21.     JSBadgeViewAlignmentTopRight,  
  22.     JSBadgeViewAlignmentTopCenter,  
  23.     JSBadgeViewAlignmentCenterLeft,  
  24.     JSBadgeViewAlignmentCenterRight,  
  25.     JSBadgeViewAlignmentBottomLeft,  
  26.     JSBadgeViewAlignmentBottomRight,  
  27.     JSBadgeViewAlignmentBottomCenter,  
  28.     JSBadgeViewAlignmentCenter  
  29. } JSBadgeViewAlignment;  
  30.   
  31. @interface JSBadgeView : UIView  
  32.   
  33. @property (nonatomiccopyNSString *badgeText;  
  34.   
  35. #pragma mark - Customization  
  36.   
  37. @property (nonatomic, assign) JSBadgeViewAlignment badgeAlignment;  
  38.   
  39. @property (nonatomicstrongUIColor *badgeTextColor;  
  40. @property (nonatomic, assign) CGSize badgeTextShadowOffset;  
  41. @property (nonatomicstrongUIColor *badgeTextShadowColor;  
  42.   
  43. @property (nonatomicstrongUIFont *badgeTextFont;  
  44.   
  45. @property (nonatomicstrongUIColor *badgeBackgroundColor;  
  46.   
  47. @property (nonatomicstrongUIColor *badgeStrokeColor;  
  48.   
  49. /** 
  50.  * @discussion color of the overlay circle at the top. Default is semi-transparent white. 
  51.  */  
  52. @property (nonatomicstrongUIColor *badgeOverlayColor;  
  53.   
  54. /** 
  55.  * @discussion allows to shift the badge by x and y points. 
  56.  */  
  57. @property (nonatomic, assign) CGPoint badgePositionAdjustment;  
  58.   
  59. /** 
  60.  * @discussion (optional) If not provided, the superview frame is used. 
  61.  * You can use this to position the view if you're drawing it using drawRect instead of `-addSubview:` 
  62.  */  
  63. @property (nonatomic, assign) CGRect frameToPositionInRelationWith;  
  64.   
  65. /** 
  66.  * @discussion optionally init using this method to have the badge automatically added to another view. 
  67.  */  
  68. - (id)initWithParentView:(UIView *)parentView alignment:(JSBadgeViewAlignment)alignment;  
  69.   
  70. @end  


  1. /* 
  2.  Copyright 2012 Javier Soto (ios@javisoto.es) 
  3.   
  4.  Licensed under the Apache License, Version 2.0 (the "License"); 
  5.  you may not use this file except in compliance with the License. 
  6.  You may obtain a copy of the License at 
  7.   
  8.  http://www.apache.org/licenses/LICENSE-2.0 
  9.   
  10.  Unless required by applicable law or agreed to in writing, software 
  11.  distributed under the License is distributed on an "AS IS" BASIS, 
  12.  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 
  13.  See the License for the specific language governing permissions and 
  14.  limitations under the License. 
  15.  */  
  16.   
  17. #import "JSBadgeView.h"  
  18.   
  19. #import <QuartzCore/QuartzCore.h>  
  20.   
  21. #define kDefaultBadgeTextColor [UIColor whiteColor]  
  22. #define kDefaultBadgeBackgroundColor [UIColor redColor]  
  23. #define kDefaultOverlayColor [UIColor colorWithWhite:1.0f alpha:0.3]  
  24.   
  25. #define kDefaultBadgeTextFont [UIFont boldSystemFontOfSize:[UIFont systemFontSize]]  
  26.   
  27. #define kDefaultBadgeShadowColor [UIColor clearColor]  
  28.   
  29. #define kBadgeStrokeColor [UIColor whiteColor]  
  30. #define kBadgeStrokeWidth 2.0f  
  31.   
  32. #define kMarginToDrawInside (kBadgeStrokeWidth * 2)  
  33.   
  34. #define kShadowOffset CGSizeMake(0.0f, 3.0f)  
  35. #define kShadowOpacity 0.4f  
  36. #define kShadowColor [UIColor colorWithWhite:0.0f alpha:kShadowOpacity]  
  37. #define kShadowRadius 1.0f  
  38.   
  39. #define kBadgeHeight 16.0f  
  40. #define kBadgeTextSideMargin 8.0f  
  41.   
  42. #define kBadgeCornerRadius 10.0f  
  43.   
  44. #define kDefaultBadgeAlignment JSBadgeViewAlignmentTopRight  
  45.   
  46. @interface JSBadgeView()  
  47.   
  48. - (void)_init;  
  49. - (CGSize)sizeOfTextForCurrentSettings;  
  50.   
  51. @end  
  52.   
  53. @implementation JSBadgeView  
  54.   
  55. @synthesize badgeAlignment = _badgeAlignment;  
  56.   
  57. @synthesize badgePositionAdjustment = _badgePositionAdjustment;  
  58. @synthesize frameToPositionInRelationWith = _frameToPositionInRelationWith;  
  59.   
  60. @synthesize badgeText = _badgeText;  
  61. @synthesize badgeTextColor = _badgeTextColor;  
  62. @synthesize badgeTextShadowColor = _badgeTextShadowColor;  
  63. @synthesize badgeTextShadowOffset = _badgeTextShadowOffset;  
  64. @synthesize badgeTextFont = _badgeTextFont;  
  65. @synthesize badgeBackgroundColor = _badgeBackgroundColor;  
  66. @synthesize badgeOverlayColor = _badgeOverlayColor;  
  67. @synthesize badgeStrokeColor = _badgeStrokeColor;  
  68.   
  69. - (void)awakeFromNib  
  70. {  
  71.     [super awakeFromNib];  
  72.   
  73.     [self _init];  
  74. }  
  75.   
  76. - (id)initWithFrame:(CGRect)frame  
  77. {  
  78.     if ((self = [super initWithFrame:frame]))  
  79.     {  
  80.         [self _init];  
  81.     }  
  82.   
  83.     return self;  
  84. }  
  85.   
  86. - (id)initWithParentView:(UIView *)parentView alignment:(JSBadgeViewAlignment)alignment  
  87. {  
  88.     if ((self = [self initWithFrame:CGRectZero]))  
  89.     {  
  90.         self.badgeAlignment = alignment;  
  91.         [parentView addSubview:self];  
  92.     }  
  93.       
  94.     return self;  
  95. }  
  96.   
  97. - (void)_init  
  98. {      
  99.     self.backgroundColor = [UIColor clearColor];  
  100.       
  101.     self.badgeAlignment = kDefaultBadgeAlignment;  
  102.       
  103.     self.badgeBackgroundColor = kDefaultBadgeBackgroundColor;  
  104.     self.badgeOverlayColor = kDefaultOverlayColor;  
  105.     self.badgeTextColor = kDefaultBadgeTextColor;  
  106.     self.badgeStrokeColor = kBadgeStrokeColor;  
  107.     self.badgeTextShadowColor = kDefaultBadgeShadowColor;  
  108.     self.badgeTextFont = kDefaultBadgeTextFont;  
  109. }  
  110.   
  111. #pragma mark - Layout  
  112.   
  113. - (void)layoutSubviews  
  114. {      
  115.     CGRect newFrame = self.frame;  
  116.     NSLog(@"badge frame:%@",NSStringFromCGRect(newFrame));  
  117.     CGRect superviewFrame = CGRectIsEmpty(_frameToPositionInRelationWith) ? self.superview.frame : _frameToPositionInRelationWith;  
  118.       
  119.     CGFloat textWidth = [self sizeOfTextForCurrentSettings].width;  
  120.       
  121.     CGFloat viewWidth = textWidth + kBadgeTextSideMargin + (kMarginToDrawInside * 2);  
  122.     CGFloat viewHeight = kBadgeHeight + (kMarginToDrawInside * 2);  
  123.       
  124.     CGFloat superviewWidth = superviewFrame.size.width;  
  125.     CGFloat superviewHeight = superviewFrame.size.height;  
  126.       
  127.     newFrame.size.width = viewWidth;  
  128.     newFrame.size.height = viewHeight;  
  129.       
  130.     switch (self.badgeAlignment) {  
  131.         case JSBadgeViewAlignmentTopLeft:  
  132.             newFrame.origin.x = -viewWidth / 2.0f;  
  133.             newFrame.origin.y = -viewHeight / 2.0f;  
  134.             break;  
  135.         case JSBadgeViewAlignmentTopRight:  
  136.             newFrame.origin.x = superviewWidth - (viewWidth / 2.0f);  
  137.             newFrame.origin.y = -viewHeight / 2.0f;  
  138.             break;  
  139.         case JSBadgeViewAlignmentTopCenter:  
  140.             newFrame.origin.x = (superviewWidth - viewWidth) / 2.0f;  
  141.             newFrame.origin.y = -viewHeight / 2.0f;  
  142.             break;  
  143.         case JSBadgeViewAlignmentCenterLeft:  
  144.             newFrame.origin.x = -viewWidth / 2.0f;  
  145.             newFrame.origin.y = (superviewHeight - viewHeight) / 2.0f;  
  146.             break;  
  147.         case JSBadgeViewAlignmentCenterRight:  
  148.             newFrame.origin.x = superviewWidth - (viewWidth / 2.0f);  
  149.             newFrame.origin.y = (superviewHeight - viewHeight) / 2.0f;  
  150.             break;  
  151.         case JSBadgeViewAlignmentBottomLeft:  
  152.             newFrame.origin.x = -textWidth / 2.0f;  
  153.             newFrame.origin.y = superviewHeight - (viewHeight / 2.0f);  
  154.             break;  
  155.         case JSBadgeViewAlignmentBottomRight:  
  156.             newFrame.origin.x = superviewWidth - (viewWidth / 2.0f);  
  157.             newFrame.origin.y = superviewHeight - (viewHeight / 2.0f);  
  158.             break;  
  159.         case JSBadgeViewAlignmentBottomCenter:  
  160.             newFrame.origin.x = (superviewWidth - viewWidth) / 2.0f;  
  161.             newFrame.origin.y = superviewHeight - (viewHeight / 2.0f);  
  162.             break;  
  163.         case JSBadgeViewAlignmentCenter:  
  164.             newFrame.origin.x = (superviewWidth - viewWidth) / 2.0f;  
  165.             newFrame.origin.y = (superviewHeight - viewHeight) / 2.0f;  
  166.             break;  
  167.         default:  
  168.             NSAssert(NO@"Unimplemented JSBadgeAligment type %d"self.badgeAlignment);  
  169.     }  
  170.       
  171.     newFrame.origin.x += _badgePositionAdjustment.x;  
  172.     newFrame.origin.y += _badgePositionAdjustment.y;  
  173.       
  174.     self.frame = CGRectIntegral(newFrame);  
  175.       
  176.     [self setNeedsDisplay];  
  177. }  
  178.   
  179. #pragma mark - Private  
  180.   
  181. - (CGSize)sizeOfTextForCurrentSettings  
  182. {  
  183.     return [self.badgeText sizeWithFont:self.badgeTextFont];  
  184. }  
  185.   
  186. #pragma mark - Setters  
  187.   
  188. - (void)setBadgeAlignment:(JSBadgeViewAlignment)badgeAlignment  
  189. {  
  190.     if (badgeAlignment != _badgeAlignment)  
  191.     {  
  192.         _badgeAlignment = badgeAlignment;  
  193.   
  194.         switch (badgeAlignment)  
  195.         {  
  196.             case JSBadgeViewAlignmentTopLeft:  
  197.                 self.autoresizingMask = UIViewAutoresizingFlexibleBottomMargin | UIViewAutoresizingFlexibleRightMargin;  
  198.                 break;  
  199.             case JSBadgeViewAlignmentTopRight:  
  200.                 self.autoresizingMask = UIViewAutoresizingFlexibleBottomMargin | UIViewAutoresizingFlexibleLeftMargin;  
  201.                 break;  
  202.             case JSBadgeViewAlignmentTopCenter:  
  203.                 self.autoresizingMask = UIViewAutoresizingFlexibleBottomMargin | UIViewAutoresizingFlexibleLeftMargin | UIViewAutoresizingFlexibleRightMargin;  
  204.                 break;  
  205.             case JSBadgeViewAlignmentCenterLeft:  
  206.                 self.autoresizingMask = UIViewAutoresizingFlexibleTopMargin | UIViewAutoresizingFlexibleBottomMargin | UIViewAutoresizingFlexibleRightMargin;  
  207.                 break;  
  208.             case JSBadgeViewAlignmentCenterRight:  
  209.                 self.autoresizingMask = UIViewAutoresizingFlexibleTopMargin | UIViewAutoresizingFlexibleBottomMargin | UIViewAutoresizingFlexibleLeftMargin;  
  210.                 break;  
  211.             case JSBadgeViewAlignmentBottomLeft:  
  212.                 self.autoresizingMask = UIViewAutoresizingFlexibleTopMargin | UIViewAutoresizingFlexibleRightMargin;  
  213.                 break;  
  214.             case JSBadgeViewAlignmentBottomRight:  
  215.                 self.autoresizingMask = UIViewAutoresizingFlexibleTopMargin | UIViewAutoresizingFlexibleLeftMargin;  
  216.                 break;  
  217.             case JSBadgeViewAlignmentBottomCenter:  
  218.                 self.autoresizingMask = UIViewAutoresizingFlexibleTopMargin | UIViewAutoresizingFlexibleLeftMargin | UIViewAutoresizingFlexibleRightMargin;  
  219.                 break;  
  220.             case JSBadgeViewAlignmentCenter:  
  221.                 self.autoresizingMask = UIViewAutoresizingFlexibleTopMargin | UIViewAutoresizingFlexibleLeftMargin | UIViewAutoresizingFlexibleRightMargin | UIViewAutoresizingFlexibleBottomMargin;  
  222.                 break;  
  223.             default:  
  224.                 NSAssert(NO@"Unimplemented JSBadgeAligment type %d"self.badgeAlignment);  
  225.         }  
  226.   
  227.         [self setNeedsLayout];  
  228.     }  
  229. }  
  230.   
  231. - (void)setBadgePositionAdjustment:(CGPoint)badgePositionAdjustment  
  232. {  
  233.     _badgePositionAdjustment = badgePositionAdjustment;  
  234.       
  235.     [self setNeedsLayout];  
  236. }  
  237.   
  238. - (void)setBadgeText:(NSString *)badgeText  
  239. {  
  240.     if (badgeText != _badgeText)  
  241.     {  
  242.         _badgeText = [badgeText copy];  
  243.           
  244.         [self setNeedsDisplay];  
  245.     }  
  246. }  
  247.   
  248. - (void)setBadgeTextColor:(UIColor *)badgeTextColor  
  249. {  
  250.     if (badgeTextColor != _badgeTextColor)  
  251.     {  
  252.         _badgeTextColor = badgeTextColor;  
  253.           
  254.         [self setNeedsDisplay];  
  255.     }  
  256. }  
  257.   
  258. - (void)setBadgeTextShadowColor:(UIColor *)badgeTextShadowColor  
  259. {  
  260.     if (badgeTextShadowColor != _badgeTextShadowColor)  
  261.     {  
  262.         _badgeTextShadowColor = badgeTextShadowColor;  
  263.           
  264.         [self setNeedsDisplay];  
  265.     }  
  266. }  
  267.   
  268. - (void)setBadgeTextShadowOffset:(CGSize)badgeTextShadowOffset  
  269. {  
  270.     _badgeTextShadowOffset = badgeTextShadowOffset;  
  271.       
  272.     [self setNeedsDisplay];  
  273. }  
  274.   
  275. - (void)setBadgeTextFont:(UIFont *)badgeTextFont  
  276. {  
  277.     if (badgeTextFont != _badgeTextFont)  
  278.     {  
  279.         _badgeTextFont = badgeTextFont;  
  280.           
  281.         [self setNeedsDisplay];  
  282.     }  
  283. }  
  284.   
  285. - (void)setBadgeBackgroundColor:(UIColor *)badgeBackgroundColor  
  286. {  
  287.     if (badgeBackgroundColor != _badgeBackgroundColor)  
  288.     {  
  289.         _badgeBackgroundColor = badgeBackgroundColor;  
  290.           
  291.         [self setNeedsDisplay];  
  292.     }  
  293. }  
  294.   
  295. -(void)setBadgeStrokeColor:(UIColor *)badgeStrokeColor  
  296. {  
  297.     if (badgeStrokeColor != _badgeStrokeColor)  
  298.     {  
  299.         _badgeStrokeColor = badgeStrokeColor;  
  300.           
  301.         [self setNeedsDisplay];  
  302.     }  
  303. }  
  304.   
  305. #pragma mark - Drawing  
  306.   
  307. - (void)drawRect:(CGRect)rect  
  308. {  
  309.     BOOL anyTextToDraw = (self.badgeText.length > 0);  
  310.       
  311.     if (anyTextToDraw)  
  312.     {  
  313.         CGContextRef ctx = UIGraphicsGetCurrentContext();  
  314.           
  315.         CGRect rectToDraw = CGRectInset(rect, kMarginToDrawInside, kMarginToDrawInside);  
  316.           
  317.         UIBezierPath *borderPath = [UIBezierPath bezierPathWithRoundedRect:rectToDraw byRoundingCorners:(UIRectCorner)UIRectCornerAllCorners cornerRadii:CGSizeMake(kBadgeCornerRadius, kBadgeCornerRadius)];  
  318.           
  319.         /* Background and shadow */  
  320.         CGContextSaveGState(ctx);  
  321.         {  
  322.             CGContextAddPath(ctx, borderPath.CGPath);  
  323.               
  324.             CGContextSetFillColorWithColor(ctx, self.badgeBackgroundColor.CGColor);  
  325.             CGContextSetShadowWithColor(ctx, kShadowOffset, kShadowRadius, kShadowColor.CGColor);  
  326.               
  327.             CGContextDrawPath(ctx, kCGPathFill);  
  328.         }  
  329.         CGContextRestoreGState(ctx);  
  330.           
  331.         BOOL colorForOverlayPresent = self.badgeOverlayColor && ![self.badgeOverlayColor isEqual:[UIColor clearColor]];  
  332.           
  333.         if (colorForOverlayPresent)  
  334.         {  
  335.             /* Gradient overlay */  
  336.             CGContextSaveGState(ctx);  
  337.             {  
  338.                 CGContextAddPath(ctx, borderPath.CGPath);  
  339.                 CGContextClip(ctx);  
  340.                   
  341.                 CGFloat height = rectToDraw.size.height;  
  342.                 CGFloat width = rectToDraw.size.width;  
  343.                   
  344.                 CGRect rectForOverlayCircle = CGRectMake(rectToDraw.origin.x,  
  345.                                                          rectToDraw.origin.y - ceilf(height * 0.5),  
  346.                                                          width,  
  347.                                                          height);  
  348.                   
  349.                 CGContextAddEllipseInRect(ctx, rectForOverlayCircle);  
  350.                 CGContextSetFillColorWithColor(ctx, self.badgeOverlayColor.CGColor);  
  351.                   
  352.                 CGContextDrawPath(ctx, kCGPathFill);  
  353.             }  
  354.             CGContextRestoreGState(ctx);  
  355.         }  
  356.           
  357.         /* Stroke */  
  358.         CGContextSaveGState(ctx);  
  359.         {  
  360.             CGContextAddPath(ctx, borderPath.CGPath);  
  361.               
  362.             CGContextSetLineWidth(ctx, kBadgeStrokeWidth);  
  363.             CGContextSetStrokeColorWithColor(ctx, self.badgeStrokeColor.CGColor);  
  364.               
  365.             CGContextDrawPath(ctx, kCGPathStroke);  
  366.         }  
  367.         CGContextRestoreGState(ctx);  
  368.           
  369.         /* Text */  
  370.         CGContextSaveGState(ctx);  
  371.         {  
  372.             CGContextSetFillColorWithColor(ctx, self.badgeTextColor.CGColor);  
  373.             CGContextSetShadowWithColor(ctx, self.badgeTextShadowOffset1.0self.badgeTextShadowColor.CGColor);  
  374.               
  375.             CGRect textFrame = rectToDraw;  
  376.             CGSize textSize = [self sizeOfTextForCurrentSettings];  
  377.               
  378.             textFrame.size.height = textSize.height;  
  379.             textFrame.origin.y = rectToDraw.origin.y + ceilf((rectToDraw.size.height - textFrame.size.height) / 2.0f);  
  380.               
  381.             [self.badgeText drawInRect:textFrame  
  382.                               withFont:self.badgeTextFont  
  383.                          lineBreakMode:NSLineBreakByCharWrapping  
  384.                              alignment:NSTextAlignmentCenter];  
  385.         }  
  386.         CGContextRestoreGState(ctx);  
  387.     }  
  388. }  
  389.   
  390. @end  


 类似资料: