web-dev-qa-db-ja.com

UIBarbuttonitemにバッジを追加する方法は？

こんにちは友人は、iPhone開発の初心者です。右側のUIBarbuttonitemにバッジ値を追加するのに苦労しています。試しましたが、この問題を解決できません。誰も私を助けることができます。

前もって感謝します！

iosuinavigationbaruibarbuttonitembadge
33
Yuvaraj.M

最後に、UIBarbuttonアイテムにバッジを追加する方法を見つけました。たくさん検索しましたが、正しい答えが見つかりませんでした。だから私はUIButtonを作成し、rightbarbuttonアイテムのカスタムビューとして追加します。追加 MKNumberBadgeView を追加して、バッジ番号を表示します。以下にコードを追加します。

// Initialize NKNumberBadgeView...
MKNumberBadgeView *number = [[MKNumberBadgeView alloc] initWithFrame:CGRectMake(60, 00, 30,20)];
number.value = 10;

// Allocate UIButton
UIButton *btn = [UIButton  buttonWithType:UIButtonTypeCustom];
    btn.frame = CGRectMake(0, 0, 70, 30);
    btn.layer.cornerRadius = 8;
    [btn setTitle:@"Button" forState:UIControlStateNormal];
    [btn addTarget:self action:nil forControlEvents:UIControlEventTouchUpInside];
    //[btn setBackgroundColor:[UIColor blueColor]];
    [btn setBackgroundColor:[UIColor colorWithRed:0.0 green:0.0 blue:0.1 alpha:0.2]];
    btn.font = [UIFont systemFontOfSize:13];
    //[btn setFont:[UIFont systemFontOfSize:13]];
    [btn addSubview:number]; //Add NKNumberBadgeView as a subview on UIButton

// Initialize UIBarbuttonitem...
UIBarButtonItem *proe = [[UIBarButtonItem alloc] initWithCustomView:btn];
self.navigationItem.leftBarButtonItem = proe;

ありがとう。

29
Yuvaraj.M

私はこの投稿がかなり古いことを知っていますが、iOS7では、MKNumberBadgeViewの外観はタブバーアイテムのバッジデザインと実際には一致しません。私はUIBarButtonItemを継承し、非常にうまく仕事をするこの他のコンポーネントを見つけました：

https://github.com/TanguyAladenise/BBBadgeBarButtonItem

これが私のような他のiOS7開発者に役立つことを願っています

30
phyzalis

phyzalisには良い答えがあります、彼のソリューションの分類されたバージョンがここにあります：

IBarButtonItem + Badge

使用方法は次のとおりです。

// Build your regular UIBarButtonItem with Custom View
UIImage *image = [UIImage imageNamed:@"someImage"];
UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
button.frame = CGRectMake(0,0,image.size.width, image.size.height);
[button addTarget:self action:@selector(buttonPress:) forControlEvents:UIControlEventTouchDown];
[button setBackgroundImage:image forState:UIControlStateNormal];

// Make BarButton Item
UIBarButtonItem *navLeftButton = [[UIBarButtonItem alloc] initWithCustomView:button];
self.navigationItem.leftBarButtonItem = navLeftButton;

// this is the key entry to change the badgeValue
self.navigationItem.leftBarButtonItem.badgeValue = @"1";
19
Mike

MaxMaと似たようなことをしましたが、先に進んでバッジをself.navigationController.navigationBarに直接追加しました。

enter image description here

MKNumberBadgeView *numberBadge = [[MKNumberBadgeView alloc] initWithFrame:CGRectMake(35, 0, 40, 40)];
numberBadge.value = 1;

[self.navigationController.navigationBar addSubview:numberBadge];

ViewWillDisappear中にサブビューから削除し、viewDidAppear中に追加し直してください。まだ少しハッキーに思えますが、このハックよりもnav barのzオーダーを変更する方が安心です。

ViewWillDisappear中に削除するには

- (void)viewWillDisappear:(BOOL)animated
{
    [super viewWillDisappear:animated];
    [numberBadge removeFromSuperview]; 
}
12
Tod Cunningham

シンプルで最高の方法です！

enter image description here

MKNumberBadgeView *numberBadge = [[MKNumberBadgeView alloc] initWithFrame:CGRectMake(230, -51, 40, 40)];
numberBadge.value = 5;

