Recentemente ho avuto l'idea di sviluppare un gioco Android. Per cominciare, ho deciso di scrivere scacchi. Ho pensato alla tecnologia Trascinare e rilasciare perfetto per implementare il meccanismo per spostare le forme. Per chi non lo sapesse, lo noto metodo trascinare e rilasciare goccia è nella possibilità di trascinare alcuni oggetti grafici su altri ed eseguire l'una o l'altra azione dopo il rilascio. L'esempio più semplice- rimuovere il collegamento dal desktop del PC trascinandolo nel cestino. "Gettando" l'etichetta nel cestino, diciamo al sistema che vogliamo far interagire questi due oggetti. Il sistema riceve il nostro segnale e decide quale azione intraprendere. Il trascinamento della selezione è diventato molto diffuso grazie alla sua chiarezza intuitiva. Questo approccio è supportato dalla nostra esperienza di interazione con oggetti del mondo reale e funziona alla grande in un ambiente virtuale. Come per gli scacchi, utilizzando il drag and drop è tecnologicamente più semplice determinare la cella in cui l'utente ha trascinato il pezzo, poiché non è necessario calcolare il numero di cella dalle coordinate del punto di rilascio. Questo lavoro verrà assunto dalla macchina virtuale.

Finalità dell'utilizzo della tecnologia Drag n Drop

L'uso della tecnologia drag and drop mi permette di risolvere tre problemi con poco sangue:

1. Visualizzazione del movimento. Quando l'utente tocca una forma e inizia a spostarla sullo schermo, la forma viene sostituita da un disegno più piccolo. Pertanto, l'utente comprende che la figura viene catturata.
2. Ho limitato l'area di movimento della figura alle dimensioni del tabellone.
3. Se l'utente rilascia la forma nel posto sbagliato, dovrebbe tornare alla sua posizione originale.

I compiti sono definiti, iniziamo la loro implementazione.

Sostituisci ImageView al tocco

Tutte le mie forme sono oggetti ImageView. Sfortunatamente, si è scoperto che l'implementazione del Drag & Drop in Android non consente di sostituire "immediatamente" l'immagine di un oggetto quando viene toccato. Tuttavia, questo compito è abbastanza risolvibile tramite l'API. Dobbiamo eseguire una serie di semplici passaggi:

1. Crea un oggetto DragShadowBuilder.
2. Chiama il metodo startDrag.
3. Nascondi il nostro ImageView che visualizza la forma chiamando il metodo setVisibility con il parametro View.INVISIBLE. Di conseguenza, sullo schermo rimarrà solo l'oggetto DragShadowBuilder, che segnalerà all'utente che la forma è stata catturata.

Queste azioni devono essere implementate nel gestore OnTouchListner dell'oggetto ImageView. Per fare ciò, sovrascriveremo il metodo onTouch:

@Override public boolean onTouch(View view, MotionEvent motionEvent) ( if (motionEvent. getAction() == MotionEvent. ACTION_DOWN) ( ClipData clipData= ClipData. newPlainText("" , "" ) ; View. DragShadowBuilder dsb= new View. DragShadowBuilder (view) ;view.startDrag(clipData, dsb, view, 0 ) ;view.setVisibility(View.INVISIBLE) ; return true ; ) else ( return false ; ) )

Tutto è molto semplice. Quindi, dopo aver capito la sostituzione dell'immagine, passiamo all'attività successiva.

Limitazione dell'area di trascinamento per la funzione di trascinamento

La limitazione dell'area di trascinamento è correlata a un problema. Il fatto è che se rilasci la forma fuori dal tabellone, l'evento drop non si verificherà, perché l'utente ha lasciato cadere l'oggetto in un posto vuoto e l'oggetto non ha nulla con cui interagire. Di conseguenza, la figura non tornerà al suo originale stato originale e rimarrà per sempre nascosto. Ho passato molto tempo a leggere la documentazione, ma non ho trovato un modo per limitare l'area di trascinamento degli oggetti. La rivelazione è arrivata all'improvviso. Non ho bisogno di limitare affatto l'area, ho bisogno di sapere se l'utente ha rilasciato la figura correttamente o meno.

Determinazione del rilascio corretto
Ho trovato le risposte alle mie domande nella sezione "gestione degli eventi di fine trascinamento" sul sito degli sviluppatori Android. Ecco alcuni punti chiave:

1. Quando l'utente termina il trascinamento, l'evento ACTION_DRAG_ENDED viene attivato nel gestore DragListeners.
2. In DragListener puoi ottenere di più informazioni dettagliate sull'operazione di trascinamento chiamando il metodo DragEvent.getResult().
3. Se il DragListener restituisce true in risposta a un evento ACTION_DROP, anche la chiamata getResult restituirà true, altrimenti restituirà false.

