会弹跳的菜单(高级UI)

2017-01-13 15:18:29来源:http://www.jianshu.com/p/fedb5cc1f552作者:heavenxue人点击

第七城市
BouncingMenu一款弹跳菜单控件<br/>

弹跳菜单控件是一款专门脱离于Activity的一个自定义控件。


特点概述:

动态加载 :不用在XML布局文件中声明定义;
框架化 :可以直接像Toast.makeText(getBaseContext(),"",Toast.LENGTH_SHORT).show(),利用了建造者模式来调用;
动画美感 :利用了属性动画。
效果图:
github
github
思路

*并不是在Activity之上建立一个FrameLayout,这个控件是独立于Activity之上的,相当于一个menu一样,可以独立存在,那么我们就要得到最外层的布局DecorView,在它之上添加一个独立的布局;
*那么还要画出最上面的圆弧形状,它其实就是一个贝塞尔曲线,这里我们动态加载的布局要画上一个上方带有圆弧的图形;
*这个布局上也可以加载数据,当然这里数据可以用ListView,也可以用RecyclerView,我这里选择了后者;
*为了显示好看曲线,我们用到了属性动画


使用
BoucingMenu.make(getBaseContext(),main_layout,R.layout.menu_boucing).show();

引申

本例最主要的是如何得到DecorView,通过android源码我们知道DecorViewActivity布局中最外层的一个布局,而我们真正意义上的xml中书写的布局都是它的Child</br>


/** 
* 找到DecorView的根布局
* @param view
*/
private ViewGroup findSuitableParent(View view){
ViewGroup fallBack = null;
do{
if (view instanceof FrameLayout){
if (view.getId() == android.R.id.content){
return (ViewGroup)view;
}else{
fallBack = (ViewGroup) view;
}
}
if (view != null){
ViewParent parent = view.getParent();
view = parent instanceof View ? (View) parent : null;
}
}while (view != null);
return fallBack;}

画出的曲线用到的是贝塞尔曲线,画曲线那么这里利用了path.quarTo();,想见更多关于贝塞尔曲线,那么请移步
--https://github.com/heavenxue/AsLixueAndroids/blob/master/lixuelib/src/main/java/com/aibei/lixue/lixuelib/view/PathBezier.java


具体的代码地址

https://github.com/heavenxue/BouncingControls


如果有什么问题的可以留言,有问题的可以进入我的github进行讨论。


点赞哦 笑脸~~




第七城市

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台