zoukankan      html  css  js  c++  java
  • Android 拖拽功能的使用实例

    图片的拖拉功能是处理图片进一个有用且常用的功能,由于手机屏幕尺寸的限制,往往无法在手机上一次性的显示一张比较大的图片,也就是
    说,我们在手机上一次性只能看到图片的一部分,此时就可以使用图片的拖动功能来拖动图片,进而查看图片相应的部分。
    下面通过一个例子来学习实现图片的拖拉功能:

    实例运行如下:1.这初始化的界面。2.为向左拖动后的效果 3.为向上拖动的效果

      


    知识点:
    在anndroid应用程序开发中,我们经常使用ImageView时经常会用到scaleType属性,如:


    android:layout_height=wrap_content
    android:scaleType=matrix
    android:src=@drawable/s001 />


    scaleType的属性值有:matrix fitXY fitStart fitCenter fitEnd center centerCrop centerInside
    它们之间的区别如下:
    matrix 用矩阵来绘制(从左上角起始的矩阵区域)
    fitXY 把图片不按比例扩大/缩小到View的大小显示(确保图片会完整显示,并充满View)
    fitStart 把图片按比例扩大/缩小到View的宽度,显示在View的上部分位置(图片会完整显示)
    fitCenter 把图片按比例扩大/缩小到View的宽度,居中显示(图片会完整显示)
    fitEnd 把图片按比例扩大/缩小到View的宽度,显示在View的下部分位置(图片会完整显示)
    center 按图片的原来size居中显示,当图片宽超过View的宽,则截取图片的居中部分显示,当图片宽小于View的宽,则图片居中显示
    centerCrop 按比例扩大/缩小图片的size居中显示,使得图片的高等于View的高,使得图片宽等于或大于View的宽
    centerInside 将图片的内容完整居中显示,使得图片按比例缩小或原来的大小(图片比View小时)使得图片宽等于或小于View的宽 (图片会完整显示)

    新建一个名称为DragAndDrop的Android工程,目录结构如下:

    主界面的activity_layout.xml的布局代码如下:

    1
    2
    3
    4
    5
    <relativelayout android:layout_height="match_parent" android:layout_width="match_parent" xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools">
     
        <imageview android:background="#ff0000" android:contentdescription="@string/app_name/" android:id="@+id/show_img" android:layout_height="wrap_content" android:layout_width="wrap_content" android:scaletype="matrix" android:src="@drawable/s001">
     
    </imageview></relativelayout>

    读者需要注意的是我们的ImageView的控制方式设置成了matrix这样就可以在代码中非常方便的对图片进行控制了。
    然后,我们把一张图片(大小超过手机屏幕)的图片放在drawable-mdpi文件中。
    主Activity的代码如下:MainActivity.java

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    package com.shen.draganddrop;
     
    import android.app.Activity;
    import android.graphics.Matrix;
    import android.graphics.PointF;
    import android.os.Bundle;
    import android.view.Menu;
    import android.view.MenuItem;
    import android.view.MotionEvent;
    import android.view.View;
    import android.view.View.OnTouchListener;
    import android.widget.ImageView;
     
    public class MainActivity extends Activity {
     
        private ImageView  imageView;
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
            imageView = (ImageView) findViewById(R.id.show_img);
            imageView.setOnTouchListener(new ImageTouchListener());
        }
     
        @Override
        public boolean onCreateOptionsMenu(Menu menu) {
            // Inflate the menu; this adds items to the action bar if it is present.
            getMenuInflater().inflate(R.menu.main, menu);
            return true;
        }
     
        @Override
        public boolean onOptionsItemSelected(MenuItem item) {
            // Handle action bar item clicks here. The action bar will
            // automatically handle clicks on the Home/Up button, so long
            // as you specify a parent activity in AndroidManifest.xml.
            int id = item.getItemId();
            if (id == R.id.action_settings) {
                return true;
            }
            return super.onOptionsItemSelected(item);
        }
         
        private class ImageTouchListener implements OnTouchListener
        {
             
            //声明一个坐标点
            private PointF startPoint;
            //声明并实例化一个Matrix来控制图片
            private Matrix matrix = new Matrix();
            //声明并实例化当前图片的Matrix
            private Matrix mCurrentMatrix = new Matrix();
             
            @Override
            public boolean onTouch(View v, MotionEvent event) {
                switch (event.getAction()&MotionEvent.ACTION_MASK) {
                case MotionEvent.ACTION_DOWN:
                    //获得当前按下点的坐标
                    startPoint = new PointF(event.getX(),event.getY());
                    //把当前图片的Matrix设置为按下图片的Matrix
                    mCurrentMatrix.set(imageView.getImageMatrix());
                    break;
                case MotionEvent.ACTION_MOVE:
                    //移动的x坐标的距离
                    float dx = event.getX() - startPoint.x;
                    //移动的y坐标的距离
                    float dy = event.getY() - startPoint.y;
                    //设置Matrix当前的matrix
                    matrix.set(mCurrentMatrix);
                    //告诉matrix要移动的x轴和Y轴的距离
                    matrix.postTranslate(dx, dy);
                    break;
                case MotionEvent.ACTION_UP:
                    break;
                default:
                    break;
                }
                //按照Matrix的要求移动图片到某一个位置
                imageView.setImageMatrix(matrix);
                //返回true表明我们会消费该动作,不需要父控件进行进一步的处理
                return true;
            }
             
        }
    }

    下面是scaleType的属性为同值的显示效果:

    1.fitXY 把图片不按比例扩大/缩小到View的大小显示(确保图片会完整显示,并充满View)

    2.fitStart 把图片按比例扩大/缩小到View的宽度,显示在View的上部分位置(图片会完整显示)


    3.fitCenter 把图片按比例扩大/缩小到View的宽度,居中显示(图片会完整显示)


    4.fitEnd 把图片按比例扩大/缩小到View的宽度,显示在View的下部分位置(图片会完整显示)


    5.center 按图片的原来size居中显示,当图片宽超过View的宽,则截取图片的居中部分显示,当图片宽小于View的宽,则图片居中显示


    6.centerCrop 按比例扩大/缩小图片的size居中显示,使得图片的高等于View的高,使得图片宽等于或大于View的宽


    7.centerInside 将图片的内容完整居中显示,使得图片按比例缩小或原来的大小(图片比View小时)使得图片宽等于或小于View的宽 (图片会完整显示)

    总之,scaletype的种类分为三类matrix(默认)、fit-X类、和center类。matrix就不多说。fit-X类中,fitStart、fitCenter和fitEnd之间的都是根据需要使原图改变对ImgView进行适应,按matrix进行绘制,但它们的区别在于基准不同。fitStart的基准为最上角的点(即matrix方式开始的点)fitCenter的基准点为中间的点(matrix方式中可以使图片居中的点),而fitEnd的基准点为右下角的点(即matrix方式最后绘制点)。center类中,center、centerCrop、centerInside都是以原图的几何中心点和ImagView的几何中心点为基准,且只绘制ImagView大小的图像,不同的是是否保持原图大小和绘图的目标不同、采取的手段不同。

    结伴旅游,一个免费的交友网站:www.jieberu.com

    推推族,免费得门票,游景区:www.tuituizu.com

  • 相关阅读:
    Kth element of Two Sorted Arrays
    Populating Next Right Pointers in Each Node I && II
    Average waiting time of SJF and Round Robin scheduling
    LRU Cache
    Calculate H-index
    Get Level of a node in a Binary Tree
    Two Sum
    Intersection of Two Linked Lists
    Symmetric Tree
    Lowest Common Ancestor of Binary (Search) Tree
  • 原文地址:https://www.cnblogs.com/rabbit-bunny/p/4195130.html
Copyright © 2011-2022 走看看