安卓日记——玩转Material Design（NavigationView篇）

最近突然对Material Design感兴趣，然后想看看怎么玩。

首先要说的是NavigationView，就是我们经常要用到的侧边导航栏

在没有NavigationView之前我们用的是普通的LinearLayout+ListView+头部layout

NavitonView帮我们整合了这三部分，用起来也很方便

1.导入material design的包

compile 'com.android.support:design:23.4.0'

2.修改layout文件

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/drawerLayout"
tools:context="com.jkgeekjack.mymd.MainActivity">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<include layout="@layout/custom_toolbar"></include>
</LinearLayout>

<!--导航栏，头部是nav_header这个layout，菜单内容是drawer_actions这个menu-->
<!--把layout_gravity设为start就是隐藏在屏幕左边-->
<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:headerLayout="@layout/nav_header"
app:menu="@menu/drawer_actions" >
</android.support.design.widget.NavigationView>

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

主layout就是那么简单

3.设置NavigationView头部

新建一个layout，我这取名为nav_header

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:background="@color/colorPrimary"
android:padding="16dp"
android:layout_height="100dp">

<!--头像-->
<ImageView
android:layout_alignParentLeft="true"
android:layout_width="50dp"
android:layout_height="50dp"
android:id="@+id/ivProtrait"
android:src="@drawable/user"/>

<!--名字-->
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="16sp"
android:textColor="#fff"
android:text="jack"/>
</LinearLayout>

记得要设置父布局的高度，我这设为100dp

4.设置菜单内容

新建一个menu，我取名为drawer_actions

<?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/navigation_item_home"
android:icon="@drawable/iconfont_home"
android:title="首页" />
<item
android:id="@+id/navigation_item_discovery"
android:checked="true"
android:icon="@drawable/iconfont_source"
android:title="发现" />
<item
android:id="@+id/navigation_item_focus"
android:icon="@drawable/iconfont_blog"
android:title="关注" />
<item
android:id="@+id/navigation_item_collect"
android:icon="@drawable/iconfont_custom_view"
android:title="收藏" />
<item
android:id="@+id/navigation_item_round"
android:icon="@drawable/iconfont_custom_view"
android:title="圆桌" />
<item
android:id="@+id/navigation_item_message"
android:icon="@drawable/iconfont_custom_view"
android:title="私信" />
</group>
<!--其他item-->
<item android:title="其他">
<menu>
<item
android:id="@+id/navigation_item_switch_theme"
android:checkable="true"
android:title="切换主题" />

<item
android:id="@+id/navigation_item_about"
android:checkable="true"
android:title="设置" />
</menu>
</item>

</menu>

5.写界面的逻辑代码

NavigationView当然要配合Toobar和DrawerLayout来用啦

我在之前的安卓日记——设计简洁好看的UI已经说过Drawerlayout和ToolBar怎么用法，这里就不想细说了

public class MainActivity extends AppCompatActivity {

private Toolbar toolbar;
private DrawerLayout mDrawerLayout;
//     左上角的标志
private ActionBarDrawerToggle mDrawerToggle;
//     菜单列表
private NavigationView navigationView;

//    之前选中NavigationVIew的Item
private MenuItem preMenuItem;

//    NavigationView头部的头像
private ImageView ivProtrait;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initView();
}

private void initView() {

toolbar= (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
mDrawerLayout= (DrawerLayout) findViewById(R.id.drawerLayout);
navigationView= (NavigationView) findViewById(R.id.nav_view);
//设置NavigationView的选项监听
navigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
@Override
public boolean onNavigationItemSelected(MenuItem item) {
//如果之前有选项就把它设为没有选中
if (preMenuItem!=null){
preMenuItem.setChecked(false);
}
switch (item.getItemId()){
case R.id.navigation_item_home:setTitle("首页");break;
case R.id.navigation_item_discovery:setTitle("发现");break;
case R.id.navigation_item_focus:setTitle("关注");break;
case R.id.navigation_item_collect:setTitle("收藏");break;
case R.id.navigation_item_round:setTitle("圆桌");break;
case R.id.navigation_item_message:setTitle("私信");break;
}
preMenuItem=item;
//将当前选项设为选中
item.setChecked(true);
return false;
}
});
//后面的R.string.close,R.string.open好像没什么用，但一定要设
mDrawerToggle=new ActionBarDrawerToggle(this,mDrawerLayout,toolbar,R.string.close,R.string.open);
mDrawerToggle.syncState();
mDrawerLayout.setDrawerListener(mDrawerToggle);
//获得NavigationView的头部view,从而绑定里面的控件
View view=navigationView.getHeaderView(0);
ivProtrait= (ImageView)view.findViewById(R.id.ivProtrait);
ivProtrait.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Toast.makeText(MainActivity.this,"click",Toast.LENGTH_SHORT).show();
}
});
}

效果如图所示

接下来还会有关于更多好看的Materail Design控件的用法敬请关注