NavigationView

一、安卓5.0是是有有史以来最重要的安卓版本之一,这其中有很大部分要归功于material design的引入,这种新的设计语言让整个安卓的用户体验焕然一新。这种设计对于开发者,尤其是那些在意向后兼容的开发者来说是一种挑战。在Android Design Support Library的帮助下,带来了一些重要的material design控件。你可以在这里面找到navigation drawer view输入控件的悬浮标签悬浮操作按钮snackbar选项卡以及将这些控件结合在一起的手势滚动框架

Navigation View

抽屉导航是app识别度与内部导航的关键,保持这里设计上的一致性对app的可用性至关重要,尤其是对于第一次使用的用户。 NavigationView 通过提供抽屉导航所需的框架让实现更简单,同时它还能够直接通过菜单资源文件直接生成导航元素。下面介绍一些关于它的使用方法:

二、首先,这个控件在一个独立的包里,使用前要先导入它的包:根据自己android studio的版本导入相应的包

	compile 'com.android.support:design:24.2.1'
	其次,应该意识到,这是一个控件,所以把NavigationView作为DrawerLayout的内容视图来使用,比如下面的布局:
<?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:id="@+id/main_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:background="#cc1448"
    tools:context="com.dc.xutils3.MainActivity">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <Button
            android:id="@+id/btn"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="测试"/>
    </LinearLayout>
    <android.support.design.widget.NavigationView
        android:background="#dede56"
        android:id="@+id/navigation"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="left"
        app:headerLayout="@layout/nav_header"
        app:menu="@menu/nav_menu"/>
</android.support.v4.widget.DrawerLayout>
你会注意到NavigationView的两个属性:app:headerLayout  - 控制头部的布局, app:menu - 导航菜单的资源文件
(也可以在运行时配置)NavigationView处理好了和状态栏的关系,可以确保NavigationView 在API21以上的设备上正确的和状态栏交互。最简单
的抽屉菜单就是几个可点击的菜单集合:
在资源文件夹下创建menu文件夹,在其中创建一个menu文件:内容如下:
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <group>
        <item
            android:title="目录">
            <menu>
                <item
                    android:id="@+id/item1"
                    android:icon="@drawable/ic_category_13"
                    android:title="首页"/>
            </menu>
        </item>
        <item
            android:id="@+id/item2"
            android:icon="@drawable/ic_category_28"
            android:title="精彩推荐"
            />
        <item
            android:id="@+id/item3"
            android:icon="@drawable/ic_category_30"
            android:title="最新消息"
            />
        <item
            android:id="@+id/item4"
            android:icon="@drawable/ic_category_31"
            android:title="热门消息"
            />
        <item
            android:id="@+id/item5"
            android:icon="@drawable/ic_category_36"
            android:title="红包福利"
            />
    </group>
</menu>
这个文件在activity_main.xml中通过 app :menu= "@menu/nav_menu"来引入。
然后就是创建一个侧滑栏上面的布局:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
                android:layout_width="match_parent"
                android:layout_height="200dp"
                android:background="#59ac69"
                android:orientation="vertical">
    <ImageView
        android:id="@+id/nav_header_image"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:src="@drawable/ic_category_34"/>
    <RelativeLayout
        android:layout_below="@+id/nav_header_image"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <TextView
            android:id="@+id/nav_header_image_text"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:text="用户名:"
            android:textSize="16sp"/>
    </RelativeLayout>
</RelativeLayout>
 
  
这个文件在activity_main.xml中通过app:headerLayout="@layout/nav_header"来引入。
最后就是MainActivity中的代码了,其中给了详细的注释,就不啰嗦了:
package com.dc.xutils3;
import android.os.Bundle;
import android.support.annotation.NonNull;
import android.support.design.widget.NavigationView;
import android.support.design.widget.Snackbar;
import android.support.v4.widget.DrawerLayout;
import android.support.v7.app.AppCompatActivity;
import android.view.MenuItem;
import android.view.View;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.TextView;
import android.widget.Toast;
public class MainActivity extends AppCompatActivity implements View.OnClickListener {
    protected Button mBtn;
    protected NavigationView mNavigation;
    protected DrawerLayout mMainLayout;
   private boolean flag=false;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        super.setContentView(R.layout.activity_main);
        initView();
        mNavigation.setItemIconTintList(null);
        //获得侧滑栏里的头部的view
        View headerview=mNavigation.getHeaderView(0);
        //通过findViewById可以获得view里的控件
        ImageView imageView= (ImageView) headerview.findViewById(R.id.nav_header_image);
        TextView textView= (TextView) headerview.findViewById(R.id.nav_header_image_text);
        //这里可以设置顶部图片的图片资源和点击事件
        //imageView.setImageDrawable();
        //下面可以设置点击事件和内容
        textView.setText("设置");
        //设置menu里的item的点击事件
        mNavigation.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem item) {
                //根据itemid来判断要执行的响应事件
                int itemid=item.getItemId();
                switch(itemid){
                    //这里的id都是在创建menu时自己定义的(在menu文件中)
                    case R.id.item1:
                        //android 5.0提出的新控件,功能与Toast相似,用法在以后再写
                        Snackbar.make(mBtn,"点击了"+itemid,Snackbar.LENGTH_SHORT).show();
                        //Toast.makeText(MainActivity.this, "点击了"+itemid, Toast.LENGTH_SHORT).show();
                        break;
                    case R.id.item2:
                        Snackbar.make(mBtn,"点击了"+itemid,Snackbar.LENGTH_SHORT).show();
                        break;
                    case R.id.item3:
                        Snackbar.make(mBtn,"点击了"+itemid,Snackbar.LENGTH_SHORT).show();
                        break;
                    case R.id.item4:
                        Snackbar.make(mBtn,"点击了"+itemid,Snackbar.LENGTH_SHORT).show();
                        break;
                    case R.id.item5:
                        Snackbar.make(mBtn,"点击了"+itemid,Snackbar.LENGTH_SHORT).show();
                        break;
                }
                //设置点击item后策划栏自动关闭
                mMainLayout.closeDrawers();
                //返回值是false点击后的item还原成原来的状态,返回true时item点击后处于点击的状态
                return true;
            }
        });
        mMainLayout.setDrawerListener(new DrawerLayout.DrawerListener() {
            @Override
            public void onDrawerSlide(View drawerView, float slideOffset) {

            }
            @Override
            public void onDrawerOpened(View drawerView) {
                flag=true;
            }

            @Override
            public void onDrawerClosed(View drawerView) {
                flag=false;
            }
            @Override
            public void onDrawerStateChanged(int newState) {
            }
        });
    }
    //监听返回键,返回两次才退出,返回弹出确定退出窗口,都可以通过对onBackPressed的监听
    //还可以使用监听onKeydown来实现

    @Override
    public void onBackPressed() {
        if (flag) {
            mMainLayout.closeDrawers();
        } else {
            super.onBackPressed();
        }
    }
    @Override
    public void onClick(View view) {
        if (view.getId() == R.id.btn) {
        }
    }
    private void initView() {
        mBtn = (Button) findViewById(R.id.btn);
        mBtn.setOnClickListener(MainActivity.this);
        mNavigation = (NavigationView) findViewById(R.id.navigation);
        mMainLayout = (DrawerLayout) findViewById(R.id.main_layout);
    }
}
这就是 NavigationView的基本方法的使用!


 
 

猜你喜欢

转载自blog.csdn.net/qq_35700935/article/details/53025062