MaterialDesign控件之DrawLayout

今天我們來學(xué)習(xí)一下DrawLayout控件幻碱，以前我們都是使用網(wǎng)上的開源框架slidingMenu答渔，但是在安卓5.0后Google就推出了一個強大的design庫关带，下面對于用法進行詳細的介紹：

一、DrawLayout介紹

是Support Library包中實現(xiàn)了側(cè)滑菜單效果的控件沼撕，可以說drawerLayout是因為第三方控件如MenuDrawer等的出現(xiàn)之后宋雏，google借鑒而出現(xiàn)的產(chǎn)物芜飘。drawerLayout分為側(cè)邊菜單和主內(nèi)容區(qū)兩部分，側(cè)邊菜單可以根據(jù)手勢展開與隱藏（drawerLayout自身特性）磨总，主內(nèi)容區(qū)的內(nèi)容可以隨著菜單的點擊而變化（這需要使用者自己實現(xiàn)）燃箭。

二、DrawLayout使用

DrawLayout一般和NavigationView聯(lián)合使用舍败，達到側(cè)滑的效果招狸，也可以自己定義側(cè)滑的內(nèi)容或控件（如側(cè)滑用的內(nèi)容控件有l(wèi)istView），在這里我的事例使用的是NavigationView邻薯，這個控件我們后面會介紹裙戏。

1，首先要添加依賴庫厕诡，在Android studio項目model setting里面就可以找到：

com.android.support:design:25.0.1

2累榜，看布局文件

<?xml version="1.0" encoding="utf-8"?>
 <android.support.v4.widget.DrawerLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:openDrawer="start">
   <!--這里是主視圖-->
    <include
        layout="@layout/app_bar_main"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
<!-這里是側(cè)滑的部分，也可以用其他布局來代替灵嫌，為了使用design庫里面的這里就使用design庫的NavigationView--->
    <android.support.design.widget.NavigationView
        android:id="@+id/nav_view"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:fitsSystemWindows="true"
        app:itemTextColor="@color/text_color"
        app:menu="@menu/draw_menu"/>
</android.support.v4.widget.DrawerLayout>
tools:openDrawer的位置可以設(shè)置start壹罚，end；這兩個字段也即是在layout_gravity中表示left和right寿羞；但是由于DrawerLayout里面openDrawer只有start猖凛，end字段，所以在設(shè)置的時候我們就使用start绪穆，end
順帶著說一下android:fitsSystemWindows的作用：

具體的作用就是你的contentview是否忽略actionbar,title,屏幕的底部虛擬按鍵辨泳，將整個屏幕當(dāng)作可用的空間。
正常情況玖院，contentview可用的空間是去除了actionbar,title,底部按鍵的空間后剩余的可用區(qū)域菠红；這個屬性設(shè)置為true,則忽略，false則不忽略

1)app_bar_main的布局：

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/AppTheme.AppBarOverlay">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:popupTheme="@style/AppTheme.PopupOverlay"/>

    </android.support.design.widget.AppBarLayout>

    <android.support.v7.widget.RecyclerView
        android:id="@+id/rv"
        android:fillViewport="true"
        android:scrollbars="none"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        />

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:layout_margin="@dimen/fab_margin"
        android:src="@drawable/add"
        app:backgroundTint="@color/add_bg_color"
        app:elevation="6dp"
        app:fabSize="normal"
        app:pressedTranslationZ="25dp"
        app:rippleColor="@color/add_selected_color"/>

</android.support.design.widget.CoordinatorLayout>

三难菌、NavigationView

Paste_Image.png

通過學(xué)習(xí)官方文檔试溯，我們知道NavigationView繼承自FrameLayout。一般用于應(yīng)用的導(dǎo)航菜單郊酒，菜單的內(nèi)容來自于menu文件遇绞。NavigationView通常放置在DrawerLayout內(nèi)部。
其中：

  • android:fitsSystemWindows的值用于設(shè)置狀態(tài)欄透明化與否猎塞。
  • android:layout_gravity可設(shè)置抽屜试读，也就是NavigationView從左邊或是右邊打開。
  • app:menu用于設(shè)置菜單內(nèi)容的xml布局荠耽。
  • app:headerLayout用于設(shè)置NavigationView的HeaderView的xml布局文件钩骇。
    這里app:headerLayout我寫到代碼里面的
編寫NavigationView中的menu的xml文件
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">

    <group android:checkableBehavior="single">
        <item
            android:id="@+id/nav_home"
            android:icon="@drawable/nav_icon_home"
            android:title="Toolbar"/>
        <item
            android:id="@+id/nav_favorite"
            android:icon="@drawable/nav_icon_favorite"
            android:title="CardView"/>
        <item
            android:id="@+id/nav_followers"
            android:icon="@drawable/nav_icon_followers"
            android:title="Palette"/>

        <item
            android:id="@+id/nav_settings"
            android:icon="@drawable/nav_icon_settings"
            android:title="仿稀土"/>
        <item
            android:id="@+id/nav_style"
            android:icon="@drawable/nav_icon_gift"
            android:title="主題style"/>

        <item
            android:id="@+id/night"
            android:icon="@drawable/abc_btn_radio_material"
            android:title="模式切換"
            />

    </group>

   <!-- <item android:title="分享和反饋">
        <menu>
            <item
                android:id="@+id/nav_share"
                android:icon="@drawable/nav_icon_settings"
                android:title="分享"/>
            <item
                android:id="@+id/nav_feedback"
                android:icon="@drawable/nav_icon_settings"
                android:title="意見反饋"/>
        </menu>
    </item>-->

