JavascriptProva

giovedì 14 aprile 2016

Drag Drop con una chiave che apre e chiude un lucchetto.

Qual è il modo migliore di rappresentare un'apertura con due "serrature" che usano il meccanismo del Drag Drop?

Da una parte metterei un lucchetto e dall'altra parte una chiave.
Trascino la chiave sul lucchetto, che risulta aperto.
Quindi trascino di nuovo la chiave sul lucchetto aperto e ridiventa chiuso.
Si potrebbe provare...

Costruiamola adesso...

Per prima cosa, devo trovare le chiavi e i lucchetti, e metterli come risorse.
Ne ho trovati due, aperto e chiuso, del medesimo modello e non protetti da copyright.
Adesso li metto in risorse, dopo averli rinominati "lucchiuso" e "lucaperto" perché i nomi dei files erano complessi e poco memorizzabili.

Ora devo trovare una chiaFave.
Seguo lo stesso procedimento di prima (importante l'assenza di copyright perché li voglio inserire in un'App pubblicabile).

Trovata! Essendo un file jpg la converto in png perché mi pare di ricordare che in Android vengono meglio trattate le png, anche se non ne sono sicuro...

La inserisco nelle risorse.


Ora scrivo il codice che ha questo scopo: trascinando la chiave sopra il lucchetto chiuso, questo si trasforma in un lucchetto aperto, e viceversa.
Iniziamo...

Fatto! Mi sembra una soluzione decente:
public class MainActivity extends Activity {
 
 ImageView imgChiave, imgLucchetto;
 boolean settingMode=false;
 
 @Override
 protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.activity_main);
  
  //INIZIALIZZAZIONI
  imgChiave=(ImageView)findViewById(R.id.imageView1);
  imgChiave.setImageResource(R.drawable.chiave);
  imgLucchetto=(ImageView)findViewById(R.id.imageView2);
  imgLucchetto.setImageResource(R.drawable.lucchiuso);
  
  //LISTENERS
  
  View.OnTouchListener onTouchListener=new View.OnTouchListener() {
   
   @Override
   public boolean onTouch(View v, MotionEvent event) {
    DragShadowBuilder shadowBuilder=new DragShadowBuilder(v);
    v.startDrag(null, shadowBuilder, v, 0);
    return true;
   }
  };
  
  View.OnDragListener onDragListener=new View.OnDragListener() {
   
   @Override
   public boolean onDrag(View v, DragEvent event) {
    if(event.getAction()==DragEvent.ACTION_DROP){
     if(settingMode==false){
      ((ImageView)v).setImageResource(R.drawable.lucaperto);
      settingMode=true;
     }else{
      ((ImageView)v).setImageResource(R.drawable.lucchiuso);
      settingMode=false;
     }
    }
    return true;
   }
  };
  
  imgChiave.setOnTouchListener(onTouchListener);
  imgLucchetto.setOnDragListener(onDragListener);
}

Nessun commento:

Posta un commento