30

UITabBarItem バッジの背景色を変更したいのですが、作成方法に関するリソースが見つかりません。

ここに画像の説明を入力してください

4

15 に答える 15

17

badgeColorバッジの色の変更は、iOS 10 以降で、内の プロパティを使用してネイティブにサポートされるようになりましたUITabBarItem。プロパティの詳細については、 Apple ドキュメントを参照してください。

例：

  • スウィフト 3:myTab.badgeColor = UIColor.blue
  • 目的 C:[myTab setBadgeColor:[UIColor blueColor]];
于 2016-08-29T22:39:49.733 に答える
12

アプリ用にこのコードを書きましたが、iOS 7 でしかテストしていません。

for (UIView* tabBarButton in self.tabBar.subviews) {
    for (UIView* badgeView in tabBarButton.subviews) {
        NSString* className = NSStringFromClass([badgeView class]);

        // looking for _UIBadgeView
        if ([className rangeOfString:@"BadgeView"].location != NSNotFound) {
            for (UIView* badgeSubview in badgeView.subviews) {
                NSString* className = NSStringFromClass([badgeSubview class]);

                // looking for _UIBadgeBackground
                if ([className rangeOfString:@"BadgeBackground"].location != NSNotFound) {
                    @try {
                        [badgeSubview setValue:[UIImage imageNamed:@"YourCustomImage.png"] forKey:@"image"];
                    }
                    @catch (NSException *exception) {}
                }

                if ([badgeSubview isKindOfClass:[UILabel class]]) {
                    ((UILabel *)badgeSubview).textColor = [UIColor greenColor];
                }
            }
        }
    }
}

バッジの背景は、色ではなく画像でのみ更新できます。何らかの方法で更新したい場合は、バッジ ラベルも公開しました。

tabBarItem.badgeValue!を設定した後にこのコードを呼び出す必要があることに注意することが重要です。

編集: 4/14/14

上記のコードは、どこからでも呼び出されたときに iOS 7 で機能します。iOS 7.1 で動作させるには、ビュー コントローラーで呼び出します-viewWillLayoutSubviews。

編集：12/22/14

これは、私が現在使用している更新されたスニペットです。簡単にするために、コードをカテゴリ拡張に入れました。

- (void)badgeViews:(void (^)(UIView* badgeView, UILabel* badgeLabel, UIView* badgeBackground))block {
    if (block) {
        for (UIView* tabBarButton in self.subviews) {
            for (UIView* badgeView in tabBarButton.subviews) {
                NSString* className = NSStringFromClass([badgeView class]);

                if ([className rangeOfString:@"BadgeView"].location != NSNotFound) {
                    UILabel* badgeLabel;
                    UIView* badgeBackground;

                    for (UIView* badgeSubview in badgeView.subviews) {
                        NSString* className = NSStringFromClass([badgeSubview class]);

                        if ([badgeSubview isKindOfClass:[UILabel class]]) {
                            badgeLabel = (UILabel *)badgeSubview;

                        } else if ([className rangeOfString:@"BadgeBackground"].location != NSNotFound) {
                            badgeBackground = badgeSubview;
                        }
                    }

                    block(badgeView, badgeLabel, badgeBackground);
                }
            }
        }
    }
}

呼び出す準備ができたら、次のようになります。

[self.tabBar badgeViews:^(UIView *badgeView, UILabel *badgeLabel, UIView *badgeBackground) {

}];

編集：11/16/15

このコードで何が起こっているのかをもう少し明確にする必要がある人がいることを知りました。for ループは、パブリックにアクセスできないいくつかのビューを検索しています。ビューのクラス名に予想される名前の一部が含まれているかどうかを確認することで、Apple による危険信号を発することなく、目的のビューに確実に到達できます。すべてが配置されると、ブロックが実行され、これらのビューに簡単にアクセスできます。

このコードが将来の iOS アップデートで機能しなくなる可能性があることは注目に値します。たとえば、これらの内部ビューは、ある日、異なるクラス名を取得する可能性があります。ただし、Apple 内部でさえクラスをこの性質にリファクタリングすることはめったにないため、その可能性はほとんどありません。しかし、仮にそうしたとしても、それは のタイトルに沿ったものでありUITabBarBadgeView、コードの期待されるポイントにまだ到達するでしょう. iOS9 は完成したばかりで、このコードはまだ意図したとおりに機能しているため、この問題が発生することはないと予想できます。

于 2014-04-03T09:41:29.537 に答える
10

私は同じ問題を抱えており、BadgeView を簡単にカスタマイズできる UILabel に置き換える小さなカテゴリを作成することで解決しました。

https://github.com/enryold/UITabBarItem-CustomBadge/

于 2014-05-18T16:18:42.143 に答える
10

