热门标签 | HotTags
当前位置:  开发笔记 > Android > 正文

Android实现控件的缩放移动功能

这篇文章主要介绍了android控件的缩放,移动功能,本文图文并茂给大家介绍的非常详细,需要的朋友可以参考下

上篇文章给大家介绍了 Android控件实现图片缩放功能 ,需要的朋友点击查看。

1.简介

话不多说先来张效果图

 

控件缩放移动.gif

上面的gif中,依次进行了拖动——>触摸右上角放大,缩小——>触摸上方与右测边缘——>双指放大缩小。

2 使用步骤

2.1 布局。外层一个LinearLayout,里面一个自定义的控件DragScaleView,为了能够更清楚的看到控件的变化过程,就给控件加了一个灰色带虚线的边框bg_dashgap。

layout文件

<&#63;xml version="1.0" encoding="utf-8"&#63;>

 

在drawable文件夹下的bg_dashgap.xml

<&#63;xml version="1.0" encoding="utf-8"&#63;>

 
 
 
 

2.2 自定义的控件

单指触摸:

当ACTION_DOWN时如果坐标为1.2.3.4四个区域,则对View进行相应的左上/右上/左下/右下拉伸;

当ACTION_DOWN时如果坐标为5.6.7.8四个区域,则分别对上/右/下/左四个方向进行拉伸;

当ACTION_DOWN时如果坐标为9这个区域,则对View进行移动;

 

双指触摸:

先计算出触摸时双指的距离,float oriDist=distance(event);

再得到双指离开屏幕的距离,float newDist =distance(event);

得到两者之间的比例 float scale = newDist / oriDist;

计算双指间距离的方法

/**
 * 计算两个手指间的距离
 * @param event 触摸事件
 * @return 放回两个手指之间的距离
 */
 private float distance(MotionEvent event) {
 float x = event.getX(0) - event.getX(1);
 float y = event.getY(0) - event.getY(1);
 return (float) Math.sqrt(x * x + y * y);//两点间距离公式
 }

自定义的控件

onTouch(View v, MotionEvent event)的触摸事件中代码块

 

image.png

其他的关键地方,代码中都有比较详细的注释了。思路就是

触摸监听

判断不同情况---getDirection(v, (int) event.getX(), (int) event.getY())
计算得到新的oriLeft, oriTop, oriRight, oriBottom
重新绘制---v.layout(oriLeft, oriTop, oriRight, oriBottom)

3 DragScaleView 的完整代码

