Android - DrawerLayout

简介: Android DrawerLayout 的使用 Android L  Android Studio 1.4 从主视图左侧能抽出一个导航栏,效果图:  点击后弹出新界面:  新界面也可以抽出左侧导航栏     1.

Android DrawerLayout 的使用

Android L  Android Studio 1.4

从主视图左侧能抽出一个导航栏,效果图:

 点击后弹出新界面: 

新界面也可以抽出左侧导航栏

 

 

1.配置xml文件,指定根视图和左右抽屉视图

2.Activity中加载xml文件,设定UI动作

代码

首先配置 main_layout.xml 文件;用v4包里的DrawerLayout,指定一个FrameLayout作为根视图,后续可以把Fragment插入到这个FrameLayout中

抽屉视图是一个RelativeLayout,里面承载着几个UI,ListView用于装按钮,下面是退出按键

 1 <android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
 2     android:id="@+id/drawer_layout"
 3     android:layout_width="match_parent"
 4     android:layout_height="match_parent">
 5     <!-- 指定Framelayout为根视图 -->
 6     <FrameLayout
 7         android:id="@+id/root_framelayout"
 8         android:layout_width="match_parent"
 9         android:layout_height="match_parent"></FrameLayout>
10 
11     <!-- The left navigation drawer -->
12     <RelativeLayout
13         android:id="@+id/left_relative_drawer"
14         android:layout_width="240dp"
15         android:layout_height="match_parent"
16         android:layout_gravity="start"
17         android:background="#ffffcc"
18         android:clickable="true"><!-- clickable="true" 防止点击事件穿透 -->
19 
20 
21         <ImageButton
22             android:id="@+id/imagebtn_left_head"
23             android:layout_width="120dp"
24             android:layout_height="120dp"
25             android:layout_centerHorizontal="true"
26             android:layout_marginTop="20dp"
27             android:background="@drawable/littleboygreen"
28             android:scaleType="fitXY" />
29 
30         <ListView
31             android:id="@+id/left_list"
32             android:layout_width="match_parent"
33             android:layout_height="wrap_content"
34             android:layout_below="@id/imagebtn_left_head"
35             android:choiceMode="singleChoice"
36             android:divider="@android:color/transparent"
37             android:dividerHeight="10dp"
38             android:paddingTop="5dp"></ListView>
39 
40         <Button
41             android:id="@+id/btn_left_exit"
42             android:layout_width="140dp"
43             android:layout_height="wrap_content"
44             android:layout_below="@id/left_list"
45             android:layout_centerInParent="true"
46             android:layout_marginTop="50dp"
47             android:background="@drawable/button_corner_shape"
48             android:text="退出应用"
49             android:textSize="20sp" />
50 
51         <Button
52             android:id="@+id/btn_left_confirm"
53             android:layout_width="70dp"
54             android:layout_height="wrap_content"
55             android:layout_below="@id/left_list"
56             android:layout_marginLeft="30dp"
57             android:layout_marginTop="50dp"
58             android:background="@drawable/button_corner_shape"
59             android:text="退出"
60             android:textSize="20sp" />
61 
62         <Button
63             android:id="@+id/btn_left_cancel"
64             android:layout_width="70dp"
65             android:layout_height="wrap_content"
66             android:layout_below="@id/left_list"
67             android:layout_marginLeft="40dp"
68             android:layout_marginTop="50dp"
69             android:layout_toRightOf="@id/btn_left_confirm"
70             android:background="@drawable/button_cancel_corner_shape"
71             android:text="取消"
72             android:textSize="20sp" />
73 
74     </RelativeLayout>
75 
76 
77 </android.support.v4.widget.DrawerLayout>

在MainActivity.java的onCreate方法中加载这个layout

setContentView(R.layout.main_layout);

主视图就只有一张背景,新写一个MainFragment加载进去

MainFragment.java

public class MainFragment extends Fragment {

    ......

    private Toolbar toolbar;

    ......

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View rootView = inflater.inflate(R.layout.main_relativelayout, container,false);

