这交互炸了(四) :一分钟让你拥有微信拖拽透明返回PhotoView
本文已授权微信公众号:鸿洋(hongyangAndroid)原创首发
《交互炸了》或许是一系列高端特效教程, 文中会介绍一些比较炫酷的特效,以及实现的思路。特效实现本身也许不会有太大的难度。难点在于实现的思路。一旦思路被打开,特效将很简单实现。
DragPhotoView项目地址https://github.com/githubwing/DragPhotoView
大家好,本期是交互炸了第四期~ 本期带来的效果是最新版微信朋友圈看图下拖的效果,没见过的赶紧去更新微信啦~~
本期跟以往不一样:
不是demo! 拿来直接用!不是demo! 拿来直接用!不是demo! 拿来直接用!重要说三你懂.
效果图如下:
自我感觉实现的效果还不错哈.猛地一看自己都以为他就是微信了哈哈.
一分钟使用方式:
修改你的 build.gradle
文件
//root project
allprojects {
repositories {
...
maven { url 'https://jitpack.io' }
}
}
//module project
dependencies {
compile 'com.github.githubwing:DragPhotoView:1.0.1'
}
把它放到xml里
把它当成普通ImageView使用就行了,所有ImageView的玩法都可以在它身上玩.注意必须要加一个onExitListener,这是在拖拽出范围的监听.
// 所有ImageView用法都可以
DragPhotoView photoView = (DragPhotoView)findViewById(R.id.photoView);
photoView.setImageResource(R.drawable.ram);
//必须添加一个onExitListener,在拖拽到底部时触发.
photoView.setOnExitListener()
photoView.setOnTapListener()
这样就完成了接入,甚至比一分钟还快有没有!拒绝标题党.
上面讲解的是用法,可是用谁都会,使用一个三方库,都要了解实现对不? 下面就给大家介绍实现的思路.
实现
基于PhotoView
第一眼看到这个效果,就有想实现的冲动,因为使用场景挺多的感觉. 所以直接找来GitHub上star最多的PhotoView来进行扩展,这里我选择直接依赖并且继承PhotoView,理由是如果PhotoView出了更新,依赖直接改动版本即可.如果我选择源码copy的方式改动,那么将得不到PhotoView的支持.
图片缩放,背景透明
这里需要Activity配合,将背景设置为透明.并且背景实黑色的,为了配合手势改变View背景透明度,我绘制一个超大的矩形充当背景:
@Override
protected void onDraw(Canvas canvas) {
mPaint.setAlpha(mAlpha);
canvas.drawRect(0, 0, 2000, 2000, mPaint);
canvas.translate(mTranslateX, mTranslateY);
canvas.scale(mScale, mScale, mWidth / 2, mHeight / 2);
super.onDraw(canvas);
}
画布位移和缩放还有透明度都跟着手势变化而变化.所以要处理触摸事件,一开始我尝试重写onTouchEvent方法,发现并不生效,原因是PhotoView内部使用了自己的手势处理机制. 所以手势处理束手无策里吗? 非也,我们可以在dispatchTouchEvent做处理.所以重写该方法:
首先判断是否处于缩放模式,只有非缩放模式的时候才可以拖拽
@Override
public boolean dispatchTouchEvent(MotionEvent event) {
if (getScale() == 1) {
}
}
之后处理ACTION_MOVE事件:
需要注意的是,要解决一下Viewpager和DragPhotoView和PhotoView的冲突.
DragPhotoView和PhotoView的冲突在于手势缩放,所以只要判断一下当前是几个触摸点即可.
下Viewpager和DragPhotoView冲突在左右滑,所以这里判断为:如果没有向下移动过,则Y位移为0交由ViewPager处理,如果向下移动过,则改变标志位说明正在处于拖拽状态
case MotionEvent.ACTION_MOVE:
//in viewpager
if (mTranslateY == 0 && mTranslateX != 0) {
//如果不消费事件,则不作操作
if (!isTouchEvent) {
mScale = 1;
return super.dispatchTouchEvent(event);
}
}
//single finger drag down
if (mTranslateY >= 0 && event.getPointerCount() == 1) {
onActionMove(event);
//如果有上下位移 则不交给viewpager
if (mTranslateY != 0) {
isTouchEvent = true;
}
return true;
}
//防止下拉的时候双手缩放
if (mTranslateY >= 0 && mScale < 0.95) {
return true;
}
break;
在ACTION_UP的时候,要判断一下是否拖拽超过阀值,如果超过了阀值则进行结束Activity操作.
这里遇到个坑就是,单指返回和双击放大手势冲突了.目前没有找到什么好的解决方法,只能开启线程计时来根据标志位判断,各位看官有好的解决方式,请联系告知我,谢谢!
case MotionEvent.ACTION_UP:
//防止下拉的时候双手缩放
if (event.getPointerCount() == 1) {
onActionUp(event);
isTouchEvent = false;
//judge finish or not
postDelayed(new Runnable() {
@Override
public void run() {
if (mTranslateX == 0 && mTranslateY == 0 && canFinish) {
if (mTapListener != null) {
mTapListener.onTap(DragPhotoView.this);
}
}
canFinish = false;
}
}, 300);
}
这样基本上就完成了对PhotoView的扩展. 已经可以接入项目中使用了.
但是本文还没有完,下面说一下共享元素的全版本实现
Android自带的共享元素只有5.0以上才可以使用.那么怎么兼容到5.0以下呢.并且Demo中的拖拽共享是怎么实现的呢?
其实思路很简单,只需要在Activity A启动Activity B的时候,关闭系统专场动画,把被点击的View 大小,坐标等信息传入. B先为透明状态,把B上的View做一个位移动画,就可以实现了.
public void startPhotoActivity(Context context, ImageView imageView) {
Intent intent = new Intent(context, DragPhotoActivity.class);
int location[] = new int[2];
imageView.getLocationOnScreen(location);
intent.putExtra("left", location[0]);
intent.putExtra("top", location[1]);
intent.putExtra("height", imageView.getHeight());
intent.putExtra("width", imageView.getWidth());
context.startActivity(intent);
//关闭系统共享元素动画
overridePendingTransition(0,0);
}
至于拖拽共享元素,原理是一样的,具体的细节就在demo中啦~~
本文到此就结束啦~
DragPhotoView项目地址https://github.com/githubwing/DragPhotoView
如果你觉得不错,欢迎Star
也可以加入我的Android酒馆:425983695
这交互炸了(四) :一分钟让你拥有微信拖拽透明返回PhotoView的更多相关文章
- 这交互炸了:饿了么是怎么让Image变成详情页的
这交互炸了:饿了么是怎么让Image变成详情页的 晚上叫外卖,打开饿了么,发现推了一个版本,更新以后,点开了个鸡腿,哇,交互炫炸了. 本文同步自wing的地方酒馆 不过还是有槽点.我是无意中才发现可以 ...
- Flutter交互实战-即刻App探索页下拉&拖拽效果
前言 Flutter最近比较热门,但是Flutter成体系的文章并不多,前期避免不了踩坑:我这篇文章主要介绍如何使用Flutter实现一个比较复杂的手势交互,顺便分享一下我在使用Flutter过程中遇 ...
- 【干货】零基础30分钟让你拥有一个完整属于自己的短视频APP系统
目录 一.附言: 1 二.购买域名和购买服务器: 2 三.搭建服务器环境: 5 四.配置APP前端部分: 8 1.工具以及文件准备: 9 2.配置后端接口地址 11 3.配置APP启动图和启动图标 ...
- javascript事件类型之界面拖拽交互
一.在线DEMO 界面拖拽交互
- HTML5实战与剖析之原生拖拽(四可拖动dragable属性和其他成员)
可拖动dragable属性 之前我们已经为大家介绍过几篇有关HTML5中原生拖拽的相关知识了.今天为大家介绍HTML5拖拽中的其他一些小东东,闲话不多说赶快一起看看吧. 在默认情况下,链接.文本和图像 ...
- GridView实现拖拽排序以及数据交互
在研究项目中的一个效果的时候,查找资料过程中发现有人有这么一种需求,就是GridView在实现拖拽排序的基础上,如果是两个GridView之间实现拖拽效果,并要实现数据交互. 一.效果图: 实现这个效 ...
- Vue实现拖拽穿梭框功能四种方式
一.使用原生js实现拖拽 点击打开视频讲解更加详细 <html lang="en"> <head> <meta charset="UTF-8 ...
- C++与Lua交互(四)
引言 通过前几篇,我们已经对Lua的C API有了一定的了解,如lua_push*.lua_is*.lua_to*等等.用C++调用Lua数据时,我们主要运用lua_getglobal与lua_pus ...
- 四:MySQL系列之Python交互(四)
该篇主要介绍MySQL数据库的分表.以及与Python的交互的基本操作等. 一.拆分表操作 1.1 准备工作 创建数据库 --> 使用数据库 --> 创建数据表 --- 添加记录 -- ...
随机推荐
- semver(Semantic Versioning)
Based on semver, you can use Hyphen Ranges X.Y.Z - A.B.C 1.2.3-2.3.4 Indicates >=1.2.3 <=2.3.4 ...
- Maven使用本地jar包(两种方式)
有些项目会用到一些Maven库上没有的jar包,这就需要我们自己引入了 这种情况有两种办法: 第一种方式,在pom文件中引用时使用本地路径: 首先把jar包放到项目中: 然后在pom文件中引入: &l ...
- 南京邮电大学java第二次实验报告
实 验 报 告 ( 2017 / 2018学年 第2学期) 课程名称 JAVA语言程序设计 实验名称 Java集成开发环境的安装与使用. Java变量.表达式与控制结构 实验时间 2018 年 4 月 ...
- 换个视角来看git命令与代码库发生网络交互报错事件
git的一系列命令中像 clone.pull.push等与代码库发生网络交互时,可能报下面的错误信息 fatal: remote error: CAPTCHA required Your Stash ...
- EF CodeFirst方式 Fluent Api配置
一.One-to-One Relationship[一对一关系] 两个表之间,只能由一个记录在另外一个表中.每一个主键的值,只能关联到另外一张表的一条或者零条记录.请记住,这个一对一的关系不是非常的普 ...
- ubuntu临时修改ip,mac的方法示例
ifconfig eth0 down ifconfig eth0 154.84.28.148 netmask 255.255.255.0 route add default gw 154.84.28. ...
- Java基础——字符串String
String类 1. String类位于java.lang包中,使用时无需导包. 2. 创建字符串的两种方式: ① 直接指定(字面量声明):String str = "abc"; ...
- 使用javaMail实现简单邮件发送
一.首先你要用来发送邮件的qq邮箱需要开通pop3/smtp服务,这个可以百度一下就知道了 二.导入所需要的jar包,我使用的是maven添加依赖 <dependency> <gro ...
- 20 个 Laravel Eloquent 必备的实用技巧
Eloquent ORM 看起来是一个简单的机制,但是在底层,有很多半隐藏的函数和鲜为人知的方式来实现更多功能.在这篇文章中,我将演示几个小技巧. 1. 递增和递减 要代替以下实现: $article ...
- 关于自定义view--实现自定义水波纹效果
开发中的东西太多,怕自己忘记了,简单记录一下. 声明:此控件借鉴了大佬的想法,在此感谢大佬提供的支持,我只是把大佬的想法拿出来而已. ok,废话到此结束,看效果: 分析一下,我们可以看到,图中有两个圆 ...