美文网首页
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布局,包括拖拽、滚动、动

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

  • 多线程

    主线程(UI线程) 主线程的主要作用显示和刷新UI界面处理UI事件(比如点击事件、滚动事件、拖拽事件等) iOS中...

  • 多线程之GCD 线程间的通信

    GCD 线程间的通信 在iOS开发过程中,我们一般在主线程里边进行UI刷新,例如:点击、滚动、拖拽等事件。我们通常...

  • iOS Masonry学习和探究

    前言 开发中对UI进行布局,有很多种,常用的包括frame,Autolayout,storyboard,Mason...

  • 多线程知识总结

    多线程的主要作用 显示/刷新UI界面 处理UI事件(比如点击事件、滚动事件、拖拽事件等) 注意:1.别将比较耗时的...

  • iOS线程的实现: NSThread

    线程间的通信:在iOS开发过程中,我们一般在主线程里边进行UI刷新,例如:点击、滚动、拖拽等事件。我们通常把一些耗...

  • GCD线程间的通讯

    在iOS开发过程中,我们一般在主线程里边进行UI刷新,例如:点击、滚动、拖拽等事件。我们通常把一些耗时的操作放在其...

  • android中布局设置位置无效

    问题 Android中的UI布局开发中,多使用xml开发布局样式,对于部分UI布局的重用,我们可以使用includ...

  • UI常用的控件

    #iOS开发之UI篇#iOS开发之UI篇 #常用控件介绍1## #UI第09天:滚动视图# ##UIScrollV...

  • 拖拽生成flutter代码工具

    新手对flutter布局不熟悉,可以上这个地址:https://ui.flutterdart.cn/ 通过拖拽代码...

网友评论

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

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