码迷，mamicode.com
首页 > 移动开发 > 详细

Android---62---DrawerLayout实现抽屉效果

时间：2015-08-05 10:32:21      阅读：351      评论：0      收藏：0      [点我收藏+]

标签：android   drawerlayout   抽屉   

如何实现android中的抽屉效果？

1.创建xml文件

其根视图是<android.support.v4.widget.DrawerLayout/>

这个xml分为两部分，一部分是主要内容的视图，一部分是抽屉的视图。

主要内容视图一般是FrameLayout，一定要是DrawerLayout的第一个视图，其高度和父视图的高度匹配。

 

 

抽屉视图一般是ListView，在写抽屉视图的时候要注意

1.宽度一般要小于320dp

2.android:layout_gravity属性是确定抽屉的位置

当该属性为left/start时，位于左边

当该属性为right/end时，位于右边

推荐使用start/end

3.android:choiceMode = “singleChoice”

4.android:divider 以及 android:dividerHeight

 

 

 

<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" >

    <FrameLayout
        android:id="@+id/content_frame"
        android:layout_width="match_parent"
        android:layout_height="match_parent" >
    </FrameLayout>

    <ListView
        android:id="@+id/left_drawer"
        android:layout_width="240dp"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:choiceMode="singleChoice"
        android:background="#ffffcc"
        android:divider="@android:color/transparent"
        android:dividerHeight="0dp" >
    </ListView>

</android.support.v4.widget.DrawerLayout>


 

将这个xml文件部署到模拟器上，就能看到一个简单的效果：

 

技术分享

 

 

2.为抽屉添加内容：

因为抽屉视图里是ListView，所以要用到Adapter

 

在Activity中声明各种组件及所使用到的list，adapter

 

public class MainActivity extends Activity {

	private DrawerLayout mDrawerLayout;
	private ListView mDrawerList;
	private ArrayList<String> mList;
	private ArrayAdapter<String> adapter;

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

		mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
		mDrawerList = (ListView) findViewById(R.id.left_drawer);

		// 初始化mlist
		mList = new ArrayList<String>();
		for (int i = 0; i < 5; i++) {
			mList.add("Item--->" + (i + 1));
		}

		// 初始化adapter
		// 适配器数据填充
		adapter = new ArrayAdapter<String>(this,
				android.R.layout.simple_list_item_1, mList);
		
		mDrawerList.setAdapter(adapter);

	}
}


 

技术分享

 

3.监听左侧ListView

现在点击左侧抽屉栏没有什么效果，需要为左侧的LiseView设置监听器（onItemClickListener）并实现onItemClick方法

 

当点击左侧抽屉里的菜单项时，在右边主视图内动态的插入一个Fragment

需要新建一个class content_fragment继承Fragment,并重写onCreateView方法,返回inflater.inflate 方法产生的view

 

public class content_fragment extends Fragment {

	private TextView textView;

	@Override
	public View onCreateView(LayoutInflater inflater, ViewGroup container,
			Bundle savedInstanceState) {
		// inflater.inflate(resource, root, attachToRoot)
		View view = inflater.inflate(R.layout.fragment_content, container,
				false);
		textView = (TextView) view.findViewById(R.id.textView);
		// 接收传递过来的参数，并显示到textView中
		String text = getArguments().getString("text");
		textView.setText(text);
		return view;
	}
}


 

inflater.inflate(resource, root, attachToRoot)

 

Inflate的作用只是将xml定义的一个布局找出来

参数1：要加载的xml资源文件，加载出错抛出InflateException

参数2：新生成视图的父层

 

如果第三个参数attachToRoot为true，就将这个root作为根对象返回，否则仅仅将这个root对象的LayoutParams属性附加到resource对象的根布局对象上，也就是布局文件resource的最外层的View上，比如是一个LinearLayout或者其它的Layout对象。

 

当点击左侧抽屉内的某一菜单项的时候需要为将要填充到FragmentLayout中的Fragment传递数据，通过Fragment的setArguments (Bundle )方法。

新建的Fragment中调用getArguments.getXX()方法即可获得传递过来的数据。

 

 

// 设置监听器
		mDrawerList.setOnItemClickListener(this);

@Override
	public void onItemClick(AdapterView<?> parent, View view, int position,
			long id) {
		// 动态插入一个Fragment到右侧
		Fragment contentFragment = new content_fragment();
		Bundle bundle = new Bundle();
		bundle.putString("text", mList.get(position));
		// 传递数据
		contentFragment.setArguments(bundle);

		FragmentManager fm = getFragmentManager();
		fm.beginTransaction()// 开启一个事务
				.replace(R.id.content_frame, contentFragment)// 新建的视图替换掉原来的视图,将contentFragment填充到右侧
				.commit();

		// 当点击了左侧抽屉里的某一菜单项时，视图会跳转到右侧显示contentFragment，这时候，左侧抽屉需要隐藏了
		mDrawerLayout.closeDrawer(mDrawerList);
	}


 

