一个辅助开发的UI布局,包括拖拽、滚动、动画、背景模糊功能

原创 2016年09月21日 14:52:31

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

Screenshot

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


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


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


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



相关内容

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

  • 拖拽滚动功能主要用到了 ViewDragHelper 和 ScrollerCompat 这两个辅助类,ViewDragHelper 内部滚动也是由 ScrollerCompat 实现;
  • 动画效果主要参考了代码家的开源项目AndroidViewAnimations,引用了里面一部分动画,也有自定义动画功能,不过现在用起来可能还不够人性化,可以参考下;
  • 模糊效果用到了RenderScript这个辅助开发工具包,因为原生API需要17才能很好地使用模糊处理,这里使用了RenderScript支持包,所以在项目配置的时候需要进行该功能的支持,详见项目的使用;
  • 对于模糊时的背景获取和模糊处理参考了500px-android-blur这个项目,里面的设计想法值得学习一下;

使用方法

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

在布局中引用:

<com.dl7.drag.DragSlopLayout
    android:id="@+id/drag_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/black"
    app:fix_height="80dp"
    app:mode="drag">
        <!-- Content View -->
        <android.support.v4.view.ViewPager
        android:id="@+id/vp_photo"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

        <!-- Drag View -->
        <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">
        // ......
    </LinearLayout>
    // ......
</com.dl7.drag.DragSlopLayout>

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

mDragLayout.interactWithViewPager(true);

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

mDragLayout.setAttachScrollView(mSvView);
设置 Content View 的模糊效果:

mDragLayout.setEnableBlur(true);    // 开启模糊
mDragLayout.setBlurFull(true);  // 设置全背景模糊,默认为局部模糊
mDragLayout.updateBlurView();   // 更新模糊背景
控制 Drag View 的进入和退出:

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

mDragLayout.startInAnim();  // Animate 模式
mDragLayout.startOutAnim(); // Animate 模式
mDsLayout.setAnimatorMode(DragSlopLayout.FLIP_Y);   // 设置动画模式

设置拖拽监听

mDragLayout.setDragPositionListener(new DragSlopLayout.OnDragPositionListener() {
            @Override
            public void onDragPosition(int visibleHeight, float percent, boolean isUp) {
                // TODO
            }
        });

源码

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

DragSlopLayout

有问题或好的建议可直接发消息给我,谢谢

相关文章推荐

Android 侧滑面板的实现(DragLayout)

一、概要:1)应用场景:扩展主面板的功能 2)具体实现: 主要实现类ViewDragHelper,解决控件的拖拽问题。 里面有个参数mTouchSlop,最小敏感范围,值越小...
  • lovoo
  • lovoo
  • 2016年05月17日 23:05
  • 3346

android直接拿来用的开源项目

前言 练习MVP架构开发的App,算是对自己学过的知识做一个总结,做了有一段时间,界面还算挺多的,代码量还是有的,里面做了大量封装,整体代码整理得很干净,这个我已经尽力整理了。不管是...

Android 自定义组件之如何实现自定义组件

参考链接:http://blog.csdn.net/jjwwmlp456/article/details/41076699 简介 Android提供了用于构建UI的强大的组件模型。两个基类:Vie...

Android编程之Fragment动画加载方法源码详解

上次谈到了Fragment动画加载的异常问题,今天再聊聊它的动画加载loadAnimation的实现源代码: Animation loadAnimation(Fragment fragment, in...
  • xyz_fly
  • xyz_fly
  • 2014年07月10日 10:46
  • 15287

jq-ui的Sortable插件 两列布局 左右拖拽

html页面传送门—–http://pan.baidu.com/s/1c21Fqhi1.先引入

JQuery UI的拖拽功能

JQuery UI的拖拽功能 JQuery UI是JQuery官方支持的WebUI 代码库,包含底层交互、动画、特效等API,并且封装了一些Web小部件(Widget)。同时,JQu...

JQuery UI的拖拽功能

JQuery UI是JQuery官方支持的WebUI 代码库,包含底层交互、动画、特效等API,并且封装了一些Web小部件(Widget)。同时,JQuery UI继承了jquery的插件支持,有大量...

JQuery UI的拖拽功能实现方法小结

JQuery UI的拖拽功能实现方法小结 作者: 字体:[增加 减小] 类型:转载 JQuery UI是JQuery官方支持的WebUI 代码库,包含底层交互、动画、特效等API,...
  • cdnight
  • cdnight
  • 2015年03月17日 15:59
  • 3587

jQuery UI 拖拽功能

JQuery UI是JQuery官方支持的WebUI 代码库,包含底层交互、动画、特效等API,并且封装了一些Web小部件(Widget)。同时,JQuery UI继承了jquery的插件支持,有大量...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:一个辅助开发的UI布局,包括拖拽、滚动、动画、背景模糊功能
举报原因:
原因补充:

(最多只允许输入30个字)