The draganddrop framework, a new member of jetpack, greatly simplifies the development of drag and drop gestures!

about Drag and drop gesture , You are familiar with it , This is the most common operation on the desktop , For example, drag files into the recycle bin . With Large screen trend of mobile devices 、 Folding equipment is becoming more and more perfect , Drag and drop operation is becoming more and more necessary and popular in mobile platform ！ Implement drag and drop gestures ： Android The existing scheme of the platform is slightly complex . Based on this , Jetpack New members have been introduced in the framework collection DragAndDrop . _ This paper focuses on the vision and core points of the framework , The main content is translated from Android Developer Relationship Engineer Paul stay Meduim Upper Post In essence , Drag and drop gesture （drag and drop） It means that the user selects the picture by clicking 、 Text or other data elements , Then drag and drop directly to App Other interfaces 、 even to the extent that other App The interface of , Then the data is incorporated into the new interface . This gesture is usually expressed as a gesture on the touch screen Long press drag Or not on the touch screen Click and drag with the mouse , Finally, at the target location put down .

Come and have a look at App Classic drag and drop effect ：

Even though Android It has long supported the implementation of drag and drop gestures （ As early as Android 3.0 That is to say, to join DragEvent API）, But it turns out ： Want to be complete 、 Smooth implementation of... In the process gesture 、 Touch event 、 jurisdiction as well as Callback Integration of , Often compare Difficult and complex .

Now I would like to recommend Jetpack New members of DragAnd Drop frame ", Currently in alpha edition , It is designed to help you deal with drag and drop more easily App The data in .

stay build.gradle We introduce dependency into the system , You can use .

implementation 'androidx.draganddrop:draganddrop:1.0.0-alpha02'

The use of drag and drop gestures in Large screen equipment More and more frequently , Like tablets and laptops , In especial folding equipment . Split screen operation on this type of device is up to... More than traditional smart phones 7 times . Their users often need to use Split screen or Many window Mode to handle multitasking Scene , And put the data in different App Drag and drop is a natural experience and demand ！

Android The native platform already supports controls from input boxes EditText Drag text , But we strongly recommend that developers implement users From other controls Gesture of dragging data , Supported data types except text , Can also Including pictures 、 Any type of file . Yes, of course , Reverse support data From the other App Drag and drop in Equally important , And worthy of encouragement .

Come and have a look at App Between Example effects of dragging and dropping text and pictures ：

DragStartHelper, combination DropHelper Constitutes the core of the whole framework API, They can be easily implemented Gesture support 、 Data callback 、 Style and pixel level UI alignment And so on .

DragStartHelper

As Jetpack Frame set core The tool class under the package , DragStartHelper be responsible for Monitor the start time of the drag gesture . These gestures include long press and drag 、 Click and drag with the mouse, etc .

It's simple to use , Wrap the view you need to listen in and start listening . The frame will call back when the drag gesture is triggered , After that, you can make some simple configuration .

1. Wrap the data to be transferred into ClipData in
2. Create a new image instance to show the drag effect DragShadowBuilder
3. Add some... To the data and drag effect Flag Leave it to View The original method of startDragAndDrop() Carry out subsequent actions , Including effect display and data transmission

// Make a view draggable to share a file. DragStartHelper takes care of
// intercepting drag gestures and attaching the listener.
DragStartHelper(draggableView) { view, _ ->
    // Sets the appropriate MIME types automatically.
    val dragClipData = ClipData.newUri(contentResolver, "File", fileUri)

    // Set the visual look of the dragged object.
    // Can be extended and customized; we use the default here.
    val dragShadow = View.DragShadowBuilder(view)

    // Starts the drag. Note that the global flag allows for cross-app dragging.
    view.startDragAndDrop(
        dragClipData,
        dragShadow,
        null, // Optional extra local state information
        // Since this is a "content:" URI and not just plain text, we can use the
        // DRAG_FLAG_GLOBAL_URI_READ to allow other apps to read from our content
        // provider. Without it, other apps won't receive the drag events.
        DRAG_FLAG_GLOBAL or DRAG_FLAG_GLOBAL_URI_READ)
    )
}.attach()

DropHelper

Another core tool class DropHelper, You care about dragging the data down opportunity and Target view .

The adapted code is simply ：

1. An attempt to call for draggable data is required configureView Method
2. It also needs to set the concerned data type, i.e Mime Type
3. Specify some other optional parameter instances DropHelper.Options, For example, highlight when you put it down Color and View range etc.
4. Finally, set the most important thing to put down the listener OnReceiveContentListener, To go from ClipData Get data from and upload it 、 Display and other processing , Of course, it also includes mismatched warnings or view reminders

Be careful ： structure DropHelper.Options At instance time , Remember to call addInnerEditTexts(), This ensures that Nested EditText Control does not grab view focus .

DropHelper.configureView(
    // Activity that will handle the drop
    this,
    // Target drop view to be highlighted
    outerDropTarget,
    // Supported MIME types
    arrayOf(MIMETYPE_TEXT_PLAIN, "image/*"),
    // Options for configuring drop targets
    DropHelper.Options.Builder()
        // To ensure proper drop target highlighting, all EditText elements in
        // the drop target view hierarchy must be included in a call to this
        // method. Otherwise, an EditText within the target, rather than the
        // target view itself, acquires focus during the drag and drop operation.
        .addInnerEditTexts(innerEditText)
        .build()
) { _, payload ->
  // Process the payload here, returning any content that should be delegated to
  // the platform.
  ...
}

Related courses

Android Basic series of tutorials ：

Android basic course U- Summary _ Bili, Bili _bilibili

Android basic course UI- Layout _ Bili, Bili _bilibili

Android basic course UI- Control _ Bili, Bili _bilibili

Android basic course UI- Animation _ Bili, Bili _bilibili

Android basic course -activity Use _ Bili, Bili _bilibili

Android basic course -Fragment Usage method _ Bili, Bili _bilibili

Android basic course - Hot repair / The principle of thermal renewal technology _ Bili, Bili _bilibili

In this paper, from https://juejin.cn/post/7043616310369976328, If there is any infringement , Please contact to delete .