Atualmente, estou aprendendo a converter meu aplicativo em design de materiais e estou um pouco preso no momento. Adicionei a Barra de ferramentas e fiz com que minha gaveta de navegação sobreponha todo o conteúdo.
Agora estou tentando criar uma pesquisa expansível que se pareça com a das diretrizes materiais :
é isso que eu tenho agora e não consigo descobrir como fazê-lo da maneira acima:
Este é o meu menu xml:
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<item
android:id="@+id/action_search"
android:icon="@android:drawable/ic_menu_search"
android:title="Search"
app:showAsAction="always"
app:actionViewClass="android.support.v7.widget.SearchView" />
</menu>
Isso funciona, recebo um item de menu que se expande para o SearchView e posso filtrar minha lista com precisão. Mas não parece nada com a primeira foto.
Eu tentei usar MenuItemCompat.setOnActionExpandListener()
em R.id.action_search
que eu pudesse alterar o ícone lar de uma seta para trás, mas que não parecem funcionar. Nada é disparado no ouvinte. Mesmo que isso funcionasse, ainda não estaria muito próximo da 1ª imagem.
Como crio um SearchView na nova barra de ferramentas appcompat semelhante às diretrizes de material?
Respostas:
Na verdade, é muito fácil fazer isso, se você estiver usando a
android.support.v7
biblioteca.Passo 1
Declarar um item de menu
Passo 2
Estenda
AppCompatActivity
e naonCreateOptionsMenu
configuração o SearchView.Resultado
fonte
navigate-back
botão, mas sim um ícone de pesquisa, e sua distância da borda esquerda da tela não é a mesma que aquela entre oX
ícone e a borda direita da tela (não tenho estouro de ação). Poste a pergunta aqui , você pode investigar?searchView.setIconifiedByDefault(false);
àonCreateOptionsMenu
função.app:showAsAction="always"
e NÃOapp:showAsAction="ifRoom|collapseActionView"
Depois de uma semana de intrigas sobre isso. Eu acho que descobri.
Agora estou usando apenas um EditText dentro da barra de ferramentas. Isso me foi sugerido pelo oj88 no reddit.
Agora tenho o seguinte:
Primeiro, dentro do onCreate () da minha atividade, adicionei o EditText com uma visualização de imagem no lado direito da barra de ferramentas, como segue:
Isso funcionou, mas então me deparei com um problema em que onOptionsItemSelected () não estava sendo chamado quando toquei no botão home. Portanto, não pude cancelar a pesquisa pressionando o botão home. Tentei algumas maneiras diferentes de registrar o ouvinte de cliques no botão home, mas elas não funcionaram.
Eventualmente, descobri que o ActionBarDrawerToggle estava interferindo nas coisas, então o removi. Este ouvinte começou a trabalhar:
Portanto, agora posso cancelar a pesquisa com o botão home, mas não posso pressionar o botão voltar para cancelar ainda. Então eu adicionei isso ao onBackPressed ():
Eu criei este método para alternar a visibilidade do EditText e do item de menu:
Eu precisava de uma maneira de alternar o botão home na barra de ferramentas entre o ícone da gaveta e o botão voltar. Acabei encontrando o método abaixo nesta resposta SO . Embora eu tenha modificado um pouco para fazer mais sentido para mim:
Isso funciona, eu consegui resolver alguns bugs que encontrei ao longo do caminho. Eu não acho que é 100%, mas funciona bem o suficiente para mim.
EDIT: Se você deseja adicionar a exibição de pesquisa em XML em vez de Java, faça o seguinte:
toolbar.xml:
onCreate () da sua atividade:
fonte
Eu sei que é um tópico antigo, mas ainda estou postando a biblioteca que acabei de criar. Espero que isso possa ajudar alguém.
https://github.com/Shahroz16/material-searchview
fonte
A primeira captura de tela da sua pergunta não é um widget público. O suporte SearchView (
android.support.v7.widget.SearchView
) imita o SearchView ( ) do Android 5.0 Lollipopandroid.widget.SearchView
. Sua segunda captura de tela é usada por outros aplicativos projetados por material, como o Google Play.O SearchView na sua primeira captura de tela é usado no Drive, YouTube e outro Google Apps de código fechado. Felizmente, também é usado no Android 5.0 Dialer . Você pode tentar fazer o backport da exibição, mas ele usa algumas APIs 5.0.
As classes que você deseja consultar são:
SearchEditTextLayout , AnimUtils e DialtactsActivity para entender como usar a Visualização. Você também precisará de recursos do ContactsCommon .
Boa sorte.
fonte
Aqui está minha tentativa de fazer isso:
Etapa 1: criar um estilo chamado
SearchViewStyle
Etapa 2: criar um layout chamado
simple_search_view_item.xml
Etapa 3: criar um item de menu para esta exibição de pesquisa
Etapa 4: Inflar o menu
Resultado:
A única coisa que eu não era capaz de fazer era preencher toda a largura do arquivo
Toolbar
. Se alguém pudesse me ajudar a fazer isso, seria dourado.fonte
I wasn't able to do was to make it fill the entire width
, qual versão da biblioteca de suporte você está usando? Tente configurarapp:contentInsetStartWithNavigation="0dp"
a sua barra de ferramentas.Para obter a aparência desejada do SearchView, você pode usar estilos.
Primeiro, você precisa criar
style
para o seu SearchView, que deve ser algo como isto:Lista inteira de atributos que você pode encontrar neste artigo, na seção "SearchView".
Em segundo lugar, você precisa criar um
style
para o seuToolbar
, que é usado como ActionBar:E, finalmente, você precisa atualizar o atributo do tema da barra de ferramentas da seguinte maneira:
Resultado:
NOTA: Você precisa alterar
Toolbar
diretamente o atributo do tema. Se você apenas atualizar seusearchViewStyle
atributo de tema principal , isso não afetará o seuToolbar
.fonte
navigate-back
(seta para trás) ecancel
(x) ou eles foram adicionados automaticamente?navigate-back
é sempre mostrado,clear
é mostrado somente depois que você escreve alguma consulta de pesquisa.Outra maneira de obter o efeito desejado é usar esta biblioteca de exibição de pesquisa de material . Ele lida com o histórico de pesquisa automaticamente e também é possível fornecer sugestões de pesquisa para a visualização.
Amostra: (É exibido em português, mas também funciona em inglês e italiano).
Configuração
Antes de poder usar essa lib, você deve implementar uma classe nomeada
MsvAuthority
dentro dobr.com.mauker
pacote no seu módulo de aplicativo e ela deve ter uma variável String estática pública chamadaCONTENT_AUTHORITY
. Dê o valor que você deseja e não se esqueça de adicionar o mesmo nome ao seu arquivo de manifesto. A lib usará esse arquivo para definir a autoridade do provedor de conteúdo.Exemplo:
MsvAuthority.java
AndroidManifest.xml
Uso
Para usá-lo, adicione a dependência:
E então, no seu
Activity
arquivo de layout, adicione o seguinte:Depois disso, você só precisará obter a
MaterialSearchView
referência usandogetViewById()
e abrir ou fechá-la usandoMaterialSearchView#openSearch()
eMaterialSearchView#closeSearch()
.PS: É possível abrir e fechar a visualização, não apenas a partir do
Toolbar
. Você pode usar oopenSearch()
método de basicamente qualquerButton
, como um botão de ação flutuante.Você também pode fechar a exibição usando o botão Voltar, fazendo o seguinte:
Para mais informações sobre como usar a lib, consulte a página do github .
fonte
A seguir, será criado um SearchView idêntico ao do Gmail e será adicionado à barra de ferramentas fornecida. Você apenas precisará implementar seu próprio método "ViewUtil.convertDpToPixel".
fonte