Android5.0 之 ToolBar与NavigationView配合使用

ToolBar配合NavigationView实现左侧动画导航效果

代码布局如下所示，ToolBar与NavigationView配合使用 和 ToolBar与其他布局一起使用实现的特效类似，但是使用NavigationView实现出来的特效更加符合material design的设计原则，因为navigationView使用出来的效果，是google已经规定好了的设计尺寸与交互效果。ToolVar与NavigationView配合使用的布局代码：

<?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"
android:id="@+id/drawer_layout"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:fitsSystemWindows="true">

<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/ThemeOverlay.AppCompat.Light"
app:layout_scrollFlags="scroll|enterAlways|snap" />

<android.support.design.widget.NavigationView
android:id="@+id/nav_view"
android:layout_marginTop="?attr/actionBarSize"
android:layout_height="match_parent"
android:layout_width="wrap_content"
android:layout_gravity="start"
android:fitsSystemWindows="true"
//设置navigation的头部
app:headerLayout="@layout/nav_header"
//设置navigation的菜单
app:menu="@menu/drawer_view"/>

</android.support.v4.widget.DrawerLayout>

//使用ToolBar与NavigationView结合的效果如图所示，点击左侧导航会有一个动画特效，相比较于其他布局的使用效果，大家可以看出，NavigationView的效果侧重于突出NavigationView即抽屉导航栏的位置，显示为高亮，而其他部位则显示为暗色调。



代码实现如下

public class MainActivity extends AppCompatActivity {
private ActionBarDrawerToggle mDrawerToggle;
private DrawerLayout mDrawerLayout;
private Toolbar toolbar;
private NavigationView navigationView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main2);

initToolBar();
initDrawerLayout();

}

private void initDrawerLayout() {

navigationView = (NavigationView) findViewById(R.id.nav_view);
if (navigationView != null) {
setupDrawerContent(navigationView);
}
mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
mDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout, 0, 0) {
@Override
public void onDrawerOpened(View drawerView) {
super.onDrawerOpened(drawerView);
invalidateOptionsMenu();
}

@Override
public void onDrawerClosed(View drawerView) {
super.onDrawerClosed(drawerView);
invalidateOptionsMenu();
}
};
mDrawerToggle.setDrawerIndicatorEnabled(true);
mDrawerLayout.setDrawerListener(mDrawerToggle);
mDrawerToggle.syncState();
}

private void initToolBar() {

toolbar = (Toolbar) findViewById(R.id.toolbar);

toolbar.setTitle(R.string.app_name);
toolbar.setTitleTextColor(Color.parseColor(getResources().getString(R.string.action_bar_title_color)));
toolbar.collapseActionView();
//        toolbar.setBackground(getResources().getDrawable(R.drawable.skin2));
setSupportActionBar(toolbar);
if (getSupportActionBar() != null) {
getSupportActionBar().setHomeAsUpIndicator(R.drawable.abc_ic_ab_back_mtrl_am_alpha);
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
}
toolbar.setNavigationOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
TestInstance.i();
openOrCloseDrawer();
}
});
}
private void openOrCloseDrawer() {
if (mDrawerLayout.isDrawerOpen(navigationView)) {
mDrawerLayout.closeDrawer(navigationView);
} else {
mDrawerLayout.openDrawer(navigationView);
}
}

private void setupDrawerContent(NavigationView navigationView) {
navigationView.setNavigationItemSelectedListener(
new NavigationView.OnNavigationItemSelectedListener() {
@Override
public boolean onNavigationItemSelected(MenuItem menuItem) {
menuItem.setChecked(true);
mDrawerLayout.closeDrawers();
Snackbar.make(mDrawerLayout, menuItem.getTitle(), Snackbar.LENGTH_SHORT).show();
return true;
}
});
}

}

navigationView中菜单布局实现

<?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/ic_dashboard"
android:title="Home" />
<item
android:id="@+id/nav_messages"
android:icon="@drawable/ic_event"
android:title="Messages" />
<item
android:id="@+id/nav_friends"
android:icon="@drawable/ic_headset"
android:title="Friends"
/>
<item
android:id="@+id/nav_discussion"
android:icon="@drawable/ic_forum"
android:title="Discussion" />
</group>

<item android:title="Sub items">
<menu>
<item
android:icon="@drawable/ic_dashboard"
android:title="Sub item 1" />
<item
android:icon="@drawable/ic_forum"
android:title="Sub item 2" />
</menu>
</item>

</menu>

ToolBar与NavigationView的配合使用与ToolBar与其他布局的配合使用类似，都是通过DrawerLayout进行组合实现，在这里NavigationView作为抽屉设置给ToolBar实现了动画效果。

下一篇将介绍ToolBar的伸缩特效的设计与实现