public class DragScaleView extends android.support.v7.widget.AppCompatImageView implements View.OnTouchListener {
 protected int screenWidth;
 protected int screenHeight;
 protected int lastX;
 protected int lastY;
 private int oriLeft;
 private int oriRight;
 private int oriTop;
 private int oriBottom;
 private int dragDirection;
 private static final int TOP = 0x15;
 private static final int LEFT = 0x16;
 private static final int BOTTOM = 0x17;
 private static final int RIGHT = 0x18;
 private static final int LEFT_TOP = 0x11;
 private static final int RIGHT_TOP = 0x12;
 private static final int LEFT_BOTTOM = 0x13;
 private static final int RIGHT_BOTTOM = 0x14;
 private static final int TOUCH_TWO = 0x21;
 private static final int CENTER = 0x19;
 private int offset = 0; //可超出其父控件的偏移量
 protected Paint paint = new Paint();
 private static final int touchDistance = 80; //触摸边界的有效距离
 // 初始的两个手指按下的触摸点的距离
 private float oriDis = 1f;
 /**
 * 初始化获取屏幕宽高
 */
 protected void initScreenW_H() {
 screenHeight = getResources().getDisplayMetrics().heightPixels - 40;
 screenWidth = getResources().getDisplayMetrics().widthPixels;
 }
 public DragScaleView(Context context, AttributeSet attrs, int defStyle) {
 super(context, attrs, defStyle);
 setOnTouchListener(this);
 initScreenW_H();
 }
 public DragScaleView(Context context, AttributeSet attrs) {
 super(context, attrs);
 setOnTouchListener(this);
 initScreenW_H();
 }
 public DragScaleView(Context context) {
 super(context);
 setOnTouchListener(this);
 initScreenW_H();
 }
 @Override
 protected void onDraw(Canvas canvas) {
 super.onDraw(canvas);
 paint.setColor(Color.GRAY);
 paint.setStrokeWidth(4.0f);
 paint.setStyle(Paint.Style.STROKE);
 }
 @Override
 public boolean onTouch(View v, MotionEvent event) {
 setBackgroundResource(R.drawable.bg_dashgap);
 int action = event.getAction()& MotionEvent.ACTION_MASK;
 if (action == MotionEvent.ACTION_DOWN) {
 oriLeft = v.getLeft();
 oriRight = v.getRight();
 oriTop = v.getTop();
 oriBottom = v.getBottom();
 lastY = (int) event.getRawY();
 lastX = (int) event.getRawX();
 dragDirection = getDirection(v, (int) event.getX(),
  (int) event.getY());
 }
 if (action == MotionEvent.ACTION_POINTER_DOWN){
 oriLeft = v.getLeft();
 oriRight = v.getRight();
 oriTop = v.getTop();
 oriBottom = v.getBottom();
 lastY = (int) event.getRawY();
 lastX = (int) event.getRawX();
 dragDirection = TOUCH_TWO;
 oriDis = distance(event);
 }
 // 处理拖动事件
 delDrag(v, event, action);
 invalidate();
 return false;
 }
 /**
 * 处理拖动事件
 *
 * @param v
 * @param event
 * @param action
 */
 protected void delDrag(View v, MotionEvent event, int action) {
 switch (action) {
 case MotionEvent.ACTION_MOVE:
 int dx = (int) event.getRawX() - lastX;
 int dy = (int) event.getRawY() - lastY;
 switch (dragDirection) {
  case LEFT: // 左边缘
  left(v, dx);
  break;
  case RIGHT: // 右边缘
  right(v, dx);
  break;
  case BOTTOM: // 下边缘
  bottom(v, dy);
  break;
  case TOP: // 上边缘
  top(v, dy);
  break;
  case CENTER: // 点击中心-->>移动
  center(v, dx, dy);
  break;
  case LEFT_BOTTOM: // 左下
  left(v, dx);
  bottom(v, dy);
  break;
  case LEFT_TOP: // 左上
  left(v, dx);
  top(v, dy);
  break;
  case RIGHT_BOTTOM: // 右下
  right(v, dx);
  bottom(v, dy);
  break;
  case RIGHT_TOP: // 右上
  right(v, dx);
  top(v, dy);
  break;
  case TOUCH_TWO: //双指操控
  float newDist =distance(event);
  float scale = newDist / oriDis;
  //控制双指缩放的敏感度
  int distX = (int) (scale*(oriRight-oriLeft)-(oriRight-oriLeft))/50;
  int distY = (int) (scale*(oriBottom-oriTop)-(oriBottom-oriTop))/50;
  if (newDist>10f){//当双指的距离大于10时,开始相应处理
  left(v, -distX);
  top(v, -distY);
  right(v, distX);
  bottom(v, distY);
  }
  break;
 }
 if (dragDirection != CENTER) {
  v.layout(oriLeft, oriTop, oriRight, oriBottom);
 }
 lastX = (int) event.getRawX();
 lastY = (int) event.getRawY();
 break;
 case MotionEvent.ACTION_UP:
 case MotionEvent.ACTION_POINTER_UP:
 dragDirection = 0;
 break;
 }
 }
 /**
 * 触摸点为中心->>移动
 *
 * @param v
 * @param dx
 * @param dy
 */
 private void center(View v, int dx, int dy) {
 int left = v.getLeft() + dx;
 int top = v.getTop() + dy;
 int right = v.getRight() + dx;
 int bottom = v.getBottom() + dy;
 if (left <-offset) {
 left = -offset;
 right = left + v.getWidth();
 }
 if (right > screenWidth + offset) {
 right = screenWidth + offset;
 left = right - v.getWidth();
 }
 if (top <-offset) {
 top = -offset;
 bottom = top + v.getHeight();
 }
 if (bottom > screenHeight + offset) {
 bottom = screenHeight + offset;
 top = bottom - v.getHeight();
 }
 Log.d("raydrag", left+" "+top+" "+right+" "+bottom+" "+dx);
 v.layout(left, top, right, bottom);
 }
 /**
 * 触摸点为上边缘
 *
 * @param v
 * @param dy
 */
 private void top(View v, int dy) {
 oriTop += dy;
 if (oriTop <-offset) {
 //对view边界的处理,如果子view达到父控件的边界,offset代表允许超出父控件多少
 oriTop = -offset;
 }
 if (oriBottom - oriTop - 2 * offset <200) {
 oriTop = oriBottom - 2 * offset - 200;
 }
 }
 /**
 * 触摸点为下边缘
 *
 * @param v
 * @param dy
 */
 private void bottom(View v, int dy) {
 oriBottom += dy;
 if (oriBottom > screenHeight + offset) {
 oriBottom = screenHeight + offset;
 }
 if (oriBottom - oriTop - 2 * offset <200) {
 oriBottom = 200 + oriTop + 2 * offset;
 }
 }
 /**
 * 触摸点为右边缘
 *
 * @param v
 * @param dx
 */
 private void right(View v, int dx) {
 oriRight += dx;
 if (oriRight > screenWidth + offset) {
 oriRight = screenWidth + offset;
 }
 if (oriRight - oriLeft - 2 * offset <200) {
 oriRight = oriLeft + 2 * offset + 200;
 }
 }
 /**
 * 触摸点为左边缘
 *
 * @param v
 * @param dx
 */
 private void left(View v, int dx) {
 oriLeft += dx;
 if (oriLeft <-offset) {
 oriLeft = -offset;
 }
 if (oriRight - oriLeft - 2 * offset <200) {
 oriLeft = oriRight - 2 * offset - 200;
 }
 }
 /**
 * 获取触摸点flag
 *
 * @param v
 * @param x
 * @param y
 * @return
 */
 protected int getDirection(View v, int x, int y) {
 int left = v.getLeft();
 int right = v.getRight();
 int bottom = v.getBottom();
 int top = v.getTop();
 if (x 

总结

以上所述是小编给大家介绍的Android控件的缩放移动功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!


推荐阅读
  • Android 九宫格布局详解及实现:人人网应用示例
    本文深入探讨了人人网Android应用中独特的九宫格布局设计,解析其背后的GridView实现原理,并提供详细的代码示例。这种布局方式不仅美观大方,而且在现代Android应用中较为少见,值得开发者借鉴。 ... [详细]
  • 国内BI工具迎战国际巨头Tableau,稳步崛起
    尽管商业智能(BI)工具在中国的普及程度尚不及国际市场,但近年来,随着本土企业的持续创新和市场推广,国内主流BI工具正逐渐崭露头角。面对国际品牌如Tableau的强大竞争,国内BI工具通过不断优化产品和技术,赢得了越来越多用户的认可。 ... [详细]
  • CSS 布局:液态三栏混合宽度布局
    本文介绍了如何使用 CSS 实现液态的三栏布局,其中各栏具有不同的宽度设置。通过调整容器和内容区域的属性,可以实现灵活且响应式的网页设计。 ... [详细]
  • 本文介绍了如何使用jQuery根据元素的类型(如复选框)和标签名(如段落)来获取DOM对象。这有助于更高效地操作网页中的特定元素。 ... [详细]
  • 理解存储器的层次结构有助于程序员优化程序性能,通过合理安排数据在不同层级的存储位置,提升CPU的数据访问速度。本文详细探讨了静态随机访问存储器(SRAM)和动态随机访问存储器(DRAM)的工作原理及其应用场景,并介绍了存储器模块中的数据存取过程及局部性原理。 ... [详细]
  • 几何画板展示电场线与等势面的交互关系
    几何画板是一款功能强大的物理教学软件,具备丰富的绘图和度量工具。它不仅能够模拟物理实验过程,还能通过定量分析揭示物理现象背后的规律,尤其适用于难以在实际实验中展示的内容。本文将介绍如何使用几何画板演示电场线与等势面之间的关系。 ... [详细]
  • 本文介绍如何通过Windows批处理脚本定期检查并重启Java应用程序,确保其持续稳定运行。脚本每30分钟检查一次,并在需要时重启Java程序。同时,它会将任务结果发送到Redis。 ... [详细]
  • MySQL中枚举类型的所有可能值获取方法
    本文介绍了一种在MySQL数据库中查询枚举(ENUM)类型字段所有可能取值的方法,帮助开发者更好地理解和利用这一数据类型。 ... [详细]
  • Android LED 数字字体的应用与实现
    本文介绍了一种适用于 Android 应用的 LED 数字字体(digital font),并详细描述了其在 UI 设计中的应用场景及其实现方法。这种字体常用于视频、广告倒计时等场景,能够增强视觉效果。 ... [详细]
  • 本文详细探讨了在Android 8.0设备上使用ChinaCock的TCCBarcodeScanner进行扫码时出现的应用闪退问题,并提供了解决方案。通过调整配置文件,可以有效避免这一问题。 ... [详细]
  • 本章将深入探讨移动 UI 设计的核心原则,帮助开发者构建简洁、高效且用户友好的界面。通过学习设计规则和用户体验优化技巧,您将能够创建出既美观又实用的移动应用。 ... [详细]
  • 本文介绍如何在应用程序中使用文本输入框创建密码输入框,并通过设置掩码来隐藏用户输入的内容。我们将详细解释代码实现,并提供专业的补充说明。 ... [详细]
  • 本文介绍如何通过SQL查询从JDE(JD Edwards)系统中提取所有字典数据,涵盖关键表的关联和字段选择。具体包括F0004和F0005系列表的数据提取方法。 ... [详细]
  • RecyclerView初步学习(一)
    RecyclerView初步学习(一)ReCyclerView提供了一种插件式的编程模式,除了提供ViewHolder缓存模式,还可以自定义动画,分割符,布局样式,相比于传统的ListVi ... [详细]
  • 基于KVM的SRIOV直通配置及性能测试
    SRIOV介绍、VF直通配置,以及包转发率性能测试小慢哥的原创文章,欢迎转载目录?1.SRIOV介绍?2.环境说明?3.开启SRIOV?4.生成VF?5.VF ... [详细]
author-avatar
chenshu华
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有