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

Android使用DrawerLayout创建左右两个抽屉菜单

时间:2014-08-13 03:38:46      阅读:364      评论:0      收藏:0      [点我收藏+]

标签:android drawerlayout 抽屉菜单

   在android support.v4 中有一个抽屉视图控件DrawerLayout。使用这个控件,可以生成通过在屏幕上水平滑动打开或者关闭菜单,能给用户一个不错的体验效果。

   最近在项目中,设计中有用到这个效果,但是是左右两边都能划出这样的一个菜单效果。经过使用发现,在xml布局中和代码中,几乎是添加添加同样的代码,就可以实现这种作用两种菜单的效果。

   效果图如下:

   左边拉出菜单:

bubuko.com,布布扣

         右边拉出菜单效果:

bubuko.com,布布扣

    具体的实现方法如下,结合代码文件,跟大家分享一下:


    1. 主页布局文件:

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/main_drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/transparent" >

    <RelativeLayout
        android:id="@+id/main_content_frame_parent"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@android:color/transparent" >
	<!-- 下层显示的主要内容 -->
        <FrameLayout
            android:id="@+id/main_content_frame"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@android:color/white"
            android:scrollbars="vertical" >
        </FrameLayout>
    </RelativeLayout>
	<!-- 左侧滑动栏 -->
    <RelativeLayout
        android:id="@+id/main_left_drawer_layout"
        android:layout_width="240dp"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:background="@android:color/transparent"
        android:paddingTop="50dp" >
    </RelativeLayout>
    <!-- 右侧滑动栏 -->

    <RelativeLayout
        android:id="@+id/main_right_drawer_layout"
        android:layout_width="240dp"
        android:layout_height="match_parent"
        android:layout_gravity="end"
        android:background="@android:color/transparent"
        android:paddingTop="50dp" >
    </RelativeLayout>

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

如上,使用DrawerLayout需要在布局文件跟目录中引用,v4包中的DrawerLayout标签,并且宽和高,都设置为match_parent.里面framelayout用来现实菜单收起时,下层页面的布局。

    而main_left_drawer_layout和main_right_drawer_layout为左右两个抽屉菜单对应的父layout,需要注意的是,在DrawerLayout中,从左侧开始使用android:layout_gravity="start",从右侧开始,使用 android:layout_gravity="end"。  

     

     b.主布局代码文件:

    

package com.demo.drawlayout;

import android.os.Bundle;
import android.support.v4.app.ActionBarDrawerToggle;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentTransaction;
import android.support.v4.widget.DrawerLayout;
import android.view.View;
import android.widget.RelativeLayout;
import android.widget.TextView;


public class MainFrameLayout extends FragmentActivity {
	// 抽屉菜单对象
	private ActionBarDrawerToggle drawerbar;
	public DrawerLayout drawerLayout;
	private TestFragment testFragment;
	private RelativeLayout left_menu_layout, right_xiaoxi_layout;
	
	private TextView text;
	@Override
	protected void onCreate(Bundle arg0) {
		super.onCreate(arg0);
		setContentView(R.layout.main_frame_activity);
		initView();
		initEvent();
	}
	public void initView(){
			testFragment = new TestFragment();
			FragmentManager fragmentManager = getSupportFragmentManager();
			FragmentTransaction f_transaction = fragmentManager.beginTransaction();
			f_transaction.replace(R.id.main_content_frame_parent, testFragment);
			f_transaction.commitAllowingStateLoss();
			initLeftLayout();
			initRightLayout();
	}
	public void initLeftLayout(){
		drawerLayout = (DrawerLayout) findViewById(R.id.main_drawer_layout);
		//设置透明
		drawerLayout.setScrimColor(0x00000000);
		//左边菜单
		left_menu_layout = (RelativeLayout) findViewById(R.id.main_left_drawer_layout);
		View view2 = getLayoutInflater().inflate(R.layout.menu_layout, null);
		text=(TextView)view2.findViewById(R.id.text);
		text.setText("左边测试菜单");
		left_menu_layout.addView(view2);
	}
	public void initRightLayout(){
		//左边菜单
		right_xiaoxi_layout = (RelativeLayout) findViewById(R.id.main_right_drawer_layout);
		View view = getLayoutInflater().inflate(R.layout.xiaoxi_layout, null);
		text=(TextView)view.findViewById(R.id.text);
		text.setText("右边测试菜单");
		right_xiaoxi_layout.addView(view);
	}
	private void initEvent() {
		drawerbar = new ActionBarDrawerToggle(this, drawerLayout, R.drawable.ic_launcher, R.string.open, R.string.close) {
		        //菜单打开
			@Override
			public void onDrawerOpened(View drawerView) {
				
				super.onDrawerOpened(drawerView);
			}
                       // 菜单关闭
			@Override
			public void onDrawerClosed(View drawerView) {

				super.onDrawerClosed(drawerView);
			}
		};
		drawerLayout.setDrawerListener(drawerbar);
	}
        //左边菜单开关事件
	public void openLeftLayout() {
		if (drawerLayout.isDrawerOpen(left_menu_layout)) {
			drawerLayout.closeDrawer(left_menu_layout);
		} else {
			drawerLayout.openDrawer(left_menu_layout);

		}
	}

	// 右边菜单开关事件
	public void openRightLayout() {
		if (drawerLayout.isDrawerOpen(right_xiaoxi_layout)) {
			drawerLayout.closeDrawer(right_xiaoxi_layout);
		} else {
			drawerLayout.openDrawer(right_xiaoxi_layout);
		}
	}
}

   代码很简单,相应的地方都有注释。这里就不罗嗦了。

   主要说一下:抽屉菜单的开关事件就是,把抽屉视图添加到ActionBarDrawerToggle开关中,通关它的开关事件来控制菜单的打开和关闭,同样,一个菜单需要注册一个事件,两个菜单,也是把菜单加到这个ActionBarDrawerToggle 中进行管理。它会自行处理左右两个菜单的打开和关闭,而不会出现同时打开的现象,这一点这个控件设计的还是挺棒的。

   余下的工作,就是大家根据自己的需要,自己写左右菜单里面的内容和事件了。另外,以前看到一个帖子说,在DrawerLayout中使用listview,listview会无效,这个说法好像是不成立的,至少,在我们的项目中,菜单中添加listview或者其他常用控件,点击事件都不会受到影响。

   相关的代码我添加在了附件中,感兴趣的朋友,可以下载互相学习一下。

  

本文出自 “风泊海上” 博客,请务必保留此出处http://fengbohaishang.blog.51cto.com/5106297/1539203

Android使用DrawerLayout创建左右两个抽屉菜单,布布扣,bubuko.com

Android使用DrawerLayout创建左右两个抽屉菜单

标签:android drawerlayout 抽屉菜单

原文地址:http://fengbohaishang.blog.51cto.com/5106297/1539203

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!