首页 > 其他分享 >DrawerLayout的简单使用

DrawerLayout的简单使用

时间：2023-04-15 22:31:44浏览次数：36  
标签：layout 简单 public content drawer 使用 DrawerLayout id

本节给大家带来基础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的简单使用_ide

实现关键代码：

首先是我们的主布局，注意：最外层要是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 最多由三个部分组成，中间的内容部分，左边的侧滑菜单部分，右边的侧滑菜单部分组成！ 下面我们来写一个带有两个侧滑菜单的示例！

运行效果图：

DrawerLayout的简单使用_android_02

代码实现：

首先我们创建两个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")判断触发菜单事件的是哪个菜单！然后可以进行对应的操作！

标签：layout,简单,public,content,drawer,使用,DrawerLayout,id
From： https://blog.51cto.com/u_15641375/6192494

相关文章

  • vivado ILA ip核使用
    新建ip核心ip核设置调用ip核根据模板在.v文件中调用ILAip核......
  • 使用 TensorFlow 构建机器学习项目：1~5
    原文：BuildingMachineLearningProjectswithTensorFlow协议：CCBY-NC-SA4.0译者：飞龙本文来自【ApacheCN深度学习译文集】，采用译后编辑（MTPE）流程来尽可能提升效率。不要担心自己的形象，只关心如何实现目标。——《原则》，生活原则2.3.c一、探索和转换数据TensorFlow是......
  • 使用 TensorFlow 构建机器学习项目：6~10
    原文：BuildingMachineLearningProjectswithTensorFlow协议：CCBY-NC-SA4.0译者：飞龙本文来自【ApacheCN深度学习译文集】，采用译后编辑（MTPE）流程来尽可能提升效率。不要担心自己的形象，只关心如何实现目标。——《原则》，生活原则2.3.c六、卷积神经网络卷积神经网络是当......
  • 监听器Listener使用&Session
    使用配置xml配置1.编写一个监听ServletContext生命周期的Listener;实现Listener接口在当前2.项目中注册（在web.xml）使用;publicclassMyServletContextListenerimplementsServletContextListener{@OverridepublicvoidcontextInitialized(ServletContextEventsce){......
  • 【Visual Leak Detector】在 VS 2015 中使用 VLD
    说明使用VLD内存泄漏检测工具辅助开发时整理的学习笔记。本篇介绍在VS2015中使用VLD。同系列文章目录可见《内存泄漏检测工具》目录目录说明1.使用前的准备3.在VS2015中使用VLD3.1无内存泄漏时的输出报告3.2有内存泄漏时的输出报告4.无法正常使用的可能原因1.......
  • kuangbin专题一 简单搜索 迷宫问题（POJ-3984）
    迷宫问题TimeLimit:1000MS MemoryLimit:65536KDescription定义一个二维数组：intmaze[5][5]={0,1,0,0,0,0,1,0,1,0,0,0,0,0,0,0,1,1,1,0,0,0,0,1,0,};它表示一个迷宫，其中的1表示墙壁，0表示可以走的路，只能横着走或竖着走，不能斜着走，要求编......
  • Android开发，使用的是OkHttp和Reftrofit，用的是Kotlin协程，用Kotlin写一个网络拦截器，模拟
    首先，我们需要定义一个网络拦截器类，继承自OkHttp的Interceptor接口：classLoginInterceptor:Interceptor{overridefunintercept(chain:Interceptor.Chain):Response{//模拟登录请求，这里可以根据具体情况进行修改valrequest=chain.request().ne......
  • kuangbin专题一 简单搜索 石油储备（HDU-1241）
    OilDepositsTimeLimit:2000/1000MS(Java/Others)MemoryLimit:65536/32768K(Java/Others)ProblemDescriptionTheGeoSurvCompgeologicsurveycompanyisresponsiblefordetectingundergroundoildeposits.GeoSurvCompworkswithonelargerectangula......
  • Python虚拟环境下使用Pyinstaller打包
    PyInstaller ，他是一款帮助我们把整个项目完整打包的工具。目前已经兼容Py3.7，以及MacApp和WindowsExe由于在进行Pyinstaller打包时，会一同将Pyinstaller所在环境里所有的package一起打进去，这就导致了非常多曾经下载过的，但是在这个项目中没用到的package，也会成为程序的一部分，......
  • kuangbin专题一 简单搜索 起火迷宫（UVA-11624）
    Fire!DescriptionJoeworksinamaze.Unfortunately,portionsofthemazehavecaughtonfire,andtheownerofthemazeneglectedtocreateafireescapeplan.HelpJoeescapethemaze.GivenJoe’slocationinthemazeandwhichsquaresofthemazeareo......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99