这时候在模拟器中运行的话，点击左侧某一菜单项就会在右侧显示相应的视图。

点击Item--->3

 

技术分享

 

 

 4.监听抽屉的打开关闭

 

为DrawerLayout设置监听器，当抽屉打开/关闭的时候顶部的title会出现变化。

 

通常设置监听有两种方法：

1.DrawerLayout.setDrawerListener （DrawerLayout.DrawerListener）

2.如果Activity中包含了ActionBar，可以直接使用ActionBarDrawerToggle这个类，这个类是DrawerListener的子类

a) 改变android.R.id.home图标

b) Drawer拉出或隐藏的时候带有动画效果 （syncState()）

c) 可以监听Drawer拉出、隐藏事件

 

覆写ActionBarDrawerToggle的onDrawerOpened()和onDrawerClosed()以监听抽屉拉出或隐藏

当使用ActionBarDrawerToggle时 覆写Activity的onPostCreate 和onConfigurationChanged方法

 

 

public class MainActivity extends Activity implements OnItemClickListener {

	private DrawerLayout mDrawerLayout;
	private ListView mDrawerList;
	private ArrayList<String> mList;
	private ArrayAdapter<String> adapter;
	private ActionBarDrawerToggle mDrawerToggle;
	private String mTitle;

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

		mTitle = (String) getTitle();
		mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
		mDrawerList = (ListView) findViewById(R.id.left_drawer);

		// 初始化mlist
		mList = new ArrayList<String>();
		for (int i = 0; i < 5; i++) {
			mList.add("Item--->" + (i + 1));
		}

		// 初始化adapter
		// 适配器数据填充
		adapter = new ArrayAdapter<String>(this,
				android.R.layout.simple_list_item_1, mList);
		mDrawerList.setAdapter(adapter);
		// 设置监听器
		mDrawerList.setOnItemClickListener(this);

		mDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout,
				R.drawable.ic_drawer, // 应用左上角的图标
				R.string.drawer_open, R.string.drawer_close) {
			// 覆写 抽屉打开/关闭时调用的方法
			@Override
			public void onDrawerOpened(View drawerView) {
				super.onDrawerOpened(drawerView);
				// 当抽屉打开的时候，顶部显示的标题
				getActionBar().setTitle("请选择");
			}

			@Override
			public void onDrawerClosed(View drawerView) {
				super.onDrawerClosed(drawerView);
				// 当抽屉关闭的时候，显示的标题
				getActionBar().setTitle(mTitle);
			}
		};
		mDrawerLayout.setDrawerListener(mDrawerToggle);
	}

	@Override
	public void onItemClick(AdapterView<?> parent, View view, int position,
			long id) {
		// 动态插入一个Fragment到右侧
		Fragment contentFragment = new content_fragment();
		Bundle bundle = new Bundle();
		bundle.putString("text", mList.get(position));
		// 传递数据
		contentFragment.setArguments(bundle);

		FragmentManager fm = getFragmentManager();
		fm.beginTransaction()// 开启一个事务
				.replace(R.id.content_frame, contentFragment)// 新建的视图替换掉原来的视图,将contentFragment填充到右侧
				.commit();

		// 当点击了左侧抽屉里的某一菜单项时，视图会跳转到右侧显示contentFragment，这时候，左侧抽屉需要隐藏了
		mDrawerLayout.closeDrawer(mDrawerList);
	}
}


 

 

技术分享

 

 

5.在右上角添加一个图标，这个图标其实是optionmenu

修改main.xml

 

<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    tools:context="com.example.drawerlayoutbymyself.MainActivity" >

    <item
        android:id="@+id/action_websearch"
        android:icon="@drawable/web_search"
        android:showAsAction="ifRoom|withText"
        android:title="webSearch"/>

</menu>


 

当抽屉打开或是隐藏的时候需要重绘菜单项，需要有onCreateOptionsMenu方法

 

@Override
	public boolean onCreateOptionsMenu(Menu menu) {
		// Inflate the menu; this adds items to the action bar if it is present.
		getMenuInflater().inflate(R.menu.main, menu);
		return true;
	}


 

在mDrawerToggle的监听事件中 添加invalidateOptionsMenu()方法

当调用该方法时，系统会自动调用onPrepareOptionsMenu方法，需要重写该方法

 

@Override
	public boolean onPrepareOptionsMenu(Menu menu) {
		// 抽屉是否被打开
		boolean isDrawerOpen = mDrawerLayout.isDrawerOpen(mDrawerList);
		menu.findItem(R.id.action_websearch).setVisible(!isDrawerOpen);
		return super.onPrepareOptionsMenu(menu);
	}


 

