Nedávno som dostal nápad vyvinúť hru pre Android. Na začiatok som sa rozhodol písať šach. Myslel som technológiu Drag and Drop ideálne na implementáciu mechanizmu pre pohyb tvarov. Pre neznalých podotýkam metóda drag and drop pokles je v možnosti pretiahnuť niektoré grafické objekty na iné a po uvoľnení vykonať tú či onú akciu. Najjednoduchší príklad- odstráňte odkaz z pracovnej plochy počítača presunutím do koša. „Vhodením“ štítku do koša hovoríme systému, že chceme, aby tieto dva objekty interagovali. Systém prijme náš signál a rozhodne, akú akciu má vykonať. Drag and drop sa rozšírilo vďaka svojej intuitívnej prehľadnosti. Tento prístup je podporený našimi skúsenosťami s interakciou s objektmi skutočného sveta a funguje skvele vo virtuálnom prostredí. Čo sa týka šachu, pomocou drag and drop je technologicky jednoduchšie určiť bunku, kde používateľ ťahal figúrku, keďže nie je potrebné počítať číslo bunky zo súradníc bodu dropu. Túto prácu prevezme virtuálny stroj.

Účely použitia technológie Drag n Drop

Použitie technológie drag and drop mi umožňuje vyriešiť tri problémy s malým množstvom krvi:

1. Vizualizácia pohybu. Keď sa používateľ dotkne tvaru a začne ním pohybovať po obrazovke, tvar sa nahradí menšou kresbou. Používateľ teda chápe, že obrázok je zachytený.
2. Oblasť pohybu figúry som obmedzil na rozmery dosky.
3. Ak používateľ uvoľní tvar na nesprávnom mieste, mal by sa vrátiť do pôvodnej polohy.

Úlohy sú definované, začnime s ich realizáciou.

Nahraďte ImageView dotykom

Všetky moje tvary sú objekty ImageView. Bohužiaľ sa ukázalo, že implementácia Drag & Drop v systéme Android neumožňuje „hneď po vybalení“ nahradiť obrázok objektu, keď sa ho dotknete. Napriek tomu je táto úloha celkom riešiteľná pomocou API. Musíme vykonať niekoľko jednoduchých krokov:

1. Vytvorte objekt DragShadowBuilder.
2. Zavolajte metódu startDrag.
3. Skryte náš ImageView, ktorý zobrazuje tvar, volaním metódy setVisibility s parametrom View.INVISIBLE. Výsledkom je, že na obrazovke zostane iba objekt DragShadowBuilder, ktorý bude signalizovať používateľovi, že tvar bol zachytený.

Tieto akcie musia byť implementované v obslužnom programe OnTouchListner objektu ImageView. Aby sme to dosiahli, prepíšeme metódu onTouch:

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

Všetko je veľmi jednoduché. Takže, keď sme zistili náhradu obrázka, prejdime k ďalšej úlohe.

Obmedzenie oblasti ťahania pre funkciu ťahania

Obmedzenie oblasti ťahania súvisí s jedným problémom. Faktom je, že ak uvoľníte tvar mimo dosky, udalosť drop nenastane, pretože používateľ pustil objekt na prázdne miesto a objekt nemá s čím interagovať. V dôsledku toho sa postava nevráti do pôvodného stavu pôvodný stav a zostane navždy skrytý. Strávil som veľa času čítaním dokumentácie, ale nenašiel som spôsob, ako obmedziť oblasť ťahania objektov. Odhalenie prišlo náhle. Vôbec nepotrebujem obmedzovať plochu, potrebujem vedieť, či používateľ pustil figúrku správne alebo nie.

Určenie správneho uvoľnenia
Odpovede na moje otázky som našiel v sekcii „spracovanie udalostí pretiahnutia“ na stránke Android Developers. Tu je niekoľko kľúčových bodov:

1. Keď používateľ dokončí ťahanie, v obslužnom programe DragListeners sa spustí udalosť ACTION_DRAG_ENDED.
2. V DragListener môžete získať viac detailné informácie o operácii ťahania volaním metódy DragEvent.getResult().
3. Ak DragListener vráti hodnotu true ako odpoveď na udalosť ACTION_DROP, volanie getResult tiež vráti hodnotu true, inak vráti hodnotu false.

