Android 侧滑菜单的实现(NavigationView)

版权声明:本文为博主原创文章,转载前请标注原文链接。 https://blog.csdn.net/s1674521/article/details/62220187

        很早之前就像写个android的侧滑菜单加入到项目中了,但是很多给的都是密密麻麻的代码,今天看到了简单快速的实现方法:通过NavigationView+DrawerLayout来实现侧滑菜单的功能。Google I/O 2015 给大家带来了Android Design Support Library,对于希望做md风格的app的来说,简直是天大的喜讯.NavigationView是是Google在5.0之后推出了NavitationView,就是我们左边滑出来的那个菜单。这个菜单整体上分为两部分,上面一部分叫做HeaderLayout,下面的那些点击项都是menu菜单项,这样的效果如果我们要自己写肯定也能写出来,但比较复杂,没有必要,既然Google提供了这个控件,那我们当然选择简单的实现方式。

我们首先看一下这个最终的实现效果吧:


目前只是做了个简单的效果,后面可以应用到不同的项目中,根据具体情况增加一些其他view控件。

马上来看看是具体如何实现的吧:

1.首先要在project structure的dependence中导入v4.design包,导入后可以在build.grade下看到如下信息:

compile 'com.android.support:design:25.2.0'
2.使用NavigationView

首先在主布局文件中使用DrawerLayout作为外包装,里面包含一个主页面和侧滑的菜单页面,而侧滑菜单页面用NavigationView实现:

activity_main.layout:

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_na"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.app.ui.MainActivity">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@color/blue_700"
            android:gravity="center_vertical"
            android:orientation="horizontal">
            <ImageView
                android:id="@+id/main_menu"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@mipmap/mm"
                android:background="@color/blue_700"

                android:layout_margin="20dp"/>
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="旅行者说"
                android:textColor="#ffffff"
                android:textSize="20sp"
                android:layout_marginLeft="16dp"/>
            <ImageView
                android:id="@+id/search"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@mipmap/three"
                android:background="@color/blue_700"
                android:layout_margin="20dp"/>
        </LinearLayout>
        <TextView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:text="主页"
            android:textSize="22sp"
            android:gravity="center"/>
    </LinearLayout>
    <android.support.design.widget.NavigationView
        android:id="@+id/nav"
        android:layout_gravity="left"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:fitsSystemWindows="true"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        app:headerLayout="@layout/head"
        app:menu="@menu/new_menu"

        >

    </android.support.design.widget.NavigationView>
</android.support.v4.widget.DrawerLayout>
以上可以这样理解,drawerLayout中包含了主页面和侧滑的菜单页面,具体DrawerLayout用法参考官方文档。

我们可以看到

app:headerLayout="@layout/head"
        app:menu="@menu/new_menu"

这两个属性,它们分别表示头部的布局(也就是菜单的头部)和menu菜单,前者是布局文件而后者是菜单文件

来看下它们的具体内容:

首先是头布局:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:background="@color/blue_500">
    <ImageView
        android:id="@+id/person"
        android:layout_width="72dp"
        android:layout_height="72dp"
        android:layout_marginTop="42dp"
        android:src="@mipmap/lufei"/>
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="20sp"
        android:layout_marginTop="24dp"
        android:textColor="#ffffff"
        android:text="沐风"/>
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="16sp"
        android:layout_marginTop="12dp"
        android:textColor="#ffffff"
        android:layout_marginBottom="18dp"
        android:text="人生像一场没有尽头的旅行."/>

</LinearLayout>
头布局内容很简单,只包含一张图片和两个textview

接下来是菜单menu:

<?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/favorite"
            android:icon="@mipmap/v"
            android:checkable="true"
            android:title="    会员"/>

    </group>
    <item
        android:id="@+id/wallet"
        android:icon="@mipmap/wa"

        android:title="    钱包"/>
    <item
        android:id="@+id/photo"
        android:icon="@mipmap/photo"
        android:title="    相册"/>
    <item
        android:id="@+id/dress"
        android:icon="@mipmap/dress1"
        android:title="    装扮"/>
    <item
        android:id="@+id/file"
        android:icon="@mipmap/file"
        android:title="    文件"/>

</menu>
menu里包含了各个菜单项,每个菜单项可以设置icon和title以及点击状态,关于menu的具体用法参考网上的文章:

http://blog.csdn.net/yuzhongchun/article/details/8956256

http://blog.csdn.net/a600423444/article/details/7417613

下面基本工作做完了,就到activity里去设置一下点击事件吧:

public class MainActivity extends Activity implements View.OnClickListener {
    private DrawerLayout drawerLayout;
    private SystemBarTintManager tintManager;
    private NavigationView navigationView;
    ImageView menu;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        requestWindowFeature(Window.FEATURE_NO_TITLE);
        setContentView(R.layout.activity_main);
        initWindow();
        drawerLayout = (DrawerLayout) findViewById(R.id.activity_na);
        navigationView = (NavigationView) findViewById(R.id.nav);
        menu= (ImageView) findViewById(R.id.main_menu);
        View headerView = navigationView.getHeaderView(0);//获取头布局
        menu.setOnClickListener(this);
        navigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem item) {
                //item.setChecked(true);
                Toast.makeText(MainActivity.this,item.getTitle().toString(),Toast.LENGTH_SHORT).show();
                drawerLayout.closeDrawer(navigationView);
                return true;
            }
        });
    }


    @Override
    public void onClick(View v) {
        switch (v.getId()){
            case R.id.main_menu://点击菜单,跳出侧滑菜单
                if (drawerLayout.isDrawerOpen(navigationView)){
                    drawerLayout.closeDrawer(navigationView);
                }else{
                    drawerLayout.openDrawer(navigationView);
                }
                break;
        }
    }
    private void initWindow() {//初始化窗口属性,让状态栏和导航栏透明
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
            getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
            getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION);
            tintManager = new SystemBarTintManager(this);
            int statusColor = Color.parseColor("#1976d2");
            tintManager.setStatusBarTintColor(statusColor);
            tintManager.setStatusBarTintEnabled(true);
        }
    }
}
侧滑菜单不仅通过手指滑动来实现,还可以通过主页面的菜单键点击的实现,详情看上面代码,可以为菜单项设置点击事件,通过
setNavigationItemSelectedListener

来实现,以上的此外,侧滑菜单头布局也可以设置点击事件,通过View head=navigtionview.getHeaderView实现,这里的点击事件我没有写,这里我还将状态栏的颜色改成了标题栏的颜色,达到整体的界面协调。具体实现方法可以参考文章http://blog.csdn.net/s1674521/article/details/59480114

3.思考如何关闭手势滑动?

NavigationView的确没有相关关闭侧滑手势的属性,但是别忘了,drawerLayout却可以,通过以下属性可以关闭滑动手势操作:

在android抽屉开发中,需要关闭手势滑动,来滑出弹出框

mDrawer_layout.setDrawerLockMode(DrawerLayout.LOCK_MODE_LOCKED_CLOSED); //关闭手势滑动
mDrawer_layout.setDrawerLockMode(DrawerLayout.LOCK_MODE_UNLOCKED); //打开手势滑动

记录到这就差不多了,其他具体功能可以根据需要自己添加,可以多看看官方md控件和规范,在后面的时间里,我还回不定时记录这些比较炫酷,优美的界面学习。

补充:本文仅作记录和供大家借鉴,说明有误或者不足改进之处希望大家提出并改正,谢谢。

阅读更多
换一批

没有更多推荐了,返回首页