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