Quindi devo catturare l'evento ACTION_DRAG_ENDED e chiamare il metodo getResult. Se restituisce false, l'utente ha trascinato la forma fuori dalla scheda e devo rendere visibile ImageView.

@Override public boolean onDrag(View view, DragEvent dragEvent) ( int dragAction= dragEvent. getAction() ; View dragView= (View) dragEvent. getLocalState() ; if (dragAction== DragEvent. ACTION_DRAG_EXITED) ( containsDragable= false ; ) else if (dragAction== DragEvent. ACTION_DRAG_ENTERED) ( containsDragable= true ; ) else if (dragAction== DragEvent. ACTION_DRAG_ENDED) ( if (dropEventNotHandled(dragEvent) ) ( dragView. setVisibility(View. VISIBLE) ; ) ) else if (dragAction= = DragEvent. ACTION_DROP& amp;& containsDragable) ( checkForValidMove((ChessBoardSquareLayoutView) view, dragView) ; dragView. setVisibility(View. VISIBLE) ; ) return true ; ) private boolean dropEventNotHandled(DragEvent dragEvent) ( return ! dragEvent. getResult( ) ;)

Ora l'utente può rilasciare la figura ovunque e non accadrà nulla di terribile.

Determinazione delle mosse consentite

L'ultima parte dell'articolo è dedicata alla verifica della validità della mossa che l'utente sta tentando di effettuare. Prima di discutere in dettaglio questo argomento, farò una piccola osservazione che spieghi la struttura della mia domanda. La scacchiera è rappresentata come un TableLayout e ogni cella è un discendente di un LinearLayout e ha un OnDragListener.

Inoltre, ogni OnDragListener fa riferimento a un oggetto "mediatore", che si occupa dell'interazione degli oggetti di gioco e ricorda la posizione della cella corrente.

Quando l'utente trascina una forma su una cella, sono possibili le seguenti azioni:

1. Utilizzo dell'evento ACTION_DRAG_ENTERED per impostare la variabile "containsDraggable" su true.
2. Utilizzo dell'evento ACTION_DRAG_EXITED per impostare la variabile "containsDraggable" su false.
3. Utilizzo dell'evento ACTION_DROP per interrogare il middleware se è consentito inserire una forma in questa cella.

Di seguito è riportato il codice che implementa la logica descritta

@Override public boolean onDrag(View view, DragEvent dragEvent) ( int dragAction= dragEvent. getAction() ; View dragView= (View) dragEvent. getLocalState() ; if (dragAction== DragEvent. ACTION_DRAG_EXITED) ( containsDragable= false ; ) else if (dragAction== DragEvent. ACTION_DRAG_ENTERED) ( containsDragable= true ; ) else if (dragAction== DragEvent. ACTION_DRAG_ENDED) ( if (dropEventNotHandled(dragEvent) ) ( dragView. setVisibility(View. VISIBLE) ; ) ) else if (dragAction= = DragEvent.ACTION_DROP& amp;& containsDragable) ( checkForValidMove((ChessBoardSquareLayoutView) view, dragView) ; dragView. setVisibility(View. VISIBLE) ; ) return true ; )

Come puoi vedere, indipendentemente dal fatto che lo spostamento sia valido o meno, ImageView è impostato sullo stato visibile. Volevo che l'utente vedesse la forma muoversi. In precedenza ho detto che la cella è figlia di LayoutView. Questo viene fatto per semplificare lo spostamento di ImageView da una cella all'altra. Di seguito è riportato il codice per il metodo checkForValidMove, che mostra come viene spostato ImageView.

private void checkForValidMove(ChessBoardSquareLayoutView view, View dragView) ( if (mediator. isValidMove(view) ) ( ViewGroup owner= (ViewGroup) dragView. getParent() ; owner. removeView(dragView) ; view. addView(dragView) ; view. setGravity (Gravity.CENTER) ;view.showAsLanded() ;mediator.handleMove(view) ; ) )

Spero che questo articolo ti aiuti nello sviluppo dei tuoi progetti.

Parlando dell'interfaccia utente grafica, non si può non dire della tecnologia Trascinare e rilasciare(letteralmente: Tira e lancia).

Questa tecnologia si basa su elementi drag and drop GUI dalla sorgente al destinatario. L'interfaccia è accessibile solo con un mouse (touchpad, trackball) o touch screen.

