Android实现悬浮可拖拽的Button

本文实例为大家分享了Android实现悬浮可拖拽Button的具体代码,供大家参考,具体内容如下

1、简介

最近,因为项目需要,需要制作一个界面上可拖拽的按钮,网上也有多实例,看了下大部分都是示例不全或讲解不清晰,效果图也不明显,借此自己记录一番自己的实现方案,以备不时之需,同时也为广大学者可以直接通过拷贝方式完成项目所需。

2、效果图

在开始代码之前,首先看看效果图,如下:

3、核心代码实现

3.1 DraggingButton 实现

public class DraggingButton extends android.support.v7.widget.AppCompatButton {

  private int lastX = 0;
  private int lastY = 0;
  private int beginX = 0;
  private int beginY = 0;

  private int screenWidth = 720;
  private int screenHeight = 1280;

  public DraggingButton(Context context) {
    this(context, null);
  }

  public DraggingButton(Context context, @Nullable AttributeSet attrs) {
    this(context, attrs, 0);
  }

  public DraggingButton(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
    super(context, attrs, defStyleAttr);

    initData(context);
  }

  private void initData(Context context){
    WindowManager wm = (WindowManager) context.getSystemService(Context.WINDOW_SERVICE);
    DisplayMetrics dm = new DisplayMetrics();
    wm.getDefaultDisplay().getMetrics(dm);
    screenWidth = dm.widthPixels;
    screenHeight = dm.heightPixels;
  }

  @Override
  public boolean onTouchEvent(MotionEvent event)
  {

    switch (event.getAction())
    {
      case MotionEvent.ACTION_DOWN:
        lastX = (int) event.getRawX();   // 触摸点与屏幕左边的距离
        lastY = (int) event.getRawY();   // 触摸点与屏幕上边的距离
        beginX = lastX;
        beginY = lastY;
        break;
      case MotionEvent.ACTION_MOVE:

        int dx =(int)event.getRawX() - lastX;    // x轴拖动的绝对距离
        int dy =(int)event.getRawY() - lastY;    // y轴拖动的绝对距离

        // getLeft(): 子View的左边界到父View的左边界的距离, getRight():子View的右边界到父View的左边界的距离
        // 如下几个数据表示view应该在布局中的位置
        int left = getLeft() + dx;
        int top = getTop() + dy;
        int right = getRight() + dx;
        int bottom = getBottom() + dy;
        if(left < 0){
          left = 0;
          right = left + getWidth();
        }
        if(right > screenWidth){
          right = screenWidth;
          left = right - getWidth();
        }
        if(top < 0){
          top = 0;
          bottom = top + getHeight();
        }
        if(bottom>screenHeight){
          bottom = screenHeight;
          top = bottom - getHeight();
        }
        layout(left, top, right, bottom);
        lastX = (int) event.getRawX();
        lastY = (int) event.getRawY();
        break;
      case MotionEvent.ACTION_UP:
        // 解决拖拽的时候松手点击事件触发
        if (Math.abs(lastX - beginX) < 10 && Math.abs(lastY - beginY) < 10){
          return super.onTouchEvent(event);
        }else{
          setPressed(false);
          return true;
        }
      default:
        break;
    }
    return super.onTouchEvent(event);
  }
}

核心代码已经奉献,通过自定义的DraggingButton即可实现可拖拽功能,具体原理主要在于onTouchEvent和layout两个函数的使用,具体细节不在讲述,代码注释比较清晰。

4、举个栗子

4.1  activity中的布局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:app="http://schemas.android.com/apk/res-auto"
  xmlns:tools="http://schemas.android.com/tools"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:orientation="vertical">
  <com.android.study.example.uidemo.dragging.DraggingButton
    android:id="@+id/tv_dragging"
    android:layout_width="80dp"
    android:layout_height="80dp"
    android:gravity="center"
    android:background="@drawable/drag_button_bg"
    android:layout_margin="20dp"
    android:padding="10dp"
    android:text="悬浮\n按钮1"
    android:textSize="15sp"
    android:layout_gravity="right"
    android:textColor="#ffffff"/>
</LinearLayout>

4.2 样式 drag_button_bg.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
  <item android:state_pressed="true">
    <shape android:shape="oval">
      <!--填充颜色-->
      <solid android:color="#bf39b500" />
      <!--描边-->
      <stroke android:width="2dp" android:color="#bf39b500" />
    </shape>
  </item>
  <item>
    <shape android:shape="oval">
      <!--填充颜色-->
      <solid android:color="#ff8bc34a" />
      <!--描边-->
      <stroke android:width="2dp" android:color="#bf39b500"/>
    </shape>
  </item>
</selector>

4.3 activity 中的代码