self.navigationController.navigationBar.layer.zPosition = -1;
[self.view addSubview:numberBadge];
7
MaxMa

Swift 3：

以下の簡単なコードを使用して、UIBarButtonItemにバッジを追加します。

// Variable Declartion

var badgeCount = Int()

// Instance Method

    func setUpBadgeCountAndBarButton() {
        // badge label
        let label = UILabel(frame: CGRect(x: 10, y: -05, width: 25, height: 25))
        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.textColor = .white
        label.font = label.font.withSize(12)
        label.backgroundColor = .red
        label.text = "\(self.badgeCount)"

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

        // Bar button item
        let rightBarButtomItem = UIBarButtonItem(customView: rightButton)
        navigationItem.rightBarButtonItem = rightBarButtomItem
    }

// Call To Method

self.badgeCount = 11
self.setUpBadgeCountAndBarButton()

//注：通知を受け取ったらバッジを増やします。決定したロジック、つまりデータベースでそのバッジカウント数を維持する方法に従ってコードを記述する必要があります。

お楽しみください。

2
Kiran jadhav

私はこれがすでに解決されていることを知っていますが、完全性のためにこの答えに発見したものを追加するかもしれないと思いました。

MKNumberBadgeViewのビューにUIBarButtonItemを直接追加することもできます。 Monotouch（C＃）を使用して、UIBarButtonItemのビューを取得します。

        //barbutton is some UIBarButtonItem. Make sure to check for view. In
        //ViewDidLoad(), the view for the barbutton might not exist yet.
        Selector sel = new Selector("view");
        var handle = Messaging.intptr_objc_msgSend(barbutton.Handle, sel.Handle);
        var view = Runtime.GetNSObject(handle) as UIView;
        var mkBadge = ...    //the badge
        view.Add(badge);
        view.Layer.ZPosition = <some large number>

これをObj-Cに変換するのは簡単だと確信しています。また、バッジを適切な場所に表示するには、フレームのフレームをいじる必要があります。

この方法では、ナビゲーションバーからビューを削除/追加する必要はありません。

0
ceiling cat

以下に簡単なSwift 4のソリューション（カスタマイズあり） https://github.com/Syngmaster/BadgedBarButtonItem

クラスをプロジェクトにドラッグアンドドロップするだけで、次のように使用できます。

class ViewController: UIViewController {

    let btn = BadgedButtonItem(with: UIImage(named: "your_image"))

    override func viewDidLoad() {
        super.viewDidLoad()

        btn.badgeTextColor = .black
        btn.badgeTintColor = .yellow
        btn.position = .right
        btn.hasBorder = true
        btn.borderColor = .red
        btn.badgeSize = .medium
        btn.badgeAnimation = true

        self.navigationItem.rightBarButtonItem = btn

        btn.tapAction = {
            self.btn.setBadge(with: 4)
        }

    }

}
0
Syngmaster

あまりにも多くのソリューションを検索した後、Objective-Cに最適なソリューションを見つけました

次のリンクに移動し、2つのファイルをダウンロードします "UIBarButtonItem + Badge.h"および "UIBarButtonItem + Badge.m"そしてプロジェクトに追加します：

https://github.com/mikeMTOL/UIBarButtonItem-Badge

次に、クラスにインポートします。

#import "UIBarButtonItem+Badge.h"

そして、次の行を書き留めてバッジを追加します。

self.navigationItem.rightBarButtonItem.badgeValue = @"1"; //your value

それがうまくいくことを願っています!!!

0
Mandar Choudhary

UIBarButtonItemを置き換えずにUIActivityIndi​​catorViewを追加するための拡張機能。

拡張UIBarButtonItem {

func startLoading() {
    guard let view = self.value(forKey: "view") as? UIView else { return }
    let loading = UIActivityIndicatorView(activityIndicatorStyle: .gray)
    loading.frame = view.bounds
    loading.startAnimating()
    view.addSubview(loading)
    view.bringSubview(toFront: loading)
    let buttonView = view.subviews.first
    buttonView?.alpha = 0.1
}

func stopLoading() {
    guard let view = self.value(forKey: "view") as? UIView else { return }
    let loading = view.subviews.filter({ $0 is UIActivityIndicatorView }).first
    loading?.removeFromSuperview()
    let buttonView = view.subviews.first
    buttonView?.alpha = 1.0
}

}

0
Allan Alves