Android - DrawerLayout-阿里云开发者社区

开发者社区> 开发与运维> 正文

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

 

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章