Design 三: NavigationView + DrawerLayout
2-6 NavigationView控件
抽屉导航是app识别度与内部导航的关键,保持这里设计上的一致性对app的可用性至关重要,尤其是对于第一次使用的用户。 NavigationView 通过提供抽屉导航所需的框架让实现更简单,同时它还能够直接通过菜单资源文件直接生成导航元素。把NavigationView作为 DrawerLayout的内容视图来使用。NavigationView处理好了和状态栏的关系,可以确保NavigationView在API21+ 设备上正确的和状态栏交互。
注意项:
你可以通过设置一个OnNavigationItemSelectedListener,使用其 setNavigationItemSelectedListener()来获得元素被选中的回调事件。它为你提供被点击的菜单元素,让你可以处理选择事件、改变复选框状态、加载新内容、关闭导航菜单,以及其他任何你想做的操作。你会注意到NavigationView的两个新自定义属性如下:
new attr | description |
---|---|
app:headerLayout | 控制头部的布局 |
app:menu | 导航菜单的资源文件(也可以在运行时配置) |
实例代码:
页面:
<?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" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:id="@+id/dl_id" tools:context="bw.com.bw_day13.demo05.NavigationViewActivity"> <RelativeLayout android:layout_width="match_parent" android:layout_height="match_parent"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="我是一个内容页面" android:layout_centerInParent="true" android:textSize="30sp" android:textColor="@color/colorAccent"/> </RelativeLayout> <!-- app:headerLayout 控制头部的布局 app:menu 导航菜单的资源文件(也可以在运行时配置) --> <android.support.design.widget.NavigationView android:layout_width="match_parent" android:layout_height="match_parent" android:id="@+id/nv_id" android:layout_gravity = "left" app:headerLayout="@layout/heard_view" app:menu="@menu/main" /> </android.support.v4.widget.DrawerLayout>
heard_layout.xml
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@mipmap/img4"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/tv_id" android:text="醒醒吧,骚年" android:textSize="30sp" android:layout_centerInParent="true" android:textColor="@color/colorAccent" /> </RelativeLayout>
菜单: menu/main.xml
<?xml version="1.0" encoding="utf-8"?> <menu xmlns:android="http://schemas.android.com/apk/res/android"> <item android:id="@+id/action_set" android:title="设置" android:icon="@mipmap/settings" /> <item android:id="@+id/action_above" android:title="关于" android:icon="@mipmap/message_icon" /> <item android:id="@+id/action_clear" android:title="清除缓存" android:icon="@android:drawable/ic_notification_clear_all" /> </menu>
Activity 代码:
public class NavigationViewActivity extends AppCompatActivity { private NavigationView mHv; private DrawerLayout mDl; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_navigation_view); mHv = (NavigationView) findViewById(R.id.nv_id); mDl = (DrawerLayout) findViewById(R.id.dl_id); //可以获取头部视图 View headerView = mHv.getHeaderView(0); TextView tv = (TextView) headerView.findViewById(R.id.tv_id); tv.setTextColor(Color.GREEN); //为菜单项添加事件处理 mHv.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() { @Override public boolean onNavigationItemSelected(@NonNull MenuItem item) { switch (item.getItemId()) { case R.id.action_set: Toast.makeText(NavigationViewActivity.this, "你点击了设置选项", Toast.LENGTH_SHORT).show(); mDl.closeDrawer(Gravity.LEFT);//关闭抽屉 break; case R.id.action_above: Toast.makeText(NavigationViewActivity.this, "你点击了关于选项", Toast.LENGTH_SHORT).show(); mDl.closeDrawer(Gravity.LEFT);//关闭抽屉 break; case R.id.action_clear: Toast.makeText(NavigationViewActivity.this, "你点击了清除选项", Toast.LENGTH_SHORT).show(); mDl.closeDrawer(Gravity.LEFT);//关闭抽屉 break; } return false; } }); } }