拖动视图,DragShadowBuilder使用

首先自定义一个view继承ImageView

package com.example.dragview;

import android.animation.Keyframe;
import android.animation.ObjectAnimator;
import android.animation.PropertyValuesHolder;
import android.annotation.SuppressLint;
import android.content.Context;
import android.graphics.drawable.Drawable;
import android.util.AttributeSet;
import android.view.DragEvent;
import android.view.View;
import android.view.View.OnDragListener;
import android.widget.ImageView;

@SuppressLint("NewApi")
public class DropTargetView extends ImageView implements OnDragListener{


    private boolean mDropped;

    public DropTargetView(Context context) {
        super(context);
        // TODO Auto-generated constructor stub
        init();
    }

    public DropTargetView(Context context, AttributeSet attrs) {
        super(context, attrs);
        // TODO Auto-generated constructor stub
        init();
    }

    public DropTargetView(Context context, AttributeSet attrs, int defaultStyle) {
        super(context, attrs, defaultStyle);
        // TODO Auto-generated constructor stub
        init();
    }

    @SuppressLint("NewApi")
    private void init(){
        setOnDragListener(this);
    }

    @Override
    public boolean onDrag(View v, DragEvent event) {
        // TODO Auto-generated method stub
        PropertyValuesHolder pvhx, pvhy;
        switch(event.getAction()){
        case DragEvent.ACTION_DRAG_STARTED:
            pvhx = PropertyValuesHolder.ofFloat("scaleX", 0.5f);
            pvhy = PropertyValuesHolder.ofFloat("scaleY", 0.5f);
            ObjectAnimator.ofPropertyValuesHolder(this, pvhx, pvhy).start();
            setImageDrawable(null);
            mDropped = false;
            break;
        case DragEvent.ACTION_DRAG_ENDED:
            if(!mDropped){
                pvhx = PropertyValuesHolder.ofFloat("scaleX", 1f);
                pvhy = PropertyValuesHolder.ofFloat("scaleY", 1f);
                ObjectAnimator.ofPropertyValuesHolder(this, pvhx, pvhy).start();
                mDropped = false;
            }
            break;
        case DragEvent.ACTION_DRAG_ENTERED:
            pvhx = PropertyValuesHolder.ofFloat("scaleX", 0.75f);
            pvhy = PropertyValuesHolder.ofFloat("scaleY", 0.75f);
            ObjectAnimator.ofPropertyValuesHolder(this, pvhx, pvhy).start();
            break;
        case DragEvent.ACTION_DRAG_EXITED:
            pvhx = PropertyValuesHolder.ofFloat("scaleX", 0.5f);
            pvhy = PropertyValuesHolder.ofFloat("scaleY", 0.5f);
            ObjectAnimator.ofPropertyValuesHolder(this, pvhx, pvhy).start();
            break;
        case DragEvent.ACTION_DROP:
            Keyframe frame0 = Keyframe.ofFloat(0f, 0.75f);
            Keyframe frame1 = Keyframe.ofFloat(0.5f, 0f);
            Keyframe frame2 = Keyframe.ofFloat(1f, 0.75f);
            pvhx = PropertyValuesHolder.ofKeyframe("scaleX", frame0, frame1, frame2);
            pvhy = PropertyValuesHolder.ofKeyframe("scaleY", frame0, frame1, frame2);   
            ObjectAnimator.ofPropertyValuesHolder(this, pvhx, pvhy).start();
            setImageDrawable((Drawable)event.getLocalState());
            mDropped = true;
            break;
        default:
            return false;
        }
        return true;
    }

}

布局文件

<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"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.example.dragview.MainActivity" >

    <LinearLayout 
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="horizontal">
        <ImageView 
            android:id="@+id/image1"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:src="@drawable/ic_launcher"/>
        <ImageView 
            android:id="@+id/image2"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:src="@drawable/ic_launcher"/>
        <ImageView 
            android:id="@+id/image3"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:src="@drawable/ic_launcher"/>

    </LinearLayout>

    <LinearLayout 
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:orientation="horizontal">

        <com.example.dragview.DropTargetView
            android:id="@+id/drag_target1"
            android:layout_width="0dp"
            android:layout_height="100dp"
            android:layout_weight="1"
            android:background="#A00"/>
          <com.example.dragview.DropTargetView
            android:id="@+id/drag_target2"
            android:layout_width="0dp"
            android:layout_height="100dp"
            android:layout_weight="1"
            android:background="#0A0"/>
            <com.example.dragview.DropTargetView
            android:id="@+id/drag_target3"
            android:layout_width="0dp"
            android:layout_height="100dp"
            android:layout_weight="1"
            android:background="#00A"/>
    </LinearLayout>

</RelativeLayout>

main Activity

package com.example.dragview;

import android.support.v7.app.ActionBarActivity;
import android.annotation.SuppressLint;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.view.View.DragShadowBuilder;
import android.view.View.OnLongClickListener;
import android.widget.ImageView;

public class MainActivity extends ActionBarActivity implements OnLongClickListener{

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        findViewById(R.id.image1).setOnLongClickListener(this);
        findViewById(R.id.image2).setOnLongClickListener(this);
        findViewById(R.id.image3).setOnLongClickListener(this);

    }


    @SuppressLint("NewApi")
    @Override
    public boolean onLongClick(View v) {
        // TODO Auto-generated method stub
        DragShadowBuilder shadowBuilder = new DragShadowBuilder(v);
        v.startDrag(null, shadowBuilder, ((ImageView) v).getDrawable(), 0);

        return true;
    }
}
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
React中实现拖拽组件的方法有多种,其中比较常用的是使用react-dnd库。下面是一个简单的使用示例: 1. 安装react-dnd和react-dnd-html5-backend: ``` npm install --save react-dnd react-dnd-html5-backend ``` 2. 创建可拖拽和可放置的组件: ```jsx import { useDrag, useDrop } from 'react-dnd'; function DraggableItem(props) { const [{ isDragging }, drag] = useDrag({ item: { type: 'item', id: props.id }, collect: monitor => ({ isDragging: monitor.isDragging(), }), }); return ( <div ref={drag} style={{ opacity: isDragging ? 0.5 : 1 }}> {props.children} </div> ); } function DroppableArea(props) { const [{ isOver }, drop] = useDrop({ accept: 'item', drop: (item, monitor) => { props.onDrop(item.id); }, collect: monitor => ({ isOver: monitor.isOver(), }), }); return ( <div ref={drop} style={{ backgroundColor: isOver ? 'lightgreen' : 'white' }}> {props.children} </div> ); } ``` 3. 在父组件中使用可拖拽和可放置的组件: ```jsx function App() { const [items, setItems] = useState([1, 2, 3]); const handleDrop = (id) => { setItems(items.filter(item => item !== id)); }; return ( <div> {items.map(item => ( <DraggableItem key={item} id={item}> Item {item} </DraggableItem> ))} <DroppableArea onDrop={handleDrop}> Drop here </DroppableArea> </div> ); } ``` 在上面的示例中,`DraggableItem`组件是可拖拽的,`DroppableArea`组件是可放置的。当`DraggableItem`被拖拽到`DroppableArea`上时,会调用`handleDrop`函数删除该项。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值