Como implementar DrawerArrowToggle da biblioteca Android appcompat v7 21


97

Agora que o Android 5.0 foi lançado, eu queria saber como implementar os ícones animados da barra de ações.

Esta biblioteca aqui o implementa bem para mim, mas como a biblioteca appcompat v7 o possui, como pode ser implementado?

A biblioteca faz referência a ele em themes.xml

 <item name="drawerArrowStyle">@style/Widget.AppCompat.DrawerArrowToggle</item>

Sob este estilo

 <style name="Base.V7.Theme.AppCompat" parent="Platform.AppCompat">

ATUALIZAR

Implementei isso usando o DrawerToggle v7. No entanto, não posso estilizá-lo. Por favor ajude

Encontrei o estilo dele no v7 styles_base.xml

<style name="Base.Widget.AppCompat.DrawerArrowToggle" parent="">
    <item name="color">?android:attr/textColorSecondary</item>
    <item name="thickness">2dp</item>
    <item name="barSize">18dp</item>
    <item name="gapBetweenBars">3dp</item>
    <item name="topBottomBarArrowSize">11.31dp</item>
    <item name="middleBarArrowSize">16dp</item>
    <item name="drawableSize">24dp</item>
    <item name="spinBars">true</item>
</style>

Eu adicionei isso aos meus estilos e não funcionou. Também adicionado ao meu attr.xml

<declare-styleable name="DrawerArrowToggle">
    <!-- The drawing color for the bars -->
    <attr name="color" format="color"/>
    <!-- Whether bars should rotate or not during transition -->
    <attr name="spinBars" format="boolean"/>
    <!-- The total size of the drawable -->
    <attr name="drawableSize" format="dimension"/>
    <!-- The max gap between the bars when they are parallel to each other -->
    <attr name="gapBetweenBars" format="dimension"/>
    <!-- The size of the top and bottom bars when they merge to the middle bar to form an arrow -->
    <attr name="topBottomBarArrowSize" format="dimension"/>
    <!-- The size of the middle bar when top and bottom bars merge into middle bar to form an arrow -->
    <attr name="middleBarArrowSize" format="dimension"/>
    <!-- The size of the bars when they are parallel to each other -->
    <attr name="barSize" format="dimension"/>
    <!-- The thickness (stroke size) for the bar paint -->
    <attr name="thickness" format="dimension"/>
</declare-styleable>

Mas trava e diz erro de tipo de cor ao fazer isso. O que estou perdendo?

Respostas:


243

Primeiro, você deve saber agora que o android.support.v4.app.ActionBarDrawerToggleestá obsoleto.

Você deve substituir isso por android.support.v7.app.ActionBarDrawerToggle.

Aqui está meu exemplo e uso o novo Toolbarpara substituir o ActionBar.

MainActivity.java

public class MainActivity extends ActionBarActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    Toolbar mToolbar = (Toolbar) findViewById(R.id.toolbar);
    setSupportActionBar(mToolbar);
    DrawerLayout mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
    ActionBarDrawerToggle mDrawerToggle = new ActionBarDrawerToggle(
        this,  mDrawerLayout, mToolbar,
        R.string.navigation_drawer_open, R.string.navigation_drawer_close
    );
    mDrawerLayout.setDrawerListener(mDrawerToggle);
    getSupportActionBar().setDisplayHomeAsUpEnabled(true);
    getSupportActionBar().setHomeButtonEnabled(true);
    mDrawerToggle.syncState();
}

styles.xml

<style name="AppTheme" parent="Theme.AppCompat.Light">
    <item name="drawerArrowStyle">@style/DrawerArrowStyle</item>
</style>

<style name="DrawerArrowStyle" parent="Widget.AppCompat.DrawerArrowToggle">
    <item name="spinBars">true</item>
    <item name="color">@android:color/white</item>
</style>

Você pode ler os documentos em AndroidDocument # DrawerArrowToggle_spinBars

Este atributo é a chave para implementar a animação menu-seta.

