【android】NavigationView控件的使用

最新推荐文章于 2024-08-04 09:20:52 发布

原创最新推荐文章于 2024-08-04 09:20:52 发布 · 1.5k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#android #控件 #Navigation

android 专栏收录该内容

18 篇文章

订阅专栏

本文介绍了Android中的NavigationView控件，它是Google在Android5.0后推出的用于创建抽屉菜单的组件，兼容Android2.1。内容包括NavigationView的组成部分——HeaderLayout和menu的设置方法，以及如何编写布局文件和处理点击事件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

NavigationView是什么？

这是Google在Android5.0之后推出的一个控件，兼容到Android2.1，代替之前自己做抽屉菜单，简单方便。NavigationView整体分为上下两个部分，上部分叫做HeaderLayout，下面的点击项都是menu。

NavigationView的使用方法

1、写布局文件

整体布局

<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmls:app="http://schemas.android.com/apk/res-auto"
xmls:tools="http://schemas.android.com/tools"
android:id="@_id/item_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:openDrawer="start">

    <include
        layout="@layout/weather_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <android.support.design.widget.NavigationView
        android:id="@+id/nav_view"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:fitsSystemWindows="true"
        app:headerLayout="@layout/nav_header_main"
        app:menu="@menu/activity_main_drawer"/>

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

代码解释：最外层是个DrawerLayout，

headerLayout

看一下headerLayout(app:headerLayout=”@layout/nav_header_main”)的代码：

<?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="160dp"
    android:background="#81c0c0"
    android:gravity="bottom"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:orientation="vertical">

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:paddingTop="16dp"
        android:src="@mipmap/cloud" />

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:paddingTop="16dp"
        android:text="Weather"
        android:textAppearance="@style/TextAppearance.AppCompat.Body1"/>

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Designed by Wangmj" />

</LinearLayout>

完成之后是下面这个样子
headerLayout

再看一下menu(app:menu=”@menu/activity_main_drawer”) 的代码：

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">

    <group android:checkableBehavior="single">
        <item
            android:id="@+id/select_city"
            android:icon="@mipmap/checklist_64px"
            android:title="选择城市" />
    </group>

    <item android:title="Communicate">
        <menu>
            <item
                android:id="@+id/share"
                android:icon="@mipmap/share_48px"
                android:title="分享" />
        </menu>
    </item>

</menu>

这里可以分组，虽然我写的组里面只有一个item，现在还没有那么多功能，慢慢加啦;组与组之间会有分割线，这里只有一个组，所以没有。
menu无图，显示在DrawerLayout上是这样的

content

接下来再来看一下content的布局文件：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical">

    <RelativeLayout
        android:id="@+id/top"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:background="#408080">

        <android.support.v7.widget.Toolbar
            android:id="@+id/menu_button"
            android:layout_width="30dp"
            android:layout_height="30dp"
            android:layout_centerVertical="true"
            android:layout_marginLeft="10dp"/>
            <!--android:background="@mipmap/home"-->


        <TextView
            android:id="@+id/city_name"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:textColor="#fff"
            android:textSize="24dp"
            android:text="city_name"/>
        <Button
            android:id="@+id/refresh_weather"
            android:layout_width="30dp"
            android:layout_height="30dp"
            android:layout_alignParentRight="true"
            android:layout_centerVertical="true"
            android:layout_marginRight="10dp"
            android:background="@mipmap/refresh"/>
    </RelativeLayout>

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:background="#81C0C0">

        <TextView
            android:id="@+id/publish_text"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:layout_marginRight="10dp"
            android:layout_marginTop="10dp"
            android:textColor="#FFF"
            android:textSize="18sp"/>

        <LinearLayout
            android:id="@+id/weather_info_layout"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:orientation="vertical">

            <TextView
                android:id="@+id/current_data"
                android:layout_width="wrap_content"
                android:layout_height="40dp"
                android:gravity="center"
                android:textColor="#fff"
                android:textSize="18sp"/>

            <TextView
                android:id="@+id/weather_desp"
                android:layout_width="wrap_content"
                android:layout_height="60sp"
                android:layout_gravity="center_horizontal"
                android:gravity="center"
                android:textColor="#fff"
                android:textSize="40sp"/>

            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="60dp"
                android:layout_gravity="center_horizontal"
                android:orientation="horizontal">

                <TextView
                    android:id="@+id/temp1"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_weight="3"
                    android:layout_gravity="center_vertical"
                    android:textColor="#fff"
                    android:textSize="20sp"/>

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center_vertical"
                    android:layout_marginLeft="10dp"
                    android:layout_marginRight="10dp"
                    android:layout_weight="1"
                    android:text="~"
                    android:textColor="#fff"
                    android:textSize="20sp"/>

                <TextView
                    android:id="@+id/temp2"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_weight="3"
                    android:layout_gravity="center_vertical"
                    android:textColor="#fff"
                    android:textSize="20sp"/>
            </LinearLayout>
        </LinearLayout>
    </RelativeLayout>
</LinearLayout>

代码解释：Toolbar底下的内容都不用管，主要是Toolbar和NavigationView有关系，所以只用看Toobar。

2.点击事件

    public class WeatherActivity extends Activity implements NavigationView.OnNavigationItemSelectedListener{

     /**
         * 菜单按钮
         */
        private Toolbar menuButton;
        /**
         * 菜单布局
         */
        private DrawerLayout itemLayout;

        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            requestWindowFeature(Window.FEATURE_NO_TITLE);
            setContentView(R.layout.item_layout);
            itemLayout=(DrawerLayout)findViewById(R.id.item_layout);
            menuButton=(Toolbar) findViewById(R.id.menu_button);
            ActionBarDrawerToggle toggle = new ActionBarDrawerToggle(
                    this, itemLayout, menuButton,R.string.navigation_drawer_open, R.string.navigation_drawer_close);
            itemLayout.setDrawerListener(toggle);
            toggle.syncState();
            NavigationView navigationView=(NavigationView)findViewById(R.id.nav_view);
            navigationView.setNavigationItemSelectedListener(this);

        }



        @Override
        public boolean onNavigationItemSelected(MenuItem item) {
            int id=item.getItemId();
            switch (id){
                case R.id.select_city:
                    Intent intent=new Intent(this,ChooseAreaActivity.class);
                    intent.putExtra("from_weather_activity",true);
                    startActivity(intent);
                    finish();
                    break;
                case R.id.share:
                    Toast.makeText(WeatherActivity.this, "正在开发中...", Toast.LENGTH_SHORT).show();
                    break;
                    //可以更多，只要在menu的布局文件里声明。
            }
            return false;
        }
}

结束。