Design包下NavigationView的使用

来源：互联网发布：怎样做网络主播编辑：程序博客网时间：2024/06/08 02:15

首先介绍一下由来，只属于个人见解。Design包是5.0之后出现的新特性，其包含了许多新出现且具有自己特色的控件。除今天要说的NavigationView导航布局之外，还有TabLayout、RecyclerView、CardView、FloatActionButton、Snackbar、TextInputLayout，还有协调者布局CoordinatorLayout等等等等。

我对于这个的理解个人只是觉得Google不想让android的再一问的去模仿IOS所做出来的效果，有了这个，Google更有了底气。

首先需要在AS上搜索design.

之后选择design.

成功之后你的build.gradle文件上会多出之后就可以愉快的使用NavigationView啦.

因为是NavigationView,所以定义在DrawerLayout中。所以布局中我们也需要把NavigationView定义在DrawerLayout的根标签下。

首先看一下布局文件 activity_main.xml

<?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/drawerLayout_main"    android:layout_width="match_parent"    android:layout_height="match_parent">    <LinearLayout        android:layout_width="match_parent"        android:layout_height="match_parent"        android:orientation="vertical">        <TextView            android:id="@+id/tv"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:text="drawerlayout + navigationview"/>    </LinearLayout>    <android.support.design.widget.NavigationView        android:id="@+id/navigation_main"        android:layout_width="match_parent"        android:layout_height="match_parent"        android:layout_gravity="left"        app:headerLayout="@layout/header_navigation"        app:menu="@menu/menu_navigation_main"/></android.support.v4.widget.DrawerLayout>

这里需要注意的是要用NavigationView特有的属性需要添加

xmlns:app="http://schemas.android.com/apk/res-auto"

的命名空间。其中

android:layout_gravity="left"

代表NavigationView从哪边弹出。

app:headerLayout="@layout/header_navigation"

这个属性可以在NavigationView上添加一个头布局。它也是一个xml布局文件。

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent">    <ImageView        android:id="@+id/imageView"        android:layout_width="match_parent"        android:layout_height="100dp"        android:scaleType="fitXY"        android:src="@mipmap/sakura05" /></LinearLayout>

app:menu="@menu/menu_navigation_main"

这个属性是代表NavigationView中的每一个item,它是一个menu.下面是menu_navigation_main.xml文件

<menu xmlns:android="http://schemas.android.com/apk/res/android"      xmlns:app="http://schemas.android.com/apk/res-auto">    <group        android:checkableBehavior="single">        <item            android:id="@+id/action_common"            android:checked="true"            android:icon="@android:drawable/ic_dialog_dialer"            android:title="我的收藏"/>        <item            android:id="@+id/action_menu"            android:icon="@android:drawable/ic_dialog_email"            android:title="我的相册"/>        <item            android:id="@+id/action_transform"            android:icon="@android:drawable/ic_dialog_map"            android:title="我的文件"/>        <item            android:id="@+id/action_other"            android:checked="false"            android:title="其他操作">            <menu>                <group                    android:checkableBehavior="single">                    <item                        android:id="@+id/action_qq"                        android:checked="false"                        android:icon="@android:drawable/ic_btn_speak_now"                        android:title="QQ好友"/>                    <item                        android:id="@+id/action_weixin"                        android:checked="false"                        android:icon="@android:drawable/ic_dialog_alert"                        android:title="微信好友"/>                </group>            </menu>        </item>    </group></menu>

好了。布局写好了。下面介绍用法。下面贴上MainActivity的代码

public class MainActivity extends AppCompatActivity {    private Context mContext = this;    private DrawerLayout drawerLayout_main;    private NavigationView navigationView_main;    private TextView tv;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        initView();        initActionBar();    }    //初始化ActionBar    private void initActionBar() {        ActionBar actionBar = getSupportActionBar();        actionBar.setTitle("打开抽屉");        actionBar.setDisplayHomeAsUpEnabled(true);//        actionBar.setHomeAsUpIndicator(android.R.drawable.ic_dialog_info);    }    private void initView() {        drawerLayout_main = (DrawerLayout) findViewById(R.id.drawerLayout_main);        navigationView_main = (NavigationView) findViewById(R.id.navigation_main);        tv = ((TextView) findViewById(R.id.tv));        // 设置导航菜单宽度        ViewGroup.LayoutParams params = navigationView_main.getLayoutParams();        params.width = getResources().getDisplayMetrics().widthPixels * 1 / 2;        navigationView_main.setLayoutParams(params);        //设置NavigationView菜单条目的点击监听        navigationView_main.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {            @Override            public boolean onNavigationItemSelected(MenuItem item) {                switch (item.getItemId()) {                    case R.id.action_common:                        Toast.makeText(mContext, "点击了第1个菜单", Toast.LENGTH_SHORT).show();                        break;                    case R.id.action_menu:                        Toast.makeText(mContext, "点击了第2个菜单", Toast.LENGTH_SHORT).show();                        break;                    case R.id.action_transform:                        Toast.makeText(mContext, "点击了第3个菜单", Toast.LENGTH_SHORT).show();                        break;                    case R.id.action_qq:                        Toast.makeText(mContext, "点击了第4个菜单", Toast.LENGTH_SHORT).show();                        break;                    case R.id.action_weixin:                        Toast.makeText(mContext, "点击了第5个菜单", Toast.LENGTH_SHORT).show();                        break;                }                item.setChecked(true);                //关闭抽屉                drawerLayout_main.closeDrawer(navigationView_main);                //或者：drawerLayout.closeDrawers();                return true;            }        });    }    //配置ActionBar的home键点击监听    @Override    public boolean onOptionsItemSelected(MenuItem item) {        switch (item.getItemId()) {            case android.R.id.home:                //打開左側的抽屜                if (drawerLayout_main.isDrawerOpen(GravityCompat.START)) {                    drawerLayout_main.closeDrawer(GravityCompat.START);                } else {                    drawerLayout_main.openDrawer(GravityCompat.START);                }        }        return super.onOptionsItemSelected(item);    }}

 // 设置导航菜单宽度        ViewGroup.LayoutParams params = navigationView_main.getLayoutParams();        params.width = getResources().getDisplayMetrics().widthPixels * 1 / 2;        navigationView_main.setLayoutParams(params);

这段是得到屏幕的宽，然后得到它的一半，付给navigationView,这样NavigationView的宽度就是屏幕的一半。

navigationView_main.setNavigationItemSelectedListener()

这个是为NavigationView注册监听事件。根据点击的menu id进行判断。

关闭NavigationView有两种。

一种是用DrawerLayout调用closeDrawer(）；NavigationView作为参数。

drawerLayout_main.closeDrawer(navigationView_main);

一种是也是closeDrawers(）;这种不用传递参数。注意看，两种并不一样。

drawerLayout_main.isDrawerOpen(GravityCompat.START)

这个方法是判断NavigationView是否打开。

最后看下效果图：

好了。今天就写到这里。希望大家都能看得明白。

共勉！

0 0