梅特勒杯创新大赛（一）：带有主题的Android Drawer

前段时间一直都在忙于研究生电子设计大赛和梅特勒创意大赛，所以这几个月几乎没有怎么更新博客，现在比赛已经结束了，我就想趁这段时间把之前做的App的功能提取出来分开进行一个讲解，因为App整体是为智能硬件（运动手环和三激光测量系统）提供服务的，叙述整体的功能用处不大。

 

这一部分想提一下Drawer的使用，对于Drawer的基本官方框架网上都有的，但是我并没有找到带有顶部主题的，于是自己探索了一下，添加了部分xml文件，完成了类似下图的效果。

 

1.修改作为leftdrwer的xml文件

同官方给的区别主要就在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/center_main_content"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="0.91">
    </FrameLayout>

    <LinearLayout
        android:layout_width="260dp"
        android:layout_height="match_parent"
        android:background="#fff"
        android:orientation="vertical"
        android:gravity="center"
        android:layout_gravity="start">
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="150dp"
            android:background="@color/royalblue"
            android:orientation="vertical">
            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="AM-Tool"
                android:textSize="20dp"
                android:layout_marginTop="10dp"
                android:layout_marginLeft="15dp"
                android:textStyle="bold"
                android:textColor="@color/white"/>
            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="5dp"
                android:layout_marginLeft="15dp"
                android:text="Edition:Develop"
                android:textSize="14dp"
                android:textStyle="normal"
                android:textColor="@color/white"/>
            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="2dp"
                android:layout_marginLeft="15dp"
                android:text="PM:ZacharyQi"
                android:textSize="14dp"
                android:textStyle="normal"
                android:textColor="@color/white"/>
            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="2dp"
                android:layout_marginLeft="15dp"
                android:text="RD:JoernLee"
                android:textSize="14dp"
                android:textStyle="normal"
                android:textColor="@color/white"/>
            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="2dp"
                android:layout_marginLeft="15dp"
                android:text="Made For METTLER TOLEDO"
                android:textSize="16dp"
                android:textStyle="bold"
                android:textColor="@color/white"/>
        </LinearLayout>
        <ListView
            android:id="@+id/left_drawer"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_marginTop="15dp"
            android:background="@color/white"
            android:choiceMode="singleChoice"
            android:divider="@android:color/transparent"
            android:dividerHeight="0dp" />
    </LinearLayout>

关键点就是添加一个自己的Layout用作leftDrawer，然后便可以自定义显示的内容了，最后的DrawerList仍然采用listview或者recyclerview都可以。另外就是注意layout的gravity需要修改位start。

 

 

2.修改打开和关闭Drawer的启动方式

 

 private void selectItem(int position) {
        // update the main content by replacing fragments
        FragmentManager fm = getFragmentManager();
        FragmentTransaction transaction = fm.beginTransaction();
        //采用add方式进行fragment切换
        switch (position) {
            case 0:
                nowFragmentNumber = 0;
                if (lazerFragment == null) {
                    lazerFragment = NewLazerFragment.newInstance("三激光距离测量");
                    transaction.add(R.id.center_main_content, lazerFragment);
                }
                //隐藏所有fragment
                hideAllFragment(transaction);
                //显示需要显示的fragment
                transaction.show(lazerFragment);

                break;

            case 1:
                nowFragmentNumber = 1;
                if (roomFragment == null) {
                    roomFragment = NewRoomFragment.newInstance("室内测量");
                    transaction.add(R.id.center_main_content, roomFragment);
                }
                //隐藏所有fragment
                hideAllFragment(transaction);
                //显示需要显示的fragment
                transaction.show(roomFragment);

                break;
            case 2:
                nowFragmentNumber = 2;
                if (leanFragment == null) {
                    leanFragment = NewLeanFragment.newInstance("平面倾斜度测试");
                    transaction.add(R.id.center_main_content, leanFragment);
                }
                //隐藏所有fragment
                hideAllFragment(transaction);
                //显示需要显示的fragment
                transaction.show(leanFragment);

                break;
            case 3:
                nowFragmentNumber = 3;
                if (planeFragment == null) {
                    planeFragment = NewPlaneFragment.newInstance("平面标定");
                    transaction.add(R.id.center_main_content, planeFragment);
                }
                //隐藏所有fragment
                hideAllFragment(transaction);
                //显示需要显示的fragment
                transaction.show(planeFragment);
                break;
            case 4:
                nowFragmentNumber = 4;
                if (spaceFragment == null) {
                    spaceFragment = NewSpaceFragment.newInstance("空间标定");
                    transaction.add(R.id.center_main_content, spaceFragment);
                }
                //隐藏所有fragment
                hideAllFragment(transaction);
                //显示需要显示的fragment
                transaction.show(spaceFragment);
                break;
            case 5:
                nowFragmentNumber = 5;
                if (measureFragment == null) {
                    measureFragment = NewMeasureFragment.newInstance("图像测距");
                    transaction.add(R.id.center_main_content, measureFragment);
                }
                //隐藏所有fragment
                hideAllFragment(transaction);
                //显示需要显示的fragment
                transaction.show(measureFragment);
                break;
            case 6:
                nowFragmentNumber = 6;
                if (bleFragment == null) {
                    bleFragment = BleFragment.newInstance("蓝牙设置");
                    transaction.add(R.id.center_main_content, bleFragment);
                }
                //隐藏所有fragment
                hideAllFragment(transaction);
                //显示需要显示的fragment
                transaction.show(bleFragment);
                break;

        }
        // 事务提交
        transaction.commit();

        // update selected item title, then close the drawer
        // 更新选择后的item和title，然后关闭菜单
        mMenuListView.setItemChecked(position, true);
        setTitle(mMenuTitles[position]);
        /*mDrawerLayout.closeDrawer(mMenuListView);*/
        mDrawerLayout.closeDrawers();
    }

最后一句我把closeDrawer修改为closeDrawers，也可以改为closeDrawer，但是不能通过像之前一样传入listview来实现，要么直接使用closeDrawers关闭所有Drawer，要么采用gravity实现。

 

另外就是打开Drawer了，这个必须使用openDrawer（Gravity.START）来实现，同样不能使用原来的listview来实现，这个通常在Fragment的左上菜单点击事件实现。

 

 imageReturn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                sDrawerActivity.getmDrawerLayout().openDrawer(Gravity.START);

            }
        });

 

 

 

以上就是实现带有自定义主题的Drawer的基本过程了，可以实现基本要求的功能，但是不一定是最好的，如果各位大大有更好的方法欢迎一起交流~