会弹跳的菜单(高级UI)

作者: heavenxue | 来源:发表于2016-08-23 17:22 被阅读381次

    BouncingMenu一款弹跳菜单控件

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

    特点概述:

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

    效果图:</br>

    githubgithub

    </br>

    思路

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

    使用</br>

    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进行讨论。

    点赞哦 笑脸~~

    相关文章

      网友评论

        本文标题:会弹跳的菜单(高级UI)

        本文链接:https://www.haomeiwen.com/subject/ijknsttx.html