android design 平移,Android开发实战之拥有Material Design风格的侧滑布局

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

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

如下是效果图,是不是更具交互性,更加酷炫?

62a113e6f85785b67a6aa204d901bc2c.gif

**首先是XML**

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

下面是XML文件,仅作参考:

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">

android:layout_width="match_parent"android:layout_height="wrap_content"android:id="@+id/cl_content">

android:layout_width="match_parent"android:layout_height="wrap_content"app:layout_scrollFlags="scroll|enterAlways"android:id="@+id/ft_host">

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"

/>

**代码部分**

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

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

当我们实现了这一步时,让我们看看效果:

6d585aabcc501cf5115d2026b387859b.gif

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

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

**重写onDrawerSlide**

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

private voidinitView() {

setSupportActionBar(toolbar);

drawerToggle=new ActionBarDrawerToggle(this,drawerLayout,toolbar,

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

@Overridepublic void onDrawerSlide(View drawerView, floatslideOffset) {

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);

}

@Overridepublic voidonPostCreate(Bundle savedInstanceState) {super.onPostCreate(savedInstanceState);

drawerToggle.syncState();

}

@Overridepublic voidonConfigurationChanged(Configuration newConfig) {super.onConfigurationChanged(newConfig);

drawerToggle.onConfigurationChanged(newConfig);

}

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

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值