工具栏导航“汉堡包”图标丢失

74

我正在寻找一种使用Drawer / DrawerToggle显示汉堡图标淡化并使用Android中包含的默认图标的方法 在此处输入图片说明

通过设置getSupportActionBar().setDisplayHomeAsUpEnabled(true);它显示后退箭头，但不显示汉堡包。Stackoverflow上的其他文章（例如this或this）使用DrawerLayout或自定义drawable。我在Android来源中找不到汉堡包图标的矢量或png。

您知道如何在android / support库中找到原始的汉堡包图标吗？（或如何显示）

注意：Vector和png可以在google.com/design网站上找到： http : //www.google.com/design/spec/resources/sticker-sheets-icons.html#

在我的活动中

mToolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(mToolbar);
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
getSupportActionBar().setHomeButtonEnabled(true);

mToolbar.setNavigationOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        Log.d(LOG_TAG, "navigation clicked");
    }
});

布局文件

<android.support.v7.widget.Toolbar
    android:id="@+id/toolbar"
    android:layout_height="wrap_content"
    android:layout_width="match_parent"
    android:minHeight="?attr/actionBarSize"
    android:background="?attr/colorPrimary"
    app:theme="@style/ThemeOverlay.AppCompat.ActionBar"/>

Styles.xml 

<!-- Base application theme. -->
<style name="Theme.AppTheme" parent="Theme.AppCompat.Light.NoActionBar">


    <item name="colorPrimary">@color/primaryDef</item>
    <item name="colorPrimaryDark">@color/primaryDarkDef</item>
    <item name="colorAccent">@color/primaryDef</item>

    <!-- Remove the actionbar shadow-->
    <item name="android:windowContentOverlay">@null</item>
</style>
android  android-support-library  material-design  android-toolbar 
— 雨果·格莱斯
source
— Pedro Oliveira
@PedroOliveira，它不是重复的，因为我明确地说我没有使用ActionBarDrawerToggle
— Hugo Gresse
然后，如果您不使用抽屉，应该如何显示菜单？该汉堡包图标是抽屉的一部分。
— Pedro Oliveira 2015年
@PedroOliveira这不是主要问题，但并不用于显示手册。我知道这违反了UX准则，并且不会在公共应用程序中使用。问题是，如果可能的话，就是在Android内部找到该图标。
— 雨果格莱斯
@ASP这不能回答问题
— Hugo Gresse

Answers:

39

如果您想使用与棒棒糖相同的抽屉，那么让我告诉您这不是静态图像。该图像由称为的类实时绘制DrawerArrowDrawableToggle。因此，没有“汉堡”图标。

但是，如果您想要不带动画的汉堡包图标，可以在这里找到：

https://material.io/tools/icons/?icon=menu&style=baseline

在此处输入图片说明

— 佩德罗·奥利维拉（Pedro Oliveira）
source
您的回答完成了问题的50％，谢谢！您是否知道为lo-lipop前装置实现此方法的方法？
— 雨果格莱斯
如果您想通过汉堡菜单获得不错的动画，我建议您为此查找appcompatv7并设置一个抽屉菜单。如果只想显示菜单图标，则只需将图像放置在可绘制对象内部并使用即可。我将在这里在“材料抽屉”上使用漂亮且简单的模板发布我的仓库，该模板可用于棒棒糖之前的设备：) github.com/kanytu/android-material-drawer-template
— Pedro Oliveira
谢谢，您能完成您的回答以包含google.com/design/spec/resources/…吗？在这里我们也可以找到官方图标。并非矢量图标需要API 21，因此我们必须使用png
— Hugo Gresse，2015年
在该站点上的朋友，您只需单击“下载ZIP”，它将下载android项目使用的具有相同可绘制文件夹结构的所有png ：)只需转到那里即可。选择您喜欢的颜色，单击下载zip，然后将“ res”文件夹拖到您自己的“ res”文件夹中：)
— Pedro Oliveira 2015年
1
编辑。这样行吗？:)
— Pedro Oliveira
36

