Android Material 之NavigationView和TextInputLayout的使用

请尊重劳动成果，转载注明出处，谢谢！

/article/11874300.html

　上一篇文章Android Material 之CoordinatorLayout、AppBarLayout、CollapsingToolbarLayout、Toolbar 等的说明和使用中，对

"com.android.support:design:24.0.0"

　包下的大部分控件做了说明，加上本文NavigationView和TextInputLayout的使用，design包下的控件使用基本叙述完成。

效果图：



demo下载：http://download.csdn.net/detail/amazing7/9586516

1. NavigationView

　　先说说android上的侧滑菜单的实现，以前都是用的开源项目SlidingMenu，后来用MenuDrawer，最后google终于发现这个东西是开发中常用的控件，于是官方就搞了个drawerLayout实现了侧滑菜单效果，放在support v4的包中。其内部是靠ViewDragHelper实现的，使用起来也非常简单。

　　

　　DrawerLayout有两个子布局，第一个是主界面（宽高都match_parent），第二个就是侧滑菜单的布局了（一般高度match_parent，通过设置layout_gravity为left 或是right 来确定菜单出现的位置）。

　　菜单布局可以是任何布局，我这里是用的NavigationView来实现Material 效果的侧滑菜单。

　　

本例activity_main.xml布局：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context="cn.fanrunqi.navigation.MainActivity">

<android.support.v7.widget.Toolbar
android:id="@+id/toolBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
android:minHeight="?attr/actionBarSize"
android:popupTheme="@style/ThemeOverlay.AppCompat.Light"
app:theme="@style/ThemeOverlay.AppCompat.ActionBar"/>

<android.support.v4.widget.DrawerLayout
android:id="@+id/drawerLayout"
android:layout_height="match_parent"
android:layout_width="match_parent"
>
<!--主布局-->
<include layout="@layout/main_layout" />
<!--侧滑菜单-->
<android.support.design.widget.NavigationView
android:id="@+id/navigation"
android:background="#ddd"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="left"
app:headerLayout="@layout/navigationview_header"
app:menu="@menu/navigationview_menu"/>

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

　　可以看出NavigationView布局中有两个自定义属性，app:headerLayout指定菜单的头部布局，可以理解成include进来的子布局，我们根据具体的需求来选择需不需要头部。app:menu来导入其菜单样式。

先来看看头部布局 navigationview_header.xml：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="150dp"
android:orientation="horizontal"
android:background="@drawable/header_bg"
android:padding="20dp"
tools:context="cn.fanrunqi.navigation.MainActivity">

<de.hdodenhof.circleimageview.CircleImageView
android:layout_width="65dp"
android:layout_height="65dp"
android:src="@drawable/head"
app:civ_border_width="1dp"
app:civ_border_color="#ffffff"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="28dp"
android:layout_marginLeft="30dp"
android:textSize="14sp"
android:text="fanrunqi"
android:textColor="#fff"
/>
</LinearLayout>

菜单文件 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:icon="@drawable/ic_account_balance_black_48dp"
android:title="@string/home"/>
<item
android:title="group1">
<menu>
<item
android:icon="@drawable/ic_favorite_black_48dp"
android:title="@string/favourite"/>
<item
android:icon="@drawable/ic_build_black_48dp"
android:title="@string/build"/>
</menu>
</item>
<item
android:title="group2">
<menu>
<item
android:icon="@drawable/ic_grade_black_48dp"
android:title="@string/grade"/>
<item
android:icon="@drawable/ic_help_black_48dp"
android:title="@string/help"/>
</menu>
</item>
</group>
</menu>

　　在代码中设置toolBar响应DrawerLayout的状态改变，通过ActionBarDrawerToggle实现DrawerLayout展开关闭的监听。添加navigation的OnNavigationItemSelectedListener监听接口，在点击菜单某个item的时候主界面做出相应的操作。官方说明地址

　　

MainActivity.java的代码：

public class MainActivity extends AppCompatActivity {

@InjectView(R.id.toolBar)
Toolbar toolBar;
@InjectView(R.id.drawerLayout)
DrawerLayout drawerLayout;
@InjectView(R.id.navigation)
NavigationView navigation;

private ActionBarDrawerToggle mDrawerToggle;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
ButterKnife.inject(this);

toolBar.setTitle("Toolbar");
toolBar.setTitleTextColor(Color.parseColor("#ffffff"));
setSupportActionBar(toolBar);
getSupportActionBar().setHomeButtonEnabled(true);
getSupportActionBar().setDisplayHomeAsUpEnabled(true);

mDrawerToggle = new ActionBarDrawerToggle(this, drawerLayout, toolBar, R.string.open, R.string.close) {
@Override
public void onDrawerOpened(View drawerView) {
super.onDrawerOpened(drawerView);
toolBar.setTitle("Navigation");
}

@Override
public void onDrawerClosed(View drawerView) {
super.onDrawerClosed(drawerView);
toolBar.setTitle("Toolbar");
}
};
mDrawerToggle.syncState();
drawerLayout.addDrawerListener(mDrawerToggle);

navigation.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {

@Override public boolean onNavigationItemSelected(MenuItem menuItem) {
Snackbar.make(drawerLayout, menuItem.getTitle() + " pressed", Snackbar.LENGTH_LONG).show();
menuItem.setChecked(true);
drawerLayout.closeDrawers();
return true;
}
});
}
}

2. TextInputLayout

　　通过在TextInputLayout中包裹一个EditText实现Material 效果的输入框，在设置hint值后每次获得焦点都会有一个动画效果。本例中的使用：

<android.support.design.widget.TextInputLayout
android:hint="Username"
android:id="@+id/til_username"
android:layout_width="match_parent"
android:layout_height="wrap_content">

<EditText
android:id="@+id/et_username"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="textEmailAddress"
/>
</android.support.design.widget.TextInputLayout>

　对就是这么简单，另外需要注意的是styles.xml文件：

<resources>

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">

<!--Toolbar颜色-->
<item name="colorPrimary">@color/colorPrimary</item>
<!--状态栏颜色-->
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">@color/colorAccent</item>
<!--菜单键样式-->
<item name="drawerArrowStyle">@style/AppTheme.DrawerArrowToggle</item>
</style>

<style name="AppTheme.DrawerArrowToggle" parent="Base.Widget.AppCompat.DrawerArrowToggle">
<item name="color">@android:color/white</item>
</style>

</resources>

因为用到了Toolbar所以要在AppTheme使用NoActionBar的主题；

这里的菜单键默认是黑色的，通过如上设置可改变颜色。

同时注意通过改变colorAccent的值可以改变TextInputLayout的颜色。

谢谢！