DrawerLayout與ToolBar之雙宿雙飛

最近因為項目需求需要實現(xiàn)側滑功能骚勘,一開始決定使用SlideMenu的,可是研究Material Design時發(fā)現(xiàn)了谷歌自身推出了DrawerLayout撮奏,所以決定使用谷歌的東西來實現(xiàn)俏讹。

一、側滑菜單在Toolbar下方情況

首先看下效果圖是不是你所需要的畜吊,如下圖:


Paste_Image.png

1藐石、首先需要添加v7包的依賴

dependencies {
    ...//其他代碼
    compile 'com.android.support:appcompat-v7:23.3.0'
}

2、創(chuàng)建一個toolbar.xml作為布局文件toolbar繼承自View定拟,因此可以像其他標準控件一樣直接早主布局文件中添加Toolbar于微,但是為了提高Toolbar的重用效率逗嫡,可以在layout中創(chuàng)建一個custom_toolbar.xml代碼如下:

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="?attr/colorPrimary"
    android:minHeight="?attr/actionBarSize"
    android:orientation="vertical"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
    app:theme="@style/ThemeOverlay.AppCompat.ActionBar">
</android.support.v7.widget.Toolbar>

3、創(chuàng)建DrawerLayout布局文件
在主布局中添加drawerlayout和toolbar,代碼如下:

<?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">
        <include layout="@layout/custom_toolbar"/>   
        <android.support.v4.widget.DrawerLayout
        android:id="@+id/drawerLayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <!-- 內(nèi)容部分 -->
        <FrameLayout
            android:id="@+id/content"
            android:layout_width="match_parent"
            android:layout_height="match_parent"/>
        <!-- 左側側滑部分 -->
        <ListView
            android:id="@+id/leftListView"
            android:layout_width="240dp"
            android:layout_height="match_parent"
            android:layout_gravity="start"
            android:background="@color/colorPrimary"/>
    </android.support.v4.widget.DrawerLayout>
</LinearLayout>

DrawerLayout標簽中有兩個子控件株依,一個是左邊側滑菜單View,一個是主界面驱证。另外需要在左邊菜單起始位置設置為android:layout_gravity="start"。如果你設置了右側側滑菜單恋腕,也需要添加android:layout_gravity="end"抹锄。
  3、你可能對toolbar里面的返回按鈕很感興趣荠藤,切換效果特絢伙单。客官哈肖、別急吻育,容我來告訴你是個啥。這同樣是design里面的一個類ActionBarDrawerToggle淤井。只需要你配置了你就能體驗它的炫麗布疼。不了解的直接查看官方文檔(請自備梯子)。使用方法我們在代碼中為你講述币狠。這里我們來設置該返回鍵的樣式游两,谷歌為我們提供了幾種樣式。

<resources>
    <style name="AppTheme"parent="Theme.AppCompat.Light.NoActionBar">
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>        <item name="colorAccent">@color/colorAccent</item>        <item name="android:textColorPrimary">@android:color/white</item>
        <!-- 返回鍵樣式 -->
        <item name="drawerArrowStyle">@style/AppTheme.DrawerArrowToggle</item>
    </style>
    <style name="AppTheme.DrawerArrowToggle" parent="Base.Widget.AppCompat.DrawerArrowToggle">
        <item name="color">@android:color/white</item>
    </style>
</resources>

4漩绵、源代碼

public class MainActivity extends AppCompatActivity {
    @Bind(R.id.content)
    FrameLayout mContent;
    @Bind(R.id.leftListView)
    ListView mLeftListView;
    @Bind(R.id.drawerLayout)
    DrawerLayout mDrawerLayout; 
   @Bind(R.id.toolbar)
    Toolbar mToolbar;
    private ActionBarDrawerToggle mDrawerToggle;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ButterKnife.bind(this);
        mToolbar.setTitle("測試");
        setSupportActionBar(mToolbar);
        getSupportActionBar().setHomeButtonEnabled(true);
        //設置返回鍵可用
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);
        //創(chuàng)建返回鍵贱案,并實現(xiàn)打開關/閉監(jiān)聽
        mDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout, mToolbar, R.string.open, R.string.close){
            @Override
            public void onDrawerOpened(View drawerView) {
                super.onDrawerOpened(drawerView);
            }
            @Override
            public void onDrawerClosed(View drawerView) {
                super.onDrawerClosed(drawerView);
            }
        };
        mDrawerToggle.syncState(); 
       //將DrawerLayout與DrawerToggle綁定
        mDrawerLayout.addDrawerListener(mDrawerToggle);
        mDrawerLayout.setScrimColor(Color.TRANSPARENT);
       //去除側邊陰影
        String[] aee = {"測試1", "測試2"}; 
        ArrayAdapter arrayAdapter = new  ArrayAdapter(this, android.R.layout.simple_list_item_1, aee);
        mLeftListView.setAdapter(arrayAdapter);
    }
}

