Android 拖拽功能的使用实例

图片的拖拉功能是处理图片进一个有用且常用的功能,由于手机屏幕尺寸的限制,往往无法在手机上一次性的显示一张比较大的图片,也就是

说,我们在手机上一次性只能看到图片的一部分,此时就可以使用图片的拖动功能来拖动图片,进而查看图片相应的部分。

下面通过一个例子来学习实现图片的拖拉功能:

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

     
 

知识点:

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

<ImageView android:layout_width="wrap_content"

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的布局代码如下:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    >

    <ImageView
        android:id="@+id/show_img"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:scaleType="matrix"
        android:src="@drawable/s001"
        android:background="#ff0000"
        android:contentDescription="@string/app_name"/>

</RelativeLayout>

读者需要注意的是我们的ImageView的控制方式设置成了matrix这样就可以在代码中非常方便的对图片进行控制了。

然后,我们把一张图片(大小超过手机屏幕)的图片放在drawable-mdpi文件中。

主Activity的代码如下:MainActivity.java

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大小的图像,不同的是是否保持原图大小和绘图的目标不同、采取的手段不同。

程序源码下载

参与网址:

http://blog.csdn.net/xilibi2003/article/details/6628668

时间: 2024-12-21 02:23:35

Android 拖拽功能的使用实例的相关文章

使用UGUI实现拖拽功能(拼图小游戏)

实现方式 1.引入UGUI自带的事件系统 UnityEngine.EventSystems 2.为我们的类添加接口 IBeginDragHandler, IDragHandler, IEndDragHandler 1 using UnityEngine; 2 using System.Collections; 3 using UnityEngine.EventSystems; 4 5 public class DragOnPic : MonoBehaviour,IBeginDragHandler

JAVA UI 拖拽功能

java GUI拖拽功能是很实用也相对高级一些的功能. 有一小部分的GUI控件支持他们有dragEnabled属性.这些JComponent包括:javax.swing.JColorChooserjavax.swing.JFileChooserjavax.swing.JListjavax.swing.JTablejavax.swing.JTreejavax.swing.text.JTextComponent 大部分的控件不支持没有这个属性,尤其是常用的jpanel和jframe. 一种简单的方法

Atitit。D&amp;D drag&amp;drop拖拽功能c#.net java swing的对比与实现总结

Atitit.D&D drag&drop拖拽功能c#.net java swing的对比与实现总结 1. 实现一个D&D操作一般包括三个步骤: 1 2. .net黑头的拖曳机制.必须有DragEnter事件(单独写DragDrop事件是不会具有拖拽功能的) 2 3. ---java黑头的拖曳..必须有DragEnter事件(单独写 Drop事件是不会具有拖拽功能的) 2 4. 代码 3 5. 参考 5 1. 实现一个D&D操作一般包括三个步骤: 首先实现一个拖拽源,这个拖拽

bcb ole拖拽功能的实现

最近项目中用到了OLE 拖拽功能 和BCB 一个Form的Drag 不同的是,只有实现了OLE 拖拽才能,从其他程序拖拽数据到Form 下面的代码实现了,同HTML网页拖拽到Form时,Form获得HTML数据 其核心思想是, 1,要实现 COM的 IDropTarget 接口 2,RegisterDragDrop(handle,this); 注册窗口的拖拽 3,窗口类构造 OleInitialize(NULL); 4,窗口类析构时 OleUninitialize(); 5,在下面的代码中,我将

文件拖拽功能失效,原来是UAC把它过滤了

碰到这样一个问题,文件拖拽功能在没有以管理员身份运行的时候是正常的,但是一旦使用管理员身份运行,这个功能就失效了,搜索了好久总算找到原因了. 在window visa以上版本里引入了用户账户控制(UAC),在管理员权限上会过滤掉一些窗口消息,文件拖拽正好也也被过滤了,解决的方法就是使用ChangeWindowMessageFilterEx()解除过滤 //解除window7以上窗口对该消息的过滤 ChangeWindowMessageFilterEx(hwndDlg, WM_DROPFILES,

js实现登陆页面的拖拽功能

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>登陆页面的拖拽功能实现</title> </head> <style type="text/css"> *{ margin:0; padding:0; } a{ text-decoration: none; } .dialog{ width: 380px;

我的开源框架之可拖拽功能实现

需求: (1)实现元素可拖拽 (2)自定义拖拽范围 (3)自定义按下触发拖拽的元素 (4)支持拖拽过程中的事件监听 实现思路: 元素可拖拽的实现关键为,mousedown.mousemove.mouseup三大事件.mousedown为按下触发拖动的事件,可以定义到元素本身或其他元素:mousemove为拖动范围元素的事件,该事件负责重新设置拖动元素的位置属性:mouseup为拖动范围元素的事件,该事件主要为了释放mousemove.mouseup事件. 为避免当拖动元素内容有较大内容时,重新绘

JQuery UI的拖拽功能

JQuery UI是JQuery官方支持的WebUI 代码库,包含底层交互.动画.特效等API,并且封装了一些Web小部件(Widget).同时,JQuery UI继承了jquery的插件支持,有大量的第三方插件可以丰富JQuery UI的功能. JQuery UI提供的API极大简化了拖拽功能的开发.只需要分别在拖拽源(source)和目标(target)上调用draggable和droppable两个函数即可. 拖拽原理 首先要明确几个概念. ource:拖拽源,要拖动的元素. taerge

easyUI拖拽功能讲解以及多选拖拽的实现

首先我们考虑这样一个业务场景:一个维修部门中分了N个维修组,维修部门的负责人需要将这个部门的维修人员分配到这些组里去. 当然,他可以选中一个维修人员,然后给他分配维修组,但是从人性化角度考虑,若利用拖拽是否更加的快捷和明确呢? 比如我们可以将维修组和维修人员都列出来,然后只需要将维修人员拖动到对应的组里即可完成分组. 另外,由于一个个拖还是太繁琐,还需要实现选中多个维修人员一起分组.那么我们下面一步步来,先实现单个的拖拽功能,再加入多选拖动支持~ 单选拖动 首先,根据我们刚才描述的场景,简单设计