【站在巨人肩膀上】DrawableLayout_ToolBar_FloatingButton

          在这一篇文章里，将会介绍如何使用DrawableLayout和toolBar打造一个具有侧滑效果的界面。参考了超简单方式打造策划菜单。

          第一步，创建三个xml文件。toolBar.xml，content.xml，主布局文件（这个一般在我们创建activity的时候已经创建好了，没有你就自己创建吧）

          1.toolBar.xml

<?xml version="1.0" encoding="utf-8"?><android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="60dp"    android:id="@+id/toolbar_main"    android:background="@color/colorPrimary"    >    <TextView        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:text="AuthorByChumFuchiu"        android:textSize="24sp"        android:layout_gravity="center"        android:textColor="#ffffff"        /></android.support.v7.widget.Toolbar>

           很简单，根布局为toolbar，里面有一个子view为textview。

          2.content.xml

           这个布局文件的根布局为drawableLayout，子布局分为两个布局，一个是主页面布局，一个是侧滑页面的布局。而drawableLayout根据这些个子布局中包含了layout_gravity属性的值，为它们设置想到对应的位置（所以说，按道理你的侧滑页面可以从上下左右四个方向出来，哇，是不是特别灵活？）

<?xml version="1.0" encoding="utf-8"?><android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:id="@+id/drawable_main"    android:layout_width="match_parent"    android:layout_height="match_parent">    <LinearLayout        android:layout_width="match_parent"        android:layout_height="match_parent"        android:id="@+id/ll_content"        android:orientation="vertical"        android:background="#ffffff"        >    </LinearLayout>    <!--android:layout_gravity="start"属性使这部分作为侧滑部分-->    <!--android:gravity　属性是对该view中内容的限定,而        android:layout_gravity是用来设置该view相对与父view 的位置-->    <LinearLayout        android:id="@+id/ll_menu"        android:layout_gravity="start"        android:orientation="vertical"        android:background="#5EA9CC"        android:layout_width="match_parent"        android:layout_height="match_parent">    </LinearLayout></android.support.v4.widget.DrawerLayout>

好了，两个布局文件搞完了，直接把他们include到activity的布局文件中就完事了。这里要强调的是，在主布局文件中根布局LinearLayout的orientation属性一定要写好,不然不仅你的toobar的按钮显示不出来，而且你侧滑也没有效果的。

<?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:orientation="vertical"    >    <!--toolbar-->    <include layout="@layout/toolbar_main"></include>    <!--drawablelayout-->    <include layout="@layout/content_main"></include></LinearLayout>

布局文件搞定了，那么接下来还要修改的地方是style文件，我记得我昨天有写过一个博客关于style的actionbar与toolbar冲突的问题，但是我今天写这一篇博客的时候惊奇的发现，草稿箱里根本就没有那篇博客！！所以还是直接把修改后的style文件拿过来了。

    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">        <!-- Customize your theme here. -->        <item name="colorPrimary">@color/colorPrimary</item>        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>        <item name="colorAccent">@color/colorAccent</item>        <item name="windowActionBar">false</item>        <item name="windowNoTitle">true</item>    </style>

这个是我整个style的布局，主要添加了两行windowActionBar=false和windowNoTitle=true的代码，这样就不会报错了。你也可以把DarkActionBar修改为NoActionbar，也是可以解决问题的。

最后就是java代码了，东西也很少，在绑定了控件之后，直接调用这一行代码运行就行了。很简单。直接贴上来了。

    private void initToolBarAnadDrawableLayout(){        setSupportActionBar(toolbar);//设置actionbar为我们的toolbar        getSupportActionBar().setHomeButtonEnabled(true);//决定左上角的图标是否可以i安吉        getSupportActionBar().setDisplayHomeAsUpEnabled(true);//给左上角的图标设置一个返回图标        getSupportActionBar().setDisplayShowTitleEnabled(false);//展示标题        //将toolbar与DrawableLayout进行绑定        mToggle=new ActionBarDrawerToggle(MainActivity.this,drawerLayout,toolbar,R.string.open_draw,R.string.close_draw){            @Override            public void onDrawerClosed(View drawerView) {                super.onDrawerClosed(drawerView);            }            @Override            public void onDrawerOpened(View drawerView) {                super.onDrawerOpened(drawerView);            }        };        drawerLayout.addDrawerListener(mToggle);//为drawableLayout设置监听器。        mToggle.syncState();    }

最后就是FloatingActionButton（悬浮按钮），用法和普通的button一模一样。不过要使用的话，如果你项目里面没有他的包，那么首先得添加这么一条依赖

compile 'com.android.support:design:25.0.0'

然后是布局文件

            <android.support.design.widget.FloatingActionButton                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:layout_alignParentBottom="true"                android:layout_alignParentRight="true"                android:layout_marginBottom="50dp"                android:layout_marginRight="20dp"                android:src="@drawable/fly_button"                android:id="@+id/float_btn"                app:fabSize="normal"                android:onClick="floatLocation"                app:backgroundTint="@color/colorPrimary"                app:rippleColor="#7ea19f"                />

里面就比普通的button多了三条app属性，从上往下分别是尺寸，背景色，点击后的颜色。

好了，关于DarawableLayout，Toolbar,FloatingButton的使用小结就到这里了。