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

转载自:http://www.linuxidc.com/Linux/2014-08/105502.htm


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

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

效果图如下:

左边拉出菜单:

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

右边拉出菜单效果:

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

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

1.

a.

主页布局文件:

<? 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或者其他常用控件,点击事件都不会受到影响。

相关的代码在下面的Linux公社资源网站中,感兴趣的朋友,可以下载互相学习一下。

------------------------------------------分割线------------------------------------------

免费下载地址在 http://linux.linuxidc.com/

用户名与密码都是www.linuxidc.com

具体下载目录在 /2014年资料/8月/13日/Android使用DrawerLayout创建左右两个抽屉菜单

下载方法见 http://www.linuxidc.com/Linux/2013-07/87684.htm

------------------------------------------分割线------------------------------------------

最简单的Ubuntu Touch & Android 双系统安装方式 http://www.linuxidc.com/Linux/2014-01/94881.htm

在Nexus上实现Ubuntu和Android 4.4.2 双启动 http://www.linuxidc.com/Linux/2014-05/101849.htm

Ubuntu 14.04 配置 Android SDK 开发环境 http://www.linuxidc.com/Linux/2014-05/101039.htm

64位Ubuntu 11.10下Android开发环境的搭建(JDK+Eclipse+ADT+Android SDK详细) http://www.linuxidc.com/Linux/2013-06/85303.htm

Ubuntu 14.04 x64配置Android 4.4 kitkat编译环境的方法 http://www.linuxidc.com/Linux/2014-04/101148.htm

Ubuntu 12.10 x64 安装 Android SDK http://www.linuxidc.com/Linux/2013-03/82005.htm

更多Android相关信息见Android 专题页面 http://www.linuxidc.com/topicnews.aspx?tid=11

本文永久更新链接地址http://www.linuxidc.com/Linux/2014-08/105502.htm


©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页