手把手实现腾讯qq拖拽删去效果(一)

 qq拖拽删除的效果,简单又好用,今天我就叫大家实现吧。

  这个滑动效果,有何难点了,就是响应每行的点击事件了,为了完成这个任务,并且能够实现动画的效果了,我重写了一个slideview这个控件,这个控件是干什么的了,是一个类似于viewflipper带动画的翻页控件了。它又是任何布局,任何控制了。

  首先,我们赏析一下它的布局文件:

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

    <LinearLayout
        android:id="@+id/view_content"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="horizontal" >
    </LinearLayout>

    <RelativeLayout
        android:id="@+id/holder"
        android:layout_width="120dp"
        android:layout_height="match_parent"
        android:clickable="true"
        android:background="@drawable/delete_holder_bg">

        <TextView
            android:id="@+id/delete"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:drawableLeft="@drawable/delete_icon_normal"
            android:layout_centerInParent="true"
            android:gravity="center"
            android:textColor="@color/floralwhite"
            android:text="删除" />
    </RelativeLayout>

</merge>

 由布局文件,可得知:

  ①由一对<merge>....</merge>标签包裹了里面的容器,merge标签是什么了,又有什么作用了。可以使用<merge>标签,它将它里面嵌套的view直接include到其父layout中,而没有再加一层view group,因此减小了深度,提高了速度。在这里了,我们就是将一个linearlayout的线性表局文件和relative布局文件嵌套其中了。

  ②relativelayout是显示相应的删除的按钮,而linearlayout主要是显示需要加载数据的值。

  具体的说明,请见下图:

  这里我们首先说明了布局文件,接下来就是控制文件了。

  控制文件的代码如何,我们来瞧一瞧:

package com.routemap_infomation.utils;

import android.content.Context;
import android.util.AttributeSet;
import android.util.Log;
import android.util.TypedValue;
import android.view.MotionEvent;
import android.view.View;
import android.widget.LinearLayout;
import android.widget.RelativeLayout;
import android.widget.Scroller;
import android.widget.TextView;

import com.routemap_infomation.myfocus.R;

public class SlideView extends LinearLayout {

    private static final String TAG = "SlideView";

    private Context mContext;
    private LinearLayout mViewContent;
    private RelativeLayout mHolder;
    private Scroller mScroller;
    private OnSlideListener mOnSlideListener;

    private int mHolderWidth = 100;

    private int mLastX = 0;
    private int mLastY = 0;
    private static final int TAN = 2;

    public interface OnSlideListener {
        public static final int SLIDE_STATUS_OFF = 0;
        public static final int SLIDE_STATUS_START_SCROLL = 1;
        public static final int SLIDE_STATUS_ON = 2;

        /**
         * @param view current SlideView
         * @param status SLIDE_STATUS_ON or SLIDE_STATUS_OFF
         */
        public void onSlide(View view, int status);
    }

    public SlideView(Context context) {
        super(context);
        initView();
    }

    public SlideView(Context context, AttributeSet attrs) {
        super(context, attrs);
        initView();
    }

    private void initView() {
        mContext = getContext();
        mScroller = new Scroller(mContext);

        setOrientation(LinearLayout.HORIZONTAL);
        View.inflate(mContext, R.layout.delete_button, this);
        mViewContent = (LinearLayout) findViewById(R.id.view_content);
        mHolderWidth = Math.round(TypedValue.applyDimension(
                TypedValue.COMPLEX_UNIT_DIP, mHolderWidth, getResources()
                        .getDisplayMetrics()));
    }

    public void setButtonText(CharSequence text) {
        ((TextView)findViewById(R.id.delete)).setText(text);
    }

    public void setContentView(View view) {
        mViewContent.addView(view);
    }

    public void setOnSlideListener(OnSlideListener onSlideListener) {
        mOnSlideListener = onSlideListener;
    }

    public void shrink() {
        if (getScrollX() != 0) {
            this.smoothScrollTo(0, 0);
        }
    }

    public boolean onRequireTouchEvent(MotionEvent event) {

        int x = (int) event.getX();
        int y = (int) event.getY();
        int scrollX = getScrollX();
        Log.d(TAG, "x=" + x + "  y=" + y);

        switch (event.getAction()) {
        case MotionEvent.ACTION_DOWN: {

            if (!mScroller.isFinished()) {
                mScroller.abortAnimation();
            }
            if (mOnSlideListener != null) {
                mOnSlideListener.onSlide(this,
                        OnSlideListener.SLIDE_STATUS_START_SCROLL);
            }
            break;
        }
        case MotionEvent.ACTION_MOVE: {

            int deltaX = x - mLastX;
            int deltaY = y - mLastY;
            if (Math.abs(deltaX) < Math.abs(deltaY) * TAN) {
                break;
            }

            int newScrollX = scrollX - deltaX;
            if (deltaX != 0) {
                if (newScrollX < 0) {
                    newScrollX = 0;
                } else if (newScrollX > mHolderWidth) {
                    newScrollX = mHolderWidth;
                }
                this.scrollTo(newScrollX, 0);
            }
            break;
        }
        case MotionEvent.ACTION_UP: {

            int newScrollX = 0;
            if (scrollX - mHolderWidth * 0.75 > 0) {
                newScrollX = mHolderWidth;
            }
            this.smoothScrollTo(newScrollX, 0);
            if (mOnSlideListener != null) {
                mOnSlideListener.onSlide(this,
                        newScrollX == 0 ? OnSlideListener.SLIDE_STATUS_OFF
                                : OnSlideListener.SLIDE_STATUS_ON);
                return false;
            }
           // break;
        }
        default:
            break;
        }

        mLastX = x;
        mLastY = y;
        return true;
    }

