如何在自定义的UIBarButtonItem上放置徽章

18

我有一个导航栏,里面有两个按钮,一个是返回按钮,另一个是聊天符号。

我的代码如下:

UIBarButtonItem *_btn=[[UIBarButtonItem alloc]initWithImage:[UIImage imageNamed:@"back.png"]
                                                      style:UIBarButtonItemStylePlain
                                                     target:self
                                                     action:@selector(goBackToPreviousView)];

self.navigationItem.leftBarButtonItem=_btn;
self.navigationItem.leftBarButtonItem.tintColor = [UIColor blackColor];


UIBarButtonItem *_btn2=[[UIBarButtonItem alloc]initWithImage:[UIImage imageNamed:@"chat.png"]
                                                      style:UIBarButtonItemStylePlain
                                                     target:self
                                                     action:@selector(startChat)];

self.navigationItem.rightBarButtonItem=_btn2;
self.navigationItem.rightBarButtonItem.tintColor = [Utility colorWithHexValue:CyanBlue];

我的问题是,每当聊天中有新的消息时,我没有看到它们,就应该在聊天按钮上面放置一种标记,或者自定义一个标签,以指示您有多少条新消息。

我该怎么做呢?


展示你在实现一个方面所做的努力。 - Mick MacCallum
在你的 viewDidLoad 方法中写一些代码来检查是否有未读消息。如果返回 true,则更改按钮的图像,否则保持原样。 - Dhrumil
我有一段代码可以告诉我我没有看到的聊天消息数量。问题是图像必须包含该数字。这意味着我必须插入很多图像。 - niper007
我尝试使用以下代码将数字写在按钮上: self.navigationItem.rightBarButtonItem.title = @"2"; 但似乎没有起作用。 - niper007
嘿,@niper007,如何解决这个问题。 - Chirag Kothiya
7个回答

37

对于 Swift 3.0

结果:

在此输入图片描述

代码:

override func viewDidLoad() {
  super.viewDidLoad()

  // badge label
  let label = UILabel(frame: CGRect(x: 10, y: -10, width: 20, height: 20))
  label.layer.borderColor = UIColor.clear.cgColor
  label.layer.borderWidth = 2
  label.layer.cornerRadius = label.bounds.size.height / 2
  label.textAlignment = .center
  label.layer.masksToBounds = true
  label.font = UIFont(name: "SanFranciscoText-Light", size: 13)
  label.textColor = .white
  label.backgroundColor = .red
  label.text = "80"

  // button
  let rightButton = UIButton(frame: CGRect(x: 0, y: 0, width: 18, height: 16))
  rightButton.setBackgroundImage(UIImage(named: "inbox"), for: .normal)
  rightButton.addTarget(self, action: #selector(rightButtonTouched), for: .touchUpInside)
  rightButton.addSubview(label)

  // Bar button item
  let rightBarButtomItem = UIBarButtonItem(customView: rightButton)

  navigationItem.rightBarButtonItem = rightBarButtomItem
}

func rightButtonTouched() {
  print("right button touched")
}

1
完成这个操作后,我的按钮图像的色调颜色没有被正确应用。我需要在图像本身上设置色调颜色,并将渲染模式设置为始终模板。 - stepheaw

11

在iOS 8中 - 我可以通过更改badgeValue来实现它

            self.messageButton.badgeValue = @"5";

当信息按钮是UIBarButton时,

您需要将这两个文件包含到您的xcode中:

UIBarButtonItem+Badge.h UIBarButtonItem+Badge.m

可以在此处找到:

文件的Github链接


UIBarButtonItem+Badge.h UIBarButtonItem+Badge.m - TheRealRonDez
以上链接提供了一个很好的类别来做这件事。给了我我所需要的东西。 - Carl Hine
还想补充一点,如果在viewDidLoad方法中使用,这个类别可能会无效。- (void)viewDidAppear:(BOOL)animated {} 方法是您配置和设置标记调用的地方。我怀疑UIBarButtons在viewDidAppear之前还没有完全准备好。 - Carl Hine

6
您可以尝试这段代码:-
  UILabel *badgeLbl = [[UILabel alloc]initWithFrame:CGRectMake(16, -2, 18, 18)];
badgeLbl.backgroundColor = [UIColor whiteColor];
badgeLbl.textColor = [UIColor blackColor];
badgeLbl.textAlignment = NSTextAlignmentCenter;
badgeLbl.layer.cornerRadius = 9.0;
badgeLbl.layer.masksToBounds = true;
badgeLbl.text = @"10";

UIButton *notificationBtn = [[UIButton alloc]initWithFrame:CGRectMake(0, 0, 35, 35)];
[notificationBtn setBackgroundImage:[UIImage imageNamed:@"image_name"] forState:UIControlStateNormal];
[notificationBtn setTitle:@"" forState:UIControlStateNormal];
[notificationBtn addTarget:self action:@selector(onClickAction:) forControlEvents:UIControlEventTouchUpInside];

[notificationBtn addSubview:badgeLbl];

UIBarButtonItem *notificationBarBtn = [[UIBarButtonItem alloc]initWithCustomView:notificationBtn];
self.navigationItem.rightBarButtonItem = notificationBarBtn;

这是我更喜欢的(+1)。它可以在iOS11.4上运行。它有一个问题,但很容易解决。icon图像应该被初始化为[[UIImage imageNamed:@"image_name"] imageWithRenderingMode:UIImageRenderingModeAlwaysTemplate],以便图标继承与任何其他显示的图标相同或默认的UI颜色色调。 - Seoras

3

你好!这是我的版本-简单而没有任何问题:

navBar = [[UINavigationBar alloc] initWithFrame: CGRectMake(0, 0, self.view.frame.size.width, 64)];
[self.view addSubview:navBar];

navItem    = [[UINavigationItem alloc] initWithTitle:NSLocalizedString(@"Meetings", nil)];

[navBar pushNavigationItem:navItem animated:NO];
    UIButton *chat = [UIButton buttonWithType: UIButtonTypeRoundedRect];
[chat setTitle:@"Chat" forState: UIControlStateNormal];
    UILabel *badge  = [[UILabel alloc] initWithFrame: CGRectMake(0, 0, 20, 20)];
badge.textColor = [UIColor darkGrayColor];
badge.font      = [UIFont fontWithName: fontName size: 15];
badge.text      = @"10";
badge.textAlignment = NSTextAlignmentCenter;

badge.layer.cornerRadius = 10.0f;
badge.layer.backgroundColor = [UIColor yellowColor].CGColor;
badge.clipsToBounds      = YES;

badge.center = CGPointMake(50, 20);

[chat addSubview: badge];

navItem.rightBarButtonItem = [[UIBarButtonItem alloc] initWithCustomView: chat];

祝您拥有愉快的一天!


2

@niper007,iTroyd23 的答案也可以。 - Anbu.Karthik
我想点赞,但是我不能因为我在stackoverflow上太新了。我需要更多的声望。 - niper007
BBBadgeBarButtonItem提供了太多的属性来自定义。 - Mehul Chuahan

1

0

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接