</menu>

貼出主要代碼實現(xiàn)：

    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        //ToolBar
        toolbar = (Toolbar) findViewById(R.id.toolbar);
        recyclerView = (RecyclerView) findViewById(R.id.rv);
        //懸浮控件
        fab = (FloatingActionButton) findViewById(R.id.fab);
        //側(cè)滑的DrawerLayout
        drawer = (DrawerLayout) findViewById(R.id.drawer_layout);
        //NavigationView ,側(cè)邊欄
        navigationView = (NavigationView) findViewById(R.id.nav_view);
        getData();
        init();
    }

    private void getData() {
        datas = new int[]{R.drawable.img_0, R.drawable.img_1, R.drawable.img_2, R.drawable.img_3
                , R.drawable.img_4, R.drawable.img_5, R.drawable.img_6, R.drawable.img_7
                , R.drawable.img_8, R.drawable.img_9, R.drawable.img_10, R.drawable.img_11, R.drawable.img_12};
    }

    private void init() {
        //向系統(tǒng)設(shè)置toolbar
        setSupportActionBar(toolbar);
        //設(shè)置線性管理器
        LinearLayoutManager manager = new LinearLayoutManager(this);
        //給recycleView設(shè)置布局管理器
        recyclerView.setLayoutManager(manager);
        //若item的布局是固定的，設(shè)置這個屬性可以提高性能
        recyclerView.setHasFixedSize(true);
        //創(chuàng)建并設(shè)置adapter
        adapter = new RecyclerViewAdapter(datas);
        recyclerView.setAdapter(adapter);
        //ActionBarDrawerToggle  是 DrawerLayout.DrawerListener實現(xiàn),改變android.R.id.home返回圖標(biāo)。
        //.Drawer拉出倘屹、隱藏银亲，帶有android.R.id.home動畫效果。.監(jiān)聽Drawer拉出纽匙、隱藏务蝠；
        ActionBarDrawerToggle toggle = new ActionBarDrawerToggle(this, drawer, toolbar, R.string.navigation_drawer_open, R.string.navigation_drawer_close);
        // drawer.setDrawerListener(toggle);
        //上面的監(jiān)聽被下面的就監(jiān)聽給取代了，由于回報空指針異常烛缔，google推出了addDrawerListener()馏段，
        // 對它做了空指針的判斷
        drawer.addDrawerListener(toggle);
        //該方法會自動和actionBar關(guān)聯(lián), 將開關(guān)的圖片顯示在了action上，如果不設(shè)置践瓷，也可以有抽屜的效果院喜，不過是默認的圖標(biāo)
        toggle.syncState();
        //為側(cè)邊欄的每一個子item設(shè)置監(jiān)聽
        navigationView.setNavigationItemSelectedListener(this);
        //為NavigationView設(shè)置頭布局
        View headerView = navigationView.inflateHeaderView(R.layout.header_layout);
        ImageView imageView = (ImageView) headerView.findViewById(R.id.head_iv);
        imageView.setOnClickListener(this);
        //為懸浮控件設(shè)置監(jiān)聽
        fab.setOnClickListener(this);
    }

    @Override
    public void onClick(View view) {
        switch (view.getId()) {
            case R.id.fab://懸浮控件
                final Snackbar snackbar = Snackbar.make(view, "關(guān)注PANDA,贏得好禮！", Snackbar.LENGTH_LONG);
                snackbar.show();
                snackbar.setAction("關(guān)注站點", new View.OnClickListener() {
                    @Override
                    public void onClick(View view) {
                        snackbar.dismiss();
                    }
                });
                break;
            case R.id.head_iv:
                // TODO: 2017/2/20 進行頭像的拍照和從相冊中讀取的操作
                break;
        }
    }


    @Override
    public boolean onNavigationItemSelected(@NonNull MenuItem item) {
        //找到MenuItem的id
        int id = item.getItemId();
        switch (id) {
            case R.id.nav_home:
                break;
            case R.id.nav_favorite:
                break;
            case R.id.nav_followers:
                break;
            case R.id.nav_settings:
                break;
            case R.id.nav_style:
                break;
            case R.id.night:
                break;
        }
        drawer.closeDrawer(GravityCompat.START);
        return true;
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.recycle_menu, menu);
        return super.onCreateOptionsMenu(menu);
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        int itemId = item.getItemId();
        item.setChecked(true);
        switch (itemId) {
            case R.id.list://常規(guī)的listView列表
                LinearLayoutManager manager = new LinearLayoutManager(this);
                recyclerView.setLayoutManager(manager);
                adapter.notifyDataSetChanged();
                break;
            case R.id.grid://網(wǎng)格布局
                GridLayoutManager  manager1= new GridLayoutManager(this, 2);
                manager1.setOrientation(GridLayoutManager.VERTICAL);
                recyclerView.setLayoutManager(manager1);
                adapter.notifyDataSetChanged();
                break;
            case R.id.stagger://瀑布流
                StaggeredGridLayoutManager manager2 = new StaggeredGridLayoutManager(2,StaggeredGridLayoutManager.VERTICAL);
                recyclerView.setLayoutManager(manager2);
                adapter.notifyDataSetChanged();
                break;
        }
        return super.onOptionsItemSelected(item);
    }
  //按物理返回鍵的時候晕翠，收縮側(cè)邊欄
    @Override
    public void onBackPressed() {
        if(drawer.isDrawerOpen(GravityCompat.START)){
            drawer.closeDrawer(GravityCompat.START);
        }else {
            super.onBackPressed();
        }
    }