public static int DrawerArrowToggle_spinBars

Se as barras devem girar ou não durante a transição
Deve ser um valor booleano, "verdadeiro" ou "falso".

Então, você define esse: <item name="spinBars">true</item>.

Em seguida, a animação pode ser apresentada.

Espero que isso possa ajudá-lo.


12
Tive problemas para exibir o ícone do hambúrguer. chamar mDrawerToggle.syncState();consertou.
— aheuermann

1
para mim getSupportActionBar () retorna null .. qual poderia ser o motivo?
— Ramesh_D

2
Android Studio diz Cannot resolve method setSupportActionBar(android.widget.Toolbar). Eu também tentei com android.support.v7.toolbar. Alguém sabe por que isso acontece?
— pez

1
Usei setSupportActionBar(mToolbar);e também defini, <item name="spinBars">true</item>mas a animação não está funcionando
— SweetWisher ツ

2
Deve usar ActionBarDrawerToggle (Activity, DrawerLayout, int, int) se você estiver definindo a barra de ferramentas como a ActionBar de sua atividade.
— Peter Zhao

24

Se estiver usando o DrawerLayout fornecido pela Biblioteca de Suporte, conforme sugerido no treinamento Criando uma gaveta de navegação , você pode usar o android.support recém-adicionado . v7 .app.ActionBarDrawerToggle (observação: diferente do agora obsoleto android.support. v4 .app.ActionBarDrawerToggle ):

mostra um ícone de Hambúrguer quando a gaveta está fechada e uma seta quando a gaveta está aberta. Ele se anima entre esses dois estados conforme a gaveta é aberta.

Embora o treinamento não tenha sido atualizado para levar em consideração a depreciação / nova classe, você deve ser capaz de usá-lo quase exatamente o mesmo código - a única diferença na implementação é o construtor.


Estou usando o v4 no meu aplicativo bc, não preciso oferecer suporte a dispositivos anteriores ao api 15. Então, se eu quisesse que isso funcionasse, eu teria que usar o botão de alternância da gaveta da barra de ação v7? Se eu fizesse isso, não teria que converter todos os meus estilos em AppCompat e fragmentar atividades em atividades da barra de ação e assim por diante? Ou posso implementar apenas a alternância de gaveta da v7. Agora eu uso a v7 para visualizações de cartão. Devo usar v4 se não for compatível com API abaixo de 15? E acho que preciso da v7 para as visualizações de cartão.
— Bignadad,

Toda a compatibilidade da Biblioteca de Suporte para Material design é implementada em v7-appcompat e é recomendada se você deseja oferecer suporte a esse estilo em dispositivos <5.0. O AppCompat é desenvolvido e requer a v4, portanto, depende realmente se você deseja usar o AppCompat. Se você já estiver usando FragmentActivity, você já está bem perto - a diferença no estilo é bem pequena agora (principalmente substituindo os atributos android: por atributos sem namespace).
— ianhanniballake

Atualizou a pergunta se você não se importasse de dar uma olhada
— Bignadad

Essa é realmente uma questão totalmente separada sobre estilo. Eu sugiro enviar essa parte como uma outra pergunta (fique à vontade para adicionar um comentário com um link).
— ianhanniballake

1
@mraviator - sim: altere o XML e, em seguida, crie e anexe a v7 ActionBarDrawerToggle. A resposta canônica do criador do AppCompat tem um exemplo completo de como seu XML deve ser estruturado.
— ianhanniballake

17

Eu criei um pequeno aplicativo que tinha uma funcionalidade semelhante

Atividade principal

public class MyActivity extends ActionBarActivity {

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

        DrawerLayout drawerLayout = (DrawerLayout) findViewById(R.id.drawer);
        android.support.v7.widget.Toolbar toolbar = (android.support.v7.widget.Toolbar) findViewById(R.id.toolbar);
        ActionBarDrawerToggle actionBarDrawerToggle = new ActionBarDrawerToggle(
                this,
                drawerLayout,
                toolbar,
                R.string.open,
                R.string.close
        )

