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

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);

}

}

}

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

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/f4c4dc5d1345871cdf4e5e7a3703a2b7.html