安卓日记——玩转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控件的用法敬请关注