技术分享

 

 

 

技术分享

 

 

这个时候，当抽屉打开或隐藏的时候，屏幕右上角的图标也会发生相应的变动。但是点击这个图标是没有任何反应的。需要覆写 onOptionsItemSelected方法

 

@Override
	public boolean onOptionsItemSelected(MenuItem item) {
		switch (item.getItemId()) {
		case R.id.action_websearch:
			Intent intent = new Intent();
			intent.setAction("android.intent.action.VIEW");
			Uri uri = Uri.parse("http://www.baidu.com");
			intent.setData(uri);
			startActivity(intent);
			break;

		default:
			break;
		}
		return super.onOptionsItemSelected(item);
	}


 

这时候点击右上角的图标时，会调用浏览器打开百度首页。

 

 完整代码：

public class MainActivity extends Activity implements OnItemClickListener {

	private DrawerLayout mDrawerLayout;
	private ListView mDrawerList;
	private ArrayList<String> mList;
	private ArrayAdapter<String> adapter;
	private ActionBarDrawerToggle mDrawerToggle;
	private String mTitle;

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

		mTitle = (String) getTitle();
		mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
		mDrawerList = (ListView) findViewById(R.id.left_drawer);

		// 初始化mlist
		mList = new ArrayList<String>();
		for (int i = 0; i < 5; i++) {
			mList.add("Item--->" + (i + 1));
		}

		// 初始化adapter
		// 适配器数据填充
		adapter = new ArrayAdapter<String>(this,
				android.R.layout.simple_list_item_1, mList);
		mDrawerList.setAdapter(adapter);
		// 设置监听器
		mDrawerList.setOnItemClickListener(this);

		mDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout,
				R.drawable.ic_drawer, // 应用左上角的图标
				R.string.drawer_open, R.string.drawer_close) {
			// 覆写 抽屉打开/关闭时调用的方法
			@Override
			public void onDrawerOpened(View drawerView) {
				super.onDrawerOpened(drawerView);
				// 当抽屉打开的时候，顶部显示的标题
				getActionBar().setTitle("请选择");
				// 重绘菜单项,会自动调用 onPrepareOptionsMenu(),要重写该方法
				invalidateOptionsMenu();
			}

			@Override
			public void onDrawerClosed(View drawerView) {
				super.onDrawerClosed(drawerView);
				// 当抽屉关闭的时候，显示的标题
				getActionBar().setTitle(mTitle);
				// 重绘菜单项
				invalidateOptionsMenu();
			}
		};
		mDrawerLayout.setDrawerListener(mDrawerToggle);

		
	}

	@Override
	public boolean onPrepareOptionsMenu(Menu menu) {
		// 抽屉是否被打开
		boolean isDrawerOpen = mDrawerLayout.isDrawerOpen(mDrawerList);
		menu.findItem(R.id.action_websearch).setVisible(!isDrawerOpen);
		return super.onPrepareOptionsMenu(menu);
	}

	@Override
	public void onItemClick(AdapterView<?> parent, View view, int position,
			long id) {
		// 动态插入一个Fragment到右侧
		Fragment contentFragment = new content_fragment();
		Bundle bundle = new Bundle();
		bundle.putString("text", mList.get(position));
		// 传递数据
		contentFragment.setArguments(bundle);

		FragmentManager fm = getFragmentManager();
		fm.beginTransaction()// 开启一个事务
				.replace(R.id.content_frame, contentFragment)// 新建的视图替换掉原来的视图,将contentFragment填充到右侧
				.commit();

		// 当点击了左侧抽屉里的某一菜单项时，视图会跳转到右侧显示contentFragment，这时候，左侧抽屉需要隐藏了
		mDrawerLayout.closeDrawer(mDrawerList);
	}

	@Override
	public boolean onCreateOptionsMenu(Menu menu) {
		getMenuInflater().inflate(R.menu.main, menu);
		return true;
	}

	@Override
	public boolean onOptionsItemSelected(MenuItem item) {
		switch (item.getItemId()) {
		case R.id.action_websearch:
			Intent intent = new Intent();
			intent.setAction("android.intent.action.VIEW");
			Uri uri = Uri.parse("http://www.baidu.com");
			intent.setData(uri);
			startActivity(intent);
			break;

		default:
			break;
		}
		return super.onOptionsItemSelected(item);
	}
}


 

6.在左上角添加一个图标，当用户点击图标时，能够打开抽屉

 

在MainActivity的onCreate方法中添加代码：

// 开启ActionBar上APP ICON功能
		getActionBar().setDisplayHomeAsUpEnabled(true);
		getActionBar().setHomeButtonEnabled(true);


 

这个时候如果部署到模拟器的话，就会发现在左上角有一个返回的图标，但是点击没有任何效果

 

 

 

