一个辅助开发的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

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

组合查询

用PB进行数据库应用系统开发时,我们经常要对大量的数据进行筛选、查询,得到符合要求的记录,这就需要用到组合条件查询功能。我在作应用系统开发时,就自己编写了一个简单而又实用的组合条件查询模板窗口,只要用...
  • xingjiaren
  • xingjiaren
  • 2001-04-10 14:22:00
  • 728

android直接拿来用的开源项目

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

ViewDragHelper简单使用

首先扯点别的:感觉保护好身体真的很重要,前几天膝盖又拉伤了,今天跑了会步感觉有点疼,看样最近一个月是不能跑步了。今天看了看鸿洋大神的ViewDrawHelper感觉写的不错,学习一下。ViewDraw...
  • leilifengxingmw
  • leilifengxingmw
  • 2016-09-04 22:14:06
  • 365

Android 侧滑面板的实现(DragLayout)

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

讲讲关于自定义控件--ViewDragHelper(试图拖拽辅助工具)!

其实关于自定义控件,我个人认为是安卓中最为重点也是最难得一个知识点,为什么这么说呢? 因为自定义控件 需要掌握view的绘制流程  事件的传递过程  以及paint和canvas的大量api,这都是需...
  • u012600955
  • u012600955
  • 2017-03-13 22:18:01
  • 142

jquery拖动辅助线演示

  • 2017年10月31日 16:57
  • 178KB
  • 下载

jquery-ui中div拖动出现辅助线方便对齐

先上效果: 代码说明: html部分: 第一个11111111111111div 第二个22div 第三个333333...
  • promise_sun
  • promise_sun
  • 2017-03-15 16:05:00
  • 1124

浅谈使用element ui + vuedraggable + sortablejs实现多种版式布局及托拽(2)

接下来是实现托拽排序,使用方法 在项目根目录打开cmd命令 安装vuedraggable 、sortablejs; 命令 npm install vuedraggable npm insall s...
  • github_37847992
  • github_37847992
  • 2017-09-08 23:45:38
  • 6036

DragScrollDetailsLayout:模仿淘宝、京东、蘑菇街商品

模仿淘宝、京东、蘑菇街商品详情页,可嵌套ListView、WebView、ViewPager、FragmentTabhost等 1、支持ScrollView+Webview 2、支持scollVi...
  • yinjiaqi2012
  • yinjiaqi2012
  • 2017-01-18 15:32:58
  • 542

仿淘宝京东拖拽商品详情页上下滚动黏滞效果

比较常用的效果,有现成的,如此甚好!:) import android.content.Context; import android.content.res.TypedArray; imp...
  • gundumw100
  • gundumw100
  • 2017-04-10 19:12:31
  • 457
收藏助手
不良信息举报
您举报文章:一个辅助开发的UI布局,包括拖拽、滚动、动画、背景模糊功能
举报原因:
原因补充:

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