Eu vi no novo design de material Side Nav Spec que você pode exibir a gaveta sobre a barra de ação e atrás da barra de status. Como posso implementar isso?
android
navigation-drawer
android-appcompat
Chris Banes
fonte
fonte
Respostas:
Novas funcionalidades na estrutura e nas bibliotecas de suporte permitem exatamente isso. Existem três 'peças do quebra-cabeça':
fitsSystemWindows
para que seja colocado atrás das barras do sistema.Theme.Material
a coloração normal da barra de status para que DrawerLayout possa desenhar lá.Presumo que você usará o novo appcompat.
Primeiro, seu layout deve ficar assim:
Então em sua Atividade / Fragmento:
Então você precisa garantir que o DrawerLayout esteja visível atrás da barra de status. Você faz isso alterando o tema values-v21:
values-v21 / themes.xml
Nota: Se a
<fragment android:name="fragments.NavigationDrawerFragment">
é usado em vez deNo layout real, o efeito desejado será alcançado se você chamar
fitsSystemWindows(boolean)
uma exibição que retorne doonCreateView
método.fonte
DrawerLayout
é necessário que ele seja colocado atrás das barras do sistema. Você precisa configurá-lo na vista da gaveta para queDrawerLayout
ele fique dentro das inserções da janela.layout_marginTop
na raiz do layout do conteúdo da gaveta. Caso contrário, o plano de fundo do layout do conteúdo da gaveta será desenhado na parte superior da barra de status e todo o resto será pressionado. No entanto, isso parece ser uma solução meio grosseira, tanto quanto eu sei que não há? Attr / statusBarSize ou algo parecido com o fornecido pelo Android.EDIT: A nova Biblioteca de Suporte de Design suporta isso e o método anterior não é mais necessário.
Agora isso pode ser conseguido usando a nova Biblioteca de Suporte de Design Android .
Você pode ver o aplicativo de exemplo Cheesesquare de Chris Banes, que demonstra todos os novos recursos.
Método anterior:
Como não há uma solução completa postada, eis o modo como atingi o resultado desejado.
Primeiro, inclua um ScrimInsetsFrameLayout no seu projeto.
Em seguida, crie um estilo para que
insetForeground
possa ser definido.values / attrs.xml
Atualize o arquivo xml da sua atividade e verifique se
android:fitsSystemWindows
está definido como true tanto noDrawerLayout
quanto noScrimInsetsFrameLayout
.layout / activity_main.xml
Dentro do método onCreate da sua atividade, defina a cor de fundo da barra de status no layout da gaveta.
MainActivity.java
Por fim, atualize o tema do seu aplicativo para que
DrawerLayout
fique atrás da barra de status.values-v21 / styles.xml
Resultado:
fonte
Com o lançamento da mais recente Biblioteca de suporte Android (rev 22.2.0) , temos uma Biblioteca de suporte a design e, como parte disso, uma nova exibição chamada NavigationView . Então, em vez de fazer tudo por conta própria com
ScrimInsetsFrameLayout
todas as outras coisas, simplesmente usamos essa visão e tudo é feito por nós.Exemplo
Passo 1
Adicione o
Design Support Library
ao seubuild.gradle
arquivoPasso 2
Adicione
NavigationView
ao seuDrawerLayout
:etapa 3
Crie um novo recurso de menu
/res/menu
e adicione os itens e ícones que deseja exibir:Passo 4
Inicie o NavigationView e manipule eventos de clique:
Etapa 5
Certifique-se de definir
android:windowDrawsSystemBarBackgrounds
eandroid:statusBarColor
,values-v21
caso contrário, sua gaveta não será exibida "sob" a Barra de StatusEtapa opcional
Adicione um cabeçalho ao NavigationView. Para isso, basta criar um novo layout e adicionar
app:headerLayout="@layout/my_header_layout"
ao NavigationView.Resultado
Notas
colorPrimary
atributotextColorPrimary
atributotextColorSecondary
atributoVocê também pode verificar o aplicativo de exemplo de Chris Banes, que destaca o NavigationView junto com os outros novos modos de exibição que fazem parte da Biblioteca de suporte de design (como FloatingActionButton , TextInputLayout , Snackbar , TabLayout etc.)
fonte
<item name="itemTextColor">@color/YOUR_COLOR</item>
<item name="itemIconTint">@color/YOUR_COLOR</item>
Toolbar
- não há nenhuma maneira de fazer isso com umActionBar
mDrawerLayout.openDrawer(GravityCompat.START);
onde quiser. Se você estiver usando um,ActionBarDrawerToggle
isso deve ser feito automaticamente assim que você clicar no ícone do hambúrguer.Faça com que funcione, nos estilos values-v21 ou no tema xml precisa usar este atributo:
<item name="android:windowTranslucentStatus">true</item>
Isso faz a mágica!
fonte
As abordagens acima estão corretas e podem estar funcionando. Eu criei uma demonstração de trabalho seguindo o guia acima e testei em 2.x a 5.x
Você pode clonar no Github
O importante é brincar na Atividade Principal
e a ligação de volta
Absolutamente o Tema para V21 faz a mágica
e o ScrimInsetsFrameLayout
Agora isso ficou mais fácil com a nova biblioteca de Design Design
clone de @Chris Banes https://github.com/chrisbanes/cheesesquare
fonte
Todas as respostas mencionadas aqui são muito antigas e demoradas. A melhor e mais curta solução que funciona com o Navigationview mais recente é
isso mudará a cor da barra de status para transparente quando você abrir a gaveta
Agora, quando você fechar a gaveta, precisará alterar novamente a cor da barra de status para escuro.
e, em seguida, no layout principal, adicione uma única linha, ou seja,
e o layout da sua gaveta será semelhante
e sua visualização de navegação será semelhante
Se você está procurando por uma solução para o seu problema, entre em contato com o suporte técnico da Microsoft para obter mais informações. Marque-o se isso ajudar.
fonte
Estou usando a Biblioteca de suporte de design. E apenas usando o tema personalizado, obtive a Barra de status transparente ao abrir a gaveta de navegação.
Por fim, adicione o tema no arquivo de manifesto
Não se esqueça de usar a propriedade,
android:fitsSystemWindows="true"
em "DrawerLayout"fonte
Este é o mais simples e funcionou para mim:
Nos valores-21:
Nos valores:
E defina na sua barra de ferramentas
fonte
24dp
para a margem superior.Em vez de usar o
ScrimInsetsFrameLayout
... Não é mais fácil adicionar apenas uma exibição com uma altura fixa24dp
e um plano de fundoprimaryColor
?Entendo que isso envolve adicionar uma visão fictícia na hierarquia, mas me parece mais limpo.
Eu já tentei e está funcionando bem.
fonte
Tente com isto:
estilo :
Atividade principal estende ActionBarActivity
Agora você pode
onCreateOptionsMenu
gostar da ActionBar normal com a ToolBar.Este é o meu layout
Espero que você entenda, divirta-se!
fonte