    private void smoothScrollTo(int destX, int destY) {
        // 缓慢滚动到指定位置
        int scrollX = getScrollX();
        int delta = destX - scrollX;
        mScroller.startScroll(scrollX, 0, delta, 0, Math.abs(delta) * 3);
        invalidate();
    }

    @Override
    public void computeScroll() {
        if (mScroller.computeScrollOffset()) {
            scrollTo(mScroller.getCurrX(), mScroller.getCurrY());
            postInvalidate();
        }
    }

}

 由代码我们可以下这样的结论了:

  ①这个控件其实本质是一个线性布局(Linearlayout)控件,因此就具有了linearlayout的属性。

  ②我上文说过这个控件是为了实现一个viewflipper翻页动画效果,因此需要一个动画效果,这里,我没有做自身的动画,而是通过了scroller本身滑动带有的动画效果。

  ③因为是拖拽,所以监听屏幕的触摸事件也是理所当然了,因此需要处理好触摸按下(down),触摸移动(move),抬起(up)的事件,对其相应事件下,scroller(滑动条)移动的距离需要进行监听。

  ④由于要移动控件,移动后,相应的控件需要进行了重回。

  这就是我实现了拖拽效果的一利器,今天就介绍到这里了。下节,来说明吧它如何整合到自定义的下拉列表中去。 

  

时间: 2024-11-03 02:05:53

手把手实现腾讯qq拖拽删去效果(一)的相关文章

手把手实现腾讯qq拖拽删去效果(二)

这节,就一个任务如何把上节自定义的翻页动画控件整进下拉列表中去. 由于是自定义的下拉列表控件,我们需要自定义能够上啦下滑的listview,这势必会造成这个问题,上拉刷新要响应相应touch事件,拖拽也似乎也要相应触摸事件,这势必会造成了一种事件的冲突了,怎么解决了.我这里用一个变量来区分一下,伪代码如下: 前面说了,这么多了,我们直接点评代码把: package com.routemap_infomation.utils; import java.util.Date; import andro

ios 像qq这样气泡可以拖拽的效果是如何实现的?

问题描述 ios 像qq这样气泡可以拖拽的效果是如何实现的? 有点好奇哈,倒是不知道如何实现,谢谢了-啊啊啊啊啊啊啊啊啊啊啊啊 解决方案 说下思路,监听点击与拖动事件,得到最新的坐标,再给view执行位移动画 解决方案二: 按压事件处理,让旗袍跟着用户触摸屏幕轨迹移动

jQuery拖拽排序插件制作拖拽排序效果(附源码下载)_jquery

使用jquery拖拽排序插件制作拖拽排序效果是一款非常实用的鼠标拖拽布局插件.效果图如下: 效果演示         源码下载 html代码: <h1>水平拖拽</h1> <div class="demo"> <div class="item item1"><span>1</span></div> <div class="item item2"><

jquery实现鼠标拖拽滑动效果来选择数字的方法_jquery

本文实例讲述了jquery实现鼠标拖拽滑动效果来选择数字的方法.分享给大家供大家参考.具体如下: 这是使用jquery ui实现的一个精美实用的效果,可以通过鼠标拖拽滑动效果来选择数字 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns

JS实现六边形3D拖拽翻转效果的方法_javascript技巧

效果图 实例代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&q

JS实现网站菜单拖拽移位效果的方法_javascript技巧

本文实例讲述了JS实现网站菜单拖拽移位效果的方法.分享给大家供大家参考.具体如下: 这是一个基于JavaScript的层手动实例,让网站的菜单可以拖拽移位,记得土豆网的"豆单"有这种功能.本效果还尚未彻底完成,部分地方因没有写入对应内容,因此JS可能会提示有错误. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-web-menu-tzyw-style-codes/ 具体代码如下: <html> <head>

原生JS实现拖拽图片效果_javascript技巧

本文实例为大家讲解了JS实现拖拽图片效果的详细代码,分享给大家供大家参考,具体内容如下 javascript event 对象的clientX,offsetX,screenX,pageX的区别: 用html5的drag来实现拖拽有兼容性问题,使用拖拽插件代码又很多,而这个拖拽demo代码少,并且兼容所有浏览器,很值得在项目中使用, css样式如下: #div1{ width: 100px; height: 100px; background-color: #4D4D4D; position: a

js实现进度拖拽的效果

用原生js实现的一个进度拖拽的效果,这个效果典型的应用就是调节音量. 本程序代码简单易懂,单页面可多次调用,效果如下图: js进度拖拽 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>js实现进度拖拽的效果</title> <style> body{margin:0;padding:0;font-size:12px;} .scale

asp.net中Wpf拖拽滑动效果示例

wpf其实支持拖拽是很简单的.使用drag事件或者自定义鼠标事件都是可以实现的. 今天分享一个用鼠标的点击和up事件实现的拖拽滑动效果. 首先在xaml中定义一个ScrollViewer.  代码如下 复制代码 <Window x:Class="Wpf拖拽滑动效果.MainWindow"  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  xmlns:x="http: