web-dev-qa-db-ja.com

画像とテキストの両方を含むUIBarButtonItemを作成するにはどうすればよいですか？

UIBarButtonItemに画像を使用しようとすると、テキストが表示されません。テキストと画像の両方を表示する方法はありますか？

objective-ccocoa-touchuibarbuttonitem
38
node ninja

画像とテキストの両方を持つカスタムビューでUIBarButtonItemを初期化できます。 UIButtonを使用するサンプルを次に示します。

UIImage *chatImage = [UIImage imageNamed:@"08-chat.png"];

UIButton *chatButton = [UIButton buttonWithType:UIButtonTypeCustom];
[chatButton setBackgroundImage:chatImage forState:UIControlStateNormal];
[chatButton setTitle:@"Chat" forState:UIControlStateNormal];
chatButton.frame = (CGRect) {
    .size.width = 100,
    .size.height = 30,
};

UIBarButtonItem *barButton= [[[UIBarButtonItem alloc] initWithCustomView:chatButton] autorelease];
self.toolbar.items = [NSArray arrayWithObject:barButton];
42
Kris Markel

ストーリーボードを使用してこれを行う方法を提案します。

  1. ToolBarの通常のUIViewにドラッグアンドドロップします。自動的にバーボタンアイテムにラップされます。 「サイズインスペクタ」でビューの幅を調整します。ビューの背景色をクリア色に変更します。

enter image description here

  1. UIButtonとUILabelをビュー内に配置します。制約を使用して、それらの位置を調整できます。また、ビューの外に配置することもできます。たとえば、（私の写真のように）少し高くしたり低くしたりできます。 UIButtonのデフォルト画像とハイライト画像を配置します。

  2. バーボタンアイテムをコピーし、別のボタンを調整します。フレキシブルスペースを追加します。

  3. アウトレットを作成します。

  4. 完了:)。アプリを実行すると、次のようなツールバーが表示されます。

enter image description here

追伸 ここ .xibを使用してUIToolbarサブクラスを作成する方法を読むことができます

12
Igor
UIButton *button =  [UIButton buttonWithType:UIButtonTypeCustom];
[button setImage:[UIImage imageNamed:@"image.png"] forState:UIControlStateNormal];
[button addTarget:target action:@selector(buttonAction:)forControlEvents:UIControlEventTouchUpInside];
[button setFrame:CGRectMake(0, 0, 53, 31)];
UILabel *label = [[UILabel alloc]initWithFrame:CGRectMake(3, 5, 50, 20)];
[label setFont:[UIFont fontWithName:@"Arial-BoldMT" size:13]];
[label setText:title];
label.textAlignment = UITextAlignmentCenter;
[label setTextColor:[UIColor whiteColor]];
[label setBackgroundColor:[UIColor clearColor]];
[button addSubview:label];
UIBarButtonItem *barButton = [[UIBarButtonItem alloc] initWithCustomView:button];
self.navigationItem.leftBarButtonItem = barButton;
6
Sandy Patel

Kris Markelの答えは良いスタートです（<iOS7のみ）。しかし、色合いの色を使用すると、画像とボタンの強調表示された状態がうまくいきません。

通常のiOS7の戻るボタンのように見え、動作するUIBarButtonItem（leftBarButtonItem）を作成するカテゴリを作成しました。見てください： https://github.com/Zero3nna/UIBarButtonItem-DefaultBackButton

2
zero3nna

Swift 4.2 with target

extension UIBarButtonItem {
    convenience init(image :UIImage, title :String, target: Any?, action: Selector?) {
        let button = UIButton(type: .custom)
        button.setImage(image, for: .normal)
        button.setTitle(title, for: .normal)
        button.frame = CGRect(x: 0, y: 0, width: image.size.width, height: image.size.height)

        if let target = target, let action = action {
            button.addTarget(target, action: action, for: .touchUpInside)
        }

        self.init(customView: button)
    }
}
2
abbood

Swift Update UIBarButtonItemの場合、画像とテキストの両方を持つカスタムビューがあります。

var chatImage: UIImage  = UIImage(named: "YourImageName")
var rightButton : UIButton = UIButton(type: UIButtonType.custom)
rightButton.setBackgroundImage(rightImage, for: .normal)
rightButton.setTitle(title, for: .normal)
rightButton.frame.size = CGSize(width: 100, height: 30)

let menuUIBarButtonItem = UIBarButtonItem(customView: rightButton)
1
GayashanK