如何在操作栏的应用程序图标旁边添加“菜单”指示符？

Question

至少 Gmail 和 Youtube Android 应用使用通过滑动或点击应用图标（主页按钮）打开的侧边菜单 (navigation drawer?)：

上面截图中的菜单指示器/图标是Android SDK现成的部分吗？ （或者 Google 在他们的应用中使用的自定义图标？）无论如何，让主页按钮看起来像这样的最简单方法，即，就像它打开菜单一样？

(targetSdkVersion18;minSdkVersion14)

分辨率

终于got it working。我缺少的是 1) the actual icon 和 2) 在 ActionBarDrawerToggle 上延迟调用 syncState()。

Answer 1

要创建类似的实现/查看您的应用程序，您应该使用ActionBarDrawerToggle 并将您的自定义图标设置为 ActionBar 主页按钮旁边的指示器。例如：

import android.app.ActionBar;
import android.support.v4.app.ActionBarDrawerToggle;
import android.support.v4.widget.DrawerLayout;

private void setUpDrawerToggle(){
    ActionBar actionBar = getActionBar();
    actionBar.setDisplayHomeAsUpEnabled(true);
    actionBar.setHomeButtonEnabled(true);

    // ActionBarDrawerToggle ties together the the proper interactions
    // between the navigation drawer and the action bar app icon.
    mDrawerToggle = new ActionBarDrawerToggle(
            this,                             /* host Activity */
            mDrawerLayout,                    /* DrawerLayout object */
            R.drawable.ic_drawer,             /* nav drawer image to replace 'Up' caret */
            R.string.navigation_drawer_open,  /* "open drawer" description for accessibility */
            R.string.navigation_drawer_close  /* "close drawer" description for accessibility */
    ) {
        @Override
        public void onDrawerClosed(View drawerView) {
            invalidateOptionsMenu(); // calls onPrepareOptionsMenu()
        }

        @Override
        public void onDrawerOpened(View drawerView) {
            invalidateOptionsMenu(); // calls onPrepareOptionsMenu()
        }
    };

    // Defer code dependent on restoration of previous instance state.
    // NB: required for the drawer indicator to show up!
    mDrawerLayout.post(new Runnable() {
        @Override
        public void run() {
            mDrawerToggle.syncState();
        }
    });

    mDrawerLayout.setDrawerListener(mDrawerToggle);
}

R.drawable.ic_drawer 实际上是用作指示器的图标。你可以在Android Asset Studio找到它；见Navigation Drawer Indicator。

参考文献

1. ActionBarDrawerToggle
2. Creating a Navigation Drawer

Answer 2

Android-Developer 和 HpTerm 帮助我做出了正确的反应，作者：

1. 指出这确实是 NavigationDrawer 特定的（我已经在 Google 的示例中使用过）
2. 告诉在哪里可以找到ic_drawer.png 图标（→ Android Asset Studio）

现在，不幸的是，像下面这样创建 ActionBarDrawerToggle 似乎 还不够 足够。 至少在我的 Nexus 7 (API 18) 测试设备上。

drawerToggle = new ActionBarDrawerToggle(this, 
                       drawerLayout, 
                       R.drawable.ic_navigation_drawer, 
                       R.string.side_menu_open, 
                       R.string.side_menu_closed) {
    // ...
};

部分解决方案（API 级别 18+）

我找到了一种显示指标的方法：setHomeAsUpIndicator()。缺点：该方法是在 API 级别 18 中添加的。

@Override
protected void onCreate(Bundle savedInstanceState) {
    // ...
    getActionBar().setDisplayHomeAsUpEnabled(true); // also required
    if (Build.VERSION.SDK_INT >= 18) {
        getActionBar().setHomeAsUpIndicator(
            getResources().getDrawable(R.drawable.ic_navigation_drawer));
    }
}

所以现在问题仍然存在：如何在 API 级别 14 到 17 上进行这项工作（在我的情况下）？

我在 4.1.2 (API 16) 设备上验证了 ic_drawer 图标确实不显示。使用setDisplayHomeAsUpEnabled(true)，我得到了正常的“主页”图标（指向左侧的小箭头），没有它，留给我的应用程序图标的空间保持空白。

最终解决方案

使用 Android-Developer's answer 的编辑版本让它工作。

很奇怪，我的 ActionBarDrawerToggle 初始化代码中缺少的是：

   // Defer code dependent on restoration of previous instance state.
   drawerLayout.post(new Runnable() {
        @Override
        public void run() {
            mDrawerToggle.syncState();
        }
    });

包括在内，不需要致电setHomeAsUpIndicator()。

Answer 3

这里的关键字是NavigationDrawer； Android 开发者网站上有完整的工作代码示例。

阅读给定链接的结尾：使用应用图标打开和关闭

下面的代码是从那里复制过来的

public class MainActivity extends Activity {
    private DrawerLayout mDrawerLayout;
    private ActionBarDrawerToggle mDrawerToggle;
    ...

    public void onCreate(Bundle savedInstanceState) {
        ...

        mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
        mDrawerToggle = new ActionBarDrawerToggle(
                this,                  /* host Activity */
                mDrawerLayout,         /* DrawerLayout object */
                R.drawable.ic_drawer,  /* nav drawer icon to replace 'Up' caret */
                R.string.drawer_open,  /* "open drawer" description */
                R.string.drawer_close  /* "close drawer" description */
                ) {

            /** Called when a drawer has settled in a completely closed state. */
            public void onDrawerClosed(View view) {
                getActionBar().setTitle(mTitle);
            }

            /** Called when a drawer has settled in a completely open state. */
            public void onDrawerOpened(View drawerView) {
                getActionBar().setTitle(mDrawerTitle);
            }
        };

        // Set the drawer toggle as the DrawerListener
        mDrawerLayout.setDrawerListener(mDrawerToggle);

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

    @Override
    protected void onPostCreate(Bundle savedInstanceState) {
        super.onPostCreate(savedInstanceState);
        // Sync the toggle state after onRestoreInstanceState has occurred.
        mDrawerToggle.syncState();
    }

    @Override
    public void onConfigurationChanged(Configuration newConfig) {
        super.onConfigurationChanged(newConfig);
        mDrawerToggle.onConfigurationChanged(newConfig);
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        // Pass the event to ActionBarDrawerToggle, if it returns
        // true, then it has handled the app icon touch event
        if (mDrawerToggle.onOptionsItemSelected(item)) {
          return true;
        }
        // Handle your other action bar items...

        return super.onOptionsItemSelected(item);
    }

    ...
}

部分文件可下载，3行小动画效果充分体现。

您必须将这些文件复制到相应的drawable 文件夹中。根据您使用的主题，深色或浅色您有一组不同的图标。

就我而言，我只是将drawer_shadow.9.png 和ic_drawer.png 复制到drawable 文件夹中，然后按照示例进行操作，一切正常。

图标在我提供的链接中可用，但它们在“操作栏图标包”中不是，它们在示例应用程序中在相应的 res/drawable 文件夹.