Potrebujem teda zachytiť udalosť ACTION_DRAG_ENDED a zavolať metódu getResult. Ak vráti hodnotu false, používateľ pretiahol tvar z dosky a musím zviditeľniť ImageView.

@Override public boolean onDrag(Zobrazenie zobrazenia, DragEvent dragEvent) ( int dragAction= dragEvent. getAction() ; View dragView= (View) dragEvent. getLocalState() ; if (dragAction== DragEvent. ACTION_DRAG_EXITED) ( obsahujeDragable= false ; ) else if (dragAction== DragEvent. ACTION_DRAG_ENTERED) ( obsahujeDragable= true ; ) else if (dragAction== DragEvent. ACTION_DRAG_ENDED) ( if (dropEventNotHandled(dragEvent) ) ( dragView. setVisibility(View. VISIBLE) if ( ) ) else = DragEvent. ACTION_DROP& amp;& amp; obsahuje Dragable) ( checkForValidMove((ChessBoardSquareLayoutView) zobrazenie, dragView) ; dragView. setVisibility(View. VISIBLE) ; ) return true ; ) private boolean dropEventNotHandled(DultragEvent dragEvent! dragEvent ) ;)

Teraz môže používateľ pustiť figúrku kdekoľvek a nič strašné sa nestane.

Stanovenie povolených ťahov

Posledná časť článku je venovaná kontrole platnosti ťahu, o ktorý sa používateľ pokúša. Pred podrobnou diskusiou o tejto téme urobím malú poznámku vysvetľujúcu štruktúru mojej aplikácie. Šachovnica je reprezentovaná ako TableLayout a každá bunka je potomkom LinearLayout a má OnDragListener.

Každý OnDragListener navyše odkazuje na objekt „mediátora“, ktorý sa stará o interakciu herných objektov a pamätá si polohu aktuálnej bunky.

Keď používateľ potiahne tvar cez bunku, sú možné nasledujúce akcie:

1. Pomocou udalosti ACTION_DRAG_ENTERED nastavte premennú 'containsDraggable' na hodnotu true.
2. Pomocou udalosti ACTION_DRAG_EXITED nastavte premennú 'containsDraggable' na hodnotu false.
3. Použitie udalosti ACTION_DROP na dotaz na middleware, či je povolené umiestniť tvar do tejto bunky.

Nižšie je uvedený kód, ktorý implementuje opísanú logiku

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

Ako vidíte, bez ohľadu na to, či je presun platný alebo nie, ImageView je nastavený na viditeľný stav. Chcel som, aby používateľ videl pohyb tvaru. Už som spomenul, že bunka je potomkom LayoutView. Toto sa robí, aby sa uľahčilo presúvanie ImageView z bunky do bunky. Nižšie je uvedený kód pre metódu checkForValidMove, ktorá ukazuje, ako sa ImageView presúva.

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

Dúfam, že vám tento článok pomôže pri vytváraní vlastných projektov.

Keď už hovoríme o grafickom používateľskom rozhraní, nedá sa povedať o technológii Drag and Drop(doslova: Ťahajte a hádzajte).

Táto technológia je založená na prvkoch drag and drop GUI od zdroja k prijímaču. Rozhranie je prístupné iba pomocou myši (touchpad, trackball) alebo dotykovej obrazovky.

Potiahnuteľný prvok sa chytí a drží pomocou myši, zatiaľ čo sa súčasne presúva na iné miesto. Keď je myš v správnej polohe, tlačidlo myši sa uvoľní, čím sa objekt uvoľní.

Rozhranie Drag'n Drop by sa však malo odlišovať od ovládacích prvkov rozhrania, ktoré majú vo svojich metódach metódy, ktoré sú zodpovedné za presun, implementované rovnakým spôsobom. Napríklad okno (formulár) má možnosť pohybovať sa po obrazovke (ťahaním oblasti nadpisu). ScrollBox má posúvač. Ale v oboch príkladoch je ťahanie internou (pre komponent) akciou (udalosťou) a žiadnym spôsobom neovplyvňuje ostatné objekty v systéme.