Swift を使用している人々のために、バッジ ビューを任意の画面サイズと方向で動作させるために、TimWhiting の回答を改善することができました。

 extension UITabBarController {

    func setBadges(badgeValues: [Int]) {

        for view in self.tabBar.subviews {
            if view is CustomTabBadge {
                view.removeFromSuperview()
            }
        }

        for index in 0...badgeValues.count-1 {
            if badgeValues[index] != 0 {
                addBadge(index, value: badgeValues[index], color:UIColor(paletteItem: .Accent), font: UIFont(name: Constants.ThemeApp.regularFontName, size: 11)!)
            }
        }
    }

    func addBadge(index: Int, value: Int, color: UIColor, font: UIFont) {
        let badgeView = CustomTabBadge()

        badgeView.clipsToBounds = true
        badgeView.textColor = UIColor.whiteColor()
        badgeView.textAlignment = .Center
        badgeView.font = font
        badgeView.text = String(value)
        badgeView.backgroundColor = color
        badgeView.tag = index
        tabBar.addSubview(badgeView)

        self.positionBadges()
    }

    override public func viewDidLayoutSubviews() {
        super.viewDidLayoutSubviews()
        self.positionBadges()
    }

    // Positioning
    func positionBadges() {

        var tabbarButtons = self.tabBar.subviews.filter { (view: UIView) -> Bool in
            return view.userInteractionEnabled // only UITabBarButton are userInteractionEnabled
        }

        tabbarButtons = tabbarButtons.sort({ $0.frame.origin.x < $1.frame.origin.x })

        for view in self.tabBar.subviews {
            if view is CustomTabBadge {
                let badgeView = view as! CustomTabBadge
                self.positionBadge(badgeView, items:tabbarButtons, index: badgeView.tag)
            }
        }
    }

    func positionBadge(badgeView: UIView, items: [UIView], index: Int) {

        let itemView = items[index]
        let center = itemView.center

        let xOffset: CGFloat = 12
        let yOffset: CGFloat = -14
        badgeView.frame.size = CGSizeMake(17, 17)
        badgeView.center = CGPointMake(center.x + xOffset, center.y + yOffset)
        badgeView.layer.cornerRadius = badgeView.bounds.width/2
        tabBar.bringSubviewToFront(badgeView)
    }
}

class CustomTabBadge: UILabel {}
于 2016-03-07T14:18:44.403 に答える
4

いいえ。値のみを設定できます。Apple のドキュメント バッジから:

項目の右上隅に表示されるテキストで、周囲を赤い楕円で囲んでいます。

于 2012-11-12T10:10:31.693 に答える
1

タブバー項目を選択して属性インスペクタに移動することで、ストーリーボードでも実行できるようになりました。

ここに画像の説明を入力

于 2019-07-17T11:27:50.347 に答える
0 
// change TabBar BadgeView background Color
-(void)changeTabBarBadgeViewBgColor:(UITabBar*)tabBar {
    for (UIView* tabBarButton in tabBar.subviews) {
        for (UIView* badgeView in tabBarButton.subviews) {
            NSString* className = NSStringFromClass([badgeView class]);

            // looking for _UIBadgeView
            if ([className rangeOfString:@"BadgeView"].location != NSNotFound) {
                for (UIView* badgeSubview in badgeView.subviews) {
                    NSString* className = NSStringFromClass([badgeSubview class]);

                    // looking for _UIBadgeBackground
                    if ([className rangeOfString:@"BadgeBackground"].location != NSNotFound) {
                        @try {
                            [badgeSubview setValue:nil forKey:@"image"];
                            [badgeSubview setBackgroundColor:[UIColor blueColor]];
                            badgeSubview.clipsToBounds = YES;
                            badgeSubview.layer.cornerRadius = badgeSubview.frame.size.height/2;
                        }
                        @catch (NSException *exception) {}
                    }

                    if ([badgeSubview isKindOfClass:[UILabel class]]) {
                        ((UILabel *)badgeSubview).textColor = [UIColor greenColor];
                    }
                }
            }
        }
    }
}

ここに画像の説明を入力

于 2016-09-08T13:21:28.350 に答える
0

はい。ただし、可能な唯一の解決策は、カスタム タブバーを作成し、カスタム タブバー バッジ アイコンを作成することです。カスタム タブバーを作成するための多くの記事/コードが見つかります。

于 2012-11-12T10:14:00.997 に答える
0

うーん...とても簡単です。[[self tabBarItem] setBadgeColor:[UIColor greenColor]];

于 2020-11-22T18:48:57.947 に答える
-2

ここ @ UITabbarItem-CustomBadgeを見てください。

完全なデモンストレーションは次のとおりです

デモンストレーション

デフォルトの実装を使用する場合は、わずか 2 行のコードで済みます。

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {

  //supplying the animation parameter
  [UITabBarItem setDefaultAnimationProvider:[[DefaultTabbarBadgeAnimation alloc] init]];
  [UITabBarItem setDefaultConfigurationProvider:[[DefaultSystemLikeBadgeConfiguration alloc] init]];

  //rest of your code goes following...

  return YES;
}
于 2016-11-22T15:14:36.853 に答える