Android开发之使用DrawerLayout实现侧拉菜单功能

DrawerLayout是Support Library包中实现了侧滑菜单效果的控件，可以说drawerLayout是因为第三方控件如MenuDrawer等的出现之后，google借鉴而出现的产物。DrawerLayout分为侧边菜单和主内容区两部分，侧边菜单可以根据手势展开与隐藏（DrawerLayout自身特性），主内容区的内容可以随着菜单的点击而变化（这需要使用者自己实现）。

DrawerLayout的使用很方便,以下是相关代码和描述：

activity_main.xml

<?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/drawerLayout"
android:layout_width="match_parent"
android:layout_height="match_parent">

<RelativeLayout
android:id="@+id/fragment_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">

<RelativeLayout
android:id="@+id/title_bar"
android:layout_width="match_parent"
android:layout_height="48dp"
android:background="#63B8FF">

<ImageView
android:id="@+id/left_menu"
android:layout_width="48dp"
android:layout_height="48dp"
android:padding="12dp"
android:src="@drawable/menu"/>

<TextView
android:layout_width="wrap_content"
android:layout_height="48dp"
android:layout_centerInParent="true"
android:gravity="center"
android:text="Title Bar"/>

<ImageView
android:id="@+id/right_menu"
android:layout_width="48dp"
android:layout_height="48dp"
android:layout_alignParentRight="true"
android:padding="12dp"
android:src="@drawable/p_center"/>
</RelativeLayout>

<LinearLayout
android:id="@+id/content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="@id/title_bar"
android:orientation="vertical"/>
</RelativeLayout>

<RelativeLayout
android:id="@+id/left"
android:layout_width="200dp"
android:layout_height="match_parent"
android:layout_gravity="left"
android:background="@android:color/white">

<ListView
android:id="@+id/left_listView"
android:layout_width="match_parent"
android:layout_height="match_parent">

</ListView>
</RelativeLayout>

<RelativeLayout
android:id="@+id/right"
android:layout_width="260dp"
android:layout_height="match_parent"
android:layout_gravity="right"
android:background="#BCEE68">

<ImageView
android:id="@+id/p_pic"
android:layout_width="72dp"
android:layout_height="72dp"
android:layout_centerInParent="true"
android:src="@drawable/p_pic"/>

<TextView
android:id="@+id/right_textView"
android:layout_width="wrap_content"
android:layout_height="48dp"
android:layout_below="@id/p_pic"
android:layout_centerHorizontal="true"
android:layout_marginTop="12dp"
android:text="个人中心"
android:textColor="@android:color/black"
android:textSize="14sp"/>

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

content_item.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:paddingTop="20dp"
android:paddingBottom="20dp"
android:gravity="center">

<ImageView
android:id="@+id/item_imageview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/ic
10c24
_launcher"/>

<TextView
android:id="@+id/item_textview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="aa"
android:textSize="20dp"/>

</LinearLayout>

news.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >

<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_centerInParent="true"
android:gravity="center"
android:text="news"
android:textSize="36sp" />

</RelativeLayout>

subscription.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >

<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_centerInParent="true"
android:gravity="center"
android:text="subscription"
android:textSize="36sp" />
</RelativeLayout>

首先，根布局就是DrawerLayout，在根布局之后又主要分为三大块，第一块就是我们主界面的内容，第二块是左边拉出来的布局，第三块是右边拉出来的布局（不需要右边侧拉就不用写，这样的话整个布局就只分为两大块），那么系统怎么知道我们这个布局是主布局还是侧拉菜单的布局？请注意左边侧拉菜单布局android:layout_gravity=”left”这个属性和右边菜单布局的android:layout_gravity=”right”这个属性，哈哈，这下应该明白了吧，系统通过layout_gravity属性的值来判断这个布局是左边菜单的布局还是右边菜单的布局，如果没有这个属性，那不用说，肯定是主界面的布局。

MainActivity.java

package com.example.drawerlayout;

import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentTransaction;
import android.support.v4.widget.DrawerLayout;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.Gravity;
import android.view.View;
import android.widget.AdapterView;
import android.widget.ImageView;
import android.widget.ListView;
import android.widget.RelativeLayout;

import com.example.drawerlayout.adapter.ContentAdapter;
import com.example.drawerlayout.fragment.NewsFragment;
import com.example.drawerlayout.fragment.PictureFragment;
import com.example.drawerlayout.fragment.SubscriptionFragment;
import com.example.drawerlayout.model.ContentModel;

import java.util.ArrayList;
import java.util.List;

public class MainActivity extends AppCompatActivity {

private DrawerLayout mDrawerLayout;
private RelativeLayout rightLayout;
private List<ContentModel> list;
private ContentAdapter adapter;
private ImageView leftMenu,rightMenu;
private ListView listView;
private FragmentManager frgmentManager;

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

getSupportActionBar().hide();

leftMenu = (ImageView)findViewById(R.id.left_menu);
rightMenu = (ImageView)findViewById(R.id.right_menu);
mDrawerLayout = (DrawerLayout)findViewById(R.id.drawerLayout);
rightLayout = (RelativeLayout)findViewById(R.id.right);
listView=(ListView)findViewById(R.id.left_listView);
frgmentManager=getSupportFragmentManager();

initData();

adapter = new ContentAdapter(this,list);
listView.setAdapter(adapter);
leftMenu.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
mDrawerLayout.openDrawer(Gravity.LEFT);
}
});