最后來看看效果：


Paste_Image.png
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 人面猴
    序言：七十年代末喷舀，一起剝皮案震驚了整個濱河市，隨后出現(xiàn)的幾起案子淋肾，更是在濱河造成了極大的恐慌硫麻，老刑警劉巖，帶你破解...
    沈念sama閱讀 221,635評論 6贊 515
  • 死咒
    序言：濱河連續(xù)發(fā)生了三起死亡事件樊卓，死亡現(xiàn)場離奇詭異拿愧，居然都是意外死亡，警方通過查閱死者的電腦和手機简识，發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,543評論 3贊 399
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進店門赶掖，熙熙樓的掌柜王于貴愁眉苦臉地迎上來，“玉大人七扰，你說我怎么就攤上這事∨惆祝” “怎么了颈走？”我有些...
    開封第一講書人閱讀 168,083評論 0贊 360
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵，是天一觀的道長咱士。 經(jīng)常有香客問我立由，道長，這世上最難降的妖魔是什么序厉？ 我笑而不...
    開封第一講書人閱讀 59,640評論 1贊 296
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任锐膜，我火速辦了婚禮，結(jié)果婚禮上弛房，老公的妹妹穿的比我還像新娘道盏。我一直安慰自己，他們只是感情好，可當(dāng)我...
    茶點故事閱讀 68,640評論 6贊 397
  • 惡毒庶女頂嫁案：這布局不是一般人想出來的
    文/花漫 我一把揭開白布荷逞。 她就那樣靜靜地躺著媒咳，像睡著了一般。 火紅的嫁衣襯著肌膚如雪种远。 梳的紋絲不亂的頭發(fā)上涩澡，一...
    開封第一講書人閱讀 52,262評論 1贊 308
  • 城市分裂傳說
    那天，我揣著相機與錄音坠敷，去河邊找鬼妙同。 笑死，一個胖子當(dāng)著我的面吹牛膝迎，可吹牛的內(nèi)容都是我干的粥帚。 我是一名探鬼主播，決...
    沈念sama閱讀 40,833評論 3贊 421
  • 雙鴛鴦連環(huán)套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開眼弄抬，長吁一口氣：“原來是場噩夢啊……” “哼茎辐！你這毒婦竟也來了？” 一聲冷哼從身側(cè)響起掂恕，我...
    開封第一講書人閱讀 39,736評論 0贊 276
  • 萬榮殺人案實錄
    序言：老撾萬榮一對情侶失蹤拖陆，失蹤者是張志新（化名）和其女友劉穎，沒想到半個月后懊亡，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體依啰，經(jīng)...
    沈念sama閱讀 46,280評論 1贊 319
  • ?護林員之死
    正文 獨居荒郊野嶺守林人離奇死亡，尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,369評論 3贊 340
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年店枣，在試婚紗的時候發(fā)現(xiàn)自己被綠了速警。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 40,503評論 1贊 352
  • 活死人
    序言：一個原本活蹦亂跳的男人離奇死亡鸯两，死狀恐怖闷旧，靈堂內(nèi)的尸體忽然破棺而出，到底是詐尸還是另有隱情钧唐，我是刑警寧澤忙灼，帶...
    沈念sama閱讀 36,185評論 5贊 350
  • ?日本核電站爆炸內(nèi)幕
    正文 年R本政府宣布，位于F島的核電站钝侠，受9級特大地震影響该园，放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜帅韧，卻給世界環(huán)境...
    茶點故事閱讀 41,870評論 3贊 333
  • 男人毒藥：我在死后第九天來索命
    文/蒙蒙 一里初、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧忽舟，春花似錦双妨、人聲如沸淮阐。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,340評論 0贊 24
  • 一樁弒父案斥难，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽枝嘶。三九已至，卻和暖如春哑诊，著一層夾襖步出監(jiān)牢的瞬間群扶，已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,460評論 1贊 272
  • 情欲美人皮
    我被黑心中介騙來泰國打工镀裤， 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留竞阐，地道東北人。 一個月前我還...
    沈念sama閱讀 48,909評論 3贊 376
  • 代替公主和親
    正文 我出身青樓暑劝，卻偏偏與公主長得像骆莹，于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子担猛，可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 45,512評論 2贊 359

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