UISearchBarの基本

シェアする

Screen

さまざまな情報を検索する際に使われるサーチバーの基本的な使用方法を説明します。ナビゲーションバーやテーブルビューとともに使われる場合の多いコントロールですが、普通のビューに組み込んで仕様することもできます。

プロジェクトの作成と画面の準備

Single View Applicationを作成します。

Screen1

▲Main.storyboardにSearch Barをドロップします。ツールバーの下あたりに移動しオートレイアウトの制約を上、左、右に設定しておくとよいでしょう。

S 2016 06 10 13 30 36

▲アシスタントエディタを選び、サーチバーをCtrl+ドラッグします。searchBarという名前のOutletを作成しておきます。

コードの生成

ViewController.swiftでコードを実装します。

キャンセルやスコープボタンの設定はプログラムで実装するのが簡単です。

また検索ボタンやキャンセルボタンが押された場合、UISearchBarDelegateを実装したクラスにイベントが送信されてきます。今回はViewControllerにUISearchBarDelegateを実装して、それぞれのイベントを受け取っています。

class ViewController: UIViewController, UISearchBarDelegate  {
    @IBOutlet weak var searchBar: UISearchBar!

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
        searchBar.delegate = self
        searchBar.showsCancelButton = true
        //プレースホルダの指定
        searchBar.placeholder = "検索文字列を入力してください"
        //検索スコープを指定するボタン
        searchBar.scopeButtonTitles  = ["果物", "野菜"]
        searchBar.showsScopeBar = true
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
    }

    func searchBarSearchButtonClicked(searchBar:UISearchBar) {
        print("検索ボタンがタップ scopeIndex=\(searchBar.selectedScopeButtonIndex)")
    }
    
    func searchBarCancelButtonClicked(searchBar: UISearchBar) {
        print("キャンセルボタンがタップ")
    }
}

実行すると以下のような画面が表示されます。実際はsearchBarSearchButtonClickedにデータを検索する処理を作り込み、検索結果をテーブルビューなどに表示することになります。

S 2016 06 10 13 38 35

スポンサーリンク
レクタングル(大)広告
レクタングル(大)広告

シェアする

フォローする