web-dev-qa-db-ja.com

カスタマイズされたUIBarButtonItemにバッジを配置する方法

2つのボタンのあるナビゲーションバーがあります。1つは戻るボタンで、もう1つはチャットシンボルです。

私はこのようにこのコードを書きます：

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];

私が抱えている問題は、チャットで見たことのない新しいメッセージがあるときはいつでも、ある種のバッジや、チャットボタンの上にカスタマイズされたラベルのように、新しいメッセージの数を示す必要があることです。

どうすればよいですか？

iosobjective-cxcodeuibarbuttonitemnavigationbar
15
niper007

Swift 3.0の場合：

結果：

enter image description here

コード：

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")
}
32
Wilson

iOS 8-バッジ値を変更することでそれを行うことができました

            self.messageButton.badgeValue = @"5";

メッセージボタンはUIBarButtonです。

これら2つのファイルをxcode UIBarButtonItem + Badge.h UIBarButtonItem + Badge.mに含める必要があります。

ここで見つけることができます

ファイルへのGithubリンク

9
Ronaldoh1

あなたはこのコードを試すことができます：-

  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;
3
Kuldeep Choudhary

カスタムメソッドを試す

  1. https://github.com/TanguyAladenise/BBBadgeBarButtonItem

  2. http://yuvarajmanickam.wordpress.com/2012/02/01/add-badges-on-uibarbuttonitem-in-iphone-app/

  3. IBarbuttonアイテムにバッジを追加するには？

  4. https://www.cocoacontrols.com/controls/mknumberbadgeview

2
Anbu.Karthik

良い一日！これが私のバージョンです-簡単で問題はありません：

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
Pavel

このカテゴリを試すことができます

IBarButtonItem-Badge

1
jos

これをカスタマイズしてみてください control-mknumberbadgeview

0
Muruganandham K