Android开发实战之拥有Material Design风格的侧滑布局

在实现开发要求中，有需要会使用抽屉式布局，类似于QQ5.0的侧滑菜单，实现的方式有很多种，可以自定义控件，也可以使用第三方开源库。

同样的谷歌也推出了自己的侧滑组件——DrawLayout，使用方式也很简单，配合着toolbar有着不一样的滑动效果，所以推荐大家使用。

如下是效果图，是不是更具交互性，更加酷炫？

**首先是XML**

drawlayout分为两部分：侧滑界面和内容界面，所以drawlayout中应该有两个布局，在侧滑的布局中设置属性：android:layout_gravity="start"，就可以实现侧滑了。

下面是XML文件，仅作参考：

<?xml version="1.0" encoding="utf-8"?>

<android.support.v4.widget.DrawerLayout

        android:layout_width="match_parent"

        android:layout_height="match_parent"

        xmlns:android="http://schemas.android.com/apk/res/android"

        xmlns:app="http://schemas.android.com/apk/res-auto"

        android:id="@+id/dl_content">

    <LinearLayout

        android:layout_width="match_parent"

        android:layout_height="match_parent"

        android:orientation="vertical"

        android:id="@+id/ll_content">

        <android.support.design.widget.CoordinatorLayout

            android:layout_width="match_parent"

            android:layout_height="wrap_content"

            android:id="@+id/cl_content">

            <include layout="@layout/head_home"/>

        </android.support.design.widget.CoordinatorLayout>

       <FrameLayout

           android:layout_width="match_parent"

           android:layout_height="0dp"

           android:layout_weight="1"

           android:id="@+id/fl_content"></FrameLayout>

        <android.support.v4.app.FragmentTabHost

                android:layout_width="match_parent"

                android:layout_height="wrap_content"

                app:layout_scrollFlags="scroll|enterAlways"

                android:id="@+id/ft_host">

        </android.support.v4.app.FragmentTabHost>

    </LinearLayout>

    <android.support.design.widget.NavigationView

            android:id="@+id/nv_left_content"

            android:layout_width="wrap_content"

            android:layout_height="match_parent"

            android:layout_gravity="start"

            app:itemIconTint="#333"

            app:itemTextColor="#333"

            app:headerLayout="@layout/left_home_top"

            app:menu="@menu/left_home_botton"

        />

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

**代码部分**

接下来就是让toolbar和drawlayout关联起来。这部分也很简单。让toolbar代替actionbar。这里有个注意点，不能让Activity继承Activity,而是继承于它的子类AppCompatActivity，否则是找不到setSupportActionBar(toolbar)这个方法的，当我们关联起来之后，就可以使用ActionBarDrawerToggle了，它实现了

drawlayout的滑动监听，谷歌也将它和Material Design风格的动画特效关联起来了。

当我们实现了这一步时，让我们看看效果：

可以发现，按钮被挡住了，如果你用过印象笔记的客户端，你会发现，它的侧滑按钮也被挡住了，所以一点都不酷炫了！！！！！

但是作为一个追求完美无bug的安卓开发人员是绝对不允许这样的事的。

**重写onDrawerSlide**

通过重写onDrawerSlide方法重新获取滑动范围，让他贴着内容界面划出。代码也很简单这里贴出主要代码：

    private void initView() {

       setSupportActionBar(toolbar);

        drawerToggle=new ActionBarDrawerToggle(this,drawerLayout,toolbar,

               R.string.open,R.string.close){

            @Override

            public void onDrawerSlide(View drawerView, float slideOffset) {

                WindowManager windowManager= (WindowManager) getSystemService(

                        getApplicationContext().WINDOW_SERVICE);

                Display display=windowManager.getDefaultDisplay();

                linearLayout.layout(navigationView.getRight(),

                        0,

                        display.getWidth()+navigationView.getRight(),

                        display.getHeight());

                super.onDrawerSlide(drawerView, slideOffset);

            }

        };

        drawerLayout.setDrawerListener(drawerToggle);

        getSupportActionBar().setHomeButtonEnabled(true);

        getSupportActionBar().setDisplayHomeAsUpEnabled(true);

    }

    @Override

    public void onPostCreate(Bundle savedInstanceState) {

        super.onPostCreate(savedInstanceState);

        drawerToggle.syncState();

    }

    @Override

    public void onConfigurationChanged(Configuration newConfig) {

        super.onConfigurationChanged(newConfig);

        drawerToggle.onConfigurationChanged(newConfig);

    }

最终的效果图就是开篇的效果，是不是很酷炫，用户体验也比传统的侧滑好的多了。最后多谢浏览，我会继续加油哒！

巴特西

Android开发实战之拥有Material Design风格的侧滑布局

最新文章

热门文章