    /* 这里设置UI,设置按钮监听等等 */
    /* 为防止单调,显示放屏幕分辨率和屏幕方向 */
        return rootView;
    }

    /* 屏幕分辨率 */
    private String getScreenRatio(){
        StringBuilder ratio = new StringBuilder("");
        mDisplay = ((WindowManager)getActivity().getSystemService(Context.WINDOW_SERVICE))
                .getDefaultDisplay();/* 先getActivity */
        DisplayMetrics mDisplayMetrics = new DisplayMetrics();
        mDisplay.getMetrics(mDisplayMetrics);
        mDisplay.getSize(mCurrentDisplaySize);/* 竖屏Point(1536, 1964) 横屏Point(2048, 1452) */
        Log.d("rust","mCurrentDisplaySize  "+ mCurrentDisplaySize);
        int screenWidth = mDisplayMetrics.widthPixels;
        int screenHeight = mDisplayMetrics.heightPixels;
        ratio.append(screenWidth);
        ratio.append(" x ");
        ratio.append(screenHeight);
        return ratio.toString();
    }
    /* 获取屏幕方向 */
    private void getOrientation() {
        config = getResources().getConfiguration();/* 检查屏幕方向 */
        if (config.orientation == Configuration.ORIENTATION_LANDSCAPE){
            screenOrientation = "LANDSCAPE";
        } else if (config.orientation == Configuration.ORIENTATION_PORTRAIT) {
            screenOrientation = "PORTRAIT";
        } else {
            screenOrientation = "Unknow";
        }
    }

}

回到MainActivity.java的onCreate方法,把MainFragment加载进去

   mainFragment = new MainFragment();/* 指定一个单独的Fragment */

   ......

   final FragmentManager fragmentManager = getFragmentManager();/* 加载到root容器 */
   fragmentManager.beginTransaction().add(R.id.root_framelayout, mainFragment).commit();

同样在MainActivity.java的onCreate方法中加载一下导航栏

        /* 左抽屉 */
        leftDrawer = (RelativeLayout) findViewById(R.id.left_relative_drawer);

        /* 左列表在左抽屉里 */
        leftList = (ListView) leftDrawer.findViewById(R.id.left_list);

        /* 适配器装载数据;即初始化导航列表;这里使用SimpleAdapter,加载自定义的LinearLayout作为按钮 */
        contentLeftAdapter = new SimpleAdapter(this, leftDrawerListData(),
                R.layout.list_item_linearlayout, new String[]{"image","text"},
                new int[]{R.id.image_left_item,R.id.tv_left_item});

        leftList.setAdapter(contentLeftAdapter);

        /* 为list设置ClickListener;DrawerOnItemClickListener定义在下面*/
        leftList.setOnItemClickListener(new DrawerOnItemClickListener());

        imageBtnLeft.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                fragmentManager.beginTransaction()
                        .replace(R.id.root_framelayout, mainFragment)
                        .commit();
                mDrawerLayout.closeDrawer(leftDrawer);
            }
        });

        btnExit.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                btnConfirmExit.setVisibility(View.VISIBLE);
                btnCancelExit.setVisibility(View.VISIBLE);
                btnExit.setVisibility(View.INVISIBLE);
            }
        });

        btnCancelExit.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                btnCancelExit.setVisibility(View.INVISIBLE);
                btnConfirmExit.setVisibility(View.INVISIBLE);
                btnExit.setVisibility(View.VISIBLE);
            }
        });

        btnConfirmExit.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
//                finish();
                android.os.Process.killProcess(android.os.Process.myPid());
            }
        });

往listview中添加内容的方法

    private List<Map<String, Object>> leftDrawerListData(){
        List<Map<String, Object>> list = new ArrayList<Map<String, Object>>();
        Map<String, Object> map = new HashMap<String, Object>();
        map.put("image", R.drawable.orange01);
        map.put("text", "橘子");
        list.add(map);

        map = new HashMap<String, Object>();
        map.put("image", R.drawable.sixtraveltransportation);
        map.put("text", "路标");
        list.add(map);

        map = new HashMap<String, Object>();
        map.put("image", R.drawable.traintraveltransportation);
        map.put("text", "火车");
        list.add(map);

        map = new HashMap<String, Object>();
        map.put("image", R.drawable.ecologytree);
        map.put("text", "树苗");
        list.add(map);

        map = new HashMap<String, Object>();
        map.put("image", R.drawable.ecology);
        map.put("text", "插头");
        list.add(map);

        return list;
    }

导航栏按钮监听

    private class DrawerOnItemClickListener implements AdapterView.OnItemClickListener{
        @Override
        public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
            seleteItem(position);/* 按钮选择 */
        }
    }

    private void seleteItem(int position){
        leftList.setItemChecked(position, true);

        Fragment newFragment = new ContentFragment();/* new 一个子fragment */
        Bundle args = new Bundle();
        args.putInt(ContentFragment.ARG_SHOW_FRAGMENT,position);
        newFragment.setArguments(args);/* 装载数据 */

        FragmentManager childFragmentManager = getFragmentManager();
        childFragmentManager.beginTransaction()
                .replace(R.id.root_framelayout, newFragment)
                .commit();/* 替换当前fragment */

        /* 最后关闭左侧抽屉 */
        mDrawerLayout.closeDrawer(leftDrawer);
    }

