`
hunankeda110
  • 浏览: 747032 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

android自定义ImageView实现缩放,回弹效果

阅读更多
话不多说上代码:
MainActivity.java
public class MainActivity extends Activity{
    private LinearLayout ll_viewArea;
    private LinearLayout.LayoutParams parm;
    private ViewArea viewArea;
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        //去除title   
        requestWindowFeature(Window.FEATURE_NO_TITLE);
         //去掉Activity上面的状态栏 
        getWindow().setFlags(WindowManager.LayoutParams. FLAG_FULLSCREEN, 
                       WindowManager.LayoutParams. FLAG_FULLSCREEN);
       
        setContentView(R.layout.main);
       
        ll_viewArea = (LinearLayout) findViewById(R.id.ll_viewArea);
        parm = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.FILL_PARENT, LinearLayout.LayoutParams.FILL_PARENT);
        viewArea = new ViewArea(MainActivity.this,R.drawable.psu);    //自定义布局控件,用来初始化并存放自定义imageView
        ll_viewArea.addView(viewArea,parm);

    }
}
这段代码中要注意的问题是去掉title和状态栏两句代码必须放到 setContentView(R.layout.main);话的前面。而且这两句话必须有,因为后面计算回弹距离是根据全屏计算的(我的i9000就是480x800),如果不去掉title和状态栏,后面的回弹会有误差,总是回弹不到想要的位置。

下面看看ViewArea.java文件。就是用来存放和初始化自定义imageView的地方。将来的自定义ImageView被限制在其内部移动缩放。
public class ViewArea extends FrameLayout{  //前面说了ViewArea是一个布局, 所以这里当然要继承一个布局了。LinearLayout也可以
    private int imgDisplayW;   
    private int imgDisplayH;   
    private int imgW;       
    private int imgH;       
    private TouchView touchView;
    private DisplayMetrics dm;
    //resId为图片资源id
    public ViewArea(Context context,int resId) { //第二个参数是图片的资源ID,当然也可以用别的方式获取图片
/*        dm = new DisplayMetrics();
        ((Activity)context).getWindowManager().getDefaultDisplay().getMetrics(dm);
        imgDisplayW = dm.widthPixels;
        imgDisplayH = dm.heightPixels;*//这种方式获取的屏幕大小和下面的方式结果是一样的,都是480x800(i9000分辨率)
        super(context);
        imgDisplayW = ((Activity)context).getWindowManager().getDefaultDisplay().getWidth();//这里的宽高要和xml中的LinearLayout大小一致,如果要指定大小。xml中 LinearLayout的宽高一定要用px像素单位,因为这里的宽高是像素,用dp会有误差!
        imgDisplayH = ((Activity)context).getWindowManager().getDefaultDisplay().getHeight();
       
        touchView = new TouchView(context,imgDisplayW,imgDisplayH);//这句就是我们的自定义ImageView
        touchView.setImageResource(resId);//给我们的自定义imageView设置要显示的图片
        Bitmap img = BitmapFactory.decodeResource(context.getResources(), resId);
        imgW = img.getWidth();
        imgH = img.getHeight();
        //图片第一次加载进来,判断图片大小从而确定第一次图片的显示方式。
        int layout_w = imgW>imgDisplayW?imgDisplayW:imgW; 
        int layout_h = imgH>imgDisplayH?imgDisplayH:imgH;
       
//下面的代码是判断图片初始显示样式的,当然可以根据你的想法随意显示,我这里是将宽大于高的图片按照宽缩小的比例把高压缩,前提必须是宽度超出了屏幕大小,相反,如果高大于宽,我将图片按照高缩小的比例把宽压缩,前提必须是高度超出了屏幕大小
        if(imgW>=imgH) {
            if(layout_w==imgDisplayW){
                layout_h = (int) (imgH*((float)imgDisplayW/imgW));
            }
        }else {
            if(layout_h==imgDisplayH){
                layout_w = (int) (imgW*((float)imgDisplayH/imgH));
            }
        }
//这里需要注意的是,采用FreamLayout或者LinearLayout的好处是,如果压缩后的图片扔有一个边大于屏幕,那么只显示在屏幕内的部分,可以通过移动后看见外部(不会裁剪掉图片),如果采用RelativeLayout布局,图片会始终完整显示在屏幕内部,不会有超出屏幕的现象。如果图片不是完全占满屏幕,那么在屏幕上没有图片的地方拖动,图片也会移动,这样的体验不太好,建议用FreamLayout或者LinearLayout。
        touchView.setLayoutParams(new FrameLayout.LayoutParams(layout_w,layout_h));//这是自定义imageView的大小,也就是触摸范围
        this.addView(touchView);
    }

}

下面来看我们最后一个文件,也是最关键的核心文件,自定义ImageView.java.是不是等了很久?!
public class TouchView extends ImageView
{
    static final int NONE = 0;//表示当前没有状态
    static final int DRAG = 1;     //表示当前处于移动状态
    static final int ZOOM = 2;     //表示当前处于缩放状态
    static final int BIGGER = 3;   //表示放大图片
    static final int SMALLER = 4;  //表示缩小图片
    private int mode = NONE;      //mode用于标示当前处于什么状态

    private float beforeLenght;  //第一次触摸两点的距离
    private float afterLenght;    //移动后两点的距离
    private float scale = 0.04f;  //缩放因子
  
    private int screenW;//下面两句图片的移动范围,及ViewArea的范围,也就是linearLayout的范围,也就是屏幕方位(都是填满父控件属性)
    private int screenH;
   
   
    private int start_x;//开始触摸点
    private int start_y;
    private int stop_x ;//结束触摸点
    private int stop_y ;
    private TranslateAnimation trans; //回弹动画
   
    public TouchView(Context context,int w,int h)//这里传进来的w,h就是图片的移动范围
    {
        super(context);
        this.setPadding(0, 0, 0, 0);
        screenW = w;
        screenH = h;
    }
    //用来计算2个触摸点的距离
    private float spacing(MotionEvent event) {
        float x = event.getX(0) - event.getX(1);
        float y = event.getY(0) - event.getY(1);
        return FloatMath.sqrt(x * x + y * y);
    }
   

    @Override
    public boolean onTouchEvent(MotionEvent event)
    {   
        switch (event.getAction() & MotionEvent.ACTION_MASK) {MotionEvent.ACTION_MASK表示多点触控事件
        case MotionEvent.ACTION_DOWN:
                mode = DRAG;
                stop_x = (int) event.getRawX();//表示相对于屏幕左上角为原点的坐标
                stop_y = (int) event.getRawY();//同上
                start_x = stop_x - this.getLeft();//用(int) event.getX();一样,表示相对于当前点击Widget(控件)左上角的坐标,这里就是相对于自定义imageView左上角的坐标.建议用前者,如果不是全屏拖动,而是指定范围内,一样适用!
                start_y = stop_y - this.getTop();////用(int) event.getY();一样,this.getTop()表示其顶部相对于父控件的距离
               
                if(event.getPointerCount()==2)
                    beforeLenght = spacing(event);
                break;
        case MotionEvent.ACTION_POINTER_DOWN:
                if (spacing(event) > 10f) {
                        mode = ZOOM;
                        beforeLenght = spacing(event);
                }
                break;
        case MotionEvent.ACTION_UP:

                int disX = 0;
                int disY = 0;
                if(getHeight()<=screenH )//
                {
                    if(this.getTop()<0 )
                    {
                        disY = getTop();
//layout(left , top, right,bottom)函数表示设置view的位置。
                        this.layout(this.getLeft(), 0, this.getRight(), 0 + this.getHeight());

                    }
                    else if(this.getBottom()>=screenH)
                    {
                        disY = getHeight()- screenH+getTop();
                        this.layout(this.getLeft(), screenH-getHeight(), this.getRight(), screenH);
                    }
                }else{
                    int Y1 = getTop();
                    int Y2 = getHeight()- screenH+getTop();
                        if(Y1>0)
                        {
                            disY= Y1;
                            this.layout(this.getLeft(), 0, this.getRight(), 0 + this.getHeight());
                        }else if(Y2<0){
                            disY = Y2;
                            this.layout(this.getLeft(), screenH-getHeight(), this.getRight(), screenH);
                        }
                }
                if(getWidth()<=screenW)
                {
                    if(this.getLeft()<0)
                    {
                        disX = getLeft();
                        this.layout(0, this.getTop(), 0+getWidth(), this.getBottom());
                    }
                    else if(this.getRight()>screenW)
                    {
                        disX = getWidth()-screenW+getLeft();
                        this.layout(screenW-getWidth(), this.getTop(), screenW, this.getBottom());
                    }
                }else {
                    int X1 = getLeft();
                    int X2 = getWidth()-screenW+getLeft();
                    if(X1>0) {
                        disX = X1;
                        this.layout(0, this.getTop(), 0+getWidth(), this.getBottom());
                    }else if(X2<0) {
                        disX = X2;
                        this.layout(screenW-getWidth(), this.getTop(), screenW, this.getBottom());
                    }
                   
                }
                //如果图片缩放到宽高任意一个小于100,那么自动放大,直到大于100.
                while(getHeight()<100||getWidth()<100) {
                   
                    setScale(scale,BIGGER);
                }
//根据disX和disY的偏移量采用移动动画回弹归位,动画时间为500毫秒。
                if(disX!=0 || disY!=0)
                {
                    trans = new TranslateAnimation(disX, 0, disY, 0);
                    trans.setDuration(500);
                    this.startAnimation(trans);
                }
                mode = NONE;
                break;
        case MotionEvent.ACTION_POINTER_UP:
                mode = NONE;
                break;
        case MotionEvent.ACTION_MOVE:

                if (mode == DRAG) {
//执行拖动事件的时,不断变换自定义imageView的位置从而达到拖动效果
                        this.setPosition(stop_x - start_x, stop_y - start_y, stop_x + this.getWidth() - start_x, stop_y - start_y + this.getHeight());              
                        stop_x = (int) event.getRawX();
                        stop_y = (int) event.getRawY();
                       
                } else if (mode == ZOOM) {
                    if(spacing(event)>10f)
                    {
                        afterLenght = spacing(event);
                        float gapLenght = afterLenght - beforeLenght;                    
                        if(gapLenght == 0) { 
                           break;
                        }
//图片宽度(也就是自定义imageView)必须大于70才可以缩放
                        else if(Math.abs(gapLenght)>5f&&getWidth()>70)
                        {
                            if(gapLenght>0) {
                                this.setScale(scale,BIGGER);  
                            }else { 
                                this.setScale(scale,SMALLER);  
                            }                            
                            beforeLenght = afterLenght; //这句不能少。
                        }
                    }
                }
                break;
        }
        return true;   
    }
   

    private void setScale(float temp,int flag) {  
       
        if(flag==BIGGER) { 
//setFrame(left , top, right,bottom)函数表示改变当前view的框架,也就是大小。
            this.setFrame(this.getLeft()-(int)(temp*this.getWidth()),   
                          this.getTop()-(int)(temp*this.getHeight()),   
                          this.getRight()+(int)(temp*this.getWidth()),   
                          this.getBottom()+(int)(temp*this.getHeight()));     
        }else if(flag==SMALLER){  
            this.setFrame(this.getLeft()+(int)(temp*this.getWidth()),   
                          this.getTop()+(int)(temp*this.getHeight()),   
                          this.getRight()-(int)(temp*this.getWidth()),   
                          this.getBottom()-(int)(temp*this.getHeight()));  
        }  
    }
   

    private void setPosition(int left,int top,int right,int bottom) { 
        this.layout(left,top,right,bottom);              
    }

}
最后看下简单的main.xml文件。
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">
   
<LinearLayout
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:id="@+id/ll_viewArea">
</LinearLayout>

</RelativeLayout>
分享到:
评论
2 楼 userTag 2017-11-08  
不能直接运行吧
1 楼 wyunqian 2013-11-10  
谢谢,,刚好我写的一个在往下拖动的时候不能回弹,,很谢谢你的代码了。。

相关推荐

    Android自定义ImageView实现缩放,回弹效果

    自定义ImageView实现缩放和回弹效果,需要结合手势识别、动画以及物理模拟等技术。通过这种方式,我们可以为用户提供更加自然、流畅的交互体验。在实际项目中,还可以根据需求添加更多细节,如平移、旋转等功能,...

    android自定义ImageView实现缩放,回弹效果.pdf

    在这个案例中,我们关注的是如何自定义一个`ImageView`来实现图片的缩放和回弹效果。首先,我们要创建一个新的类来扩展`ImageView`,这通常被称为`TouchView`,它将处理触摸事件并实现缩放和平移操作。 `...

    自定义ImageView(可单点缩放回弹、拖拽、多点缩放)

    1. **自定义ImageView**: 自定义ImageView意味着我们需要继承Android原生的ImageView类,并在其基础上添加我们自己的逻辑和功能。通常,我们会重写onTouchEvent()方法来处理触摸事件,以及onDraw()方法来自定义绘制...

    Android 点击有缩放动画的imageview

    在Android开发中,实现点击ImageView时有缩放动画的效果,是一种常见的交互设计,可以增加用户的操作体验。这种效果可以通过多种方式实现,包括使用Animation、ViewPropertyAnimator、ObjectAnimator或者自定义View...

    Android 图片双指缩放 单指拖拽 、拖到边界回弹

    本篇文章将深入探讨如何在Android应用中实现这个功能,包括双指缩放、单指拖拽以及图片拖动到边界时的回弹效果。 首先,我们需要了解Android中的手势检测。Android提供了`GestureDetector`和`ScaleGestureDetector`...

    Android 利用CoordinatorLayout实现高仿抖音个人中心 下拉越界回弹 图片放大

    本示例中的“Android 利用CoordinatorLayout实现高仿抖音个人中心 下拉越界回弹 图片放大”就是一个很好的案例,它展示了如何通过 CoordinatorLayout 结合其他组件来构建类似抖音个人中心的下拉回弹以及图片放大效果...

    Android 相册 支持图片缩放滑动 边界回弹 双击放大

    - 自定义View:为了实现这样的相册功能,通常需要创建一个自定义的ImageView子类,以处理手势识别、图片缩放和边界回弹效果。 - GridView或RecyclerView:用于展示多张图片,用户可以滑动浏览。这两种控件都可以...

    android图片缩放,边界回弹,旋转,拖动,双击,单击,自动旋转摆正,图片居中显示

    总的来说,"android图片缩放,边界回弹,旋转,拖动,双击,单击,自动旋转摆正,图片居中显示"这一主题涵盖了Android开发中的许多核心技术,包括手势识别、图片处理、动画制作等,这些都是Android UI开发人员必须...

    Android-通过自定义ViewPager画廊式中间放大效果

    在本教程中,我们将探讨如何自定义`ViewPager`来实现“画廊式中间放大效果”,即在多页之间滑动时,中间的页面会以放大显示的方式突出,营造出类似画廊中焦点作品被放大的视觉体验。 首先,我们需要了解`ViewPager`...

    Android 仿微信 拍照 及 从手机选择功能 图片缩放

    5. **ImageView手势操作**:为了实现图片的手势缩放、平移,需要使用`GestureDetector`和`ScaleGestureDetector`。`GestureDetector`用于检测单击、滑动等基本手势,`ScaleGestureDetector`则用于检测双指缩放。通过...

    高仿android-QQ空间下拉背景图拉伸回弹效果,修复已知BUG

    在Android开发中,实现类似QQ空间的下拉背景图拉伸回弹效果是一项常见的需求,这种效果能够带给用户更加生动和交互性强的体验。本文将详细介绍如何实现这一功能,并修复已知的问题,以便让应用更加稳定和流畅。 ...

    拍照/回弹/缩放/裁剪

    Android提供了Animation和Animator类来创建自定义动画,另外,VelocityTracker可以帮助计算滑动速度,实现回弹效果。此外,Android Support Library和AndroidX中的SwipeRefreshLayout组件内置了回弹效果,用于刷新...

    放大缩小imageview

    综上所述,"放大缩小imageview"涉及的核心知识点包括:自定义ImageView、手势识别(尤其是捏合手势)、ScaleGestureDetector的使用、ViewPager与PagerAdapter的结合以及图片加载库的优化。通过理解和掌握这些技术,...

    自定义view实现垂直gallery滚动

    本主题聚焦于如何利用自定义View实现垂直方向上的Gallery滚动,并结合字体的渐变缩放效果,以提供更丰富的视觉体验。 Gallery组件在早期版本的Android API中是一个常用的控件,通常用于展示图片轮播,但在API 17之后...

    Android图片拖动、点击放大效果

    在Android开发中,实现图片的拖动和点击放大效果是常见的需求,这涉及到对ImageView的交互处理和动画的运用。本项目"Android图片拖动、点击放大效果"提供了一个具体的解决方案,利用Gallery组件和ScaleAnimation类来...

    android 仿path 下拉图片放大,放开回弹 ListView

    在Android开发中,实现"仿path下拉图片放大,放开回弹ListView"的效果,涉及到的知识点主要包括自定义View、ListView的适配器Adapter、动画处理以及手势检测。下面将详细阐述这些关键点。 首先,"仿path下拉图片...

    android 仿path 下拉图片放大,放开回弹 ListView源码

    在Android开发中,实现类似Path应用的下拉图片放大及放开回弹效果,是一种常见的交互设计,能够提升用户的使用体验。这种效果主要涉及到ListView的自定义适配器、动画处理以及手势识别等技术。以下是对这个功能实现...

    android仿QQ个人主页下拉回弹效果

    总之,实现Android仿QQ个人主页下拉回弹效果,主要涉及到布局设计、事件监听和动画处理。通过合理运用ImageView的`scaleType`属性,结合ListView的滑动事件,可以创造出动态且富有交互性的界面效果。在实际开发中,...

Global site tag (gtag.js) - Google Analytics