Como exibir a visualização personalizada no ActionBar?


92

Quero exibir a pesquisa personalizada na actionbar (estou usando ActionBarSherlock para isso).

Eu entendi:

insira a descrição da imagem aqui

Mas eu quero fazer um layout personalizado (campo de texto de edição) para ocupar toda a largura disponível.

Implementei o layout personalizado conforme sugerido aqui .

Este é o meu layout personalizado 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>

E em 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);

Como posso fazer um layout personalizado para ocupar toda a largura disponível actionBar?

Ajuda por favor.


Você consegue definir o título com o conjunto de visualização personalizada?
Roy Lee

Respostas:


95

Existe um truque para isso. Tudo que você precisa fazer é usar em RelativeLayoutvez de LinearLayoutcomo o contêiner principal. É importante ter android:layout_gravity="fill_horizontal"definido para isso. Isso deve resolver.


3
@Tomik Você poderia dar uma olhada no meu cenário? stackoverflow.com/questions/16516306/… Eu perdi o título depois que a visualização personalizada foi definida.
Roy Lee

36

Eu mesma lutei contra isso e tentei a resposta de Tomik. No entanto, isso não fez o layout ficar com a largura total disponível no início, apenas quando você adicionasse algo à visualização.

Você precisará definir o LayoutParams.FILL_PARENTao adicionar a visualização:

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

Desta forma, preenche totalmente o espaço disponível. (Você pode precisar usar a solução de Tomik também).


2
+1, na verdade, só funcionou para mim depois de adicionar os LayoutParams, thnx
Mahmoud Badri

1
qual é o valor de sobreposição?
androidevil

2
@androider é a sua visualização personalizada. Aumentado de xml ou criado em código.
Bilthon

8

É assim que funcionou para mim (pelas respostas acima, mostrava tanto o título padrão quanto minha visualização personalizada).

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.

O que notei é que ambos setCustomView(view)e setCustomView(view,params)o pai view width = match / fill. setDisplayShowCustomEnabled (boolean showCustom)


6

As respostas de Tomik e Peterdk funcionam quando você deseja que sua visualização personalizada ocupe todo o barra de ação, até mesmo ocultando o título nativo.

Mas se você quiser que sua visualização personalizada fique lado a lado com o título (e preencha todo o espaço restante após a exibição do título), posso encaminhá-lo para a excelente resposta do usuário Android-Developer aqui:

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

Seu código, no fundo, funcionou perfeitamente para mim.


3

Por exemplo, você pode definir um arquivo de layout que contém um elemento 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> 

você pode fazer

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);


    }

economizou minhas n horas. Obrigado
CrazyMind de

1

Há um exemplo no aplicativo inicializador do Android (que fiz uma biblioteca com ele, aqui), dentro da classe que lida com a seleção de papéis de parede ("WallpaperPickerActivity").

O exemplo mostra que você precisa definir um tema personalizado para que isso funcione. Infelizmente, isso funcionou para mim apenas usando a estrutura normal, e não a da biblioteca de suporte.

Aqui estão os temas:

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>

value-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>

EDITAR: existe uma maneira melhor de fazer isso, que funciona na biblioteca de suporte também. Basta adicionar esta linha de código em vez do que escrevi acima:

getSupportActionBar().setDisplayShowCustomEnabled(true);
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.