码迷,mamicode.com
首页 > 移动开发 > 详细

Android开发实战之拥有Material Design风格的抽屉式布局

时间:2016-08-21 19:50:47      阅读:492      评论:0      收藏:0      [点我收藏+]

标签:

  在实现开发要求中,有需要会使用抽屉式布局,类似于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风格的抽屉式布局

标签:

原文地址:http://www.cnblogs.com/lovelyYakir/p/5793251.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!