查看: 1647|回复: 8
怎样实现一个ImageView从底部平缓移动到屏幕中央？
该用户从未签到主题帖子e币
如图：不是动画效果，移动到中央后就定在那里。
求大神解救！！！
附件: 您需要
才可以下载或查看，没有帐号？
int widthPixels = getResources().getDisplayMetrics().widthP
int heightPixels = getResources().getDisplayMetrics().heightP
float x = iv_ball.getLeft()+ iv_ball.getWidth()/2;
float y = iv_ball.getTop() + iv_ball.getHeight();
System.out.println(x+","+y);
TranslateAnimation animation = new TranslateAnimation(0, widthPixels/2-x, 0, heightPixels/2-y);
* 四个参数
签到天数: 1 天连续签到: 1 天[LV.1]初来乍到主题帖子e币
int widthPixels = getResources().getDisplayMetrics().widthP
& & & & & & & & int heightPixels = getResources().getDisplayMetrics().heightP
& & & & & & & &
& & & & & & & &
& & & & & & & & float x = iv_ball.getLeft()+ iv_ball.getWidth()/2;
& & & & & & & & float y = iv_ball.getTop() + iv_ball.getHeight();
& & & & & & & & System.out.println(x+&,&+y);
& & & & & & & & TranslateAnimation animation = new TranslateAnimation(0, widthPixels/2-x, 0, heightPixels/2-y);
& & & & & & & & /**
& & & & & & & &&&* 四个参数
& & & & & & & &&&* float fromXDelta:这个参数表示动画开始的点离当前View X坐标上的差值；
& & & & & & & &&&* float toXDelta, 这个参数表示动画结束的点离当前View X坐标上的差值；
& & & & & & & &&&* float fromYDelta, 这个参数表示动画开始的点离当前View Y坐标上的差值；
& & & & & & & &&&* float toYDelta)这个参数表示动画开始的点离当前View Y坐标上的差值；
& & & & & & & &&&*/
& & & & & & & & animation.setDuration(3000);
& & & & & & & & animation.setFillAfter(true);
& & & & & & & & iv_ball.startAnimation(animation);
该用户从未签到主题帖子e币
动画就可以实现啊
签到天数: 1 天连续签到: 1 天[LV.1]初来乍到主题帖子e币
不要动画的话 可以用自定义view 然后几毫秒修改view的显示位置
该用户从未签到主题帖子e币
自己去查一查animation这个关键词，你就知道了，三行代码就行
该用户从未签到主题帖子e币
位移动画就搞定了，然后设置保留动画结果，就定在那了,比较全的官方animation案例
签到天数: 1 天连续签到: 1 天[LV.1]初来乍到主题帖子e币
可以实现吧
该用户从未签到主题帖子e币
动画撒& && &&&
签到天数: 63 天连续签到: 1 天[LV.6]常住居民II主题帖子e币
自定义imageview通过线程计时任务来动态更新位置移动，并确定最终移动位置，位置移动：http://seebobber./blog/static//
社区贡献者
eoeAndriod社区贡献网友
社区认证会员
社区认证会员
QQ已认证，此人靠谱
推荐阅读热门话题
61886420384328281281261252226218210208204201715
半小时前昨天&23:49昨天&17:04前天&23:56前天&17:56前天&17:06前天&16:45前天&16:06前天&16:02前天&14:56前天&14:50前天&14:49前天&14:37前天&14:24前天&14:23前天&14:22
Powered by在上一篇最后提出了一个注意点：当自定义的MatrixImageView如ViewPager、ListView等带有滑动效果的ViewGroup中时，ImageView自定义的拖动事件会和ViewGroup的滑动事件冲突，并且指出了冲突原因是由于ViewGroup拦截了Move事件的缘故。如果对于Touch事件的分发机制不甚了解的话，可以参考下这篇。
这篇文章将会在MatrixImageView的基础上，以ViewPager作为测试容器做进一步优化。
当进行缩放操作时，手势不会同时触发ViewPager的滑动切换Item事件。
当进行拖动操作时，除非图片已经到达左右边界，否则不触发ViewPager的滑动切换Item事件。
当进行拖动操作时，若图片左边缘到达左边界，则可以向左滑动触发ViewPager切换至前一个I当图片右边缘到达右边界，则可以向右滑动触发ViewPager的切换至后一个Item。
每个down-up(cancel)事件周期内只执行一种类型的事务操作(缩放、拖动或者ViewPager切换Item)，防止多重事务互相干扰。
将事务处理封装到MatrixImageView类内，提供状态接口给ViewPager使用，方便适配多种ViewGroup。
当ViewPager内嵌MatrixImageView时，由于MatrixImgaeView在Down事件中返回了true，表明ViewPager将捕获本次完整的Touch事件(Move-Ponit_Down-UP等等)，其中最重要的一个事件便是Move事件，因为ViewPager自身需要捕获Move事件在onTouch中进行切换Item操作，MatrixImageView的捕获意味着它将无法响应。不过，ViewPager本身控制着Touch事件的下发操作，每个Touch事件的下发都遵从从上至下层层递归，在MatrixImageView真正获得Move事件前，Move事件必须经过ViewPager的onInterceptTouchEvent和dispatchTouchEvent事件，前者执行拦截操作后者执行下发操作。ViewPager便是在onInterceptTouchEvent中对Move事件进行了过滤，当移动距离超过一定值时，它会拦截掉Move事件，阻止MatrixImageView继续处理Touch事件的权利，转而让自身的onTouch事件处理。于是，我们要做的便是重写onInterceptTouchEvent事件，通过判断MatrixImageView的状态决定是否拦截。
由于容器ViewPager在满足条件的时候会拦截掉子View的touch事件，因此需要自定义个ViewPager修改拦截逻辑。当MatriImageView进行缩放和拖动时，我们不希望ViewPager拦截。具体代码如下：
public class AlbumViewPager extends ViewPager implements OnChildMovingListener {
当前子控件是否处理拖动状态
private boolean mChildIsBeingDragged=false;
public boolean onInterceptTouchEvent(MotionEvent arg0) {
if(mChildIsBeingDragged)
return false;
return super.onInterceptTouchEvent(arg0);
public void startDrag() {
// TODO Auto-generated method stub
mChildIsBeingDragged=true;
public void stopDrag() {
// TODO Auto-generated method stub
mChildIsBeingDragged=false;
public interface OnChildMovingListener{
public void
startDrag();
public void
stopDrag();
&通过判断变量mChildIsBeingDragged的值决定是否拦截，而mChildIsBeingDragged的值通过OnChildMovingListener接口由MatriImageView进行设置。别忘了在PagerAdapter的instantiateItem中给MatriImageView设置监听接口
MatrixImageView imageView = (MatrixImageView) imageLayout.findViewById(R.id.image);
imageView.setOnMovingListener(AlbumViewPager.this);
ViewPager的改造便完成了，只需要新增一个变量和实现一个接口，之后对于事件的拦截操作都转到了MatrixImageView中。
接下去看下改造后的MatrixImageView的onTouch方法。
/** 和ViewPager交互相关，判断当前是否可以左移、右移
boolean mLeftD
boolean mRightD
是否第一次移动 */
boolean mFirstMove=false;
private PointF mStartPoint = new PointF();
public boolean onTouch(View v, MotionEvent event) {
// TODO Auto-generated method stub
switch (event.getActionMasked()) {
case MotionEvent.ACTION_DOWN:
//设置拖动模式
mMode=MODE_DRAG;
mStartPoint.set(event.getX(), event.getY());
isMatrixEnable();
startMove();
checkDragable();
case MotionEvent.ACTION_UP:
case MotionEvent.ACTION_CANCEL:
reSetMatrix();
stopMove();
case MotionEvent.ACTION_MOVE:
if (mMode == MODE_ZOOM) {
setZoomMatrix(event);
}else if (mMode==MODE_DRAG) {
setDragMatrix(event);
stopMove();
case MotionEvent.ACTION_POINTER_DOWN:
if(mMode==MODE_UNABLE) return true;
mMode=MODE_ZOOM;
mStartDis = distance(event);
case MotionEvent.ACTION_POINTER_UP:
return mGestureDetector.onTouchEvent(event);
其中加红部分的代码都是修改后的代码，逐一分析。
子控件开始进入移动状态，令ViewPager无法拦截对子控件的Touch事件
private void startDrag(){
if(moveListener!=null) moveListener.startDrag();
子控件开始停止移动状态，ViewPager将拦截对子控件的Touch事件
private void stopDrag(){
if(moveListener!=null) moveListener.stopDrag();
startDrag和stopDrag方法很简单，就是调用ViewPager传递进来的OnChildMovingListener接口进行mChildIsBeingDragged的设置。当监听到down事件时，表示开始拖动，当接收到up和cancel事件时，表示结束拖动，以这个逻辑来说，ViewGroup将永远无法拦截touch事件，所以我们还需要在其他地方设置stopDrag事件，后面说明。
接下去是在down事件中执行checkDragable方法：
根据当前图片左右边缘设置可拖拽状态
private void checkDragable() {
mLeftDragable=true;
mRightDragable=true;
mFirstMove=true;
float[] values=new float[9];
getImageMatrix().getValues(values);
//图片左边缘离开左边界，表示不可右移
if(values[Matrix.MTRANS_X]&=0)
mRightDragable=false;
//图片右边缘离开右边界，表示不可左移
if((mImageWidth)*values[Matrix.MSCALE_X]+values[Matrix.MTRANS_X]&=getWidth()){
mLeftDragable=false;
该方法将会重置mLeftDragable、mRightDragable、mFirstMove三个参数的状态。mLeftDragable表示当前状态下的Matrix可以向左拖动，mRightDragable表示当前状态下的Matrix可以向右拖动，mFirstMove为每次完整touch事件(从down到up或cancel)中的第一次拖动操作标志。其中mLeftDragable和mRightDragable都是根据Matrix矩阵的数值计算出来的。
由于前面功能需求的时候说过"每个down-up(cancel)事件周期内只执行一种类型的事务操作(缩放、拖动或者ViewPager切换Item)"，因此当进行缩放操作时，就不会再执行切换Item操作了，可以等缩放结束后执行up操作时stopDrag。而Move操作重点就是要识别是切换item还是拖动图片了。查看修改后的setDragMatrix代码
设置拖拽状态下的Matrix
@param event
public void setDragMatrix(MotionEvent event) {
if(isZoomChanged()){
float dx = event.getX() - mStartPoint.x; // 得到x轴的移动距离
float dy = event.getY() - mStartPoint.y; // 得到x轴的移动距离
//避免和双击冲突,大于10f才算是拖动
if(Math.sqrt(dx*dx+dy*dy)&10f){
mStartPoint.set(event.getX(), event.getY());
//在当前基础上移动
mCurrentMatrix.set(getImageMatrix());
float[] values=new float[9];
mCurrentMatrix.getValues(values);
dy=checkDyBound(values,dy);
dx=checkDxBound(values,dx,dy);
mCurrentMatrix.postTranslate(dx, dy);
setImageMatrix(mCurrentMatrix);
stopDrag();
和当前矩阵对比，检验dx，使图像移动后不会超出ImageView边界
@param values
private float checkDxBound(float[] values,float dx,float dy) {
float width=getWidth();
if(!mLeftDragable&&dx&0){
//加入和y轴的对比，表示在监听到垂直方向的手势时不切换Item
if(Math.abs(dx)*0.4f&Math.abs(dy)&&mFirstMove){
stopDrag();
if(!mRightDragable&&dx&0){
//加入和y轴的对比，表示在监听到垂直方向的手势时不切换Item
if(Math.abs(dx)*0.4f&Math.abs(dy)&&mFirstMove){
stopDrag();
mLeftDragable=true;
mRightDragable=true;
if(mFirstMove) mFirstMove=false;
if(mImageWidth*values[Matrix.MSCALE_X]&width){
if(values[Matrix.MTRANS_X]+dx&0){
dx=-values[Matrix.MTRANS_X];
else if(values[Matrix.MTRANS_X]+dx&-(mImageWidth*values[Matrix.MSCALE_X]-width)){
dx=-(mImageWidth*values[Matrix.MSCALE_X]-width)-values[Matrix.MTRANS_X];
处理逻辑是这样的：
1.判断当前缩放级别是否是原始缩放级别(isZoomChanged()),如果未缩放过那将可以直接切换Item，在这直接stopDrag。
2.若进行了缩放，那判断是否累移动了10f，当移动了10f之后计算出x轴和y轴的移动量，并且通过checkDyBound方法计算出y轴的真实移动量
3.进入checkDxBound方法，首先判断当前是否能够左移，如果不能左移而实际的x轴偏移量是向左的，那就返回x的偏移量为0，防止左移。同时，如果当前是第一次移动，那就表示本次不是左移操作，而是向前切换item，于是执行stopDrag方法，令ViewPager拦截掉对MatrixImageView的事件分发。另外在这里加入和Y轴偏移量的对比，是为了防止执行的是垂直方向的滑动而导致stopDrag，ViewPager自身对于X轴偏移量/2小于Y轴偏移量的情况是不当成切换Item意图的，这里设置为*0.4可以保证不冲突。
4.右移同理。
5.当第一次左移和右移判断结果都不是切换Item后，将mLeftDragable和mRightDragable都设置为true，表示可以正常移动了。之后就和单个MatrixImageView的拖动处理一样了。
到此便完成了内嵌到ViewGroup内的MatriImageView的改造。下面还有两点显示优化。
首先在reSetMatrix中加入了新的功能：当缩放后的图片高度未达到ImageView高度时，在up和cancel之后会将其Y轴居中，防止&放大图片-Y轴移动图片-缩小图片&导致图片位置不对称。异常图效果如下：
重置Matrix
private void reSetMatrix() {
if(checkRest()){
mCurrentMatrix.set(mMatrix);
setImageMatrix(mCurrentMatrix);
//判断Y轴是否需要更正
float[] values=new float[9];
getImageMatrix().getValues(values);
float height=mImageHeight*values[Matrix.MSCALE_Y];
if(height&getHeight()){
//在图片真实高度小于容器高度时，Y轴居中，Y轴理想偏移量为两者高度差/2，
float topMargin=(getHeight()-height)/2;
if(topMargin!=values[Matrix.MTRANS_Y]){
mCurrentMatrix.set(getImageMatrix());
mCurrentMatrix.postTranslate(0, topMargin-values[Matrix.MTRANS_Y]);
setImageMatrix(mCurrentMatrix);
优化了缩放操作的缩放x轴对称轴选择问题。在"图片放大-移动X轴-缩小图片"时，若直接以ImageView中心点为缩放原点，可能会导致缩放后的图片边缘离开ImageView边界。
出错图效果如下：
设置缩放Matrix
@param event
private void setZoomMatrix(MotionEvent event) {
//只有同时触屏两个点的时候才执行
if(event.getPointerCount()&2) return;
float endDis = distance(event);// 结束距离
if (endDis & 10f) { // 两个手指并拢在一起的时候像素大于10
float scale = endDis / mStartD// 得到缩放倍数
mStartDis=endD//重置距离
mCurrentMatrix.set(getImageMatrix());//初始化Matrix
float[] values=new float[9];
mCurrentMatrix.getValues(values);
scale = checkMaxScale(scale, values);
PointF centerF=getCenter(scale,values);
mCurrentMatrix.postScale(scale, scale,centerF.x,centerF.y);
setImageMatrix(mCurrentMatrix);
获取缩放的中心点。
@param scale
@param values
private PointF getCenter(float scale,float[] values) {
//缩放级别小于原始缩放级别时或者为放大状态时，返回ImageView中心点作为缩放中心点
if(scale*values[Matrix.MSCALE_X]&mScale||scale&=1){
return new PointF(getWidth()/2,getHeight()/2);
float cx=getWidth()/2;
float cy=getHeight()/2;
//以ImageView中心点为缩放中心，判断缩放后的图片左边缘是否会离开ImageView左边缘，是的话以左边缘为X轴中心
if((getWidth()/2-values[Matrix.MTRANS_X])*scale&getWidth()/2)
//判断缩放后的右边缘是否会离开ImageView右边缘，是的话以右边缘为X轴中心
if((mImageWidth*values[Matrix.MSCALE_X]+values[Matrix.MTRANS_X])*scale&getWidth())
cx=getWidth();
return new PointF(cx,cy);
通过判断图片宽度，决定是以ImageView中点为X轴缩放原点，还是以左右边缘为缩放原点。
目前为止MatrixImageView的功能基本完善了，具体代码还是放在我的Github上的。该View如果有问题的可以在这篇文章下留言或私信我。
阅读(...) 评论()ERROR: READ TIMEOUTERROR: READ TIMEOUT
Sun, 28 May :45 GMT (taikoo/BC38_dx-jiangxi-nanchang-2-cache-4)> 博客详情
package&me.
import&android.animation.AnimatorS
import&android.animation.ObjectA
import&android.app.A
import&android.os.B
import&android.view.MotionE
import&android.view.V
import&android.widget.ImageV
import&android.widget.RelativeL
public&class&MoveImgActivity&extends&Activity&{
&&&&ImageView&
&&&&private&int&containerW
&&&&private&int&containerH
&&&&float&lastX,&lastY;
&&&&RelativeLayout&
&&&&@Override
&&&&protected&void&onCreate(Bundle&savedInstanceState)&{
&&&&&&&&super.onCreate(savedInstanceState);
&&&&&&&&setContentView(R.layout.activity_move_img);
&&&&&&&&rl&=&(RelativeLayout)&findViewById(R.id.rl);
&&&&&&&&iv&=&(ImageView)&findViewById(R.id.iv);
&&&&&&&&iv.setOnTouchListener(new&View.OnTouchListener()&{
&&&&&&&&&&&&@Override
&&&&&&&&&&&&public&boolean&onTouch(View&v,&MotionEvent&event)&{
&&&&&&&&&&&&&&&&switch&(event.getActionMasked())&{
&&&&&&&&&&&&&&&&&&&&case&MotionEvent.ACTION_DOWN:
&&&&&&&&&&&&&&&&&&&&&&&&lastX&=&event.getRawX();
&&&&&&&&&&&&&&&&&&&&&&&&lastY&=&event.getRawY();
&&&&&&&&&&&&&&&&&&&&&&&&return&
&&&&&&&&&&&&&&&&&&&&case&MotionEvent.ACTION_MOVE:
&&&&&&&&&&&&&&&&&&&&&&&&//&&不要直接用getX和getY,这两个获取的数据已经是经过处理的,容易出现图片抖动的情况
&&&&&&&&&&&&&&&&&&&&&&&&float&distanceX&=&lastX&-&event.getRawX();
&&&&&&&&&&&&&&&&&&&&&&&&float&distanceY&=&lastY&-&event.getRawY();
&&&&&&&&&&&&&&&&&&&&&&&&float&nextY&=&iv.getY()&-&distanceY;
&&&&&&&&&&&&&&&&&&&&&&&&float&nextX&=&iv.getX()&-&distanceX;
&&&&&&&&&&&&&&&&&&&&&&&&//&不能移出屏幕
&&&&&&&&&&&&&&&&&&&&&&&&if&(nextY&&&0)&{
&&&&&&&&&&&&&&&&&&&&&&&&&&&&nextY&=&0;
&&&&&&&&&&&&&&&&&&&&&&&&}&else&if&(nextY&&&containerHeight&-&iv.getHeight())&{
&&&&&&&&&&&&&&&&&&&&&&&&&&&&nextY&=&containerHeight&-&iv.getHeight();
&&&&&&&&&&&&&&&&&&&&&&&&}
&&&&&&&&&&&&&&&&&&&&&&&&if&(nextX&&&0)
&&&&&&&&&&&&&&&&&&&&&&&&&&&&nextX&=&0;
&&&&&&&&&&&&&&&&&&&&&&&&else&if&(nextX&&&containerWidth&-&iv.getWidth())
&&&&&&&&&&&&&&&&&&&&&&&&&&&&nextX&=&containerWidth&-&iv.getWidth();
&&&&&&&&&&&&&&&&&&&&&&&&//&属性动画移动
&&&&&&&&&&&&&&&&&&&&&&&&ObjectAnimator&y&=&ObjectAnimator.ofFloat(iv,&"y",&iv.getY(),&nextY);
&&&&&&&&&&&&&&&&&&&&&&&&ObjectAnimator&x&=&ObjectAnimator.ofFloat(iv,&"x",&iv.getX(),&nextX);
&&&&&&&&&&&&&&&&&&&&&&&&AnimatorSet&animatorSet&=&new&AnimatorSet();
&&&&&&&&&&&&&&&&&&&&&&&&animatorSet.playTogether(x,&y);
&&&&&&&&&&&&&&&&&&&&&&&&animatorSet.setDuration(0);
&&&&&&&&&&&&&&&&&&&&&&&&animatorSet.start();
&&&&&&&&&&&&&&&&&&&&&&&&lastX&=&event.getRawX();
&&&&&&&&&&&&&&&&&&&&&&&&lastY&=&event.getRawY();
&&&&&&&&&&&&&&&&}
&&&&&&&&&&&&&&&&return&
&&&&&&&&&&&&}
&&&&&&&&});
&&&&@Override
&&&&public&void&onWindowFocusChanged(boolean&hasFocus)&{
&&&&&&&&super.onWindowFocusChanged(hasFocus);
&&&&&&&&//&这里来获取容器的宽和高
&&&&&&&&if&(hasFocus)&{
&&&&&&&&&&&&containerHeight&=&rl.getHeight();
&&&&&&&&&&&&containerWidth&=&rl.getWidth();
activity_move_img.xml
&?xml&version="1.0"&encoding="utf-8"?&
&RelativeLayout&xmlns:android="/apk/res/android"
&&&&xmlns:tools="/tools"
&&&&android:id="@+id/rl"
&&&&android:layout_width="match_parent"
&&&&android:layout_height="match_parent"
&&&&tools:context="com.example.android.interactivechart.MoveImgActivity"&
&&&&&ImageView
&&&&&&&&android:id="@+id/iv"
&&&&&&&&android:src="@drawable/b1"
&&&&&&&&android:layout_width="wrap_content"
&&&&&&&&android:layout_height="wrap_content"&/&
&/RelativeLayout&
人打赏支持
码字总数 21482
/reference/android/animation/AnimatorSet.html#playTogether(android.animation.Animator...)
支付宝支付
微信扫码支付
打赏金额: ￥
已支付成功
打赏金额: ￥}