DrawerLayout(官方侧滑菜单) 的简单使用

2023-03-23
四川
本文字数：7999 字
阅读完需：约 26 分钟

本节给大家带来基础 UI 控件部分的最后一个控件：DrawerLayout，官方给我们提供的一个侧滑菜单控件，和上一节的 ViewPager 一样，3.0 以后引入，低版本使用它，需要 v4 兼容包，说到侧滑，相信很多人都用过 github 上的 SlidingMenu，不过好像有两个版本，一个是单独的，另一个需要依赖另一个开源项目：ActionBarSherlock；既然 Google 为我们提供了这个控件，为何不用咧，而且在 Material Design 设计规范中，随处可见的很多侧滑菜单的动画效果，大都可以通过 Toolbar +DrawerLayout 来实现。

1.使用的注意事项

1.主内容视图一定要是 DrawerLayout 的第一个子视图
2.主内容视图宽度和高度需要 match_parent
3.必须显示指定侧滑视图的 android:layout_gravity 属性 android:layout_gravity = "start"时，从左向右滑出菜单 android:layout_gravity = "end"时，从右向左滑出菜单不推荐使用 left 和 right!!!
侧滑视图的宽度以 dp 为单位，不建议超过 320dp(为了总能看到一些主内容视图)
设置侧滑事件：mDrawerLayout.setDrawerListener(DrawerLayout.DrawerListener);
要说一点：可以结合 Actionbar 使用当用户点击 Actionbar 上的应用图标，弹出侧滑菜单！这里就要通过 ActionBarDrawerToggle，它是 DrawerLayout.DrawerListener 的具体实现类，我们可以重写 ActionBarDrawerToggle 的 onDrawerOpened()和 onDrawerClosed()以监听抽屉拉出或隐藏事件！但是这里我们不讲，因为 5.0 后我们使用的是 Toolbar！有兴趣的可以自行查阅相关文档！

2.使用代码示例

示例 1：单个侧滑菜单的实现

运行效果图：

实现关键代码：

首先是我们的主布局，注意：最外层要是 DrawerLayout 哦！！！！

activity_main.xml：

<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/ly_content"        android:layout_width="match_parent"        android:layout_height="match_parent" />
    <ListView        android:id="@+id/list_left_drawer"        android:layout_width="180dp"        android:layout_height="match_parent"        android:layout_gravity="start"        android:background="#080808"        android:choiceMode="singleChoice"        android:divider="#FFFFFF"        android:dividerHeight="1dp" />
</android.support.v4.widget.DrawerLayout>

复制代码

接着 ListView 的布局代码和 domain 类：Item 比较简单，就不给出了，直接上中间 Fragment 的布局以及代码吧！另外 Adapter 直接复用我们之前写的那个可复用的 MyAdapter！

fg_content.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"    android:orientation="vertical">
    <TextView        android:id="@+id/tv_content"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_centerInParent="true"        android:textSize="25sp" />
</RelativeLayout>

复制代码

ContentFragment.java：

/** * Created by Jay on 2015/10/8 0008. */public class ContentFragment extends Fragment {
    private TextView tv_content;
    @Override    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {        View view = inflater.inflate(R.layout.fg_content, container, false);        tv_content = (TextView) view.findViewById(R.id.tv_content);        String text = getArguments().getString("text");        tv_content.setText(text);        return view;    }}

复制代码

最后是我们的 Activity 类

MainActivity.java：

public class MainActivity extends AppCompatActivity implements AdapterView.OnItemClickListener{
    private DrawerLayout drawer_layout;    private ListView list_left_drawer;    private ArrayList<Item> menuLists;    private MyAdapter<Item> myAdapter = null;

    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);
        drawer_layout = (DrawerLayout) findViewById(R.id.drawer_layout);        list_left_drawer = (ListView) findViewById(R.id.list_left_drawer);
        menuLists = new ArrayList<Item>();        menuLists.add(new Item(R.mipmap.iv_menu_realtime,"实时信息"));        menuLists.add(new Item(R.mipmap.iv_menu_alert,"提醒通知"));        menuLists.add(new Item(R.mipmap.iv_menu_trace,"活动路线"));        menuLists.add(new Item(R.mipmap.iv_menu_settings,"相关设置"));        myAdapter = new MyAdapter<Item>(menuLists,R.layout.item_list) {            @Override            public void bindView(ViewHolder holder, Item obj) {                holder.setImageResource(R.id.img_icon,obj.getIconId());                holder.setText(R.id.txt_content, obj.getIconName());            }        };        list_left_drawer.setAdapter(myAdapter);        list_left_drawer.setOnItemClickListener(this);    }

    @Override    public void onItemClick(AdapterView<?> parent, View view, int position, long id) {        ContentFragment contentFragment = new ContentFragment();        Bundle args = new Bundle();        args.putString("text", menuLists.get(position).getIconName());        contentFragment.setArguments(args);        FragmentManager fm = getSupportFragmentManager();        fm.beginTransaction().replace(R.id.ly_content,contentFragment).commit();        drawer_layout.closeDrawer(list_left_drawer);    }}

