Comment construire Gmail comme zone de recherche dans la barre d'action?

Je suis actuellement en utilisant SearchView widget à l'intérieur de ActionBarcompat pour filtrer une liste lors de la recherche.

Lorsque l'utilisateur commence à entrer le texte de la liste dans la page principale des mises à jour avec un Adaptateur pour filtrer les résultats. Je fais cela par la mise en œuvre d'un OnQueryTextListener et de filtrer les résultats sur chaque touche.

Au lieu de cela, je veux créer un compte Gmail comme champ de recherche avec de suggestion automatique de la liste générée et pas de changements de la vision sous-jacente

J'ai passé à travers ce tutoriel qui utilise le SearchView composant, mais il nécessite un consultable activité. Je veux la liste déroulante pour être sur le MainActivity où j'ai de la liste (comme dans l'application Gmail) et non pas une Activité dédiée.

En outre, la mise en œuvre de la même manière que dans le tutoriel semble comme un overkill pour ce que je veux (juste une liste déroulante)

InformationsquelleAutor Michael | 2013-09-18

Si vous voulez juste un composant qui fait ce qui est décrite dans la question, je suggère ce bibliothèque. Vous pouvez également mettre en œuvre la dehors-de-le-bx consultable interface, cependant, sachez qu'il dispose de l'INTERFACE utilisateur: les limites de

De mettre en œuvre une interface similaire à l'Application Gmail, vous aurez à comprendre conceps de:

Fournisseurs De Contenu;
La persistance de données SQLite
Listview ou RecyclerView et ses adaptateurs;
Le passage des données entre les activités;

Résultat Final devrait ressembler à quelque chose comme:

Comment construire Gmail comme zone de recherche dans la barre d'action?

Il y a beaucoup (beaucoup) de trouver des moyens pour obtenir le même résultat (ou mieux), je vais décrite une manière possible.

Partie 01: Mise En Page

J'ai décidé de gérer l'ensemble de l'interface dans une nouvelle Activité, pour qui j'ai créé trois layouts XML:

custom_searchable.xml: assemblys tous les éléments de l'INTERFACE utilisateur dans un RelativeLayout qui servira de contenu pour la SearchActivity;

<include
    android:id="@+id/cs_header"
    layout="@layout/custom_searchable_header_layout" />

<android.support.v7.widget.RecyclerView
    android:id="@+id/cs_result_list"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:stackFromBottom="true"
    android:transcriptMode="normal"/>

custom_searchable_header_layout.xml: contient la barre de recherche où l'utilisateur va taper sa requête. Il contient également le mic, d'effacer et de retour btn;

<RelativeLayout
    android:id="@+id/custombar_return_wrapper"
    android:layout_width="55dp"
    android:layout_height="fill_parent"
    android:gravity="center_vertical"
    android:background="@drawable/right_oval_ripple"
    android:focusable="true"
    android:clickable="true" >

    <ImageView
        android:id="@+id/custombar_return"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:layout_centerHorizontal="true"
        android:background="#00000000"
        android:src="@drawable/arrow_left_icon"/>
</RelativeLayout>

<android.support.design.widget.TextInputLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_toRightOf="@+id/custombar_return_wrapper"
    android:layout_marginRight="60dp"
    android:layout_marginLeft="10dp"
    android:layout_marginTop="10dp"
    android:layout_marginBottom="10dp">

    <EditText
        android:id="@+id/custombar_text"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:hint="Search..."
        android:textColor="@color/textPrimaryColor"
        android:singleLine="true"
        android:imeOptions="actionSearch"
        android:background="#00000000">
        <requestFocus/>
    </EditText>

</android.support.design.widget.TextInputLayout>

<RelativeLayout
    android:id="@+id/custombar_mic_wrapper"
    android:layout_width="55dp"
    android:layout_height="fill_parent"
    android:layout_alignParentRight="true"
    android:gravity="center_vertical"
    android:background="@drawable/left_oval_ripple"
    android:focusable="true"
    android:clickable="true" >

    <ImageView
        android:id="@+id/custombar_mic"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:layout_centerHorizontal="true"
        android:background="#00000000"
        android:src="@drawable/mic_icon"/>
</RelativeLayout>

custom_searchable_row_details.xml: contient les éléments de l'INTERFACE utilisateur à afficher dans la liste de résultats sera affichée en réponse à la requête de l'utilisateur;

<ImageView
    android:id="@+id/rd_left_icon"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="3dp"
    android:layout_centerVertical="true"
    android:layout_marginLeft="5dp"
    android:src="@drawable/clock_icon" />

<LinearLayout
    android:id="@+id/rd_wrapper"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center_vertical"
    android:layout_toRightOf="@+id/rd_left_icon"
    android:layout_marginLeft="20dp"
    android:layout_marginRight="50dp">

    <TextView
        android:id="@+id/rd_header_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textColor="@color/textPrimaryColor"
        android:text="Header"
        android:textSize="16dp"
        android:textStyle="bold"
        android:maxLines="1"/>

    <TextView
        android:id="@+id/rd_sub_header_text"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textColor="@color/textPrimaryColor"
        android:text="Sub Header"
        android:textSize="14dp"
        android:maxLines="1" />
</LinearLayout>

<ImageView
    android:id="@+id/rd_right_icon"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="3dp"
    android:layout_alignParentRight="true"
    android:layout_centerVertical="true"
    android:src="@drawable/arrow_left_up_icon"/>

Partie 02: la mise en Œuvre de la SearchActivity

L'idée est que, lorsque l'utilisateur tape sur le bouton de recherche (que vous pouvez placer n'importe où vous voulez), ce SearchActivity sera appelée. Il a une certaine principales responsabilités:

Se lier à des éléments de l'INTERFACE utilisateur dans le custom_searchable_header_layout.xml: en faisant cela, il est possible:

pour offrir aux auditeurs pour l'EditText (où l'utilisateur va taper sa requête):

TextView.OnEditorActionListener searchListener = new TextView.OnEditorActionListener() {
public boolean onEditorAction(TextView exampleView, int actionId, KeyEvent event) {
    //do processing
   }
}

searchInput.setOnEditorActionListener(searchListener);

searchInput.addTextChangedListener(new TextWatcher() {        
public void onTextChanged(final CharSequence s, int start, int before, int count) {
     //Do processing
   }
}

ajout d'un écouteur pour le bouton de retour (qui, par son tour appelez simplement terminer() et retourne à l'appelant de l'activité):

this.dismissDialog.setOnClickListener(new View.OnClickListener() {
    public void onClick(View v) {
    finish();
}

appelle l'intention de google de discours-à-texte de l'API:

    private void implementVoiceInputListener () {
        this.voiceInput.setOnClickListener(new View.OnClickListener() {

            public void onClick(View v) {
                if (micIcon.isSelected()) {
                    searchInput.setText("");
                    query = "";
                    micIcon.setSelected(Boolean.FALSE);
                    micIcon.setImageResource(R.drawable.mic_icon);
                } else {
                    Intent intent = new Intent(RecognizerIntent.ACTION_RECOGNIZE_SPEECH);

                    intent.putExtra(RecognizerIntent.EXTRA_LANGUAGE_MODEL, RecognizerIntent.LANGUAGE_MODEL_FREE_FORM);
                    intent.putExtra(RecognizerIntent.EXTRA_PROMPT, "Speak now");

                    SearchActivity.this.startActivityForResult(intent, VOICE_RECOGNITION_CODE);
                }
            }
        });
    }

Fournisseur De Contenu

Lors de la construction de l'une interface de recherche, le développeur a typiquement deux options:

Suggèrent les récentes requêtes de l'utilisateur: cela signifie que chaque fois que l'utilisateur effectue une recherche, le tapé la requête va être conservées dans une base de données à récupérer dernier, sur une suggestion de recherches futures;
Suggérer des options personnalisées pour l'utilisateur: le développeur va essayer de prédire ce que veut l'utilisateur par le traitement de la déjà tapé des lettres;

Dans les deux cas, les réponses doivent être livrés à l'arrière comme un objet Curseur qui aura son contenu affiché comme itens dans la liste des résultats. Tout ce processus peut être mettre en œuvre en utilisant le Fournisseur de Contenu de l'API. Les détails sur la façon d'utiliser les Fournisseurs de Contenu peut être atteint dans ce lien.

Dans le cas où le réalisateur veut mettre en œuvre le comportement décrit dans 1., il peut être utile d'utiliser la stratégie de exteding la SearchRecentSuggestionsProvider classe. Les détails sur la façon de le faire peut être atteint dans ce lien.

La mise en œuvre de l'interface de recherche

Cette interface doit fournir le comportement suivant:

Lorsque l'utilisateur tape une lettre, un appel à la méthode de requête de l'extrait de fournisseur de contenu de classe doit retourner une fois rempli, un curseur avec la suggestion à afficher dans la liste, vous devriez prendre pour ne pas geler le thread de l'INTERFACE utilisateur, donc je recommande d'effectuer cette recherche dans une AsyncTask:

    public void onTextChanged(final CharSequence s, int start, int before, int count) {
        if (!"".equals(searchInput.getText().toString())) {
            query = searchInput.getText().toString();

            setClearTextIcon();

            if (isRecentSuggestionsProvider) {
                //Provider is descendant of SearchRecentSuggestionsProvider
                mapResultsFromRecentProviderToList(); //query is performed in this method
            } else {
                //Provider is custom and shall follow the contract
                mapResultsFromCustomProviderToList(); //query is performed in this method
            }
        } else {
            setMicIcon();
        }
    }

À l'intérieur de la onPostExecute() la méthode de votre AsyncTask, vous devez récupérer une liste (qui doit venir de la doInBackground () (méthode) contenant les résultats affichés dans le ResultList (vous pouvez mapper une classe POJO et de le passer à votre adaptateur personnalisé, ou vous pouvez utiliser un CursorAdapter qui serait la meilleure pratique en la matière pour cette tâche):

protected void onPostExecute(List resultList) {
     SearchAdapter adapter = new SearchAdapter(resultList);
     searchResultList.setAdapter(adapter);
}

protected List doInBackground(Void[] params) {
    Cursor results = results = queryCustomSuggestionProvider();
    List<ResultItem> resultList = new ArrayList<>();

    Integer headerIdx = results.getColumnIndex(SearchManager.SUGGEST_COLUMN_TEXT_1);
    Integer subHeaderIdx = results.getColumnIndex(SearchManager.SUGGEST_COLUMN_TEXT_2);
    Integer leftIconIdx = results.getColumnIndex(SearchManager.SUGGEST_COLUMN_ICON_1);
    Integer rightIconIdx = results.getColumnIndex(SearchManager.SUGGEST_COLUMN_ICON_2);

    while (results.moveToNext()) {
        String header = results.getString(headerIdx);
        String subHeader = (subHeaderIdx == -1) ? null : results.getString(subHeaderIdx);
        Integer leftIcon = (leftIconIdx == -1) ? 0 : results.getInt(leftIconIdx);
        Integer rightIcon = (rightIconIdx == -1) ? 0 : results.getInt(rightIconIdx);

        ResultItem aux = new ResultItem(header, subHeader, leftIcon, rightIcon);
        resultList.add(aux);
    }

    results.close();
    return resultList;

Identifier lorsque l'utilisateur appuie sur le bouton de recherche à partir du clavier virtuel. Quand il fait ça, envoyer une intention de recherche de la base de l'activité (le seul responsable de la gestion du résultat de recherche) et ajoutez la requête que des informations supplémentaires à l'intention

protected void onActivityResult(int requestCode, int resultCode, Intent data) {
    super.onActivityResult(requestCode, resultCode, data);
    switch (requestCode) {
        case VOICE_RECOGNITION_CODE: {
            if (resultCode == RESULT_OK && null != data) {
                ArrayList<String> text = data.getStringArrayListExtra(RecognizerIntent.EXTRA_RESULTS);
                searchInput.setText(text.get(0));
            }
            break;
        }
    }
}

Identifier lorsque l'utilisateur clique sur l'une de ces suggestions et de l'envoyer et l'intention contenant les informations de l'élément (cette intention doit être différent de celui de l'étape précédente)

private void sendSuggestionIntent(ResultItem item) {
    try {
        Intent sendIntent = new Intent(this, Class.forName(searchableActivity));
        sendIntent.setAction(Intent.ACTION_VIEW);
        sendIntent.setFlags(Intent.FLAG_ACTIVITY_CLEAR_TOP | Intent.FLAG_ACTIVITY_SINGLE_TOP);

        Bundle b = new Bundle();
        b.putParcelable(CustomSearchableConstants.CLICKED_RESULT_ITEM, item);

        sendIntent.putExtras(b);
        startActivity(sendIntent);
        finish();
    } catch (ClassNotFoundException e) {
        e.printStackTrace();
    }
}

L'décrite étapes devrait être suffisant pour la mise en œuvre d'une interface de soi même. Tous les exemples de code ont été prises à partir de ici. J'ai fait cette bibliothèque qui fait à peu près de ce qui est décrit ci-dessus. Il n'est pas encore testé et certains de la configuration de l'INTERFACE utilisateur pourrait ne pas être encore disponibles.

J'espère que cette réponse pourrait aider quelqu'un dans le besoin.

Newb question ici: Dans custom_searchable_header_layout.xml pourquoi avez-vous envelopper les choses dans les wrappers. Pourquoi ne pas vous avez une ImageView, un EditText, puis une ImageView dans un LinearLayout ou RelativeLayout?
Si je ne me trompe pas je n'ai que de l'effet d'entraînement qui est appliqué à la RelativeLayout.

InformationsquelleAutor Edgar Da Silva Fernandes

J'ai mis en place un petit tutoriel pour faire

http://drzon.net/how-to-create-a-clearable-autocomplete-dropdown-with-autocompletetextview/

Aperçu

J'ai dû remplacer le SearchView avec AutoCompleteTextView comme le suggère.

Tout d'abord, créez un adaptateur. Dans mon cas, c'était un JSONObject ArrayAdapter. Les données que je voulais à afficher dans la liste déroulante, était un lieu nom et l'adresse du site. Notez que la carte doit être Filtarable et remplacer getFilter()

//adapter for the search dropdown auto suggest
ArrayAdapter<JSONObject> searchAdapter = new ArrayAdapter<JSONObject>(this, android.R.id.text1) {
private Filter filter;

public View getView(final int position, View convertView, ViewGroup parent) {
    if (convertView == null) {
        convertView = this.getLayoutInflater().inflate(R.layout.search_item, parent, false);
    }

    TextView venueName = (TextView) convertView.findViewById(R.id.search_item_venue_name);
    TextView venueAddress = (TextView) convertView.findViewById(R.id.search_item_venue_address);

    final JSONObject venue = this.getItem(position);
    convertView.setTag(venue);
    try {

        CharSequence name = highlightText(venue.getString("name"));
        CharSequence address = highlightText(venue.getString("address"));

        venueName.setText(name);
        venueAddress.setText(address);
    }
    catch (JSONException e) {
        Log.i(Consts.TAG, e.getMessage());
    }

    return convertView;

}

@Override
public Filter getFilter() {
    if (filter == null) {
        filter = new VenueFilter();
    }
    return filter;
}
};

Ici est la coutume VenueFilter :

private class VenueFilter extends Filter {
@Override
protected FilterResults performFiltering(CharSequence constraint) {
List<JSONObject> list = new ArrayList<JSONObject>(venues);
FilterResults result = new FilterResults();
String substr = constraint.toString().toLowerCase();
if (substr == null || substr.length() == 0) {
result.values = list;
result.count = list.size();
} else {
final ArrayList<JSONObject> retList = new ArrayList<JSONObject>();
for (JSONObject venue : list) {
try {
if (venue.getString("name").toLowerCase().contains(constraint) ||  venue.getString("address").toLowerCase().contains(constraint) || 
{
retList.add(venue);
}
} catch (JSONException e) {
Log.i(Consts.TAG, e.getMessage());
}
}
result.values = retList;
result.count = retList.size();
}
return result;
}
@SuppressWarnings("unchecked")
@Override
protected void publishResults(CharSequence constraint, FilterResults results) {
searchAdapter.clear();
if (results.count > 0) {
for (JSONObject o : (ArrayList<JSONObject>) results.values) {
searchAdapter.add(o);
}
}
}
}

Maintenant définir la mise en page de la zone de recherche (actionbar_search.xml) :

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:layout_gravity="fill_horizontal"
android:focusable="true" >
<AutoCompleteTextView
android:id="@+id/search_box"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:dropDownVerticalOffset="5dp"
android:dropDownWidth="wrap_content"
android:inputType="textAutoComplete|textAutoCorrect"
android:popupBackground="@color/white"
android:textColor="#FFFFFF" >
</AutoCompleteTextView>
</RelativeLayout>

Et la mise en page pour chaque déroulant élément (nom du site et adresse de lieu). Celui-ci semble mauvais, vous devrez le personnaliser:

<?xml version="1.0" encoding="UTF-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:textAlignment="gravity" >
<TextView
android:id="@+id/search_item_venue_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="@color/cyan"
android:layout_gravity="right" />
<TextView
android:id="@+id/search_item_venue_address"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_toStartOf="@+id/search_item_venue_name"
android:gravity="right"
android:textColor="@color/white" />
</RelativeLayout>

Ensuite, nous voulons le mettre dans la barre d'action

@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
ActionBar actionBar = getSupportActionBar();
actionBar.setDisplayOptions(ActionBar.DISPLAY_SHOW_CUSTOM | ActionBar.DISPLAY_USE_LOGO | ActionBar.DISPLAY_SHOW_HOME
| ActionBar.DISPLAY_HOME_AS_UP);
LayoutInflater inflater = (LayoutInflater)this.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
View v = inflater.inflate(R.layout.actionbar_search, null);
AutoCompleteTextView textView =  (AutoCompleteTextView) v.findViewById(R.id.search_box);
textView.setAdapter(searchAdapter);
textView.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
//do something when the user clicks
}
});
actionBar.setCustomView(v);
}

C'est à ce sujet, j'ai encore quelques trucs à découvrir :

Cela met un "toujours là" de recherche dans la barre d'action, je veux qu'elle soit comme la SearchView widget - une loupe en verre qui s'ouvre jusqu'à une zone de recherche lorsque vous cliquez dessus (et qui a une petite X bouton pour la fermer et revenir à la normale)
N'ai pas compris comment personnaliser la zone de liste déroulante encore, par exemple, le Gmail semble avoir de l'ombre, le mien est tout plat, changer la couleur de la ligne délimiteurs etc...

Globale cela permet d'économiser la totalité des frais généraux de la création d'un consultable activité. S'il vous plaît ajouter si vous savez comment le personnaliser, etc.

Pouvez-vous fournir github lien pour le projet?

InformationsquelleAutor Michael

2

Si vous souhaitez mettre en œuvre uniquement déroulant effet aller pour AutoCompleteTextView

Et vous pouvez trouver un bon tutoriel ici

Alors si vous souhaitez mettre en place exacte de la conception que vous avez à mettre en œuvre ActionBar
et si vous voulez mettre en œuvre pour abaisser la version u nécessité de mettre en œuvre ActionBarCombat
au lieu de ActionBar
- Merci, j'ai oublié de mentionner que j'étais déjà à l'aide de ActionBarCompat
InformationsquelleAutor NARESH REDDY
2

Vous devez utiliser ListPopupWindow et l'ancrer à l'affichage de la recherche widget.

InformationsquelleAutor Evgeni Roitburg
2

J'ai utilisé avec succès Michaels réponse (https://stackoverflow.com/a/18894726/2408033) mais je n'ai pas aimé la façon dont manuel il a été, en gonflant les points de vue et de l'ajouter à l'actionbar, le basculement de son état, etc.

Je l'ai modifié pour utiliser une ActionBar ActionView au lieu d'ajouter de vue manuellement à l'actionbar/barre d'outils.

Je trouve que cela fonctionne beaucoup mieux depuis que je n'ai pas besoin de gérer l'ouverture/fermeture de l'état et de cacher des points de vue comme il l'a fait dans son exemple dans le toggleSearch à la méthode d'ajout d'un lien. Il fonctionne également parfaitement avec le bouton de retour.

Dans mon menu.xml
```
 <item
android:id="@+id/global_search"
android:icon="@android:drawable/ic_menu_search"
android:title="Search"
app:actionLayout="@layout/actionbar_search"
app:showAsAction="ifRoom|collapseActionView" />
```
Dans mon onCreateOptionsMenu
```
 View actionView = menu.findItem(R.id.global_search).getActionView();
searchTextView = (ClearableAutoCompleteTextView) actionView.findViewById(R.id.search_box);
searchTextView.setAdapter(searchAdapter);
```
Vous pouvez trouver la version complète de la mise en œuvre de mon projet. Remarque: il existe deux points de vue que j'ai été en utilisant la réelle SearchView pour filtrer une liste.

https://github.com/babramovitch/ShambaTimes/blob/master/app/src/main/java/com/shambatimes/schedule/MainActivity.java

InformationsquelleAutor Ben987654
1

Veuillez vous référer à cet exemple qui implémente exactement ce dont vous avez demandé:
http://wptrafficanalyzer.in/blog/android-searchview-widget-with-actionbarcompat-library/

InformationsquelleAutor Evgeni Roitburg
-1

Vous devez utiliser collapseActionView attribut.

La collapseActionView attribut permet à votre SearchView de l'étendre à d'
prendre la totalité de la barre d'action et de réduire de retour vers le bas dans un normal
barre d'action de l'élément lorsqu'il n'est pas en cours d'utilisation.

Par exemple:
```
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="@+id/search"
android:title="@string/search_title"
android:icon="@drawable/ic_search"
android:showAsAction="collapseActionView|ifRoom"
android:actionViewClass="android.widget.SearchView" />
</menu>
```
InformationsquelleAutor Paresh Mayani

Vous devez vous connecter pour publier un commentaire.