Android開發實戰之擁有Material Design風格的抽屜式布局

標籤：

  在實現開發要求中，有需要會使用抽屜式布局，類似於QQ5.0的側滑菜單，實現的方式有很多種，可以自訂控制項，也可以使用第三方開源庫。

同樣的Google也推出了自己的側滑組件——DrawLayout，使用方式也很簡單，配合著toolbar有著不一樣的滑動效果，所以推薦大家使用。

如下是，是不是更具互動性，更加酷炫？

**首先是XML**

drawlayout分為兩部分：側滑介面和內容介面，所以drawlayout中應該有兩個布局，在側滑的布局中設定屬性：android:layout_gravity="start"，就可以實現側滑了。

下面是XML檔案，僅作參考：

<?xml version="1.0" encoding="utf-8"?><android.support.v4.widget.DrawerLayout        android:layout_width="match_parent"        android:layout_height="match_parent"        xmlns:android="http://schemas.android.com/apk/res/android"        xmlns:app="http://schemas.android.com/apk/res-auto"        android:id="@+id/dl_content">    <LinearLayout        android:layout_width="match_parent"        android:layout_height="match_parent"        android:orientation="vertical"        android:id="@+id/ll_content">        <android.support.design.widget.CoordinatorLayout            android:layout_width="match_parent"            android:layout_height="wrap_content"            android:id="@+id/cl_content">            <include layout="@layout/head_home"/>        </android.support.design.widget.CoordinatorLayout>       <FrameLayout           android:layout_width="match_parent"           android:layout_height="0dp"           android:layout_weight="1"           android:id="@+id/fl_content"></FrameLayout>        <android.support.v4.app.FragmentTabHost                android:layout_width="match_parent"                android:layout_height="wrap_content"                app:layout_scrollFlags="scroll|enterAlways"                android:id="@+id/ft_host">        </android.support.v4.app.FragmentTabHost>    </LinearLayout>    <android.support.design.widget.NavigationView            android:id="@+id/nv_left_content"            android:layout_width="wrap_content"            android:layout_height="match_parent"            android:layout_gravity="start"            app:itemIconTint="#333"            app:itemTextColor="#333"            app:headerLayout="@layout/left_home_top"            app:menu="@menu/left_home_botton"        /></android.support.v4.widget.DrawerLayout>

**代碼部分**

接下來就是讓toolbar和drawlayout關聯起來。這部分也很簡單。讓toolbar代替actionbar。這裡有個注意點，不能讓Activity繼承Activity,而是繼承於它的子類AppCompatActivity，否則是找不到setSupportActionBar(toolbar)這個方法的，當我們關聯起來之後，就可以使用ActionBarDrawerToggle了，它實現了

drawlayout的滑動監聽，Google也將它和Material Design風格的動畫特效關聯起來了。

當我們實現了這一步時，讓我們看看效果：

可以發現，按鈕被擋住了，如果你用過印象筆記的用戶端，你會發現，它的側滑按鈕也被擋住了，所以一點都不酷炫了！！！！！

但是作為一個追求完美無bug的安卓開發人員是絕對不允許這樣的事的。

**重寫onDrawerSlide**

通過重寫onDrawerSlide方法重新擷取滑動範圍，讓他貼著內容介面划出。代碼也很簡單這裡貼出主要代碼：

    private void initView() {       setSupportActionBar(toolbar);        drawerToggle=new ActionBarDrawerToggle(this,drawerLayout,toolbar,               R.string.open,R.string.close){            @Override            public void onDrawerSlide(View drawerView, float slideOffset) {                WindowManager windowManager= (WindowManager) getSystemService(                        getApplicationContext().WINDOW_SERVICE);                Display display=windowManager.getDefaultDisplay();                linearLayout.layout(navigationView.getRight(),                        0,                        display.getWidth()+navigationView.getRight(),                        display.getHeight());                super.onDrawerSlide(drawerView, slideOffset);            }        };        drawerLayout.setDrawerListener(drawerToggle);        getSupportActionBar().setHomeButtonEnabled(true);        getSupportActionBar().setDisplayHomeAsUpEnabled(true);    }    @Override    public void onPostCreate(Bundle savedInstanceState) {        super.onPostCreate(savedInstanceState);        drawerToggle.syncState();    }    @Override    public void onConfigurationChanged(Configuration newConfig) {        super.onConfigurationChanged(newConfig);        drawerToggle.onConfigurationChanged(newConfig);    }

最終的就是開篇的效果，是不是很酷炫，使用者體驗也比傳統的側滑好的多了。最後多謝瀏覽，我會繼續加油噠！

Android開發實戰之擁有Material Design風格的抽屜式布局