        {
            public void onDrawerClosed(View view)
            {
                super.onDrawerClosed(view);
                invalidateOptionsMenu();
                syncState();
            }

            public void onDrawerOpened(View drawerView)
            {
                super.onDrawerOpened(drawerView);
                invalidateOptionsMenu();
                syncState();
            }
        };
        drawerLayout.setDrawerListener(actionBarDrawerToggle);

        //Set the custom toolbar
        if (toolbar != null){
            setSupportActionBar(toolbar);
        }

        getSupportActionBar().setDisplayHomeAsUpEnabled(true);

        actionBarDrawerToggle.syncState();
    }
}

Meu XML dessa atividade

<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MyActivity"
    android:id="@+id/drawer"
    >

    <!-- The main content view -->
    <FrameLayout
        android:id="@+id/content_frame"
        android:layout_width="match_parent"
        android:layout_height="match_parent" >
        <include layout="@layout/toolbar_custom"/>
    </FrameLayout>
    <!-- The navigation drawer -->
    <ListView
        android:layout_marginTop="?attr/actionBarSize"
        android:id="@+id/left_drawer"
        android:layout_width="240dp"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:choiceMode="singleChoice"
        android:divider="@android:color/transparent"
        android:dividerHeight="0dp"
        android:background="#457C50"/>


</android.support.v4.widget.DrawerLayout>

XML da minha barra de ferramentas personalizada

<?xml version="1.0" encoding="utf-8"?>

<android.support.v7.widget.Toolbar
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:id="@+id/toolbar"
    android:background="?attr/colorPrimaryDark">
    <TextView android:text="U titel"
        android:textAppearance="@android:style/TextAppearance.Theme"
        android:textColor="@android:color/white"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        />
</android.support.v7.widget.Toolbar>

Meu estilo de tema

<resources>
    <style name="AppTheme" parent="Base.Theme.AppCompat"/>

    <style name="AppTheme.Base" parent="Theme.AppCompat">
        <item name="colorPrimary">@color/primary</item>
        <item name="colorPrimaryDark">@color/primaryDarker</item>
        <item name="android:windowNoTitle">true</item>
        <item name="windowActionBar">false</item>
        <item name="drawerArrowStyle">@style/DrawerArrowStyle</item>
    </style>

    <style name="DrawerArrowStyle" parent="Widget.AppCompat.DrawerArrowToggle">
        <item name="spinBars">true</item>
        <item name="color">@android:color/white</item>
    </style>

    <color name="primary">#457C50</color>
    <color name="primaryDarker">#580C0C</color>
</resources>

Meus estilos em valores-v21

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="AppTheme" parent="AppTheme.Base">
        <item name="android:windowContentTransitions">true</item>
        <item name="android:windowAllowEnterTransitionOverlap">true</item>
        <item name="android:windowAllowReturnTransitionOverlap">true</item>
        <item name="android:windowSharedElementEnterTransition">@android:transition/move</item>
        <item name="android:windowSharedElementExitTransition">@android:transition/move</item>
    </style>
</resources>

1
Isso funciona perfeitamente, mas eu não quero usar o título, então como posso lidar com isso? Porque se eu usar Theme.AppCompat.Light.NoActionBar , ele definitivamente vai me dar NULL em getSupportActionBar
— SweetWisher ツ

Usei o código acima. I got Exception: This Activity já tem uma barra de ação fornecida pela janela decor na linha setsupportactionbar (barra de ferramentas). Usei getSupportActionBar (). Hide (); Antes de setContentView (R.layout.activity_main); Agora está funcionando.
— Thirumalvalavan

setSupportActionBar (barra de ferramentas); também comentou.
— Thirumalvalavan

9

Para responder à parte atualizada da sua pergunta: para estilizar o ícone / seta da gaveta, você tem duas opções:

Defina o estilo da própria seta

Para fazer isso, substitua drawerArrowStyleem seu tema assim:

