Android上部の検索バーを実装する方法

2年 ago
桜, 春樹
1 minute

Androidの最上部の検索ボックスを実装するには、ToolbarとSearchViewコンポーネントを使用します。

レイアウトファイルにツールバーコンポーネントを追加して、トップナビゲーションバーにします：

<android.support.v7.widget.Toolbar
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:background="@color/colorPrimary"
    android:elevation="4dp"
    android:theme="@style/ThemeOverlay.AppCompat.ActionBar" />

そして、Activity内にToolbarを見つけActionBarとして設定します：

Toolbar toolbar = findViewById(R.id.toolbar);
setSupportActionBar(toolbar);

次に、onCreateOptionsMenuメソッドでメニューファイルを読み込み、検索ボックスのリスナーを設定する：

@Override
public boolean onCreateOptionsMenu(Menu menu) {
    getMenuInflater().inflate(R.menu.menu_main, menu);

    SearchManager searchManager = (SearchManager) getSystemService(Context.SEARCH_SERVICE);
    SearchView searchView = (SearchView) menu.findItem(R.id.action_search).getActionView();
    searchView.setSearchableInfo(searchManager.getSearchableInfo(getComponentName()));
    searchView.setMaxWidth(Integer.MAX_VALUE);

    searchView.setOnQueryTextListener(new SearchView.OnQueryTextListener() {
        @Override
        public boolean onQueryTextSubmit(String query) {
            // 处理搜索提交事件
            return false;
        }

        @Override
        public boolean onQueryTextChange(String newText) {
            // 处理搜索文本变化事件
            return false;
        }
    });

    return true;
}

メニューファイルに、検索ボックスのスタイルと動作を定義します。

<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/action_search"
        android:title="Search"
        android:icon="@drawable/ic_search"
        android:showAsAction="ifRoom|collapseActionView"
        android:actionViewClass="android.support.v7.widget.SearchView" />
</menu>

すると、Android のトップナビゲーションバーに検索バーを実装することができます。必要に応じてさらにカスタマイズや微調整を加えることができます。

bannerAds