如何使用 Appcompat v7 21、Toolbar 和 DrawerLayout 将 Burger 动画化为箭头

Posted

技术标签:

【中文标题】如何使用 Appcompat v7 21、Toolbar 和 DrawerLayout 将 Burger 动画化为箭头【英文标题】:How animate Burger to Arrow with Appcompat v7 21, Toolbar and DrawerLayout 【发布时间】:2014-12-15 14:40:41 【问题描述】:

我正在使用带有 android.support.v4.widget.DrawerLayout 的 android.support.v7.widget.Toolbar。它工作正常,导航抽屉关闭时显示汉堡图标,抽屉打开时显示箭头图标。 我想在应用程序中的某些事件上禁用抽屉并将汉堡图标设置为箭头。我尝试将锁定模式设置为关闭,但 v7.app.ActionBarDrawerToggle 仍然显示 Burger 并打开 Drawer。

mDrawerLayout.setDrawerLockMode(DrawerLayout.LOCK_MODE_LOCKED_CLOSED);

有什么想法吗? 谢谢!

更新:

不,我可以更改图标的状态,并且可以启用/禁用抽屉,但动画不适用于这种方法:

@Override
protected void onCreate(Bundle savedInstanceState) 
    ...
    Toolbar toolbar = (Toolbar) findViewById(R.id.application_toolbar);
    setSupportActionBar(toolbar);

    mDrawerLayout = (DrawerLayout) findViewById(R.id.drawerLayout);
    mDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout, R.string.string1, R.string.string2) 
        public void onDrawerClosed(View view) 
            super.onDrawerClosed(view);
        

        public void onDrawerOpened(View drawerView) 
            super.onDrawerOpened(drawerView);
        
    ;

    //mDrawerLayout.setDrawerListener(mDrawerToggle); // not needed
    ...


@Override
public boolean onOptionsItemSelected(MenuItem item) 

    switch (item.getItemId()) 
        case android.R.id.home:
            if (mDrawerLayout.getDrawerLockMode(GravityCompat.START) == LOCK_MODE_UNLOCKED) 
                showDrawer();
             else 
                handleBackButtonPress(); // On this stage the home button is a <-
            
    
    ...


private void setDrawerState(boolean isEnabled) 
    if (isEnabled) 
        mDrawerLayout.setDrawerLockMode(DrawerLayout.LOCK_MODE_UNLOCKED);
        mDrawerToggle.onDrawerStateChanged(DrawerLayout.LOCK_MODE_UNLOCKED);
        mDrawerToggle.syncState();

     else 
        mDrawerLayout.setDrawerLockMode(DrawerLayout.LOCK_MODE_LOCKED_CLOSED);
        mDrawerToggle.onDrawerStateChanged(DrawerLayout.LOCK_MODE_LOCKED_CLOSED);
        mDrawerToggle.syncState();
    

抽屉位于工具栏的顶部。

【问题讨论】:

【参考方案1】:

看看这里,它描述了你如何解决它。

https://***.com/a/26447144

主要部分如下:

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

【讨论】:

谢谢,但我认为您误解了我的问题。我想完全禁用导航抽屉(在运行时)并显示箭头图标而不是汉堡。 我有同样的问题知道吗?【参考方案2】:

我创建了一个具有类似功能的小应用程序

主活动

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

我的那个 Activity 的 XML

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

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


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

我的自定义工具栏 XML

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

<android.support.v7.widget.Toolbar
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_
    android:layout_
    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_
        android:layout_
        />
</android.support.v7.widget.Toolbar>

我的主题风格

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

价值观中的我的风格-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>

【讨论】:

啊,我爱你。我努力获得该死的箭头动画。但是,看到我发现我的代码缺少这一行:drawerLayout.setDrawerListener(actionBarDrawerToggle);现在它就像一个魅力! 是否需要从ActionBarActivity扩展?

以上是关于如何使用 Appcompat v7 21、Toolbar 和 DrawerLayout 将 Burger 动画化为箭头的主要内容,如果未能解决你的问题,请参考以下文章

缺少来自android appcompat v7-21.0.0的样式

使用Tab与新ToolBar(AppCompat v7-21)

使用带有新工具栏的选项卡 (AppCompat v7-21)

AppCompat v7 r21 在 values.xml 中返回错误?

如何更改工具栏导航和溢出菜单图标(appcompat v7)?

在 AppCompat 21 中使用 Light.DarkActionBar 主题更改 ActionBar 标题文本颜色