Android Navigation Drawer

最新推荐文章于 2021-05-26 02:25:53 发布

油焖茄子

最新推荐文章于 2021-05-26 02:25:53 发布

阅读量440

点赞数

分类专栏： Android 文章标签： android Navigation

本文链接：https://blog.csdn.net/qq_27981847/article/details/50585845

版权

Android 专栏收录该内容

124 篇文章 2 订阅

订阅专栏

创建导航抽屉

导航抽屉是一个面板，该面板显示应用程序的主导航选项在屏幕的左边缘。它是隐藏的大部分时间，但显示当用户刷卡手指从屏幕左边缘，而在应用程序中的最高层次，在动作栏中用户触摸应用程序图标。

本课介绍如何使用安API在支持库实现了导航抽屉

导航抽屉设计

在你决定使用一个导航抽屉在你的应用程序，你应该了解在导航抽屉设计指南中定义的用例和设计原则。

创建一个抽屉布局

添加导航抽屉，与安对象作为你的布局的根视图声明你的用户界面。在安，添加一个视图包含屏幕的主要内容（主要布局在抽屉隐藏），另一种观点认为，包含导航抽屉。

例如，下面的布局使用安有两个孩子的看法：一个FrameLayout包含的主要内容（由运行时的片段），和一个导航抽屉的ListView。

<android.support.v4.widget.DrawerLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <!-- The main content view -->
    <FrameLayout
        android:id="@+id/content_frame"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
    <!-- The navigation drawer -->
    <ListView 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="#111"/>
</android.support.v4.widget.DrawerLayout>

此布局演示了一些重要的布局特性：

1、主要内容视图（FrameLayout以上）必须是第一个孩子在安因为XML命令意味着z与出票人必须在顶部的内容。

2、主要内容视图设置为匹配父视图的宽度和高度，因为它代表导航抽屉隐藏时的整个用户界面。

3、抽屉里的观点（ListView）必须与Android指定其重力水平：layout_gravity属性。支持从右到左（RTL）的语言，指定的值与“开始”而不是“左”（所以抽屉右侧出现时的布局是RTL）。

4、抽屉查看指定宽度和高度的DP单位匹配的父视图。抽屉的宽度不应超过320dp以便用户能看到的内容的一部分。

初始化抽屉列表

在你的活动中，首先要做的事情之一是初始化导航抽屉的列表。如何做，取决于你的应用程序的内容，而是一个导航抽屉往往由一个ListView，所以名单应该由一个适配器（如ArrayAdapter或simplecursoradapter）。

例如，这里是如何用字符串数组初始化导航列表的：

public class MainActivity extends Activity {
    private String[] mPlanetTitles;
    private DrawerLayout mDrawerLayout;
    private ListView mDrawerList;
    ...

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        mPlanetTitles = getResources().getStringArray(R.array.planets_array);
        mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
        mDrawerList = (ListView) findViewById(R.id.left_drawer);

        // Set the adapter for the list view
        mDrawerList.setAdapter(new ArrayAdapter<String>(this,
                R.layout.drawer_list_item, mPlanetTitles));
        // Set the list's click listener
        mDrawerList.setOnItemClickListener(new DrawerItemClickListener());

        ...
    }
}

此代码还需要setonitemclicklistener()在导航抽屉的名单接收点击事件。下一节将演示如何实现这个接口，并在用户选择项目时更改内容视图。

处理导航单击事件

当用户选择一项在抽屉里的列表，系统调用onitemclick()上给予的onitemclicklistener setonitemclicklistener()。

在onitemclick()方法你做什么取决于你如何实现你的应用程序结构。在下面的例子中，选择列表中的每个项目将不同的片段为主要内容的看法（由r.id.content_frame ID标识FrameLayout元素）：

private class DrawerItemClickListener implements ListView.OnItemClickListener {
    @Override
    public void onItemClick(AdapterView parent, View view, int position, long id) {
        selectItem(position);
    }
}

/** Swaps fragments in the main content view */
private void selectItem(int position) {
    // Create a new fragment and specify the planet to show based on position
    Fragment fragment = new PlanetFragment();
    Bundle args = new Bundle();
    args.putInt(PlanetFragment.ARG_PLANET_NUMBER, position);
    fragment.setArguments(args);

    // Insert the fragment by replacing any existing fragment
    FragmentManager fragmentManager = getFragmentManager();
    fragmentManager.beginTransaction()
                   .replace(R.id.content_frame, fragment)
                   .commit();

    // Highlight the selected item, update the title, and close the drawer
    mDrawerList.setItemChecked(position, true);
    setTitle(mPlanetTitles[position]);
    mDrawerLayout.closeDrawer(mDrawerList);
}

@Override
public void setTitle(CharSequence title) {
    mTitle = title;
    getActionBar().setTitle(mTitle);
}

听启闭事件

听抽屉打开和关闭事件，叫上你的安setdrawerlistener()和通过它的drawerlayout.drawerlistener实现。这个接口提供了抽屉事件如ondraweropened()和ondrawerclosed()回调。

然而，而不是实施drawerlayout.drawerlistener，如果你的活动包括行动吧，你可以延长actionbardrawertoggle类。的actionbardrawertoggle实现drawerlayout.drawerlistener所以你仍然可以覆盖这些回调，但它也有利于操作栏图标和导航抽屉之间的交互行为（在接下来的章节中讨论）。

正如导航抽屉设计指南中所讨论的那样，当抽屉是可见的，比如更改标题和移除内容的动作项时，应修改动作栏的内容。下面的代码展示了如何可以通过重写drawerlayout.drawerlistener回调方法的actionbardrawertoggle类的一个实例：

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

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ...

        mTitle = mDrawerTitle = getTitle();
        mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
        mDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout,
                R.drawable.ic_drawer, R.string.drawer_open, R.string.drawer_close) {

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

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

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

    /* Called whenever we call invalidateOptionsMenu() */
    @Override
    public boolean onPrepareOptionsMenu(Menu menu) {
        // If the nav drawer is open, hide action items related to the content view
        boolean drawerOpen = mDrawerLayout.isDrawerOpen(mDrawerList);
        menu.findItem(R.id.action_websearch).setVisible(!drawerOpen);
        return super.onPrepareOptionsMenu(menu);
    }
}

下一节描述的actionbardrawertoggle构造函数的参数需要设置与操作栏图标句柄交互的其他步骤。

打开和关闭的应用程序图标

用户可以打开和关闭的导航抽屉与一个刷卡手势从或向左边缘的屏幕，但如果你使用的行动栏，你也应该允许用户打开和关闭它通过触摸的应用程序图标。和应用程序图标还应该说明有一个特殊的图标导航抽屉的存在。你可以通过使用上一节中所示的actionbardrawertoggle实施这一切行为。

让actionbardrawertoggle工作，它的构造函数创建一个实例，这就需要下列参数：

1、主持抽屉的活动。

2、 The DrawerLayout .

3、一个drawable资源使用抽屉指示器。标准导航抽屉图标可在下载的动作栏图标包。

4、一个字符串资源来描述“打开抽屉”的动作（用于辅助功能）。

5、一个字符串资源来描述“关闭抽屉”的动作（可用于辅助功能）。

那么，你是否已经创造了actionbardrawertoggle子类作为你的抽屉的倾听者，你需要召唤你的actionbardrawertoggle在少数地方在你的activity生命周期：

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) {
                super.onDrawerClosed(view);
                getActionBar().setTitle(mTitle);
            }

            /** Called when a drawer has settled in a completely open state. */
            public void onDrawerOpened(View drawerView) {
                super.onDrawerOpened(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);
    }

    ...
}