原文链接:http://blog.csdn.net/jj120522/article/details/8467810。
首先呢,还是一贯作风,我们先来看看众多应用中的示例:(这种效果是很常见的,可以说应用的必须品.)
搜狐客户端 百度新闻客户端 新浪微博 凤凰新闻客户端
也许大家对这些客户端并不陌生,但是不知道大家有没有注意到这些不足之处呢,这里我就叨唠吓这些不人性化的地方.
首先搜狐:她的图片放大后(未铺满屏幕)可以上下来回拖动,这点肯定是不允许的.感慨搜狐你在移动新闻界这么有名气,莫非是故意如此吗?
百度客户端:你看她的图片不用我多说了吧,其实我还可以继续在缩,这里我要狠狠批判一下百度,因为你那么牛叉的公司,为什么这点bug就查不出来,用户体验相当不好.
新浪微博:她的图片可以缩放到这个程度,没有回缩动画,我个人感觉最好有回缩动画的,毕竟用户不可能看你家图的时候将之缩放成小图看吧.(或许用户在放大后想缩回原先图片而此时缩回头了,所以我们应该弄一个回缩动画.)
凤凰新闻客户端: 这家应用更离谱,就没有放大缩小等操作,就一个傻傻的图片呆在那,更离谱的是我(无意)触碰一下图片就返回了.(我要是用户的话,就先不说你家没有放大缩小等操作吧,倘若我想仔细观看这张美图的话,我手指不小心触碰一下,你Y的就给我关闭.大失雅兴,还有就是我点击文章图片切换到浏览图片页面时,你的加载页面太丑了,我简直看不下去,所以果断卸掉.)
其实网上也有几个做的比较好的,我没有上图,例如:腾讯微博,网易客户端,新浪微博等.做的都相当不错。
哈哈.说的有点过了,就叨唠到此,下面我们看下应该如何实现这种效果.说之前我在絮叨一下,这篇文章本来是打算2012.12.31发布的留个纪念,谁知这玩意我弄了一天没有弄出来,后来放弃了,长时间没有弄出来心情也没有了,直到2013.01.04也就是昨天又接着弄了将近一天,到晚上11点了还没有解决.一怒之下CF玩到1点睡觉去了.该死的破玩意想留个纪念也不让.今天下午有时间就又接着搞.功夫不负有心人啊.没想到解决了.我郁闷了个去.所以这篇文章来之不易啊,如果看到该文章并且对你有帮助的话,记得赞一个.
网上文章虽多,但是这种效果少之又少.我真诚的献上以供同根生的苦逼程序员.
实现原理:自定义ImageView对此控件进行相应的layout(动态布局).
这里你要明白几个方法执行的流程: 首先ImageView是继承自View的子类.
onLayout方法:是一个回调方法.该方法会在在View中的layout方法中执行,在执行layout方法前面会首先执行setFrame方法.
setFrame方法:判断我们的View是否发生变化,如果发生变化,那么将最新的l,t,r,b传递给View,然后刷新进行动态更新UI. 并且返回ture.没有变化返回false.
在介绍自定义控件之前,我们先要明白我们要获取哪些数据:屏幕的宽度,屏幕的高度.(这里其实你也可以对LinerLayout进行ViewTreeObserver监听获取其宽高度.),原始图片本身的宽度及高度.以及我们缩放的最大最小值.
首先我们要重写setImageBitmap方法.作用:获取图片的宽高,求出缩放极限值.
/***
* 设置显示图片
*/
@Override
public void setImageBitmap(Bitmap bm) {
super.setImageBitmap(bm);
/** 获取图片宽高 **/
bitmap_W = bm.getWidth();
bitmap_H = bm.getHeight();
MAX_W = bitmap_W * 3;
MAX_H = bitmap_H * 3;
MIN_W = bitmap_W / 2;
MIN_H = bitmap_H / 2;
}
接着我们在onLayout方法中我们获取最初的l,t,r,b.
下面我们说下重点Touch方法.其实原来大家都明白,要说难的话估计就是逻辑实现了.
说之前大家要明白单点与多点的区别:
单手指操作:ACTION_DOWN---ACTION_MOVE----ACTION_UP
多手指操作:ACTION_DOWN---ACTION_POINTER_DOWN---ACTION_MOVE--ACTION_POINTER_UP---ACTION_UP.
上面只是简单说下流程,详细请大家自行研究,这里只是讲解如果运用.
/***
* touch 事件
*/
@Override
public boolean onTouchEvent(MotionEvent event) {
/** 处理单点、多点触摸 **/
switch (event.getAction() & MotionEvent.ACTION_MASK) {
case MotionEvent.ACTION_DOWN:
onTouchDown(event);
break;
// 多点触摸
case MotionEvent.ACTION_POINTER_DOWN:
onPointerDown(event);
break;
case MotionEvent.ACTION_MOVE:
onTouchMove(event);
break;
case MotionEvent.ACTION_UP:
mode = MODE.NONE;
break;
// 多点松开
case MotionEvent.ACTION_POINTER_UP:
mode = MODE.NONE;
/** 执行缩放还原 **/
if (isScaleAnim) {
doScaleAnim();
}
break;
}
return true;
}
这里的实现我都分开写了,利于大家的观看,在这里我顺便说一下自定义控件返回值:
如果对于没有孩子的控件,如果要对Touch处理最好return true.这样也是游戏开发中经常用的,如果该控件有孩子的话,可不要这么弄,不然孩子会监听不到Touch事件.
下面我们一个一个方法的看:
onTouchDown:获取手指点击时候的起始坐标.
onPointerDown:两手指之间的距离.
下面我们看下缩放处理,因为考虑到越界与否.
setScale方法:
/** 处理缩放 **/
void setScale(float scale) {
int disX = (int) (this.getWidth() * Math.abs(1 - scale)) / 4;// 获取缩放水平距离
int disY = (int) (this.getHeight() * Math.abs(1 - scale)) / 4;// 获取缩放垂直距离
// 放大
if (scale > 1 && this.getWidth() <= MAX_W) {
current_Left = this.getLeft() - disX;
current_Top = this.getTop() - disY;
current_Right = this.getRight() + disX;
current_Bottom = this.getBottom() + disY;
this.setFrame(current_Left, current_Top, current_Right,
current_Bottom);
/***
* 此时因为考虑到对称,所以只做一遍判断就可以了。
*/
if (current_Top <= 0 && current_Bottom >= screen_H) {
Log.e("jj", "屏幕高度=" + this.getHeight());
isControl_V = true;// 开启垂直监控
} else {
isControl_V = false;
}
if (current_Left <= 0 && current_Right >= screen_W) {
isControl_H = true;// 开启水平监控
} else {
isControl_H = false;
}
}
// 缩小
else if (scale < 1 && this.getWidth() >= MIN_W) {
current_Left = this.getLeft() + disX;
current_Top = this.getTop() + disY;
current_Right = this.getRight() - disX;
current_Bottom = this.getBottom() - disY;
/***
* 在这里要进行缩放处理
*/
// 上边越界
if (isControl_V && current_Top > 0) {
current_Top = 0;
current_Bottom = this.getBottom() - 2 * disY;
if (current_Bottom < screen_H) {
current_Bottom = screen_H;
isControl_V = false;// 关闭垂直监听
}
}
// 下边越界
if (isControl_V && current_Bottom < screen_H) {
current_Bottom = screen_H;
current_Top = this.getTop() + 2 * disY;
if (current_Top > 0) {
current_Top = 0;
isControl_V = false;// 关闭垂直监听
}
}
// 左边越界
if (isControl_H && current_Left >= 0) {
current_Left = 0;
current_Right = this.getRight() - 2 * disX;
if (current_Right <= screen_W) {
current_Right = screen_W;
isControl_H = false;// 关闭
}
}
// 右边越界
if (isControl_H && current_Right <= screen_W) {
current_Right = screen_W;
current_Left = this.getLeft() + 2 * disX;
if (current_Left >= 0) {
current_Left = 0;
isControl_H = false;// 关闭
}
}
if (isControl_H || isControl_V) {
this.setFrame(current_Left, current_Top, current_Right,
current_Bottom);
} else {
this.setFrame(current_Left, current_Top, current_Right,
current_Bottom);
isScaleAnim = true;// 开启缩放动画
}
}
}
首先我们先看下放大方法:这里面我们要时时监听水平或垂直是否已经铺满(该其实应说成布局),如果铺满或超过那么对应的水平或垂直方向就可以进行托移.代码注释很清晰大家可以看上面注释.
接下来我们看下缩小,这个相对复杂了一点。首先我们要考虑到放大后的托移,这样的话我们在进行缩小的时候肯定l,t,r,b她们不会同时缩到屏幕边界,因此此时就要进行处理,如果一方先缩到屏幕边界的话,那么你就停下来等等你的对面(记住此时你对面缩放的速率是原来的2倍,不然图片会变形的.大家自己想想看是不是),等到你对面也缩到屏幕边界的话,此时要关闭监听.然后你们两个在一起缩.原理就是这样.
不太明白的话,大家可以看上诉代码,我相信大家都看的明白.
最后我们还要实现缩放回缩效果(比较人性化.)
刚开始我想到了ScaleAnimation,可是实现一半问题出现了,我回缩动画完毕后她又自动回到最初大小,也许你会说你少加了setFillAfter(true); 可是加了后会出现诡异现象:又会重新覆盖一层,原因不明,大家可以试试看.既然API给的动画实现不了,那我就自己做吧.下面看具体实现.
MyAsyncTask异步类.
最后我们看下布局,调用也相当简单,也有助于我们添加辅助UI,千万不要忘记写 android:scaleType="fitXY"这句话,不然有时候会出现诡异现象
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="center" >
<com.jj.drag.DragImageView
android:id="@+id/div_main"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleType="fitXY"
/>
</LinearLayout>
在Acitivity中调用:
以上就是全部实现.最后我们看下实现的效果吧.
原图大小 放大后拖拽到左上角 缩小后(松开会回缩) (长大于宽的图片)
感觉运行的效果还行,和腾讯新浪的差不多.至于辅助UI元素,大家可以自行修改添加,这里我只是把这种形式的实现献给大家.