Un elemento trascinabile viene afferrato e tenuto premuto con il mouse mentre viene trascinato contemporaneamente in una posizione diversa. Quando il mouse è nella posizione corretta, il pulsante del mouse viene rilasciato, rilasciando l'oggetto.

Tuttavia, l'interfaccia Drag'n Drop dovrebbe essere distinta dai controlli dell'interfaccia che hanno metodi nei loro metodi responsabili dello spostamento, implementati allo stesso modo. Ad esempio, una finestra (modulo) ha la possibilità di spostarsi all'interno dello schermo (trascinando l'area del titolo). ScrollBox ha un cursore di scorrimento. Ma in entrambi gli esempi, il trascinamento è un'azione (evento) interna (per il componente) e non influisce in alcun modo su altri oggetti nel sistema.

L'interfaccia drag and drop è applicabile solo per spostare un oggetto da un contenitore all'altro, anche se i contenitori sono eterogenei. Ad esempio, trascinando un file da una cartella in un messaggio di posta elettronica.

Interfaccia Drag and Drop nelle tecnologie web

Utilizzo delle interfacce Trascinare e rilasciare nelle tecnologie web è stato un passo avanti in . Esistono editor Drag and Drop offline (ad esempio, DreamWeaver) e online (ad esempio, qualsiasi costruttore di siti Web moderno.

Per la libreria VCL, Borland ha implementato la propria versione dell'interfaccia Drag&Drop (tradotto come "drag"). Questa interfaccia è interna: puoi inviare e ricevere qualsiasi controllo Delphi all'interno del modulo "(ad eccezione del modulo stesso). È implementato senza utilizzare le corrispondenti funzioni API di Windows: devono essere utilizzate quando si organizza la comunicazione con altre attività trascinando e rilasciando .

Cliccando tasto sinistro mouse sopra il controllo, possiamo "trascinarlo" su qualsiasi altro elemento. Dal punto di vista del programmatore, ciò significa che al momento del trascinamento e del rilascio del tasto vengono generati determinati eventi che trasmettono tutte le informazioni necessarie: un puntatore all'oggetto trascinato, le coordinate correnti del cursore, ecc. Il ricevitore dell'evento è l'elemento su cui il questo momento si trova il cursore. Il gestore di tale evento deve comunicare al sistema se il dato controllo accetta o meno l'"invio". Quando il pulsante viene rilasciato sul controllo del ricevitore, vengono attivati ​​uno o due altri eventi, a seconda della prontezza del ricevitore.

AnnullaTrascina Annulla l'operazione corrente di trascinamento della selezione o di trascinamento e ancoraggio.

Funzione FindDragTarget (const Pos: TPoint ;AllowDisabled: Boolean ): TControl ;

La funzione restituisce un oggetto della classe base TControl , che fa riferimento alla posizione dello schermo con le coordinate specificate dal parametro Pos. Questa funzione viene utilizzata per determinare il potenziale destinatario di un'operazione di trascinamento o trascinamento. Se non esiste alcun controllo finestra per la posizione specificata, la funzione ritorna zero . Il parametro AllowDisabled determina se gli oggetti disabilitati verranno presi in considerazione.

Funzione IsDragObject(Sender: TObject ): Boolean ;

La funzione determina se l'oggetto specificato nel parametro Sender è un discendente della classe TDragObject . Questa funzione può essere utilizzato come parametro Source nei gestori di eventi OnDragOver e OnDockOver per determinare se l'oggetto trascinato verrà accettato. Funziona anche IsDragObjectpuò essere utilizzato come parametro Source nei gestori di eventi OnDragDrop e OnDockDrop per interpretare correttamente l'oggetto trascinato.

DragMode, proprietà DragCursor, metodi BeginDrag, OnDragOver, OnDragDrop, OnEndDrag, OnStartDrag, parametro Accept

Il processo di trascinamento delle informazioni da un oggetto all'altro con il mouse è ampiamente utilizzato in Widows: puoi spostare i file tra le cartelle, spostare le cartelle stesse e altro ancora.

Tutte le proprietà, i metodi e gli eventi associati al processo di trascinamento della selezione sono definiti nella classe TControl, che è il padre di tutti i componenti visivi di Delphi. Pertanto, sono comuni a tutti i componenti.

L'inizio del trascinamento è determinato dalla proprietà DragMode, che può essere impostata in fase di progettazione o uguale a livello di codice a dmManual o dmAutomatic. Il valore di dmAutomatic (automatico) determina l'avvio automatico del processo di trascinamento quando l'utente fa clic con il pulsante del mouse sul componente. Tuttavia, in questo caso, l'evento OnMouseDown associato all'utente che preme il pulsante del mouse non si verifica affatto per questo componente.

L'interfaccia per il trasferimento e la ricezione dei componenti è apparsa molto tempo fa. Fornisce l'interazione tra due controlli durante l'esecuzione dell'applicazione. In questo caso, è possibile eseguire tutte le operazioni necessarie. Nonostante la semplicità di implementazione e l'età dello sviluppo, molti programmatori (soprattutto principianti) considerano questo meccanismo oscuro ed esotico. Tuttavia, l'utilizzo del trascinamento della selezione può essere molto utile e facile da implementare. Ora lo verificheremo.

Affinché il meccanismo funzioni, due controlli devono essere opportunamente configurati. Uno deve essere la fonte (Fonte), il secondo - il destinatario (Target). In questo caso la fonte non si sposta da nessuna parte, ma viene solo registrata come tale nel meccanismo.

Credimi, è abbastanza facile da trasformare Coordinate X,Y, passato nei parametri degli eventi OnDragOver e OnDragDrop, nelle coordinate del form.

Lavora con le proprietà Left e Top del componente su cui si trova il cursore. Faccio un semplice esempio. Posizionare un componente Memo nel form e impostarne la proprietà Align su alTop. Posiziona un pannello sul form, imposta anche la proprietà Align su alTop e imposta la proprietà Height su un valore piccolo, diciamo 6 o 7 pixel. Imposta DragMode su dmAutomatica e DragCursor su crVSplit. Posiziona un altro componente Memo e imposta Allinea su alClient. Seleziona entrambi i Memo contemporaneamente, il pannello e crea un gestore di eventi OnDragOver comune come mostrato di seguito:

HTML trascina e rilascia le interfacce consentono alle applicazioni di utilizzare le funzionalità di trascinamento della selezione nei browser. L'utente può selezionare trascinabile elementi con il mouse, trascina questi elementi su a droppabile elemento e rilasciarli rilasciando il pulsante del mouse. Una rappresentazione traslucida del trascinabile elements segue il puntatore durante l'operazione di trascinamento.

Per i siti Web, le estensioni e le applicazioni XUL, puoi personalizzare quali elementi possono diventare trascinabile, il tipo di feedback il trascinabile elementi producono, e il droppabile elementi.

Questa panoramica del trascinamento della selezione HTML include una descrizione delle interfacce, i passaggi di base per aggiungere il supporto del trascinamento della selezione a un'applicazione e un riepilogo dell'interoperabilità delle interfacce.

Trascina gli eventi

evento	Sul gestore di eventi	Si accende quando...
lagna	ondrag	…un elemento trascinato(elemento o selezione di testo) viene trascinato.
dragend	ondragend	…un'operazione di trascinamento termina (come il rilascio di un pulsante del mouse o la pressione del tasto Esc; vedere Finire un trascinamento.)
dragenter	ondragenter	…un elemento trascinato entra in una destinazione di rilascio valida. (Vedere Specifica degli obiettivi di rilascio.)
dragexit	ondragexit	…un elemento non è più l'obiettivo di selezione immediato dell'operazione di trascinamento.
dragleave	ondragleave	…un elemento trascinato lascia una destinazione di rilascio valida.
trascinare sopra	ondragover	…un elemento trascinato viene trascinato su una destinazione di rilascio valida, ogni poche centinaia di millisecondi.
dragstart	ondragstart	…l'utente inizia a trascinare un elemento. (Vedere Avvio di un'operazione di trascinamento.)
far cadere	far cadere	…un oggetto viene rilasciato su un obiettivo di rilascio valido. (Vedere Esecuzione di un lancio.)

Nota: Né gli eventi dragstart né dragend vengono attivati ​​quando si trascina un file nel browser dal sistema operativo.

Interfacce

Le basi

Questa sezione è un riepilogo dei passaggi di base per aggiungere funzionalità di trascinamento della selezione a un'applicazione.

identificare ciò che è trascinabile

Realizzare un elemento trascinabile richiede l'aggiunta di trascinabile attributo e il ondragstart gestore di eventi globale, come mostrato nel seguente esempio di codice:

Questo elemento è trascinabile.

Per ulteriori informazioni, vedere:

gestire la caduta effetto

Il gestore del far cadere event è libero di elaborare i dati di trascinamento in un modo specifico dell'applicazione.

In genere, un'applicazione utilizza l'estensione getDati() metodo per recuperare gli elementi di trascinamento e quindi elaborarli di conseguenza. Inoltre, la semantica dell'applicazione può variare a seconda del valore di