Android DrawerLayout和NavigationView实现左右侧滑和自定义toolbar。

最新推荐文章于 2024-07-31 19:51:57 发布

清欢-欢欢

最新推荐文章于 2024-07-31 19:51:57 发布

阅读量6.6k

点赞数 2

分类专栏： Android 文章标签： DrawerLayout NavigationView Toolbar 侧滑抽屉 Material Design

本文链接：https://blog.csdn.net/u013692888/article/details/52904864

版权

Android 专栏收录该内容

32 篇文章 0 订阅

订阅专栏

首先看效果，如图所示。

由于项目已经完成一部分了，各种效果已经夹杂在一起了，代码就不单独提取出来了，大致代码如下。

布局文件代码如下：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.v4.widget.DrawerLayout
        android:id="@+id/drawer_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="55dp"
                android:background="@color/white" />

            <android.support.design.widget.TabLayout
                android:id="@+id/id_tabLayout"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:tabGravity="center"
                app:tabIndicatorColor="@color/black"
                app:tabMode="scrollable"
                app:tabSelectedTextColor="@color/black"
                app:tabTextAppearance="@style/TabLayout"
                app:tabTextColor="@color/gray" />

            <android.support.v4.view.ViewPager
                android:id="@+id/viewpager"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_below="@+id/id_tabLayout"></android.support.v4.view.ViewPager>
        </LinearLayout>

        <android.support.design.widget.NavigationView
            android:id="@+id/navigation_start"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_gravity="start" />

        <android.support.design.widget.NavigationView
            android:id="@+id/navigation_end"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_gravity="end"
            android:layout_marginTop="55dp" />
    </android.support.v4.widget.DrawerLayout>
</RelativeLayout>

android:layout_gravity="start"就是左边的，end就是右边的。

然后在activity里面绑定各个控件。

@Bind(R.id.navigation_start)
    NavigationView navigationStart;
    @Bind(R.id.navigation_end)
    NavigationView navigationEnd;
	@Bind(R.id.toolbar)
    Toolbar bar;
    @Bind(R.id.drawer_layout)
    DrawerLayout drawerLayout
	NavigationStartFragment startFragment;
    NavigationEndFragment endFragment;

然后用自定义的fragment替换掉NavigationView，用自定义的布局文件替换掉toolbar的默认布局

getLayoutInflater().inflate(R.layout.toolbar,bar);
        start = (ImageView) findViewById(R.id.iv_start);
        end = (ImageView) findViewById(R.id.iv_end);
		setSupportActionBar(bar);
		start.setOnClickListener(onClickListener);
        end.setOnClickListener(onClickListener);

R.layout.toolbar就是自定义的布局文件，左右两个image，中间一个标题image。设置点击打开关闭侧滑事件。

startFragment = new NavigationStartFragment();
        endFragment = new NavigationEndFragment();
        getSupportFragmentManager().beginTransaction().replace(R.id.navigation_start, startFragment).commit();
        getSupportFragmentManager().beginTransaction().replace(R.id.navigation_end, endFragment).commit();
        //addDrawerListener可以监听侧滑打开关闭事件
        drawerLayout.addDrawerListener(new DrawerLayout.DrawerListener() {
            @Override
            public void onDrawerSlide(View drawerView, float slideOffset) {


            }


            @Override
            public void onDrawerOpened(View drawerView) {


            }


            @Override
            public void onDrawerClosed(View drawerView) {
                
            }


            @Override
            public void onDrawerStateChanged(int newState) {


            }
        });

监听到之后里面的具体实现根据项目需求自己发挥。

//drawerLayout.isDrawerOpen可以判断布局菜单是否打开和关闭
	private View.OnClickListener onClickListener = new View.OnClickListener() {
        @Override
        public void onClick(View view) {
            switch (view.getId()){
                case R.id.iv_start:
                    if(drawerLayout.isDrawerOpen(navigationStart)){
                        drawerLayout.closeDrawer(navigationStart);
                    }else{
                        drawerLayout.openDrawer(navigationStart);
                    }
                    break;
                case R.id.iv_end:
                    if(drawerLayout.isDrawerOpen(navigationEnd)){
                        drawerLayout.closeDrawer(navigationEnd);
                    }else{
                        drawerLayout.openDrawer(navigationEnd);
                    }
                    break;
            }
        }
    };

到此结束。老板把双休改成单休了，真是太累了，受不了。最近都懒得写博客。加油，坚持吧。