web-dev-qa-db-ja.com

画像とタイトルのiOS7 UIBarButtonItem

私はどうすればこのようなことを達成できるかを理解しようとしています：

enter image description here

これはツールバーです。アイコンとテキストで画像全体を作成せずに、ボタンのタイトルテキストを保持したいと思います。テキストを次のように設定したまま、UIBarButtonItemの左側にアイコンを追加するにはどうすればよいですか。

UIBarButtonItem *customBarButtonItem = [[UIBarButtonItem alloc] initWithTitle:@"Button" style:UIBarButtonItemStyleBordered target:nil action:nil];

[〜＃〜]編集[〜＃〜]

これは私が次のコードで達成したことです：

    UIButton *customButton = [UIButton buttonWithType:UIButtonTypeCustom];
    [customButton setImage:[UIImage imageNamed:@"Test"] forState:UIControlStateNormal];
    [customButton setTitle:@"Button" forState:UIControlStateNormal];
    customButton.titleEdgeInsets = UIEdgeInsetsMake(0, 5, 0, 0);
    [customButton sizeToFit];
    UIBarButtonItem *customBarButtonItem = [[UIBarButtonItem alloc] initWithCustomView:customButton];

enter image description here

ここでの2つの問題：1つ目はUIButtonのサイズであり、2つ目は、gifからわかるように、ボタンの内側をタップしたときとタップを離したときにボタンが正しくアニメーション化されないことです。 。何か案は？

objective-cios7uibarbuttonitemuitoolbar
14
Fred Collins

UIButtonをUIBarButtonItem内のカスタムビューとして埋め込むことができます。 -setImage:forState: および -setTitle:forState: を使用して、画像やテキストを含め、UIButtonを好きなように作成できます。

UIButton* customButton = [UIButton buttonWithType:UIButtonTypeCustom];
[customButton setImage:[UIImage imageNamed:@"image"] forState:UIControlStateNormal];
[customButton setTitle:@"Button" forState:UIControlStateNormal];
[customButton sizeToFit];
UIBarButtonItem* customBarButtonItem = [[UIBarButtonItem alloc] initWithCustomView:customButton];
self.navigationItem.leftBarButtonItem = customBarButtonItem; // or self.navigationItem.rightBarButtonItem

これを行うときは、IBActionメソッドをcustomButtonではなくcustomBarButtonItemにアタッチする必要があることに注意してください。

詳細については、 initWithCustomView:のドキュメント を参照してください。

UIButtonをナビゲーションバーの左バーボタン/右バーボタンスロットにドラッグするだけで、InterfaceBuilderでこれらすべてを実行することもできます。

31
Greg

UIBarButtonItenmが画像を正しく表示し、色合いの色で変更できるように変換する方法が好きなので、スタックオーバーフローで見つかったすべてのソリューションに満足していませんでした。だから私はこのソリューションを発見しました。コードをあまり使わなくてもうまく使用できます...最終的な効果はFacebookや他の現在のアプリのツールバーに似ています...

enter image description here

UIBArButtonItemに含まれるビューの色合いを変更すると、それに応じて画像の色とタイトルが変更され、本当にクールです。特別な画像を作成する必要はまったくありません。

このコードは、その競争ボタンのような各ボタンから呼び出され、ボタンは参照アウトレットとして設定されています...

- (void)selectButton:(UIButton *)sender { 
    _competitionButton.superview.tintColor = [UIColor lightGrayColor];
    _usersButton.superview.tintColor = [UIColor lightGrayColor]; 
    _managementButton.superview.tintColor = [UIColor lightGrayColor];    
    sender.superview.tintColor = [UIColor whiteColor]; 
}

- (IBAction)onCompetitionButtonClick:(UIButton *)sender {
    [self selectButton:sender];
    [_scrollView scrollToPage:0 of:3];
}

「コンペティション」というタイトルのボタンにはタイトルのみがあり、バーボタンアイテムには画像があります...これが私が設定した方法であり、機能します。他の可能性もあるかもしれません。

4
Renetik

だから私はプログラムで解決策を実行することができました...それが機能しないという一部のユーザー...それで、色合いによってボタンの色を変更でき、画像とタイトルを魔法のように変更できるように、画像とアイテムでUTToolbarを作成する方法ラベル？私のUIエディターソリューションは確かに機能します...このコードでは、物事をより明確にすることができ、プログラムで行うこともできます...

- (void)loadToolbar {
    NSMutableArray *items = NSMutableArray.new;
    [items add:[UIBarButtonItem createWithItem:UIBarButtonSystemItemFlexibleSpace :nil :nil]];
    for (uint pageIndex = 0; pageIndex < _controllers.count; ++pageIndex) {
        UIView *itemView = [UIView.alloc initWithFrame:CGRectMake(0, 0, 100, 44)];
        itemView.backgroundColor = [UIColor clearColor];
        itemView.tintColor = [UIColor orangeColor];
        [itemView addSubview:[self createToolbarForItemView:pageIndex]];
        [itemView addSubview:[self createButtonForItemView:pageIndex]];
        UIBarButtonItem *item = [UIBarButtonItem.alloc initWithCustomView:itemView];
        item.style = UIBarButtonItemStylePlain;
        [items add:item];
        [items add:[UIBarButtonItem createWithItem:UIBarButtonSystemItemFlexibleSpace :nil :nil]];
    }
    [_toolbar setItems:items];
}

- (UIButton *)createButtonForItemView:(uint)pageIndex {
    UIButton *itemButton = [UIButton buttonWithType:UIButtonTypeSystem];
    itemButton.frame = CGRectMake(0, 0, 100, 44);
    itemButton.titleLabel.font = [UIFont systemFontOfSize:11];
    itemButton.contentEdgeInsets = UIEdgeInsetsMake(30, 0, 0, 0);
    itemButton.text = [_controllers[pageIndex] tabTitle];
    itemButton.touchUp = ^(UIButton *sender) {
        for (UIButton *button in _buttons) button.superview.tintColor = UI.toolBarInactiveButtonTextColor;
        sender.superview.tintColor = UI.toolBarActiveButtonTextColor;
        [self showPage:pageIndex];
    };
    [_buttons add:itemButton];
    return itemButton;
}

- (UIToolbar *)createToolbarForItemView:(uint)pageIndex {
    UIToolbar *itemToolbar = [UIToolbar.alloc initWithFrame:CGRectMake(0, 0, 100, 44)];
    itemToolbar.tintColor = nil;
    itemToolbar.barStyle = _toolbar.barStyle;
    itemToolbar.translucent = _toolbar.translucent;
    UIBarButtonItem *imageItem = [_controllers[pageIndex] tabImageItem];
    imageItem.style = UIBarButtonItemStylePlain;
    imageItem.tintColor = nil;
    imageItem.imageInsets = UIEdgeInsetsMake(-10, 0, 0, 0);
    itemToolbar.items = @[
            [UIBarButtonItem createWithItem:UIBarButtonSystemItemFlexibleSpace :nil :nil],
            imageItem,
            [UIBarButtonItem createWithItem:UIBarButtonSystemItemFlexibleSpace :nil :nil]
    ];
    return itemToolbar;
}
1
Renetik

私はこの問題を次のように解決しました：

[Button **setTitleColor**:[UIColor colorWithRed:129/255.0f green:124/255.0f blue:110/255.0f alpha:1.0f] forState:**UIControlStateHighlighted**];
0
User123456