private DraggingButton mDraggintView;
mDraggintView = (DraggingButton) findViewById(R.id.tv_dragging);
  mDraggintView.setOnClickListener(new View.OnClickListener() {
   @Override
   public void onClick(View v) {
    Toast.makeText(FloatingActionBtnTestActivity.this, "click", Toast.LENGTH_SHORT).show();
   }
  });

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • Android开发之FloatingActionButton悬浮按钮基本使用、字体、颜色用法示例

    本文实例讲述了Android开发之FloatingActionButton悬浮按钮基本使用.字体.颜色用法.分享给大家供大家参考,具体如下: 这里主要讲: FloatingActionsMenu自定义样式以及title调整 FloatingActionButton的基本方法 看一下效果图: 这里使用的是:com.getbase.floatingactionbutton.FloatingActionsMenu 先说下它的配置:在app/build.gradle 添加以下代码依赖: 圆形悬浮按钮 i

  • Android仿知乎悬浮功能按钮FloatingActionButton效果

    前段时间在看属性动画,恰巧这个按钮的效果可以用属性动画实现,所以就来实践实践.效果基本出来了,大家可以自己去完善. 首先看一下效果图: 我们看到点击FloatingActionButton后会展开一些item,然后会有一个蒙板效果,这都是这个View的功能.那么这整个View肯定是个ViewGroup,我们一部分一部分来看. 首先是这个最小的Tag: 这个Tag带文字,可以是一个TextView,但为了美观,我们使用CardView,CardView是一个FrameLayout,我们要让它具有显

  • Android 中FloatingActionButton(悬浮按钮)实例详解

    Android 中FloatingActionButton(悬浮按钮)实例详解 一.介绍 这个类是继承自ImageView的,所以对于这个控件我们可以使用ImageView的所有属性 二.使用准备, 在as 的 build.grade文件中写上 compile 'com.android.support:design:22.2.0' 三.使用说明 <android.support.design.widget.FloatingActionButton android:id="@+id/floa

  • Android开发悬浮按钮 Floating ActionButton的实现方法

    一.介绍 这个类是继承自ImageView的,所以对于这个控件我们可以使用ImageView的所有属性 android.support.design.widget.FloatingActionButton 二.使用准备, 在as 的 build.grade文件中写上 compile 'com.android.support:design:22.2.0' 三.使用说明 xml文件中,注意蓝色字体部分 <android.support.design.widget.FloatingActionButt

  • Android悬浮按钮点击返回顶部FloatingActionButton

    先看一下Android悬浮按钮点击回到顶部的效果: FloatingActionButton是Design Support库中提供的一个控件,这个控件可以轻松实现悬浮按钮的效果 首先,要在项目中使用这个悬浮按钮就要先把design这个包导入项目 gradle中加入依赖 compile 'com.android.support:design:25.0.0' 接下来就是在xml中使用: 我这里是放置一个listView模拟返回顶部 <?xml version="1.0" encodi

  • Android自定义可拖拽的悬浮按钮DragFloatingActionButton

    悬浮按钮FloatingActionButton是Android 5.0系统添加的新控件,FloatingActionButton是继承至ImageView,所以FloatingActionButton拥有ImageView的所有属性.本文讲解的是一个实现了可拖拽的悬浮按钮,并为此添加了类似于qq的吸附边框的功能.在此之前,先了解下其简单的使用方式吧: 首先你得添加其依赖 compile 'com.android.support:design:25.3.1' 然后在布局文件中使用. <andro

  • Android中FloatingActionButton实现悬浮按钮实例

    Android中FloatingActionButton(悬浮按钮) 使用不是特别多,常规性APP应用中很少使用该控件. 当然他的使用方法其实很简单.直接上代码: xml: <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="

  • Android实现悬浮可拖拽的Button

    本文实例为大家分享了Android实现悬浮可拖拽Button的具体代码,供大家参考,具体内容如下 1.简介 最近,因为项目需要,需要制作一个界面上可拖拽的按钮,网上也有多实例,看了下大部分都是示例不全或讲解不清晰,效果图也不明显,借此自己记录一番自己的实现方案,以备不时之需,同时也为广大学者可以直接通过拷贝方式完成项目所需. 2.效果图 在开始代码之前,首先看看效果图,如下: 3.核心代码实现 3.1 DraggingButton 实现 public class DraggingButton e

  • Android Activity通用悬浮可拖拽View封装的思路详解

    目录 1,背景 2,思路 2.1,封装通用的基础悬浮View 2.1,继承通用View 2.3,设计view的控制器 2.4,view的添加和使用 1,背景 在开发中总会遇到一个可拖拽的悬浮View,不管是在开发中,还是在线上,都时长有这样的控件,我们通常遇到这种情况,经常需要自己封装,需要耗费时间,我这边封装了一个可以通用的悬浮可拖拽View,这样使用的时候,只需要传入自己要设计的样式和位置既可 2,思路 2.1,封装通用的基础悬浮View 设计通用的父View 1,传入的childView是

  • Android仿qq消息拖拽效果

    本文实例为大家分享了Android仿qq消息拖拽效果展示的具体代码,供大家参考,具体内容如下 这是一个仿qq消息拖拽效果,View和拖拽实现了分离,TextView.Button.Imageview等都可以实现相应的拖拽效果:在触发的地方调用 MessageBubbleView.attach(findViewById(R.id.text_view), new MessageBubbleView.BubbleDisappearListener() { @Override public void d

  • js前端日历控件(悬浮、拖拽、自由变形)

    很少发现网上有简洁好用的自定义前端控件的贴子,最近项目中需要,自己YY开始写前端控件,在此给大家分享 控件是基于jQuery.UI的Widget写的,写起来就方便很多,使用起来跟普通jQuery控件一样$(#id).control(option),看着眼熟吧,下面就开始了. 首先说下控件的依赖包,加载控件的时候必须先加载jQuery, jQuqery.UI, 另外jquery-ui.css 这个包也需要引用,此包主要应用了jQuery拖拽和放缩的样式,控件样式方面大家自由发挥,给了个自己写的默认

  • android ListView和GridView拖拽移位实现代码

    关于ListView拖拽移动位置,想必大家并不陌生,比较不错的软件都用到如此功能了.如:搜狐,网易,百度等,但是相比来说还是百度的用户体验较好,不偏心了,下面看几个示例:             首先说一下:拖拽ListView的item就不应该可以任意移动,只应该在ListView所在的范围内,而网易的你看看我都可以移动到状态栏了,虽然你做了处理,但是用户体验我个人感觉不好,在看看百度的,不仅控制了移动范围,更不错的百度的移动起来会时时的换位,看起来相当的形象,所以我认为这样相当的棒.说明一点

  • Android自定义View实现拖拽效果

    腾讯QQ有那种红点拖动效果,今天就来实现一个简单的自定义View拖动效果,再回到原处,并非完全仿QQ红点拖动. 先来看一下效果图 简单说一下实现步骤 1.创建一个类继承View 2.绘制出一个小球 3.重写onTouchEvent,来根据手指放下,移动,抬起,来控制小球 4.直接在布局中引用 先贴一张图看下View的坐标系 下面就贴一下代码,最后会给出源码 public class CustomView extends View { private int lastX; private int

  • vue悬浮可拖拽悬浮按钮的实例代码

    前言 vue开发手机端悬浮按钮实现,可以拖拽,滚动的时候收到里边,不影响视线 github地址 使用,基于vue-cli3.0+webpack 4+vant ui + sass+ rem适配方案+axios封装,构建手机端模板脚手架 vue-h5-template 后续将发布各种商城组件组件,让商城简单高效开发 线上体验 使用 将 src/components文件夹下的s-icons组件放到你的组件目录下 使用组件 // template <template> <div> <

  • Android 实现仿QQ拖拽气泡效果的示例

    目录 效果图: 一.实现思路 二.功能实现 三.全屏拖拽效果实现 源码地址: 效果图: 一.实现思路 在列表中默认使用自定义的TextView控件来展示消息气泡,在自定义的TextView控件中重写onTouchEvent方法,然后在DOWN.MOVE.UP事件中分别处理拖拽效果. 整个拖拽效果我们可以拆分成以下几步来实现: 1.默认状态 2.两气泡相连状态 3.两气泡分离状态 4.气泡消失状态 二.功能实现 默认状态:用来做一个状态的标识,无需特别处理. 两气泡相连状态:绘制一个固定圆和一个移

  • Android RecycleView实现Item拖拽效果

    基于公司产品的优化需求,其中一个需求涉及到RecycleView的拖拽,以及拖拽后item位置的持久化,目的是可以用户自定义界面偏好,并在用户下次进入本界面后,之前设置的偏好仍然有效.我写了一个小Demo用作演示效果. 先看效果(只看效果,不看颜值) 步骤1.建接口文件ItemTouchHelperViewHolder,该接口文件中描述的是选中和放开当前Item调用的方法. public interface ItemTouchHelperViewHolder { void onItemSelec

  • Android利用控制点的拖拽画一个粽子

    目录 前言 实现逻辑 应用 总结 前言 上一篇我们通过Listener获取触控点的位置作为贝塞尔曲线的控制点,实现曲线的交互式绘制.不过,上一篇有个缺陷,控制点绘制完成后只能撤销,没法修改,如果要调整绘制的图形的话会非常麻烦,这一篇我们来实现控制点的拖拽式移动,动态调整位置来调整绘制的图形. 实现逻辑 上一篇的主要代码我们不做更改,主要是需要实现控制点的拖拽式移动,移动过程中动态绘制新的曲线.不过由于绘制过程中不能同时移动点,因此需要有个完成绘制的控制,完成绘制后才支持拖拽控制点.拖拽控制点实现

随机推荐