复制代码

示例 2.左右两个侧滑菜单的实现

嗯，不知道你有没有发现，从上面的DrawerLayout的布局，我们大概可以猜到，DrawerLayout 最多由三个部分组成，中间的内容部分，左边的侧滑菜单部分，右边的侧滑菜单部分组成！ 下面我们来写一个带有两个侧滑菜单的示例！

复制代码

运行效果图：

代码实现：

首先我们创建两个 Fragment 以及对应的布局，他们分别是左右侧滑菜单！

左边 Fragment：

布局：fg_left.xml，这里就用了一个图片而以，点击后弹出一个新的 Activity；当然你可以根据自己的需求进行扩展！

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:orientation="vertical" android:layout_width="match_parent"    android:layout_height="match_parent">
    <ImageView        android:id="@+id/img_bg"        android:layout_width="match_parent"        android:layout_height="match_parent"        android:background="@mipmap/bg_menu_left"/>
</LinearLayout>

复制代码

对应的 LeftFragment.java：

/** * Created by Jay on 2015/10/9 0009. */public class LeftFragment extends Fragment{
    private DrawerLayout drawer_layout;
    @Override    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {        View view = inflater.inflate(R.layout.fg_left, container, false);        ImageView img_bg = (ImageView) view.findViewById(R.id.img_bg);        img_bg.setOnClickListener(new View.OnClickListener() {            @Override            public void onClick(View v) {                getActivity().startActivity(new Intent(getActivity(),OtherActivity.class));                drawer_layout.closeDrawer(Gravity.START);            }        });        return view;    }
    //暴露给Activity，用于传入DrawerLayout，因为点击后想关掉DrawerLayout    public void setDrawerLayout(DrawerLayout drawer_layout){        this.drawer_layout = drawer_layout;    }}

复制代码

右面的 Fragment：

布局就三个按钮，点击后替换中间部分的 Fragment，布局 fg_right.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:background="#2F9AF2"    android:gravity="center"    android:orientation="vertical">
    <Button        android:id="@+id/btn_one"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:text="菜单项一" />
    <Button        android:id="@+id/btn_two"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:text="菜单项二" />
    <Button        android:id="@+id/btn_three"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:text="菜单项三" />
</LinearLayout>

复制代码

然后对应的是 RightFragment.java：

/** * Created by Jay on 2015/10/9 0009. */public class RightFragment extends Fragment implements View.OnClickListener{
    private DrawerLayout drawer_layout;    private FragmentManager fManager;
    @Override    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {        View view = inflater.inflate(R.layout.fg_right, container, false);        view.findViewById(R.id.btn_one).setOnClickListener(this);        view.findViewById(R.id.btn_two).setOnClickListener(this);        view.findViewById(R.id.btn_three).setOnClickListener(this);        fManager = getActivity().getSupportFragmentManager();        return view;    }
    @Override    public void onClick(View v) {        switch (v.getId()){            case R.id.btn_one:                ContentFragment cFragment1 = new ContentFragment("1.点击了右侧菜单项一",R.color.blue);                fManager.beginTransaction().replace(R.id.fly_content,cFragment1).commit();                drawer_layout.closeDrawer(Gravity.END);                break;            case R.id.btn_two:                ContentFragment cFragment2 = new ContentFragment("2.点击了右侧菜单项二",R.color.red);                fManager.beginTransaction().replace(R.id.fly_content,cFragment2).commit();                drawer_layout.closeDrawer(Gravity.END);                break;            case R.id.btn_three:                ContentFragment cFragment3 = new ContentFragment("3.点击了右侧菜单项三",R.color.yellow);                fManager.beginTransaction().replace(R.id.fly_content,cFragment3).commit();                drawer_layout.closeDrawer(Gravity.END);                break;        }    }
    public void setDrawerLayout(DrawerLayout drawer_layout){        this.drawer_layout = drawer_layout;    }
}

复制代码

另外还有一个中间部分填充的 ContentFragment，布局：fg_content.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"    android:orientation="vertical">
    <TextView        android:id="@+id/tv_content"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_centerInParent="true"        android:textSize="25sp" />
</RelativeLayout>

复制代码

ContentFragment.java：

public class ContentFragment extends Fragment {
    private TextView tv_content;    private String strContent;    private int bgColor;
    public ContentFragment(String strContent,int bgColor) {        this.strContent = strContent;        this.bgColor = bgColor;    }
    @Override    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {        View view = inflater.inflate(R.layout.fg_content, container, false);        view.setBackgroundColor(getResources().getColor(bgColor));        tv_content = (TextView) view.findViewById(R.id.tv_content);        tv_content.setText(strContent);        return view;    }}

复制代码

编写好以后，就到我们的 Activity 的布局了以及 Activity 的代码了：在此之前我们还需要些一个顶部条形栏的布局：

view_topbar.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="wrap_content"    android:background="#DCDEDB">
    <Button        android:id="@+id/btn_right"        android:layout_width="40dp"        android:layout_height="40dp"        android:layout_centerVertical="true"        android:layout_alignParentRight="true"        android:background="@drawable/btn_selctor"/>
</RelativeLayout>

复制代码

然后是 activity_main.xml：

<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    android:id="@+id/drawer_layout"    android:layout_width="match_parent"    android:layout_height="match_parent">
    <LinearLayout        android:layout_width="match_parent"        android:layout_height="match_parent"        android:orientation="vertical">
        <include            android:id="@+id/topbar"            layout="@layout/view_topbar"            android:layout_width="wrap_content"            android:layout_height="48dp" />
        <FrameLayout            android:id="@+id/fly_content"            android:layout_width="match_parent"            android:layout_height="match_parent" />
    </LinearLayout>
    <fragment        android:id="@+id/fg_left_menu"        android:name="jay.com.drawerlayoutdemo2.LeftFragment"        android:layout_width="300dp"        android:layout_height="match_parent"        android:layout_gravity="start"        android:tag="LEFT"        tools:layout="@layout/fg_left" />
    <fragment        android:id="@+id/fg_right_menu"        android:name="jay.com.drawerlayoutdemo2.RightFragment"        android:layout_width="100dp"        android:layout_height="match_parent"        android:layout_gravity="end"        android:tag="RIGHT"        tools:layout="@layout/fg_right" />
</android.support.v4.widget.DrawerLayout>

复制代码

最后是 MainActivity.java：

public class MainActivity extends AppCompatActivity implements View.OnClickListener {
    private DrawerLayout drawer_layout;    private FrameLayout fly_content;    private View topbar;    private Button btn_right;    private RightFragment fg_right_menu;    private LeftFragment fg_left_menu;    private FragmentManager fManager;
    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        fManager = getSupportFragmentManager();        fg_right_menu = (RightFragment) fManager.findFragmentById(R.id.fg_right_menu);        fg_left_menu = (LeftFragment) fManager.findFragmentById(R.id.fg_left_menu);        initViews();    }
    private void initViews() {        drawer_layout = (DrawerLayout) findViewById(R.id.drawer_layout);        fly_content = (FrameLayout) findViewById(R.id.fly_content);        topbar = findViewById(R.id.topbar);        btn_right = (Button) topbar.findViewById(R.id.btn_right);        btn_right.setOnClickListener(this);
        //设置右面的侧滑菜单只能通过编程来打开        drawer_layout.setDrawerLockMode(DrawerLayout.LOCK_MODE_LOCKED_CLOSED,                Gravity.END);
        drawer_layout.setDrawerListener(new DrawerLayout.DrawerListener() {            @Override            public void onDrawerSlide(View view, float v) {
            }
            @Override            public void onDrawerOpened(View view) {
            }
            @Override            public void onDrawerClosed(View view) {                drawer_layout.setDrawerLockMode(                        DrawerLayout.LOCK_MODE_LOCKED_CLOSED, Gravity.END);            }
            @Override            public void onDrawerStateChanged(int i) {
            }        });
        fg_right_menu.setDrawerLayout(drawer_layout);        fg_left_menu.setDrawerLayout(drawer_layout);    }
    @Override    public void onClick(View v) {        drawer_layout.openDrawer(Gravity.RIGHT);        drawer_layout.setDrawerLockMode(DrawerLayout.LOCK_MODE_UNLOCKED,                Gravity.END);    //解除锁定    }}

复制代码

好的，至此就大功告成了~，呼呼，下面说下看代码时可能会有的疑惑：

1. drawer_layout.openDrawer(Gravity.END);

这句是设置打开的哪个菜单 START 代表左边，END 代表右边
2. drawer_layout.setDrawerLockMode(DrawerLayout.LOCK_MODE_LOCKED_CLOSED,Gravity.END);锁定右面的侧滑菜单，不能通过手势关闭或者打开，只能通过代码打开！即调用 openDrawer 方法！接着 drawer_layout.setDrawerLockMode(DrawerLayout.LOCK_MODE_UNLOCKED,Gravity.END);解除锁定状态，即可以通过手势关闭侧滑菜单最后在 drawer 关闭的时候调用：drawer_layout.setDrawerLockMode(DrawerLayout.LOCK_MODE_LOCKED_CLOSED, Gravity.END);再次锁定右边的侧滑菜单！
3. 布局代码中的 Tag 属性的作用？答：这里没用到，在重写 DrawerListener 的 onDrawerSlide 方法时，我们可以通过他的第一个参数 drawerView，调用 drawerView.getTag().equals("START")判断触发菜单事件的是哪个菜单！然后可以进行对应的操作！