👨🏿‍⚕️ 👍🏻 👏 ローカル検索システムをAndroidアプリケーションに追加します 🔂 👩🏻‍🏭 🍻

多くのプログラムには検索機能が必要です。今日は、レストランのアプリケーションでこのような機能を実装する例を検討します。私たちの主な目標は、ユーザーが望むものをさまざまな料理のメニューからすばやく簡単に見つける機会をユーザーに提供することです。

ユーザーインターフェイスの統一性を維持しながら、既存のアプリケーションのコンテンツによるローカル検索の機能をどのように追加したかについて説明します。ここでは、ユーザーインターフェイスに加えられた変更とこれらの変更の理由を検討し、GestureOverlayViewオブジェクトをActivityクラスの要素に追加して独自のジェスチャを作成することについて説明します。当然、検索には特別な注意が払われます。

レストラン検索結果画面

検索の詳細

アプリケーションに検索機能を追加する前に、いくつかの機能を考慮し、いくつかの質問に答える必要があります。

正確に何を探すべきですか？ 製品のヘッダーとその説明を検索して、ユーザーが結果の最も完全なセットを取得できるようにします。ヘッダーだけでは、どの料理が問題かを正確に理解できるとは限らないためです。さらに、非表示のメタデータを検索対象のアイテムに追加できます。

検索結果を表示する方法、これに使用するレイアウトは？ リスト（ListViewオブジェクト）から始め、ショッピングカートと同じスタイルで作成しました。しかし、そのようなプレゼンテーションでは、料理は特に魅力的に見えません-すべての理由は、写真のサイズが小さすぎることです。リスト内の画像のサイズを大きくすると、ページのスペースが小さすぎて結果を表示できないことがわかりました。その結果、検索結果をグリッド（GridView要素）に配置し、レストランメニューの主要部分で行うのと同じことを行うことにしましたが、選択した料理に関する詳細を含む大きなブロックを横に配置する代わりに、画面全体に一連の製品を配置しました。これは、特に、検索結果のあるページと通常のメニュー画面をすばやく区別するのに役立ちます。料理の詳細を表示するには、ユーザーは検索結果ページで自分の写真をタッチする必要があります。これに応じて、ページの上にダイアログボックス（DialogFragmentオブジェクト）が表示されます;下の図のいずれかに表示されます。これにより、ユーザーはダイアログボックスの外側のスペースをタップするだけで、検索ページにすばやく戻り、他の料理の閲覧を続けることができます。ユーザーは必要なものをできるだけ早く見つけたいので、理想的には、検索は遅延なくほぼ瞬時に実行する必要があります。さもなければ、彼らは望むものを見つけることができないか、結果を待つのに飽き飽きして、何も探してアプリケーションを離れません。

機密ユーザーデータの処理方法 以前に入力した検索クエリに基づいてヒントを提供する検索システム、またはユーザーが自分に関する詳細情報を入力する必要がある検索を作成できます。これにより、他の人がユーザーが探しているものを正確に見ることができるか、入力された個人データがどこに送信されるかについての疑問が生じます。私たちの場合、レストランのアプリケーションについて話しているので、ユーザーがチョコレートケーキが好きだと誰かが見つけても、悪いことは起こりません。ただし、プライバシーに最も注意を払う必要があるプロジェクトがあります。このアプリケーションでは、ユーザーは自分に関する情報を入力する必要がなく、検索クエリはログに記録されず、ユーザーの履歴は保持されません。

レストランアプリで検索

レストランアプリケーションで検索を実装する最初のステップは、データベースクラスを作り直し、それにメソッドを追加して、検索結果を含む新しいテーブルを作成することです。テーブルは、画面に情報を表示するために使用されます。このアプリケーションで使用するデータベースの詳細については、こちらをご覧ください。データベース検索は、SQLiteクエリを使用して簡単に実装できます。実際、数行のコードが必要です。ここでは、ユーザーが入力した検索クエリを含むすべての製品の名前と説明で検索を実行します。検索結果として、データベースのすべての列が返されます。この情報は、ユーザーがタッチした画像の詳細を表示するために後で必要になるためです。データベースが非常に大きい場合、検索にかなりの時間がかかる可能性があるため、アプリケーションが動作していることをユーザーが確認できるように、進行状況バーまたは回転インジケーターを表示することを検討してください。データベース検索を実行する方法を次に示します。

/** *   ,    (searchTerm)     */ public Cursor searchMenuItems(String searchTerm) { SQLiteDatabase db = getReadableDatabase(); SQLiteQueryBuilder qb = new SQLiteQueryBuilder(); qb.setTables(TABLES.MENU); Cursor c = qb.query(db, null, "("+MenuColumns.NAME+" LIKE '%"+searchTerm+"%') " + "OR ("+MenuColumns.DESCRIPTION+" LIKE '%" + searchTerm+"%')", null, null, null, null); return c; }

