web-dev-qa-db-ja.com

アイテムが選択されているときにTabItemの背景色を変更するにはどうすればよいですか

ユーザーがタブバー項目を選択したときと選択していないときの背景色を変えたいのですが。

iosobjective-cuitabbarcontrolleruitabbar
21
user2290869

これをAppdelegate.m in application didFinishLaunchingWithOptions

UIImage *whiteBackground = [UIImage imageNamed:@"whiteBackground"];
[[UITabBar appearance] setSelectionIndicatorImage:whiteBackground];
23
user1898829

ストーリーボードまたはxibsを使用する場合は、「タブバー」をクリックして、「selectedImageTintColor」パスをキーパス属性タグに追加します。このような ：

enter image description here

11
serdaryillar

更新：iOS 7.1以降、この手法は機能しません（ユーザーが同じタブを2回続けてタップすると、背景色がクリアされます）

UITabBarItemはUIBarItemのサブクラスです。UIBarItemはUIViewをサブクラス化しないため、すべてがより困難になります。ただし、UITabBarItemには1つが含まれます。以下はそのビューを操作するため、AppStoreに送信されると拒否される可能性があります。

1）サブクラスUITabBarItem

次のように、UITabBarItemのサブクラスを作成し、新しいselectedプロパティをヘッダーに追加します。

@interface ALDTabBarItem : UITabBarItem
@property (nonatomic, assign, getter = isSelected) BOOL selected;
@end

UITabBarItemsにはビュープロパティがありますが、公開されていません。クラスに拡張してアクセスし、selectedプロパティにカスタムセッターを作成して、背景色を次のように変更できます。

#import "ALDTabBarItem.h"

@interface ALDTabBarItem (ALD)
@property (nonatomic, strong) UIView *view;
@end

@implementation ALDTabBarItem

- (void)setSelected:(BOOL)selected
{
    if(selected)
        self.view.backgroundColor = [UIColor redColor];
    else
        self.view.backgroundColor = [UIColor clearColor];
} 

@end

2）UITabBarControllerデリゲートを更新します

次のコードをUITabBarControllerのデリゲートに追加して、UITabBarの選択された状態を設定します。

- (void)tabBar:(UITabBar *)tabBar didSelectItem:(UITabBarItem *)item
{
    for(ALDTabBarItem *myItem in tabBar.items)
        myItem.selected = (myItem == item);
}
7
Andy

スウィフトで

UITabBar.appearance().selectionIndicatorImage = UIImage(named: "tabSelected")

画像あり[email protected]サイズ98x98ピクセル

7
abinop

この手順に従ってください：

  1. UITabBarControllerのサブクラスを作成

  2. viewDidAppearサブクラスのUITabBarControllerに移動

  3. 次に、TabBarItemのサイズを見つけます。

    UITabBar *tabBar = self.tabBar;
CGSize imgSize = CGSizeMake(tabBar.frame.size.width/tabBar.items.count,tabBar.frame.size.height);

  4. 次に、そのサイズの画像を作成します。

    //Create Image
UIGraphicsBeginImageContextWithOptions(imgSize, NO, 0);
UIBezierPath* p =
[UIBezierPath bezierPathWithRect:CGRectMake(0,0,imgSize.width,imgSize.height)];
[[UIColor blueColor] setFill];
[p fill];
UIImage* finalImg = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();

  5. 次に、この画像をTabBarのSelectionIndicatorImageに割り当てます。

    [tabBar setSelectionIndicatorImage:finalImg];

Swift 4バージョン：

let imgSize = CGSize(width: tabBar.frame.size.width / CGFloat(tabBar.items!.count),
                     height: tabBar.frame.size.height)
UIGraphicsBeginImageContextWithOptions(imgSize, false, 0)
let p = UIBezierPath(rect: CGRect(x: 0, y: 0, width: imgSize.width,
                                  height: imgSize.height))
UIColor.blue.setFill()
p.fill()
let finalImg = UIGraphicsGetImageFromCurrentImageContext()
UIGraphicsEndImageContext()
UITabBar.appearance().selectionIndicatorImage = finalImg
4
Mehul Thakkar

私の答えは@ Mehul Thakkarに似ていますが、それはSwift 4にあり、彼の答えを改善するために、コードをviewDidAppearに配置すると、彼はユーザーに変更が行われるのを目にするだろうと示唆しているため、ユーザーエクスペリエンスは良好ではありません。

したがって、タブバーコントローラーのカスタムクラスを作成し、viewDidLoadに次のコードを配置します。

let singleTabWidth: CGFloat = self.tabBar.frame.size.width / CGFloat((self.tabBar.items?.count)!)
let singleTabSize = CGSize(width:singleTabWidth , height: self.tabBar.frame.size.height)

let selectedTabBackgroundImage: UIImage = self.imageWithColor(color: .white, size: singleTabSize)
self.tabBar.selectionIndicatorImage = selectedTabBackgroundImage

imageWithColor関数は以下のとおりです。

//image with color and size
    func imageWithColor(color: UIColor, size: CGSize) -> UIImage {
        let rect = CGRect(x: 0, y: 0, width: size.width, height: size.height)
        UIGraphicsBeginImageContext(rect.size)
        let context = UIGraphicsGetCurrentContext()

        context!.setFillColor(color.cgColor)
        context!.fill(rect)

        let image = UIGraphicsGetImageFromCurrentImageContext()
        UIGraphicsEndImageContext()

        return image!
    }

これが誰かを助けることを願っています。

3
stan

以下のURLをご参照ください。

色合いの変更/ UITabBarの背景色

Xcodeでタブバーの色を変更する方法

これがお役に立てば幸いです。

タブバーアイテムの色を変更するには、これを試してください。ただし、iOS 5でのみ機能します。

if ([UITabBar instancesRespondToSelector:@selector(setSelectedImageTintColor:)])
{
    [tabBarController.tabBar setSelectedImageTintColor:[UIColor redColor]];
}
1
Ayaz

現在Xcode 8.3.2では、実際の背景を表す画像を使用してストーリーボード内で行うことができます。

タブバーコントローラー内のタブバーを選択します。

enter image description here

ユーティリティ内で属性インスペクターを選択し、選択背景画像を変更します。

enter image description here

0
OhadM

Tintcolorを使用できます。

[[UITabBar appearance] setSelectedImageTintColor:[UIColor redColor]];

AppDelegate.mで、次のコードを//アプリケーションの起動後にカスタマイズするための//オーバーライドポイントの後に配置します。

0
Baby Groot

Swift 4で回答：

setSelectedImageTintColorはiOS 8では非推奨です

代わりにこれを使用してください：

self.tabBar.tintColor = UIColor.white

0
Kishore Kumar

これをAppDelegate.mファイルに入れます。

 - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
            // Override point for customization after application launch.

            [UITabBar appearance].selectionIndicatorImage = [UIImage imageNamed:@"activeTabBackgroundImage"];


            return YES;
        }
0
Boris Nikolic