Rozhranie drag and drop je použiteľné len na presun objektu z kontajnera do kontajnera, aj keď sú kontajnery heterogénne. Napríklad pretiahnutím súboru z priečinka do e-mailu.

Drag and Drop rozhranie vo webových technológiách

Používanie rozhraní Drag and Drop vo webových technológiách bol prelom v . Existujú offline editory Drag and Drop (napríklad DreamWeaver) a online (napríklad akýkoľvek moderný tvorca webových stránok.

Pre knižnicu VCL spoločnosť Borland implementovala vlastnú verziu rozhrania Drag&Drop (v preklade „drag“). Toto rozhranie je interné - vo formulári môžete odosielať a prijímať akékoľvek ovládacie prvky Delphi "(okrem samotného formulára). Je implementované bez použitia zodpovedajúcich funkcií Windows API - musia byť použité pri organizovaní komunikácie s inými úlohami ťahaním a pustením .

Kliknutie ľavé tlačidlo myšou nad ovládacím prvkom, môžeme ho „pretiahnuť“ na akýkoľvek iný prvok. Z pohľadu programátora to znamená, že v momentoch ťahania a púšťania kľúča sa vygenerujú určité udalosti, ktoré prenesú všetky potrebné informácie - ukazovateľ na ťahaný objekt, aktuálne súradnice kurzora atď. Prijímačom udalosti je prvok na ktorom sa tento moment kurzor sa nachádza. Obsluha takejto udalosti musí systému povedať, či daný ovládací prvok akceptuje "odoslanie" alebo nie. Po uvoľnení tlačidla nad ovládačom prijímača sa spustí jedna alebo dve ďalšie udalosti v závislosti od pripravenosti prijímača.

CancelDrag Zruší aktuálnu operáciu presunutia myšou alebo presunutia a ukotvenia.

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

Funkcia vracia objekt základnej triedy TControl , ktorá sa vzťahuje na polohu obrazovky so súradnicami určenými parametrom Pos. Táto funkcia sa používa na určenie potenciálneho príjemcu operácie drag-and-drop alebo drag-and-dock. Ak pre zadanú pozíciu neexistuje žiadny ovládací prvok okna, funkcia sa vráti nula . Parameter AllowDisabled určuje, či sa budú brať do úvahy zakázané objekty.

Funkcia IsDragObject(Sender: TObject ): Boolean ;

Funkcia určuje, či objekt zadaný v parametri Sender je potomkom triedy TDragObject . Táto funkcia možno použiť ako parameter Source v obslužných programoch udalostí OnDragOver a OnDockOver na určenie, či bude ťahaný objekt prijatý. Tiež funkcia IsDragObjectmožno použiť ako parameter Source v obslužných programoch udalostí OnDragDrop a OnDockDrop, aby sa správne interpretoval pretiahnutý objekt.

DragMode, vlastnosti DragCursor, BeginDrag, OnDragOver, OnDragDrop, OnEndDrag, OnStartDrag metódy, Accept parameter

Proces presúvania informácií z jedného objektu na druhý pomocou myši je vo Widows široko používaný. Môžete presúvať súbory medzi priečinkami, presúvať samotné priečinky a podobne.

Všetky vlastnosti, metódy a udalosti spojené s procesom drag and drop sú definované v triede TControl, ktorá je rodičom všetkých vizuálnych komponentov Delphi. Preto sú spoločné pre všetky komponenty.

Začiatok ťahania je určený vlastnosťou DragMode, ktorú je možné nastaviť v čase návrhu alebo programovo rovnú dmManual alebo dmAutomatic. Hodnota dmAutomatic (automatic) určuje automatické spustenie procesu ťahania, keď používateľ klikne tlačidlom myši na komponent. V tomto prípade sa však udalosť OnMouseDown spojená so stlačením tlačidla myši používateľom pre tento komponent vôbec nevyskytuje.

Rozhranie na prenos a príjem komponentov sa objavilo už dávno. Poskytuje interakciu medzi dvoma ovládacími prvkami počas vykonávania aplikácie. V tomto prípade je možné vykonať všetky potrebné operácie. Napriek jednoduchosti implementácie a veku vývoja mnohí programátori (najmä začiatočníci) považujú tento mechanizmus za nejasný a exotický. Použitie funkcie Drag-and-Drop však môže byť veľmi užitočné a ľahko implementovateľné. Teraz si to overíme.

Aby mechanizmus fungoval, musia byť príslušne nakonfigurované dva ovládacie prvky. Jeden musí byť zdroj (Zdroj), druhý - prijímač (Cieľ). V tomto prípade sa zdroj nikam neposúva, ale je len ako taký zaregistrovaný v mechanizme.

Verte mi, je dosť ľahké premeniť sa X,Y súradnice, odovzdané v parametroch udalostí OnDragOver a OnDragDrop, do súradníc formulára.

Pracujte s vlastnosťami Left a Top komponentu, nad ktorým sa pohybuje kurzor. Uvediem jednoduchý príklad. Umiestnite komponent Memo na formulár a nastavte jeho vlastnosť Align na alTop. Umiestnite panel na formulár, tiež nastavte vlastnosť Align na alTop a nastavte vlastnosť Height na malú hodnotu, povedzme 6 alebo 7 pixelov. Nastavte DragMode na dmAutomatica a DragCursor na crVSplit. Umiestnite ďalší komponent Memo a nastavte Align na alClient. Vyberte oba poznámky súčasne, panel a vytvorte spoločnú obsluhu udalosti OnDragOver, ako je znázornené nižšie:

HTML Drag and Drop rozhrania umožňujú aplikáciám používať funkcie presúvania myšou v prehliadačoch. Užívateľ si môže vybrať ťahateľné prvky myšou presuňte tieto prvky do a spustiteľné a uvoľnite ich uvoľnením tlačidla myši. Priesvitné znázornenie ťahateľné prvky sledujú ukazovateľ počas operácie ťahania.

Pre webové stránky, rozšírenia a aplikácie XUL si môžete prispôsobiť, ktoré prvky sa môžu stať ťahateľné, typ spätnej väzby ťahateľné prvky produkujú, a spustiteľné prvkov.

Tento prehľad HTML Drag and Drop obsahuje popis rozhraní, základné kroky na pridanie podpory drag-and-drop do aplikácie a zhrnutie interoperability rozhraní.

Presuňte udalosti

udalosť	Na Obsluhe udalostí	Požiare, keď…
ťahať	Ondrag	…a pretiahnutá položka(výber prvku alebo textu) sa pretiahne.
dragend	ondragend	...končí sa operácia ťahania (napríklad uvoľnenie tlačidla myši alebo stlačenie klávesu Esc; viď Dokončenie ťahania.)
dragenter	ondragenter	…potiahnutá položka vstúpi do platného cieľa presunutia. (Pozri Určenie cieľových hodnôt.)
dragexit	ondragexit	…prvok už nie je okamžitým cieľom výberu operácie ťahania.
dragleave	ondragleave	…potiahnutá položka zanechá platný cieľ presunutia.
dragover	Ondragover	…potiahnutá položka sa presúva cez platný cieľ presunutia každých niekoľko stoviek milisekúnd.
dragstart	ondragstart	...používateľ začne ťahať položku. (Pozri Spustenie operácie ťahania.)
pokles	pokles	…položka spadne na platný cieľ prehodenia. (Pozri Prevedenie Drop.)

Poznámka: Udalosti dragstart ani dragend sa nespúšťajú pri pretiahnutí súboru do prehliadača z OS.

Rozhrania

Základy

Táto časť je zhrnutím základných krokov na pridanie funkcie presúvania myšou do aplikácie.

identifikovať čo je ťahateľné

Vytvorenie prvku ťahateľné vyžaduje pridanie ťahateľné atribút a ondragstart globálna obsluha udalosti, ako je znázornené v nasledujúcej ukážke kódu:

Tento prvok je pretiahnuteľný.

Ďalšie informácie nájdete na stránke:

zvládnuť pokles účinok

Psovod pre pokles udalosť môže voľne spracovať údaje ťahania spôsobom špecifickým pre aplikáciu.

Aplikácia zvyčajne používa getData() metódu na načítanie ťahaných položiek a následne ich zodpovedajúcim spôsobom spracovať. Okrem toho sa sémantika aplikácie môže líšiť v závislosti od hodnoty