有动画图标汉堡包，你应该使用DrawerLayout与ActionBarDrawerToggle并启用的图标ActionBar和为ActionBarDrawerToggle。

例：

Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
DrawerLayout drawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
ActionBarDrawerToggle mDrawerToggle;

setSupportActionBar(toolbar);
final ActionBar actionBar = getSupportActionBar();

if (actionBar != null)
{
   actionBar.setDisplayHomeAsUpEnabled(true);
   mDrawerToggle = new ActionBarDrawerToggle(this, drawerLayout, toolbar, R.string.hello_world, R.string.hello_world)
   {

      public void onDrawerClosed(View view)
      {
         supportInvalidateOptionsMenu();
         //drawerOpened = false;
      }

      public void onDrawerOpened(View drawerView)
      {
         supportInvalidateOptionsMenu();
         //drawerOpened = true;
      }
   };
   mDrawerToggle.setDrawerIndicatorEnabled(true);
   drawerLayout.setDrawerListener(mDrawerToggle);
   mDrawerToggle.syncState();
}

另外，您需要将以下方法添加到“活动”中：

@Override
protected void onPostCreate(Bundle savedInstanceState)
{
    super.onPostCreate(savedInstanceState);
    mDrawerToggle.syncState();
}

@Override
public void onConfigurationChanged(Configuration newConfig)
{
    super.onConfigurationChanged(newConfig);
    mDrawerToggle.onConfigurationChanged(newConfig);
}
— 莫哈克斯
source
确实无法正常工作……直到我意识到缺少使我的汉堡包图标出现的
— 抽屉布局.syncState时才
@ptitvinou，请参阅更新的答案。我添加缺少的方法。
— mohax 2015年
@mohax如何显示汉堡图标而不是后退箭头？
— Sibelius Seraphini
1
@SibeliusSeraphini，请执行以下操作mDrawerToggle.setDrawerIndicatorEnabled(true);。如果您将其false作为参数传递，则会看到backArrow。别忘了从活动结束的答案末尾添加2种方法'
— mohax
1
@mohax我需要添加以下行：mDrawerToggle.syncState（）; 在drawerLayout.setDrawerListener（mDrawerToggle）之后;
— 西贝柳斯·塞拉菲尼
19

为此，您只需要写一些行

   DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);
   ActionBarDrawerToggle toggle = new ActionBarDrawerToggle(this, drawer, toolbar, R.string.navigation_drawer_open, R.string.navigation_drawer_close);
   drawer.addDrawerListener(toggle);
   toggle.setDrawerIndicatorEnabled(true);
   toggle.syncState();

toggle.setDrawerIndicatorEnabled（true）; 如果为假，则设为true或删除此行

— Vivek Barai
source
我无法理解一件事。如果该汉堡包图标的主要功能是打开抽屉，那么为什么我们需要向其单独添加抽屉监听器？
— Syed Souban
14

这是最适合我的解决方案。

将ActionBarDrawerToggle有两种类型的构造函数。其中之一将工具栏作为参数。使用该（下面的第二个）获取动画汉堡包。

ActionBarDrawerToggle(this, mDrawerLayout, R.string.content_desc_drawer_open, 
R.string.content_desc_drawer_close);

