Design包下NavigationView的使用

    xiaoxiao2025-01-26  5

    首先介绍一下由来,只属于个人见解。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是否打开。

    最后看下效果图:

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

    共勉!

    转载请注明原文地址: https://ju.6miu.com/read-1295778.html
    最新回复(0)