最近APP大幅度改版更新页面,角标显示的地方比较多,原有的角标显示逻辑混乱,所以参考了以为大神的处理办法对角标进行了如下整理:
右上角角标使用说明
1.首先引入#import"UIView+redPoint.h"
2.使用类型
A.某种控件使用,比如UIImageView、UILabel等等
若此时UIImageView的对象名为txsqImgView,则:
<1>.若角标显示为红点,只需使用下面此行代码
[txsqImgViewshowRedAtOffSetX:0AndOffSetY:0OrValue:nil];
<2>.若角标显示为数字,只需使用下面此行代码
[txsqImgViewshowRedAtOffSetX:0AndOffSetY:0OrValue:nil];
[txsqImgViewshowRedAtOffSetX:0AndOffSetY:0OrValue:@"2"];
<3>.隐藏角标
[txsqImgViewhideRedPoint];
效果如下:
B.若是底部导航栏使用,即UITabBarController
若此时UITabBarController的对象名为self.tabBarController.tabBar,则:
<1>.若角标显示为红点,只需使用下面此行代码
[self.tabBarController.tabBarshowBadgeOnItemIndex:1];
<2>.隐藏角标
[self.tabBarController.tabBarhideBadgeOnItemIndex:1];
<3>.若角标显示数字,则使用系统的badgeValue赋值即可
效果如下:
代码如下:
1.UIView+redPoint.h
#import
@interface UIView (redPoint)
- (void)showRedAtOffSetX:(float)offsetX AndOffSetY:(float)offsetY OrValue:(NSString *)value;
- (void)hideRedPoint;
//tabbar方法
- (void)showBadgeOnItemIndex:(int)index; //显示小红点
- (void)hideBadgeOnItemIndex:(int)index; //隐藏小红点
@end
2.UIView+redPoint.m
#import
#import "UIView+redPoint.h"
#define USERDEF [NSUserDefaults standardUserDefaults]
@implementation UIView (redPoint)
#pragma other(redPoint)
//添加显示
- (void)showRedAtOffSetX:(float)offsetX AndOffSetY:(float)offsetY OrValue:(NSString *)value{
[self removeRedPoint];//添加之前先移除,避免重复添加
//新建小红点
UIView *badgeView = [[UIView alloc]init];
badgeView.tag = 998;
CGFloat viewWidth = 12;
if (value) {
viewWidth = 18;
UILabel *valueLbl = [[UILabel alloc]initWithFrame:CGRectMake(0, 0, viewWidth, viewWidth)];
valueLbl.text = value;
valueLbl.font = [UIFont systemFontOfSize:12];
valueLbl.textColor = [UIColor whiteColor];
valueLbl.textAlignment = NSTextAlignmentCenter;
valueLbl.clipsToBounds = YES;
[badgeView addSubview:valueLbl];
}
badgeView.layer.cornerRadius = viewWidth / 2;
badgeView.backgroundColor = [UIColor redColor];
CGRect tabFrame = self.frame;
//确定小红点的位置
if (offsetX == 0) {
// offsetX = 1;
offsetX = -viewWidth/2.0;
}
if (offsetY == 0) {
// offsetY = 0.05;
offsetY = -viewWidth/2.0;
}
CGFloat x = ceilf(tabFrame.size.width + offsetX);
CGFloat y = 0;
if (offsetY == -viewWidth/2.0) {
y = ceilf(offsetY);
}else{
y = ceilf(offsetY * tabFrame.size.height);
}
badgeView.frame = CGRectMake(x, y, viewWidth, viewWidth);
[self addSubview:badgeView];
}
//隐藏
- (void)hideRedPoint{
[self removeRedPoint];
}
//移除
- (void)removeRedPoint{
//按照tag值进行移除
for (UIView *subView in self.subviews) {
if (subView.tag == 998) {
[subView removeFromSuperview];
}
}
}
#pragma mark Tabbar(redPoint)
//显示小红点
- (void)showBadgeOnItemIndex:(int)index{
NSString *keyStr = [NSString stringWithFormat:@"%d_HADSET",index];
if ([USERDEF objectForKey:keyStr]) {
return;
} else {
[USERDEF setObject:@"HADSET" forKey:keyStr];
}
//移除之前可能存在的小红点
[self removeBadgeOnItemIndex:index];
//新建小红点
UIView *badgeView = [[UIView alloc]init];
badgeView.tag = 888 + index;
badgeView.layer.cornerRadius = 6;
badgeView.backgroundColor = [UIColor redColor];
CGRect tabFrame = self.frame;
//确定小红点的位置
float percentX = (index +0.55) / 5; //5为tabbaritem的总个数
CGFloat x = ceilf(percentX * tabFrame.size.width);
CGFloat y = ceilf(0.05 * tabFrame.size.height);
badgeView.frame = CGRectMake(x, y, 12, 12);
[self addSubview:badgeView];
}
//隐藏小红点
- (void)hideBadgeOnItemIndex:(int)index{
NSString *keyStr = [NSString stringWithFormat:@"%d_HADSET",index];
//移除小红点
[self removeBadgeOnItemIndex:index];
if ([USERDEF objectForKey:keyStr]) {
[USERDEF removeObjectForKey:keyStr];
}
}
//移除
- (void)removeBadgeOnItemIndex:(int)index{
//按照tag值进行移除
for (UIView *subView in self.subviews) {
if (subView.tag == 888+index) {
[subView removeFromSuperview];
}
}
}
@end