ActionBarDrawerToggle(this, mDrawerLayout, toolbar, R.string.content_desc_drawer_open, 
R.string.content_desc_drawer_close);`  //use this constructor
— up
source
13

您可以尝试像这样使自己的汉堡图标可绘制。

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:viewportHeight="24.0"
    android:viewportWidth="24.0">
    <path
        android:fillColor="#ffffff"
        android:pathData="M3,18h18v-2L3,16v2zM3,13h18v-2L3,11v2zM3,6v2h18L21,6L3,6z" />
</vector>

然后在您的片段/活动中， 

getSupportActionBar().setHomeAsUpIndicator(R.drawable.as_above);
getSupportActionBar().setDisplayHomeAsUpEnabled(true);

对于其他可绘制对象，这可能会有所帮助：https : //github.com/google/material-design-icons/blob/master/navigation/drawable-anydpi-v21/

— 布莱恩
source
7

我有同样的问题。获取ToolBar，然后设置导航图标

final android.support.v7.widget.Toolbar toolbar = (android.support.v7.widget.Toolbar) findViewById(R.id.toolbar);
toolbar.setNavigationIcon(R.drawable.blablabla);
— 米凯尔·哲根蒂（Mikheil Zhghenti）
source
6 
    Toolbar mToolbar = (Toolbar) findViewById(R.id.toolbar);
    mToolbar.setTitle("title");
    setSupportActionBar(mToolbar);
    getSupportActionBar().setDisplayHomeAsUpEnabled(true); 
    getSupportActionBar().setHomeButtonEnabled(true);
    getSupportActionBar().setHomeAsUpIndicator(R.drawable.ic_list);
— 塔伦·沃拉（Tarun Voora）
source
5

确定隐藏后退箭头的使用

getSupportActionBar().setDisplayHomeAsUpEnabled(false);
getSupportActionBar().setHomeButtonEnabled(false);

然后在网页中找到“汉堡包”图标->汉堡包

最后，使用操作栏方法在您的项目中设置此drawable：

getSupportActionBar().setLogo(R.drawable.hamburger_icon);
— 斯托乔·安德烈耶夫（Stoycho Andreev）
source
2
我正在搜索支持lib或android sdk中的汉堡包图标。
— 雨果格莱斯
@AlexPerl也许您做错了什么。你能告诉我你的情况吗？
— Stoycho Andreev
4 
 ActionBarDrawerToggle toggle = new ActionBarDrawerToggle(this, drawer, toolbar,
            R.string.navigation_drawer_open, R.string.navigation_drawer_close);
    drawer.addDrawerListener(toggle);
    toggle.syncState();

和我一起工作

— 穆罕默德·哈莫尔（Mohamed Hamole）
source
3

也许您可以尝试一下，但是您将失去箭头和汉堡图标之间的动画

@Override
protected void onCreate(Bundle arg0) {
    super.onCreate(arg0);
    super.setContentView(R.layout.activity_menu_drawer_left);

_drawerToggle = new ActionBarDrawerToggle(this, _drawerLayout, R.string.drawer_opened, R.string.drawer_closed) {
        public void onDrawerOpened(View drawerView) {
            super.onDrawerOpened(drawerView);
            changeDrawerIconOnDrawerClick(R.drawable.abc_ic_ab_back_mtrl_am_alpha);
        }

        /** Called when a drawer has settled in a completely closed state. */
        public void onDrawerClosed(View view) {
            super.onDrawerClosed(view);
            changeDrawerIconOnDrawerClick(R.drawable.ic_drawer);
        }
    };

     //to change default icon to hamburger item initially
    changeDrawerIconOnDrawerClick(R.drawable.ic_drawer);    }



private void changeDrawerIconOnDrawerClick(int resourceId) {
    //Drawable icon = ContextCompat.getDrawable(getApplicationContext(), resourceId);
    Drawable icon = ResourcesCompat.getDrawable(getResources(), resourceId, null);
    icon.setColorFilter(getResources().getColor(R.color.white), PorterDuff.Mode.SRC_ATOP);
    _drawerToggle.setDrawerIndicatorEnabled(false);
    _drawerToggle.setHomeAsUpIndicator(icon);
}
— DoubleK
source
2

用您自己的可绘制对象替换默认的向上箭头

getSupportActionBar().setHomeAsUpIndicator(R.drawable.hamburger);

— 俊豪
source
2

只需在onCreate方法中添加以下内容，

if (getSupportActionBar() != null) {
            getSupportActionBar().setDisplayHomeAsUpEnabled(true);
            getSupportActionBar().setHomeButtonEnabled(true);
        }

        ActionBarDrawerToggle toggle = new ActionBarDrawerToggle(
                this, mDrawer, mToolbar, R.string.home_navigation_drawer_open, R.string.home_navigation_drawer_close) {

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

            public void onDrawerOpened(View drawerView) {
                super.onDrawerOpened(drawerView);
                invalidateOptionsMenu();
            }

            @Override
            public void onDrawerSlide(View drawerView, float slideOffset) {
                super.onDrawerSlide(drawerView, slideOffset);
            }
        };
        mDrawer.addDrawerListener(toggle);
        toggle.syncState();

在strings.xml中

<string name="home_navigation_drawer_open">Open navigation drawer</string>
<string name="home_navigation_drawer_close">Close navigation drawer</string>
— 南达·戈帕尔（Nanda Gopal）
source
1

在MyActionBarDrawerToggle中使用此构造函数： 

    public MyActionBarDrawerToggle(AppCompatActivity host, DrawerLayout drawerlayout, SupportToolbar toolbar, int openedResource, int closedResource)
        : base(host, drawerlayout, toolbar, openedResource, closedResource)
    {
        mHostActivity = host;
        mOpenedResource = openedResource;
        mClosedResource = closedResource;
    }

并在mainActivity中调用此方法（使用AppCompatActivity）

        mDrawerToggle = new MyActionBarDrawerToggle(
            this,                           //Host Activity
            mDrawerLayout,                  //DrawerLayout
            mToolbar,                       //Toolbar
            Resource.String.openDrawer,     //Opened Message
            Resource.String.closeDrawer     //Closed Message
        );


        mDrawerLayout.AddDrawerListener(mDrawerToggle);
        SupportActionBar.SetHomeButtonEnabled(true);
        SupportActionBar.SetDisplayShowTitleEnabled(true);
        mDrawerToggle.DrawerIndicatorEnabled = true;
        mDrawerToggle.SyncState();
— Cyphrix_17
source
1

在onCreate()：

    setSupportActionBar(toolbar);
    ActionBar actionBar = getSupportActionBar();
    drawerToggle = new ActionBarDrawerToggle(this, drawerLayout, toolbar, R.string.open, R.string.close) {
        @Override
        public void onDrawerClosed(View drawerView) {
            super.onDrawerClosed(drawerView);
            supportInvalidateOptionsMenu();
        }

        @Override
        public void onDrawerOpened(View drawerView) {
            super.onDrawerOpened(drawerView);
            supportInvalidateOptionsMenu();
        }
    };
    drawerLayout.setDrawerListener(drawerToggle);


    drawerToggle.setToolbarNavigationClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            Backstack.get(MainActivity.this).goBack();
        }
    });
    //actionBar.setHomeAsUpIndicator(R.drawable.ic_menu);
    //getSupportActionBar().setDisplayHomeAsUpEnabled(false);
    actionBar.setDisplayHomeAsUpEnabled(false);
    actionBar.setHomeButtonEnabled(true);

并设置UP导航时：

private void setupViewsForKey(Key key) {
    if(key.shouldShowUp()) {
        drawerToggle.setDrawerIndicatorEnabled(false);
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);
    }
    else {
        getSupportActionBar().setDisplayHomeAsUpEnabled(false);
        drawerToggle.setDrawerIndicatorEnabled(true);
    }
    drawerToggle.syncState();
— 史诗熊猫力量
source
我不敢相信这花了一个多小时……感谢您stackoverflow.com/a/33867836/2413303
— EpicPandaForce
0

在JetPack中为我工作

NavigationUI.setupWithNavController(vb.toolbar, nav)
vb.toolbar.navigationIcon = ResourcesCompat.getDrawable(resources, R.drawable.icon_home, null)
— 尤金·K
source
您在这里的vb是什么？您能否提供整个方法/类？
— 服从
vb这是我的视线
— Eugene K
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.