listView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
@Override
public void onItemClick(AdapterView<?> adapterView, View view, int position, long id) {
FragmentTransaction fragmentTransaction = frgmentManager.beginTransaction();
switch((int)id){
case 1:
fragmentTransaction.replace(R.id.content,new NewsFragment());
break;
case 2:
fragmentTransaction.replace(R.id.content,new SubscriptionFragment());
break;
case 3:
fragmentTransaction.replace(R.id.content,new PictureFragment());
break;
default:
break;
}

fragmentTransaction.commit();
mDrawerLayout.closeDrawer(Gravity.LEFT);
}
});

rightMenu.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
mDrawerLayout.openDrawer(Gravity.RIGHT);
}
});

rightLayout.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
mDrawerLayout.closeDrawer(Gravity.RIGHT);
}
});
}

private void initData(){

list = new ArrayList<ContentModel>();

list.add(new ContentModel(R.drawable.news,"新闻",1));
list.add(new ContentModel(R.drawable.subscription,"订阅",2));
list.add(new ContentModel(R.drawable.picture, "图片", 3));
list.add(new ContentModel(R.drawable.video, "视频", 4));
list.add(new ContentModel(R.drawable.followposter, "跟帖", 5));
list.add(new ContentModel(R.drawable.vote, "投票", 6));
}
}

ContentModel.java

package com.example.drawerlayout.model;

public class ContentModel {

private int imageView;
private String text;
private int id;

public int getId() {
return id;
}

public void setId(int id) {
this.id = id;
}

public ContentModel() {
}

public ContentModel(int imageView, String text, int id) {
this.imageView = imageView;
this.text = text;
this.id = id;
}

public int getImageView() {
return imageView;
}

public void setImageView(int imageView) {
this.imageView = imageView;
}

public String getText() {
return text;
}

public void setText(String text) {
this.text = text;
}

}

ContentAdapter.java

package com.example.drawerlayout.adapter;

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.ImageView;
import android.widget.TextView;

import com.example.drawerlayout.model.ContentModel;
import com.example.drawerlayout.R;

import java.util.List;

/**
* Created by CLF on 2016/8/2.
*/
public class ContentAdapter extends BaseAdapter {

private Context context;
private List<ContentModel> list;

public ContentAdapter(Context context, List<ContentModel> list) {
super();
this.context = context;
this.list = list;
}

@Override
public long getItemId(int position) {
return list.get(position).getId();
}

@Override
public Object getItem(int position) {
if (list != null) {
return list.get(position);
}
return null;
}

@Override
public View getView(int position, View view, ViewGroup viewGroup) {

ViewHold viewHold;

if (view == null) {
viewHold = new ViewHold();
view = LayoutInflater.from(context).inflate(R.layout.content_item, null);
view.setTag(viewHold);
} else {
viewHold = (ViewHold) view.getTag();
}

viewHold.imageView = (ImageView) view.findViewById(R.id.item_imageview);
viewHold.textView = (TextView) view.findViewById(R.id.item_textview);

viewHold.imageView.setImageResource(list.get(position).getImageView());
viewHold.textView.setText(list.get(position).getText());
return view;
}

@Override
public int getCount() {
if (list != null) {
return list.size();
}
return 0;
}

class ViewHold {
public ImageView imageView;
public TextView textView;
}
}

NewsFragment.java

package com.example.drawerlayout.fragment;

import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

import com.example.drawerlayout.R;

/**
* Created by CLF on 2016/8/2.
*/
public class NewsFragment extends Fragment {

@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
}

@Override
public View onCreateView(LayoutInflater inflater,  ViewGroup container,  Bundle savedInstanceState) {
View view = LayoutInflater.from(getActivity()).inflate(R.layout.news,null);
return view;
}
}

SubscriptionFragment.java与PictureFragment.java代码与之类似

首先，先将原有的标题栏隐藏：

getSupportActionBar().hide();

然后：

leftMenu.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
mDrawerLayout.openDrawer(Gravity.LEFT);
}
});

listView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
@Override
public void onItemClick(AdapterView<?> adapterView, View view, int position, long id) {
FragmentTransaction fragmentTransaction = frgmentManager.beginTransaction();
switch((int)id){
case 1:
fragmentTransaction.replace(R.id.content,new NewsFragment());
break;
case 2:
fragmentTransaction.replace(R.id.content,new SubscriptionFragment());
break;
case 3:
fragmentTransaction.replace(R.id.content,new PictureFragment());
break;
default:
break;
}

fragmentTransaction.commit();
mDrawerLayout.closeDrawer(Gravity.LEFT);
}
});

其实很简单，直接调用DrawerLayout的openDrawer方法，参数传Gravity.LEFT表示让左边的侧拉菜单出来，参数如果传Gravity.RIGHT，则表示让右边的侧拉菜单出来。好了，当左边的侧拉菜单出来之后，我希望点击菜单的每一个item，主界面都会有所反应，即当我点击“新闻”，主界面显示新闻内容，当我点击”订阅“，主界面显示订阅的内容，这个也很好实现，首先，点击事件不用说，就是ListView的setOnItemClickListener，点击之后，我们的主界面会显示相应的Fragment，即，如果点击了新闻，则注解卖弄显示新闻的Fragment，如果点击了订阅，则主界面显示订阅的Fragment。

每次点击之后，就用相应的Fragment替换主界面的LinearLayout，当然，替换完成之后要记得关闭左边的侧拉菜单，传入的参数Gravity.LEFT表示关闭左边的侧拉菜单，如果传入的菜单为Gravity.RIGHT表示关闭右边的侧拉菜单。左右菜单的功能是一样的。

代码下载地址：http://download.csdn.net/detail/lfeng1205/9595324