<style name="AppBaseTheme" parent="Theme.AppCompat.Light">
    <item name="drawerArrowStyle">@style/MyTheme.DrawerArrowToggle</item>
</style>
<style name="MyTheme.DrawerArrowToggle" parent="Widget.AppCompat.DrawerArrowToggle">
    <item name="color">@android:color/holo_purple</item>
    <!-- ^ this will make the icon purple -->
</style>

Provavelmente não é isso que você deseja , porque a própria ActionBar deve ter um estilo consistente com a seta, então, provavelmente, você deseja a opção dois:

Tema a ActionBar / Toolbar

Substitua o atributo android:actionBarTheme( actionBarThemefor appcompat) do tema do aplicativo global por seu próprio tema (do qual você provavelmente deve derivar ThemeOverlay.Material.ActionBar/ThemeOverlay.AppCompat.ActionBar) assim:

<style name="AppBaseTheme" parent="Theme.AppCompat.Light">
    <item name="actionBarTheme">@style/MyTheme.ActionBar</item>
</style>
<style name="MyTheme.ActionBar" parent="ThemeOverlay.AppCompat.ActionBar">
    <item name="android:textColorPrimary">@android:color/white</item>
    <!-- ^ this will make text and arrow white -->
    <!-- you can also override drawerArrowStyle here -->
</style>

Uma observação importante aqui é que ao usar um layout personalizado com uma Toolbarimplementação ActionBar em vez de estoque (por exemplo, se você estiver usando a combinação DrawerLayout- NavigationView- Toolbarpara obter o efeito de gaveta de estilo de material onde é visível sob a barra de status translúcida), o actionBarThemeatributo obviamente não escolhido automaticamente (porque deve ser cuidado pelo AppCompatActivitypadrão ActionBar), portanto, para o seu costume Toolbar, não se esqueça de aplicar o tema manualmente:

<!--inside your custom layout with DrawerLayout
and NavigationView or whatever -->
<android.support.v7.widget.Toolbar
        ...
        app:theme="?actionBarTheme">

- isso resolverá o padrão do AppCompat ThemeOverlay.AppCompat.ActionBarou a sua substituição se você definir o atributo em seu tema derivado.

PS, um pequeno comentário sobre a drawerArrowStylesubstituição e o spinBarsatributo - que várias fontes sugerem que deve ser definido truepara obter a animação da gaveta / seta. Coisa é, spinBarsé true por padrão no AppCompat (confira o Base.Widget.AppCompat.DrawerArrowToggle.Commonestilo), você não tem que substituir actionBarThemeem tudo para obter o trabalho de animação. Você obtém a animação mesmo se substituí-la e definir o atributo como false, é apenas uma animação diferente, menos sinuosa. O importante aqui é usar ActionBarDrawerToggle, é o que puxa o desenho animado extravagante.


2

Eu quero corrigir um pouco o código acima

    public class MainActivity extends ActionBarActivity {
        @Override
        protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        Toolbar mToolbar = (Toolbar) findViewById(R.id.toolbar);
        DrawerLayout mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
        ActionBarDrawerToggle mDrawerToggle = new ActionBarDrawerToggle(
            this,  mDrawerLayout, mToolbar,
            R.string.navigation_drawer_open, R.string.navigation_drawer_close
        );
        mDrawerLayout.setDrawerListener(mDrawerToggle);

        getSupportActionBar().setDisplayHomeAsUpEnabled(true);
        getSupportActionBar().setHomeButtonEnabled(true);
    }

e todas as outras coisas permanecerão iguais ...

Para aqueles que estão tendo problemas para Drawerlayoutsobrepor a barra de ferramentas

adicionar android:layout_marginTop="?attr/actionBarSize"ao layout raiz do conteúdo da gaveta


como você usa getSupportActionBar()quando apenas estende Activity?
— wzieba

simplesmente você não pode, você deve estender deActionBarActivity
— Nitin Misra
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.