实现高效的导航2--抽屉式导航navigation drawer

最新推荐文章于 2024-04-08 00:25:08 发布

haobobo710

最新推荐文章于 2024-04-08 00:25:08 发布

阅读量277

点赞数

本文链接：https://blog.csdn.net/haobobo710/article/details/80828271

版权

DrawerLayout

Navigation drawer是一个在屏幕左侧边缘显示导航选项的面板。大部分时候是隐藏的，当用户从屏幕左侧划屏，或在top level模式的app中点击action bar中的app图标时，才会显示。

这节课叙述如何使用Support Library中的DrawerLayout API，来实现navigation drawer。

举例

1、

创建一个Drawer Layout。

下面的layout使用了有两个子视图(child view)的DrawerLayout:一个FrameLayout用来包含主要内容(在运行时被Fragment填入)，和一个navigation drawer使用的RecyclerView。

<android.support.v4.widget.DrawerLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:openDrawer="start" >

    <!-- As the main content view, the view below consumes the entire
         space available using match_parent in both dimensions. -->
    <FrameLayout
        android:id="@+id/content_frame"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <!-- android:layout_gravity="start" tells DrawerLayout to treat
         this as a sliding drawer on the left side for left-to-right
         languages and on the right side for right-to-left languages.
         The drawer is given a fixed width in dp and extends the full height of
         the container. A solid background is used for contrast
         with the content view. -->
    <android.support.v7.widget.RecyclerView
        android:id="@+id/left_drawer"
        android:scrollbars="vertical"
        android:layout_width="240dp"
        android:layout_height="match_parent"
        android:layout_gravity="left|start"
        android:choiceMode="singleChoice"
        android:divider="@null"
        app:layoutManager="LinearLayoutManager"
        />
</android.support.v4.widget.DrawerLayout>

这个layout展示了一些layout的重要特点:

主内容view(上面的FrameLayout)，在DrawerLayout中必须是第一个子视图，因为XML的顺序代表着Z轴(垂直于手机屏幕)的顺序，并且drawer必须在内容的前端。
主内容view被设置为匹配父视图的宽和高，因为当navigation drawer隐藏时，主内容表示整个UI部分。
drawer视图(ListView)必须使用android:layout_gravity属性指定它的horizontal gravity。为了支持从右边阅读的语言(right-to-left(RTL) language)，指定它的值为"start"而不是"left"(当layout是RTL时drawer在右边显示)。
drawer视图以dp为单位指定它的宽和高来匹配父视图。drawer的宽度不能大于320dp，这样用户总能看到部分主内容。

2、初始化Drawer List

在你的activity中，首先要做的事就是要初始化drawer的item列表。这要根据你的app内容来处理，但是一个navigation drawer通常由一个RecyclerView组成，所以列表应该通过一个Adapter(例如ArrayAdapter或SimpleCursorAdapter)填入。

使用一个字符串数组(string array)来初始化导航列表(navigation list):

<string-array name="planets_array">
    <item>Mercury</item>
    <item>Venus</item>
    <item>Earth</item>
    <item>Mars</item>
    <item>Jupiter</item>
    <item>Saturn</item>
    <item>Uranus</item>
    <item>Neptune</item>
</string-array>

mPlanetTitles = getResources().getStringArray(R.array.planets_array);

mDrawerList.setAdapter(new PlanetAdapter(mPlanetTitles, this));

3、处理导航的点击事件
当用户选择drawer列表中的item，系统会调用在setOnItemClickListener()中所设置的OnItemClickListener的onItemClick()。

在onItemClick()方法中做什么，取决于你如何实现你的app结构(app structure)。在下面的例子中，每选择一个列表中的item，就插入一个不同的Fragment到主内容视图中(FrameLayout元素通过R.id.content_frame ID辨识):

@Override
public void onClick(View view, int position) {
    selectItem(position);
}

private void selectItem(int position) {
    // update the main content by replacing fragments
    Fragment fragment = PlanetFragment.newInstance(position);

    FragmentManager fragmentManager = getFragmentManager();
    FragmentTransaction ft = fragmentManager.beginTransaction();
    ft.replace(R.id.content_frame, fragment);
    ft.commit();

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

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