Design 三: NavigationView + DrawerLayout

来源:互联网 发布:priest 锦瑟 知乎 编辑:程序博客网 时间:2024/05/18 03:33

2-6 NavigationView控件

这里写图片描述

抽屉导航是app识别度与内部导航的关键,保持这里设计上的一致性对app的可用性至关重要,尤其是对于第一次使用的用户。 NavigationView 通过提供抽屉导航所需的框架让实现更简单,同时它还能够直接通过菜单资源文件直接生成导航元素。把NavigationView作为 DrawerLayout的内容视图来使用。NavigationView处理好了和状态栏的关系,可以确保NavigationView在API21+ 设备上正确的和状态栏交互。

注意项:

你可以通过设置一个OnNavigationItemSelectedListener,使用其 setNavigationItemSelectedListener()来获得元素被选中的回调事件。它为你提供被点击的菜单元素,让你可以处理选择事件、改变复选框状态、加载新内容、关闭导航菜单,以及其他任何你想做的操作。你会注意到NavigationView的两个新自定义属性如下:

new attrdescriptionapp: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;            }        });    }}

阅读全文
0 0
原创粉丝点击