// 将ActionBar上的图标与Drawer结合起来
		if (mDrawerToggle.onOptionsItemSelected(item)) {
			return true;
		}


 

在onOptionsItemSelected方法中添加一个判断，左上角的图标也是一个  menu item

 

 这时候 点击左上角的图标 可以打开抽屉,并且左上角图标还有动画效果

 

 

最终Activity代码：

 

public class MainActivity extends Activity implements OnItemClickListener {

	private DrawerLayout mDrawerLayout;
	private ListView mDrawerList;
	private ArrayList<String> mList;
	private ArrayAdapter<String> adapter;
	private ActionBarDrawerToggle mDrawerToggle;
	private String mTitle;

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

		mTitle = (String) getTitle();
		mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
		mDrawerList = (ListView) findViewById(R.id.left_drawer);

		// 初始化mlist
		mList = new ArrayList<String>();
		for (int i = 0; i < 5; i++) {
			mList.add("Item--->" + (i + 1));
		}

		// 初始化adapter
		// 适配器数据填充
		adapter = new ArrayAdapter<String>(this,
				android.R.layout.simple_list_item_1, mList);
		mDrawerList.setAdapter(adapter);
		// 设置监听器
		mDrawerList.setOnItemClickListener(this);

		mDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout,
				R.drawable.ic_drawer, // 应用左上角的图标
				R.string.drawer_open, R.string.drawer_close) {
			// 覆写 抽屉打开/关闭时调用的方法
			@Override
			public void onDrawerOpened(View drawerView) {
				super.onDrawerOpened(drawerView);
				// 当抽屉打开的时候，顶部显示的标题
				getActionBar().setTitle("请选择");
				// 重绘菜单项,会自动调用 onPrepareOptionsMenu(),要重写该方法
				invalidateOptionsMenu();
			}

			@Override
			public void onDrawerClosed(View drawerView) {
				super.onDrawerClosed(drawerView);
				// 当抽屉关闭的时候，显示的标题
				getActionBar().setTitle(mTitle);
				// 重绘菜单项
				invalidateOptionsMenu();
			}
		};
		mDrawerLayout.setDrawerListener(mDrawerToggle);

		// 开启ActionBar上APP ICON功能
		getActionBar().setDisplayHomeAsUpEnabled(true);
		getActionBar().setHomeButtonEnabled(true);
	}

	@Override
	public boolean onPrepareOptionsMenu(Menu menu) {
		// 抽屉是否被打开
		boolean isDrawerOpen = mDrawerLayout.isDrawerOpen(mDrawerList);
		menu.findItem(R.id.action_websearch).setVisible(!isDrawerOpen);
		return super.onPrepareOptionsMenu(menu);
	}

	@Override
	public void onItemClick(AdapterView<?> parent, View view, int position,
			long id) {
		// 动态插入一个Fragment到右侧
		Fragment contentFragment = new content_fragment();
		Bundle bundle = new Bundle();
		bundle.putString("text", mList.get(position));
		// 传递数据
		contentFragment.setArguments(bundle);

		FragmentManager fm = getFragmentManager();
		fm.beginTransaction()// 开启一个事务
				.replace(R.id.content_frame, contentFragment)// 新建的视图替换掉原来的视图,将contentFragment填充到右侧
				.commit();

		// 当点击了左侧抽屉里的某一菜单项时，视图会跳转到右侧显示contentFragment，这时候，左侧抽屉需要隐藏了
		mDrawerLayout.closeDrawer(mDrawerList);
	}

	@Override
	public boolean onCreateOptionsMenu(Menu menu) {
		getMenuInflater().inflate(R.menu.main, menu);
		return true;
	}

	@Override
	public boolean onOptionsItemSelected(MenuItem item) {
		// 将ActionBar上的图标与Drawer结合起来
		if (mDrawerToggle.onOptionsItemSelected(item)) {
			return true;
		}
		switch (item.getItemId()) {
		case R.id.action_websearch:
			Intent intent = new Intent();
			intent.setAction("android.intent.action.VIEW");
			Uri uri = Uri.parse("http://www.baidu.com");
			intent.setData(uri);
			startActivity(intent);
			break;
		default:
			break;
		}
		return super.onOptionsItemSelected(item);
	}

	@Override
	protected void onPostCreate(Bundle savedInstanceState) {
		super.onPostCreate(savedInstanceState);
		// 需要将ActionDrawerToggle与DrawerLayout的状态同步
		// 将ActionBarDrawerToggle中的drawer图标，设置为Home-Button icon
		mDrawerToggle.syncState();
	}

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


 

版权声明：本文为博主原创文章，未经博主允许不得转载。

Android---62---DrawerLayout实现抽屉效果

标签：android   drawerlayout   抽屉   

原文地址：http://blog.csdn.net/u013476556/article/details/47292325
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！