美文网首页
2018-04-18 一个辅助开发的UI布局,包括拖拽、滚动、动

2018-04-18 一个辅助开发的UI布局,包括拖拽、滚动、动

作者: 王培921223 | 来源:发表于2018-04-18 11:28 被阅读0次

    这是一个辅助开发的UI库,适用于某些特殊场景,如固定范围拖拽、动画、背景模糊效果等。直接看下效果图会直观点。

    Screenshot

    Drag模式,能够拖拽指定的 View,并能和 ViewPager 进行联动,实现拖拽和 ScrollView 的平滑滚动,带有坠落回弹效果:

    Animate模式,能够实现指定 View 退出进入的动画效果,并能和ViewPager 进行联动:

    Blur模糊效果,包括局部模糊和全图模糊两种,实现伪动态模糊效果(之所以叫做伪动态模糊是因为该功能实现是通过背景模糊预处理再来动态加载实现的,如果实时进行模糊处理容易造成界面卡顿,所以该功能对静态背景比较实用)。转GIF图有点模糊,大体看下效果。

    外部拖拽,在屏幕上垂直滑动就可对视图进行拖拽,能够设置主视图滑动折叠

    相关内容

    实现效果如上面的图片所示,这里简单说明下用到的哪些东西。

    拖拽滚动功能主要用到了 ViewDragHelper 和 ScrollerCompat 这两个辅助类,ViewDragHelper 内部滚动也是由ScrollerCompat 实现;

    动画效果主要参考了代码家的开源项目AndroidViewAnimations,引用了里面一部分动画,也有自定义动画功能,不过现在用起来可能还不够人性化,可以参考下;

    模糊效果用到了RenderScript这个辅助开发工具包,因为原生API需要17才能很好地使用模糊处理,这里使用了RenderScript支持包,所以在项目配置的时候需要进行该功能的支持,详见项目的使用;

    对于模糊时的背景获取和模糊处理参考了500px-android-blur这个项目,里面的设计想法值得学习一下;

    使用方法

    依赖库的方法看Github上说明。

    在布局中引用:

    如果 Content View 为 ViewPager,通过以下方法来实现联动效果:

    [java] view plain copy

    mDragLayout.interactWithViewPager(true);  

    如果 Drag View 包含 ScrollView 或则 NestedScrollView,通过以下方法来实现平滑滚动:

    [java] view plain copy

    mDragLayout.setAttachScrollView(mSvView);  

    设置 Content View 的模糊效果:

    [java] view plain copy

    mDragLayout.setEnableBlur(true);    // 开启模糊  

    mDragLayout.setBlurFull(true);  // 设置全背景模糊,默认为局部模糊  

    mDragLayout.updateBlurView();// 更新模糊背景  

    控制 Drag View 的进入和退出:

    [java] view plain copy

    mDragLayout.scrollInScreen(int duration);   // Drag 模式  

    mDragLayout.scrollOutScreen(int duration);  // Drag 模式  

    mDragLayout.startInAnim();// Animate 模式  

    mDragLayout.startOutAnim();// Animate 模式  

    mDsLayout.setAnimatorMode(DragSlopLayout.FLIP_Y);// 设置动画模式  

    设置拖拽监听

    [java] view plain copy

    mDragLayout.setDragPositionListener(new DragSlopLayout.OnDragPositionListener() {  

    @Override  

    public void onDragPosition(int visibleHeight, float percent, boolean isUp) {  

    // TODO  

                }  

     });  

    源码

    详细的示例和源码在这里:

    DragSlopLayout

    相关文章

      网友评论

          本文标题:2018-04-18 一个辅助开发的UI布局,包括拖拽、滚动、动

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