web-dev-qa-db-fra.com

Comment afficher une vue personnalisée dans ActionBar?

Je souhaite afficher une recherche personnalisée dans la barre d’action (j’utilise ActionBarSherlock pour cela).

J'ai compris:

enter image description here

Mais je veux que la disposition personnalisée (champ edittext) occupe toute la largeur disponible.

J'ai mis en place une disposition personnalisée comme suggéré ici .

Il y a ma mise en page personnalisée search.xml:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
    style="?attr/actionButtonStyle"
    Android:layout_width="fill_parent"
    Android:layout_height="match_parent"
    Android:layout_gravity="fill_horizontal"
    Android:focusable="true" >

    <FrameLayout
        Android:layout_width="fill_parent"
        Android:layout_height="wrap_content"
        Android:layout_gravity="center_vertical|fill_horizontal" >

        <EditText
            Android:id="@+id/search_query"
            Android:layout_width="fill_parent"
            Android:layout_height="wrap_content"
            Android:layout_gravity="left|center"
            Android:background="@drawable/bg_search_edit_text"
            Android:imeOptions="actionSearch"
            Android:inputType="text" />

        <ImageView
            Android:layout_width="wrap_content"
            Android:layout_height="wrap_content"
            Android:layout_gravity="right|center_vertical"
            Android:src="@drawable/ic_search_arrow" />

    </FrameLayout>

</LinearLayout>

Et dans MyActivity:

ActionBar actionBar = getSupportActionBar();
actionBar.setDisplayHomeAsUpEnabled(true);
actionBar.setDisplayShowCustomEnabled(true);
actionBar.setDisplayShowTitleEnabled(false);
actionBar.setIcon(R.drawable.ic_action_search);

LayoutInflater inflator = (LayoutInflater) this .getSystemService(Context.LAYOUT_INFLATER_SERVICE);
View v = inflator.inflate(R.layout.search, null);

actionBar.setCustomView(v);

Comment créer une mise en page personnalisée qui occupe toute la largeur disponible de actionBar?

Aidez-moi, s'il vous plaît.

91
Sabre

Il y a un truc pour ça. Tout ce que vous avez à faire est d’utiliser RelativeLayout au lieu de LinearLayout comme conteneur principal. C'est important d'avoir Android:layout_gravity="fill_horizontal" réglé pour cela. Ça devrait le faire.

95
Tomik

J'ai moi-même eu du mal avec cela et j'ai essayé de répondre à Tomik. Toutefois, cela n'a pas rendu la mise en page sur toute la largeur disponible au début, uniquement lorsque vous avez ajouté quelque chose à la vue.

Vous devrez définir le LayoutParams.FILL_PARENT lors de l'ajout de la vue:

//I'm using actionbarsherlock, but it's the same.
LayoutParams layout = new LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT);
getSupportActionBar().setCustomView(overlay, layout); 

De cette façon, il remplit complètement l'espace disponible. (Vous devrez peut-être aussi utiliser la solution de Tomik).

36
Peterdk

Voici comment cela a fonctionné pour moi (à partir des réponses ci-dessus, il montrait aussi bien le titre par défaut que ma vue personnalisée).

ActionBar.LayoutParams layout = new ActionBar.LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.WRAP_CONTENT);
// actionBar.setCustomView(view); //last view item must set to Android:layout_alignParentRight="true" if few views are there 
actionBar.setCustomView(view, layout); // layout param width=fill/match parent
actionBar.setDisplayShowCustomEnabled(true);//must other wise its not showing custom view.

Ce que j'ai remarqué, c’est que setCustomView(view) et setCustomView(view,params) la largeur de la vue = correspondance/remplissage parent. setDisplayShowCustomEnabled (boolean showCustom)

7
Bharatesh

Les réponses de Tomik et Peterdk fonctionnent lorsque vous souhaitez que votre vue personnalisée occupe l'intégralité de la barre d'actions , même en masquant le titre natif.

Mais si vous souhaitez que votre affichage personnalisé cohabite avec le titre (et remplisse tout l'espace restant après l'affichage du titre), je vous renvoie à l'excellente réponse de l'utilisateur Android-Developer ici:

https://stackoverflow.com/a/16517395/61488

Son code au bas a parfaitement fonctionné pour moi.

6
Mike Repass

Par exemple, vous pouvez définir un fichier de mise en page contenant un élément EditText.

<?xml version="1.0" encoding="utf-8"?>
<EditText xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:id="@+id/searchfield"
    Android:layout_width="match_parent"
    Android:layout_height="match_parent"
    Android:inputType="textFilter" >

</EditText> 

tu peux faire

public class MainActivity extends Activity {

  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    ActionBar actionBar = getActionBar();
    // add the custom view to the action bar
    actionBar.setCustomView(R.layout.actionbar_view);
    EditText search = (EditText) actionBar.getCustomView().findViewById(R.id.searchfield);
    search.setOnEditorActionListener(new OnEditorActionListener() {

      @Override
      public boolean onEditorAction(TextView v, int actionId,
          KeyEvent event) {
        Toast.makeText(MainActivity.this, "Search triggered",
            Toast.LENGTH_LONG).show();
        return false;
      }
    });
    actionBar.setDisplayOptions(ActionBar.DISPLAY_SHOW_CUSTOM
        | ActionBar.DISPLAY_SHOW_HOME);


    }
3
BoldHD

Il existe un exemple dans l'application de lancement de Android (ici, j'ai créé une bibliothèque)), à l'intérieur de la classe qui gère la sélection de fonds d'écran ("WallpaperPickerActivity").

L'exemple montre que vous devez définir un thème personnalisé pour que cela fonctionne. Malheureusement, cela n’a fonctionné pour moi qu’en utilisant le framework normal, et non celui de la bibliothèque de support.

Voici les thèmes:

styles.xml

 <style name="Theme.WallpaperPicker" parent="Theme.WallpaperCropper">
    <item name="Android:windowBackground">@Android:color/transparent</item>
    <item name="Android:colorBackgroundCacheHint">@null</item>
    <item name="Android:windowShowWallpaper">true</item>
  </style>

  <style name="Theme.WallpaperCropper" parent="@Android:style/Theme.DeviceDefault">
    <item name="Android:actionBarStyle">@style/WallpaperCropperActionBar</item>
    <item name="Android:windowFullscreen">true</item>
    <item name="Android:windowActionBarOverlay">true</item>
  </style>

  <style name="WallpaperCropperActionBar" parent="@Android:style/Widget.DeviceDefault.ActionBar">
    <item name="Android:displayOptions">showCustom</item>
    <item name="Android:background">#88000000</item>
  </style>

valeur-v19/styles.xml

 <style name="Theme.WallpaperCropper" parent="@Android:style/Theme.DeviceDefault">
    <item name="Android:actionBarStyle">@style/WallpaperCropperActionBar</item>
    <item name="Android:windowFullscreen">true</item>
    <item name="Android:windowActionBarOverlay">true</item>
    <item name="Android:windowTranslucentNavigation">true</item>
  </style>

  <style name="Theme" parent="@Android:style/Theme.DeviceDefault.Wallpaper.NoTitleBar">
    <item name="Android:windowTranslucentStatus">true</item>
    <item name="Android:windowTranslucentNavigation">true</item>
  </style>

EDIT: il existe un meilleur moyen de le faire, qui fonctionne aussi sur la bibliothèque de support. Ajoutez simplement cette ligne de code au lieu de ce que j'ai écrit ci-dessus:

getSupportActionBar().setDisplayShowCustomEnabled(true);
1