23

至少 Gmail 和 Youtube Android 应用程序使用通过滑动或单击应用程序图标（主页按钮）打开的侧边菜单（导航抽屉？）：

在此处输入图像描述

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

（targetSdkVersion18；minSdkVersion14）

解析度

终于让它工作了。对我来说缺少的是 1)实际图标和 2)syncState()在ActionBarDrawerToggle.

4

3 回答 3

33

要在您的应用程序中创建类似的实现/外观，您应该使用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中找到它；请参阅导航抽屉指示器。

参考

  1. ActionBarDrawer 切换
  2. 创建导航抽屉
于 2013-11-01T10:13:11.013 回答
10

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()包括在内，不需要调用。

于 2013-11-01T13:17:32.977 回答
2

这里的关键字是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.pngand复制ic_drawer.png到 drawable 文件夹中并按照示例进行操作，一切正常。

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

于 2013-11-01T10:10:07.767 回答