Android开发之Navigationdrawer导航抽屉功能的实现

jopen 10年前

     导航抽屉（navigationdrawer）是一个从屏幕左边滑入的面板，用于显示应用的主要导航项目。用户可以通过在屏幕左边缘滑入或者触摸操作栏的 应用图标打开导航抽屉。导航抽屉覆盖在内容之上，但不覆盖操作栏。当导航抽屉完全打开后，操作栏的标题需要更换为应用的名称，而不是显示当前视图的名称， 并且关闭所有和当前视图相关的操作按钮。操作栏的“更多操作”菜单按钮不需要关闭，以保证用户可以随时访问“设置”和“帮助”。下面我们就来实现导航抽屉 的功能。

    a1.png

 Layout布局文件代码

    <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="100dp"                android:layout_height="match_parent"                android:layout_gravity="start"                android:choiceMode="singleChoice"                android:dividerHeight="1dp"               android:background="#ffffff"/>        </android.support.v4.widget.DrawerLayout>
</div> </div> 注意要点：

（1）主要视图(上述FrameLayout)必须为DrawerLayout中的第一个孩子,因为XML意味着z顺序和抽屉必须的内容。　　

（2）主要内容视图必须设置为匹配父视图的宽度和高度,因为它代表整个UI导航抽屉时隐藏。　　

（3）抽屉视图(上述ListView)必须指定它的水平重力与android:layout_gravity属性。支持从右到左的语言(RTL),指定值与“开始”而不是“左”(右边的抽屉里出 现时,布局是RTL)。　　　

（4）抽屉视图指定宽度的dp单位和父视图的高度匹配。抽屉的宽度应不超过320 dp所以用户总是可以看到部分的主要内容。

（5）DrawerLayout必须成为布局的根节点

MainActivity的代码 
package com.example.g07_navigationdrawer;        import android.app.Activity;    import android.app.Fragment;    import android.app.FragmentManager;    import android.os.Bundle;        import android.support.v4.app.ActionBarDrawerToggle;    import android.support.v4.widget.DrawerLayout;    import android.view.View;    import android.widget.AdapterView;    import android.widget.ArrayAdapter;    import android.widget.ListAdapter;    import android.widget.ListView;    import android.widget.Toast;        public class MainActivity extends Activity {        private String[] mPlanetTitles; // listView的每一个item的名字        private DrawerLayout mDrawerLayout;        private ListView mDrawerList;        private ActionBarDrawerToggle mDrawerToggle; // 用来监听DrawerLayout事件            @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);            // 为ListView添加适配器            mDrawerList.setAdapter((ListAdapter) new ArrayAdapter<String>(this,                    android.R.layout.simple_list_item_1, mPlanetTitles));            // 监听ListView的点击事件            mDrawerList.setOnItemClickListener(new DrawerItemClickListener());            mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);            // 监听DrawerLayout的监听事件            mDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout,                    R.drawable.ic_launcher, R.string.app_name, R.string.app_name) {                public void onDrawerClosed(View view) {                    super.onDrawerClosed(view);                    Toast.makeText(MainActivity.this, "抽屉关闭了", Toast.LENGTH_SHORT)                            .show();                }                public void onDrawerOpened(View drawerView) {                    super.onDrawerOpened(drawerView);                    Toast.makeText(MainActivity.this, "抽屉打开了", Toast.LENGTH_SHORT)                            .show();                }            };            mDrawerLayout.setDrawerListener(mDrawerToggle);            }            private class DrawerItemClickListener implements                ListView.OnItemClickListener {            @Override            public void onItemClick(AdapterView<?> parent, View view, int position,                    long id) {                // 根据ListView的被选中的选项切换界面布局                Fragment fragment = new Fragment();                FragmentManager fragmentManager = getFragmentManager();                fragmentManager.beginTransaction()                        .replace(R.id.content_frame, fragment).commit();                mDrawerList.setItemChecked(position, true);                // 给操作栏设置标题                getActionBar().setTitle(mPlanetTitles[position]);                mDrawerLayout.closeDrawer(mDrawerList);            }        }    }
来自：http://blog.csdn.net/gerogelin/article/details/25409549
</div> </div>

相关经验