次に、メインアクティビティを調整する必要があります。ActionBarに検索バーを含めます。 ActionBarのカスタマイズの詳細については、この記事を参照してください。検索機能は、アプリケーション内に完全に実装されます。検索に参加するためにデバイスに他のプログラムをインストールする必要はありません。検索リクエストを外部アプリケーションに送信する必要はありません。

この文字列変数をMainActivityクラスに追加します。これを使用して、クエリ文字列を検索インテントに送信します。これは、Intentクラスオブジェクトに追加のデータを追加するためのクラス変数です。

 /*    */   public final static String SEARCH_MESSAGE= "com.example.restaurant.MESSAGE";

次に、MainActivityクラスのonCreateOptionsMenuメソッドを更新します。 ActionBarを初期化するコードを追加します。

 /** *  action menu  ActionBar */ public boolean onCreateOptionsMenu(Menu menu) {   getMenuInflater().inflate(R.menu.action_bar, menu);   //     MenuItem searchItem = menu.findItem(R.id.action_search);   SearchView mSearchView = (SearchView) searchItem.getActionView();   searchItem.setShowAsActionFlags(MenuItem.SHOW_AS_ACTION_IF_ROOM           | MenuItem.SHOW_AS_ACTION_COLLAPSE_ACTION_VIEW);   //      mSearchView.setOnQueryTextListener(new OnQueryTextListener() {       @Override       public boolean onQueryTextSubmit(String query) {      //  intent      Intent searchIntent = new Intent(MainActivity.this, SearchResultsActivity.class);      searchIntent.putExtra(SEARCH_MESSAGE, query);           startActivity(searchIntent);           return false;       }       @Override       public boolean onQueryTextChange(String query) {           //                return true;       }   });     return super.onCreateOptionsMenu(menu); }

ここで、SearchResultActivityクラスを追加します。

 public class SearchResultsActivity extends Activity{ TextView mQueryText; GridView searchListResults; SearchAdapter adapter; Vector<com.example.restaurant.MenuFactory.MenuItem> searchList; @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.search_query_grid_results); mQueryText = (TextView) findViewById(R.id.txt_query); // GridView searchListResults = (GridView)findViewById(R.id.search_results); searchList= new Vector<com.example.restaurant.MenuFactory.MenuItem>(); //      final Intent queryIntent = getIntent(); doSearchQuery(queryIntent); adapter= new SearchAdapter(this,searchList); searchListResults.setAdapter(adapter); //  GridView searchListResults.setOnItemClickListener(new AdapterView.OnItemClickListener() { @Override public void onItemClick(AdapterView<?> parent, View v, int position, long id){ FragmentTransaction ft = getFragmentManager().beginTransaction(); Fragment prev = getFragmentManager().findFragmentByTag("dialog"); if (prev != null) { ft.remove(prev); } ft.addToBackStack(null); DialogFragment newFragment = SearchResultsDialogFragment.newInstance(searchList.elementAt(position)); newFragment.show(ft, "dialog"); } }); }

リストの作成中に、検索の結果として何も見つからなかったときにオプションを処理しています。つまり、検索で結果が返されなかった場合、ユーザーにダイアログボックスを表示し、何が起こったかを報告し、結果を表示する予定のアクティビティを閉じます。その結果、ユーザーには空白ページが表示されません。同じSearchResultActivityクラスでこれを行います。その継続を以下に示します。

 /** *    . */ private void doSearchQuery(final Intent queryIntent) { //   String message= queryIntent.getStringExtra(MainActivity.SEARCH_MESSAGE); //       mQueryText.setText(message); RestaurantDatabase dB= new RestaurantDatabase(this); MenuFactory mMF= MenuFactory.getInstance(); Cursor c= dB.searchMenuItems(message); Set<String> categories = new HashSet<String>(); while (c.moveToNext()) { String category = c.getString(c.getColumnIndexOrThrow(RestaurantDatabase.MenuColumns.CATEGORY)); categories.add(category); //         MenuItem item= mMF.new MenuItem(); item.setCategory(category); item.setName(c.getString(c.getColumnIndexOrThrow(RestaurantDatabase.MenuColumns.NAME))); item.setDescription(c.getString(c.getColumnIndexOrThrow(RestaurantDatabase.MenuColumns.DESCRIPTION))); item.setNutrition(c.getString(c.getColumnIndexOrThrow(RestaurantDatabase.MenuColumns.NUTRITION))); item.setPrice(c.getString(c.getColumnIndexOrThrow(RestaurantDatabase.MenuColumns.PRICE))); item.setImageName(c.getString(c.getColumnIndexOrThrow(RestaurantDatabase.MenuColumns.IMAGENAME))); searchList.add(item); } c.close(); //   ,     if(searchList.size()==0){ Intent intent = new Intent(SearchResultsActivity.this, OrderViewDialogue.class); intent.putExtra(OrderViewActivity.DIALOGUE_MESSAGE, "Sorry, no matching items found."); startActivity(intent); SearchResultsActivity.this.finish(); } }

次に、GridView要素のアダプターについて説明します。メインメニューの同様のコードに基づいて構築し、マイナーな編集を行いました。さらに、既存のレイアウトファイルを変更できます。一貫した外観のアプリケーション画面を構築することは、コードを再利用する利点の1つであり、すべての画面をゼロから作成する必要がないことを補完します。上でお気づきかもしれませんが、当初はバスケット用に作成されたが、ここでも適切なOrderViewDialogueクラスを再利用しました。コードの続きは次のとおりです。

 /** *  SearchAdapter   GridView   .    view_grid_item,     ,    . */ class SearchAdapter extends BaseAdapter { private Vector<com.example.restaurant.MenuFactory.MenuItem> mFoundList; private LayoutInflater inflater; public SearchAdapter(Context c, Vector<com.example.restaurant.MenuFactory.MenuItem> list) { mFoundList= list; inflater = LayoutInflater.from(c); } public int getCount() { return mFoundList.size(); } public Object getItem(int position) { return mFoundList.get(position); } public long getItemId(int position) { return 0; } //    ItemView   ,    public View getView(int position, View convertView, ViewGroup parent) { View v = convertView; ImageView picture; TextView name; TextView price; if(v == null) { v = inflater.inflate(R.layout.view_grid_item, parent, false); v.setTag(R.id.picture, v.findViewById(R.id.picture)); v.setTag(R.id.grid_name, v.findViewById(R.id.grid_name)); v.setTag(R.id.grid_price, v.findViewById(R.id.grid_price)); } picture= (ImageView) v.getTag(R.id.picture); name= (TextView) v.getTag(R.id.grid_name); price= (TextView) v.getTag(R.id.grid_price); final MenuItem foundItem = (MenuItem) mFoundList.get(position); InputStream inputStream = null; AssetManager assetManager = null; try { assetManager = getAssets(); inputStream = assetManager.open(foundItem.imageName); picture.setImageBitmap(BitmapFactory.decodeStream(inputStream)); } catch (Exception e) { Log.d("ActionBarLog", e.getMessage()); } finally { } name.setText(foundItem.name); price.setText(foundItem.price); return v; } } }

検討する価値があるもう1つの詳細は、インターフェイスのポートレートまたはランドスケープバージョンの使用です。以下は、res / layout-landフォルダーにあり、インターフェースのランドスケープバージョンを設定するsearch_query_grid_results.xmlファイルのコードです。列数（numColumns）は4に設定されます。インターフェイスの縦向きのファイルとほぼ同じファイルがres / layout-portフォルダーにあります。ランドスケープバージョンとは、要素が2列に配置されている点のみが異なります。

 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:paddingLeft="5dp" android:paddingRight="5dp" android:paddingBottom="5dp" android:paddingTop="5dp" android:orientation="vertical"> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" style="@style/FragmentTitle" android:text="Results For: " /> <TextView android:id="@+id/txt_query" android:layout_width="wrap_content" android:layout_height="wrap_content" style="@style/OrderTitle"/> </LinearLayout> <GridView android:id="@+id/search_results" android:layout_width="fill_parent" android:layout_height="0dp" android:paddingTop="10dp" android:numColumns="4" android:verticalSpacing="10dp" android:horizontalSpacing="10dp" android:layout_weight="1" android:stretchMode="columnWidth" android:gravity="center"/> </LinearLayout>

検索結果画面は次のようになります。その上に、ユーザーがタッチした画像の皿に関する詳細を示すダイアログボックスが開きます。

検索画面と料理の詳細ウィンドウ

ジェスチャー処理

検索結果でウィンドウを終了するには、メインメニューで他のページを表示するときと同じように、適切なジェスチャーで左または右にスワイプして移動します。 GestureDetectorクラスはリスト（ListView）ではうまく機能しますが、テーブル（GridView）ではうまく機能しません。したがって、GestureOverlayViewの使用に切り替える必要があります。

最初に、GestureBuilderアプリケーションを使用してジェスチャライブラリを作成する必要があります。これは、Android SDKに付属のサンプルの中にあります。特に、必要なのはandroid \ sdk \ samples \ android-23 \ legacy \ GestureBuilderにあります。

アプリケーションを使用するには、デバイスでコンパイルして実行し、それを使用してジェスチャの名前と構成を指定する必要があります。必要なすべてのジェスチャーを追加した後（この場合、左にスワイプ、左にスワイプ、右にスワイプ、右にスワイプ）、デバイスから「ジェスチャー」ファイルをコピーし、res / rawフォルダーに配置する必要があります。アプリケーションは、このファイルの正確な場所を教えてくれます。この場合、USB経由でデバイスをPCに接続し、ルートディレクトリを見るだけで十分です。

ジェスチャービルダーアプリ

ジェスチャファイルを適切な場所にコピーしたら、GestureOverlayViewで動作するように変数宣言を追加してSearhcResultActivityクラスを更新する必要があります。

 GestureLibrary gestureLibrary; GestureOverlayView gestureOverlayView;

onCreateメソッドでは、インターフェイス要素を初期化し、ライブラリをロードしてリスナーを構成する必要があります。リスナーは、ユーザーが実行したジェスチャーに応じてプログラムのアクションを決定します。このメカニズムの操作を正常に機能させるには、ジェスチャーライブラリに記録されているのと同じ名前がコードで使用されていることを確認する必要があります。

アニメーションとして、overridePendingTransitionを使用することにしました。着信アニメーションには、値0が使用されます。これは、アニメーションがないことを意味します。空のxmlアニメーションファイルを作成して使用することもできますが、これによりシステムは「思考」に多くの時間を費やし、送信アニメーションが非常に速く実行されます。

 gestureOverlayView = (GestureOverlayView)findViewById(R.id.gestures); //      gestureLibrary = GestureLibraries.fromRawResource(this, R.raw.gestures); gestureLibrary.load(); gestureOverlayView.addOnGesturePerformedListener(new OnGesturePerformedListener(){ @Override public void onGesturePerformed(GestureOverlayView view, Gesture gesture) { ArrayList<Prediction> prediction = gestureLibrary.recognize(gesture); if(prediction.size() > 0){ String action= prediction.get(0).name; //       "left swipe"  "right swipe" if("left swipe".equals(action)){ //  SearchResultsActivity.this.finish(); overridePendingTransition(0, R.anim.move_left); } else if("right swipe".equals(action)){ //  SearchResultsActivity.this.finish(); overridePendingTransition(0, R.anim.move_right); } } }}); // « »  ,   ,       gestureOverlayView.setGestureVisible(false);

以下は、左シフトアニメーションファイルmove_left.xmlのコードです。右シフトアニメーションを行うファイルmove_right.xmlは、toXDeltaの値が負でないことを除いて、まったく同じに見えます。

 <?xml version="1.0" encoding="utf-8"?> <translate xmlns:android="http://schemas.android.com/apk/res/android" android:duration="500" android:fromXDelta="0" android:toXDelta="-100%" android:interpolator="@android:anim/decelerate_interpolator" />

GrivViewがGestureOverlayView内にある場合、LinearLayoutのように拡張する代わりに指定された0dpを使用するため、GrivViewは0dpに等しいlayout_heightパラメーターを持つことができないことに注意してください。この要件を満たすために、この場合、layout_heightパラメーターはfill_parentに設定されました。さらに、ジェスチャを表示する必要も、遅延も必要ありません。これは、ジェスチャラインが画面からスムーズに消えるという事実に起因します。「ジェスチャライン」はすでに透過的であり、余分な遅延は必要ありません。したがって、fadeOffsetおよびfadeDurationを0に設定します。以下は、GridViewとGestureOverlayViewの関係を定義する更新されたxmlコードです。

 <android.gesture.GestureOverlayView android:id="@+id/gestures" android:layout_width="fill_parent" android:layout_height="fill_parent" android:fadeOffset="0" android:fadeDuration="0" android:eventsInterceptionEnabled="true"> <GridView android:id="@+id/search_results" android:layout_width="fill_parent" android:layout_height="fill_parent" android:paddingTop="10dp" android:numColumns="4" android:verticalSpacing="10dp" android:horizontalSpacing="10dp" android:layout_weight="1" android:stretchMode="columnWidth" android:gravity="center"/> </android.gesture.GestureOverlayView>

結論

Androidアプリケーション用のローカル検索システムを設計するときに行う必要のある一連の決定を検討しました。さらに、いくつかの潜在的な問題、およびそれらを回避する方法について話し、コードとxml-markupの例を示しました。これで、検索機能を独自のアプリケーションにうまく組み込むことができ、同時に検索が機能するだけでなく、ユーザーの要件も考慮に入れることができます。そしてこれは、彼らが間違いなく必要なものを見つけることを意味します。

ローカル検索システムをAndroidアプリケーションに追加します

検索の詳細

レストランアプリで検索

ジェスチャー処理

結論

More articles: