今天我們來學(xué)習(xí)一下DrawLayout控件，以前我們都是使用網(wǎng)上的開源框架slidingMenu，但是在安卓5.0后Google就推出了一個(gè)強(qiáng)大的design庫，下面對于用法進(jìn)行詳細(xì)的介紹：
一、DrawLayout介紹
是Support Library包中實(shí)現(xiàn)了側(cè)滑菜單效果的控件，可以說drawerLayout是因?yàn)榈谌娇丶鏜enuDrawer等的出現(xiàn)之后，google借鑒而出現(xiàn)的產(chǎn)物。drawerLayout分為側(cè)邊菜單和主內(nèi)容區(qū)兩部分，側(cè)邊菜單可以根據(jù)手勢展開與隱藏（drawerLayout自身特性），主內(nèi)容區(qū)的內(nèi)容可以隨著菜單的點(diǎn)擊而變化（這需要使用者自己實(shí)現(xiàn)）。
二、DrawLayout使用
DrawLayout一般和NavigationView聯(lián)合使用，達(dá)到側(cè)滑的效果，也可以自己定義側(cè)滑的內(nèi)容或控件（如側(cè)滑用的內(nèi)容控件有l(wèi)istView），在這里我的事例使用的是NavigationView，這個(gè)控件我們后面會(huì)介紹。
1，首先要添加依賴庫，在Android studio項(xiàng)目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；這兩個(gè)字段也即是在layout_gravity中表示left和right；但是由于DrawerLayout里面openDrawer只有start，end字段，所以在設(shè)置的時(shí)候我們就使用start，end
順帶著說一下android:fitsSystemWindows的作用：
具體的作用就是你的contentview是否忽略actionbar,title,屏幕的底部虛擬按鍵，將整個(gè)屏幕當(dāng)作可用的空間。
正常情況，contentview可用的空間是去除了actionbar,title,底部按鍵的空間后剩余的可用區(qū)域；這個(gè)屬性設(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>
貼出主要代碼實(shí)現(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è)置這個(gè)屬性可以提高性能
recyclerView.setHasFixedSize(true);
//創(chuàng)建并設(shè)置adapter
adapter = new RecyclerViewAdapter(datas);
recyclerView.setAdapter(adapter);
//ActionBarDrawerToggle 是 DrawerLayout.DrawerListener實(shí)現(xiàn),改變android.R.id.home返回圖標(biāo)。
//.Drawer拉出、隱藏，帶有android.R.id.home動(dòng)畫效果。.監(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)聽給取代了，由于回報(bào)空指針異常，google推出了addDrawerListener()，
// 對它做了空指針的判斷
drawer.addDrawerListener(toggle);
//該方法會(huì)自動(dòng)和actionBar關(guān)聯(lián), 將開關(guān)的圖片顯示在了action上，如果不設(shè)置，也可以有抽屜的效果，不過是默認(rèn)的圖標(biāo)
toggle.syncState();
//為側(cè)邊欄的每一個(gè)子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)注站點(diǎn)", new View.OnClickListener() {
@Override
public void onClick(View view) {
snackbar.dismiss();
}
});
break;
case R.id.head_iv:
// TODO: 2017/2/20 進(jìn)行頭像的拍照和從相冊中讀取的操作
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);
}
//按物理返回鍵的時(shí)候，收縮側(cè)邊欄
@Override
public void onBackPressed() {
if(drawer.isDrawerOpen(GravityCompat.START)){
drawer.closeDrawer(GravityCompat.START);
}else {
super.onBackPressed();
}
}
最后來看看效果：
Paste_Image.png