代碼中我添加了setScrimColor方法,這個方法是修改側滑菜單滑出時背景顏色止吐。

二轰坊、側滑菜單遮蓋Toolbar情況

效果圖如下:

Paste_Image.png

  側滑菜單遮蓋toolbar。其實只需要修改主布局文件就可以實現(xiàn)祟印。drawerlayout作為根布局標簽就OK,代碼如下:

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/drawerLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
    <!--內(nèi)容+toolbar-->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">
        <include layout="@layout/custom_toolbar"/>
        <!-- 內(nèi)容部分 -->
        <FrameLayout
            android:id="@+id/content"
            android:layout_width="match_parent"
            android:layout_height="match_parent"/>
    </LinearLayout>
    <!-- 左側側滑部分 -->
    <ListView
        android:id="@+id/leftListView"
        android:layout_width="240dp"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:background="@color/colorPrimary"
        android:clickable="true"/>
</android.support.v4.widget.DrawerLayout>

注意:在側滑布局上必須要加上android:clickable="true"粟害,不然側滑菜單將無法使用蕴忆。

如有問題歡迎留言。
源碼下載


最后編輯于
?著作權歸作者所有,轉載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末悲幅,一起剝皮案震驚了整個濱河市套鹅,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌汰具,老刑警劉巖卓鹿,帶你破解...
    沈念sama閱讀 217,277評論 6 503
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異留荔,居然都是意外死亡吟孙,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,689評論 3 393
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來杰妓,“玉大人藻治,你說我怎么就攤上這事∠锘樱” “怎么了桩卵?”我有些...
    開封第一講書人閱讀 163,624評論 0 353
  • 文/不壞的土叔 我叫張陵,是天一觀的道長倍宾。 經(jīng)常有香客問我雏节,道長,這世上最難降的妖魔是什么高职? 我笑而不...
    開封第一講書人閱讀 58,356評論 1 293
  • 正文 為了忘掉前任钩乍,我火速辦了婚禮,結果婚禮上初厚,老公的妹妹穿的比我還像新娘件蚕。我一直安慰自己,他們只是感情好产禾,可當我...
    茶點故事閱讀 67,402評論 6 392
  • 文/花漫 我一把揭開白布排作。 她就那樣靜靜地躺著,像睡著了一般亚情。 火紅的嫁衣襯著肌膚如雪妄痪。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,292評論 1 301
  • 那天楞件,我揣著相機與錄音衫生,去河邊找鬼。 笑死土浸,一個胖子當著我的面吹牛罪针,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播黄伊,決...
    沈念sama閱讀 40,135評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼泪酱,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了还最?” 一聲冷哼從身側響起墓阀,我...
    開封第一講書人閱讀 38,992評論 0 275
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎拓轻,沒想到半個月后斯撮,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,429評論 1 314
  • 正文 獨居荒郊野嶺守林人離奇死亡扶叉,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,636評論 3 334
  • 正文 我和宋清朗相戀三年勿锅,在試婚紗的時候發(fā)現(xiàn)自己被綠了帕膜。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 39,785評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡粱甫,死狀恐怖泳叠,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情茶宵,我是刑警寧澤危纫,帶...
    沈念sama閱讀 35,492評論 5 345
  • 正文 年R本政府宣布,位于F島的核電站乌庶,受9級特大地震影響种蝶,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜瞒大,卻給世界環(huán)境...
    茶點故事閱讀 41,092評論 3 328
  • 文/蒙蒙 一螃征、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧透敌,春花似錦盯滚、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,723評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至撵术,卻和暖如春背率,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背嫩与。 一陣腳步聲響...
    開封第一講書人閱讀 32,858評論 1 269
  • 我被黑心中介騙來泰國打工寝姿, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人划滋。 一個月前我還...
    沈念sama閱讀 47,891評論 2 370
  • 正文 我出身青樓饵筑,卻偏偏與公主長得像,于是被迫代替她去往敵國和親处坪。 傳聞我的和親對象是個殘疾皇子根资,可洞房花燭夜當晚...
    茶點故事閱讀 44,713評論 2 354

推薦閱讀更多精彩內(nèi)容