点击一下导航栏的按钮,就会把原来的MainFragment替换掉

 

DrawerLayout往往和Fragment结合起来使用;布局界面可以更丰富和灵活

如果跳到另一个Activity,就抽不出MainActivity的DrawerLayout

 

目录
相关文章
|
8月前
|
API Android开发 容器
36. 【Android教程】侧滑菜单:DrawerLayout
36. 【Android教程】侧滑菜单:DrawerLayout
170 1
|
7月前
|
Android开发
Android使用DrawerLayout仿qq6.6版本侧滑效果
Android使用DrawerLayout仿qq6.6版本侧滑效果
58 0
|
9月前
|
Android开发
Android自带的DrawerLayout和ActionBarDrawerToggle实现侧滑效果
Android自带的DrawerLayout和ActionBarDrawerToggle实现侧滑效果
82 0
|
9月前
|
Android开发
[Android]DrawerLayout滑动菜单+NavigationView
[Android]DrawerLayout滑动菜单+NavigationView
94 0
|
XML Android开发 数据格式
【Android】DrawerLayout抽屉布局的写法
抽屉布局就类似那种侧拉出来的界面。 一个页面想要实现抽屉布局很简单! 这个XML文件包含抽屉布局的代码。
163 0

热门文章

最新文章

  • 1
    【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
  • 2
    Android历史版本与APK文件结构
  • 3
    【01】噩梦终结flutter配安卓android鸿蒙harmonyOS 以及next调试环境配鸿蒙和ios真机调试环境-flutter项目安卓环境配置-gradle-agp-ndkVersion模拟器运行真机测试环境-本地环境搭建-如何快速搭建android本地运行环境-优雅草卓伊凡-很多人在这步就被难倒了
  • 4
    当flutter react native 等混开框架-并且用vscode-idea等编译器无法打包apk,打包安卓不成功怎么办-直接用android studio如何打包安卓apk -重要-优雅草卓伊凡
  • 5
    APP-国内主流安卓商店-应用市场-鸿蒙商店上架之必备前提·全国公安安全信息评估报告如何申请-需要安全评估报告的资料是哪些-优雅草卓伊凡全程操作
  • 6
    【03】仿站技术之python技术,看完学会再也不用去购买收费工具了-修改整体页面做好安卓下载发给客户-并且开始提交网站公安备案-作为APP下载落地页文娱产品一定要备案-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
  • 7
    【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
  • 8
    【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
  • 9
    Cellebrite UFED 4PC 7.71 (Windows) - Android 和 iOS 移动设备取证软件
  • 10
    escrcpy:【技术党必看】Android开发,Escrcpy 让你无线投屏新体验!图形界面掌控 Android,30-120fps 超流畅!🔥
  • 1
    android FragmentManager 删除所有Fragment 重建
    15
  • 2
    Android实战经验之Kotlin中快速实现MVI架构
    21
  • 3
    即时通讯安全篇(一):正确地理解和使用Android端加密算法
    24
  • 4
    escrcpy:【技术党必看】Android开发,Escrcpy 让你无线投屏新体验!图形界面掌控 Android,30-120fps 超流畅!🔥
    39
  • 5
    【01】噩梦终结flutter配安卓android鸿蒙harmonyOS 以及next调试环境配鸿蒙和ios真机调试环境-flutter项目安卓环境配置-gradle-agp-ndkVersion模拟器运行真机测试环境-本地环境搭建-如何快速搭建android本地运行环境-优雅草卓伊凡-很多人在这步就被难倒了
    121
  • 6
    Cellebrite UFED 4PC 7.71 (Windows) - Android 和 iOS 移动设备取证软件
    40
  • 7
    【03】仿站技术之python技术,看完学会再也不用去购买收费工具了-修改整体页面做好安卓下载发给客户-并且开始提交网站公安备案-作为APP下载落地页文娱产品一定要备案-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
    55
  • 8
    Android历史版本与APK文件结构
    148
  • 9
    【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
    46
  • 10
    【01】仿站技术之python技术,看完学会再也不用去购买收费工具了-用python扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-客户的麻将软件需要下载落地页并且要做搜索引擎推广-本文用python语言快速开发爬取落地页下载-优雅草卓伊凡
    40