web-dev-qa-db-ja.com

UISearchBarの左側にボタンを追加する

私はこれで髪をちぎりました。クライアントは、次の例のように、検索バーの左側にボタンを追加したいと考えています。

alt text
（ソース： erik.co.uk ）

しかし、どうすればいいのかわからない。 Apple UISearchBarにカスタムボタンを追加するための文書化されたメソッドはもちろん、検索バーの左側にもありません。

インターフェースビルダーでハックして、左側にボタンのあるUIToolbarを追加しようとしましたが、2つが適切に並んでいて、1つであるような印象を与えるスタイルの組み合わせが見つかりません。下の図からわかるように、垂直方向の配置では常に1ピクセルの違いのように見えます。

alt text
（ソース： erik.co.uk ）

私は周りを検索しましたが、答えを見つけることができませんが、スクリーンショットからわかるように、それは可能でなければなりません！

よろしくお願いします。

エリック

iphoneuisearchbar
29
Erik Carlson

ツールバーの代わりにナビゲーションバーを使用します。検索バーをナビゲーションバーのタイトルビューに設定します。

Interface Builder：

screenshot 1

結果：

screenshot 2

39
kennytm

代わりにブックマーク画像を置き換え、必要に応じてそのオフセットを調整できます。
例えば：

_[self.searchDisplayController.searchBar setImage:[UIImage imageNamed:@"plus2"] forSearchBarIcon:UISearchBarIconBookmark state:UIControlStateNormal];
[self.searchDisplayController.searchBar setPositionAdjustment:UIOffsetMake(-10, 0) forSearchBarIcon:UISearchBarIconBookmark];
_

デリゲートメソッドでボタンイベントを処理します。

- (void)searchBarBookmarkButtonClicked:(UISearchBar *)searchBar

これはどのように見えるかです：

white tinted UISearchBar with custom bookmark image

18
Yariv Nissim

最初の解決策は、KennyTMが気づいたように、UINavigationBarではなくUIToolbarを使用することです。しかし、私の場合のように、3つのボタンを使用する必要がある場合、ナビゲーションバーに満足できない場合があります（ナビゲーションバーは2つのボタンしか使用できません）。左の図を参照してください。これは私がそれをした方法です：

  1. 3つのボタンでToolbarを使用し、検索バーを配置する場所でFlexible Space Bar Button Itemを使用します。
  2. 検索バーを（not in）ツールバーに配置します。 Interface Builderでこれを行うには、検索バーをツールバーにドラッグアンドドロップしないでください。代わりに、それを近くのどこかに置いてから、キーボードの矢印キーを使用して（またはInterface BuilderのXとYの位置を変更して）移動します。
  3. その下にある検索バーの左の黒い線（右の図を参照）。それを非表示にするには、高さ1pxと白い背景のあるビューを1つ追加します。

少し汚れているように見えるので、もっと良い解決策があれば教えてください。

screenshot

8
Mike Keskinov

最も簡単な解決策は、ツールバーの（ではなく）TOPにSearchBarを追加することです。私は私のeBuildyで使用する最適なソリューションを提供します。

UIBarButtonItem *mySettingsButton = [[UIBarButtonItem alloc] initWithTitle:@"Settings" style:UIBarButtonItemStyleBordered target:self action:@selector(refresh)];
UIBarButtonItem *mySpacer = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemFlexibleSpace target:nil action:nil];
UIBarButtonItem *myRefreshButton = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemRefresh target:self action:@selector(refresh)];
UIToolbar *myTopToolbar = [[UIToolbar alloc]initWithFrame:CGRectMake(0,0,320,40)];
UISearchBar *mySearchBar = [[UISearchBar alloc]initWithFrame:CGRectMake(70,1,220,40)];

[myTopToolbar setItems:[NSArray arrayWithObjects:mySettingsButton,mySpacer,myRefreshButton, nil] animated:NO];
[self.view addSubview:myTopToolbar];
[self.view addSubview:mySearchBar];
4
Thomas Decaux

ここで古い質問に答えましたが、私は最近これに苦労していて、対処しようとしている状況の他の回答にはいくつかの欠点を見つけました。ここに私がUISearchBarのサブクラスでやったことがあります：

最初にUIButtonプロパティ（ここでは「selectButton」）を追加します。次に、initWithFrameメソッドをオーバーライドし、次のようなことを行います。

-(id)initWithFrame:(CGRect)frame{
if (self = [super initWithFrame:frame])
{
    self.selectButton = [UIButton buttonWithType:UIButtonTypeRoundedRect];
    self.selectButton.contentEdgeInsets = (UIEdgeInsets){.left=4,.right=4};
    [self.selectButton addTarget:self action:@selector(pressedButton:) forControlEvents:UIControlEventTouchUpInside];

    self.selectButton.titleLabel.numberOfLines = 1;
    self.selectButton.titleLabel.adjustsFontSizeToFitWidth = YES;
    self.selectButton.titleLabel.lineBreakMode = UILineBreakModeClip;

    [self addSubview:self.selectButton];
    [self.selectButton setFrame:CGRectMake(5, 6, 60, 31)];
}

return self;
}

ここで、レイアウトサブビューメソッドをオーバーライドして、キャンセルボタンが表示されているかどうかに応じて、検索バーのサイズを適切な幅に変更します。これは次のようになります。

-(void)layoutSubviews
{
[super layoutSubviews];

float cancelButtonWidth = 65.0;
UITextField *searchField = [self.subviews objectAtIndex:1];

if (self.showsCancelButton == YES)
    [searchField setFrame:CGRectMake(70, 6, self.frame.size.width - 70 - cancelButtonWidth, 31)];
else
    [searchField setFrame:CGRectMake(70, 6, self.frame.size.width - 70, 31)];
}

上記のメソッドで、cancelButtonWidthの定数を追加したことに注意してください。 [self cancelButton]から幅を取得するコードを追加しようとしましたが、実行時にのみアクセスできるようで、プロジェクトをコンパイルできません。いずれにしても、これはあなたが必要とするもののための良いスタートになるはずです

3
Will Ayd

Cancelボタンの代わりに右側にカスタムボタンが必要な場合は、次のコードを使用してください（iOS 9以降で有効）：

[self.searchBar setShowsCancelButton:YES];
[[UIBarButtonItem appearanceWhenContainedIn:[self.searchBar class], nil] setTitle:@""];
[[UIBarButtonItem appearanceWhenContainedIn:[self.searchBar class], nil] setImage:[UIImage imageNamed:@"search"]];
0
Winston