一个辅助开发的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直接拿来用的开源项目

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

Android 侧滑面板的实现(DragLayout)

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

android页面滑动时,顶部title背景渐变的实现

在淘宝的商品详情页,我们会看到顶部的title背景颜色随着scrollView的上下滑动而渐变,这样的功能在我们应用中会经常用到,今天就来说一下我实现下这种功能方法,当然方法可能比较笨,看到博客的大牛...
  • gjnm820
  • gjnm820
  • 2016年03月05日 10:31
  • 3577

总结移动端页面开发时需要注意的一些问题

1、防止手机中网页放大和缩小,这点是最基本的,最为手机网站开发者来说应该都知道的,就是设置meta中的viewport 有些手机网站我们看到如下声明: DOCTYPE html PUBLI...
  • lz305263
  • lz305263
  • 2016年08月15日 15:48
  • 2774

安卓 高斯背景模糊popupwindow,弹簧弹出 rebounds

最终类似效果图,没有截动画,gridelayout弹上来的时候是波纹的。 直接上代码。 public class MyBlurPopWin extends BlurPopupWindow { ...
  • sinat_35657236
  • sinat_35657236
  • 2017年03月28日 11:43
  • 603

使用CSS3滤镜开发模糊背景(毛玻璃)效果

功能说明: 在平时的开发中我们时常需要弹出某些对话框,同时希望用户能够忽略背景把注意力集中到弹框上,这时候从用户 体验的角度出发,我们可以选择将弹框背景模糊化,用以增强用户的实际体验效果。 实现...
  • xiaoguang44
  • xiaoguang44
  • 2017年03月06日 17:58
  • 1180

android listview/ScrollView 去除顶部下拉时的半月形阴影和上下滑动顶部和底部的虚化

在android5.0当中正常的listview/scrollview在下拉的时候顶部会出现半月形的阴影效果, 先要去除这个小效果可以设置 android:overScrollMode=“...
  • dodod2012
  • dodod2012
  • 2015年12月09日 09:47
  • 6081

CSS3网页固定背景视觉差特效

这是一款非常实用的CSS3网页固定背景视觉差特效插件。该固定背景特效可以在页面中固定某些元素,在页面滚动的时候可以修改这些元素的视觉效果,从而制作出一种滚动视觉差的特效。 该固定背景视觉差特效的效果...
  • souhugirl
  • souhugirl
  • 2015年03月27日 12:45
  • 1271

CSS3动画实现背景滚动

在上一个模仿微信打飞机的游戏中,在敌机掉落下来时,如果背景图片也可以一直无穷滚动的话,那么效果就会更好。 现在就是要利用CSS3来实现一张图片的无穷滚动。首先了解一下CSS3的动画属性: ①.an...
  • csdn_zsdf
  • csdn_zsdf
  • 2017年04月26日 16:28
  • 936

将展开Android状态栏的背景设置为透明模糊效果

在android 4.4 版本中状态栏是在一个apk中(SystemUI.apk),查看layout/gemini_status_bar_expanded.xml源文件     xmlns:an...
  • qin152131824
  • qin152131824
  • 2015年03月18日 16:38
  • 1572
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:一个辅助开发的UI布局,包括拖拽、滚动、动画、背景模糊功能
举报原因:
原因补充:

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