JavascriptProva

lunedì 10 ottobre 2016

Pulsanti concentrici: aggiustamento.

Cerchiamo di ragionare...

Intanto salvo il codice, anche se imperfetto, specialmente per non scordare quello relativo all'attribuzione del click, che recupererò in seguito:
public class MainActivity extends AppCompatActivity {
    RelativeLayout mainLayout;
    private Button uno, due, tre, quattro;
    MediaPlayer mp;
    Context context = this;
    @Override
    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mainLayout = (RelativeLayout)findViewById(R.id.mainLayout);
        mp=MediaPlayer.create(context, R.raw.click);
        uno=(Button) findViewById(R.id.uno);
        due=(Button) findViewById(R.id.due);
        tre=(Button) findViewById(R.id.tre);
        quattro=(Button) findViewById(R.id.quattro);



        View.OnTouchListener onTouchListener=new View.OnTouchListener(){
            int colore=0;

            @Override
            public boolean onTouch(View view, MotionEvent motionEvent) {
                GradientDrawable gd = (GradientDrawable) view.getBackground();
                if (inCircle(motionEvent, view.getWidth() / 2.0f, view.getHeight() / 2.0f, view.getWidth() / 2)) {

                    if (motionEvent.getAction() == MotionEvent.ACTION_DOWN) {

                        try {
                            if (mp.isPlaying()) {
                                mp.stop();
                                mp.release();
                                mp = MediaPlayer.create(context, R.raw.click);
                            }
                            mp.start();
                        } catch (Exception e) {
                        }

                        gd.setColor(Color.YELLOW);
                    }



                    if (motionEvent.getAction() == MotionEvent.ACTION_UP ) {


                        ((GradientDrawable) uno.getBackground()).setColor(0xffffffff);
                        ((GradientDrawable) due.getBackground()).setColor(0xfffddfe0);
                        ((GradientDrawable) tre.getBackground()).setColor(0xffffe4d2);
                        ((GradientDrawable) quattro.getBackground()).setColor(0xfff0e1d9);

                    }


                }
                return true;

            }

        };
        uno.setOnTouchListener(onTouchListener);
        due.setOnTouchListener(onTouchListener);
        tre.setOnTouchListener(onTouchListener);
        quattro.setOnTouchListener(onTouchListener);




    }



    boolean inCircle(MotionEvent event, float centerX, float centerY, float radius){
        float deltaX=event.getX()-centerX;
        float deltaY=event.getY()-centerY;
        double ipotenusa=Math.sqrt((deltaX*deltaX)+(deltaY*deltaY));
        if(ipotenusa<=radius) return true;
        return false;
    }
}


Bene.
Fatto questo, mi limito a voler ottenere soltanto il cambiamento di colore di ogni pulsante circolare.

Ecco:
public class MainActivity extends AppCompatActivity {
    RelativeLayout mainLayout;
    private Button uno, due, tre, quattro;
    MediaPlayer mp;
    Context context = this;
    @Override
    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mainLayout = (RelativeLayout)findViewById(R.id.mainLayout);
        mp=MediaPlayer.create(context, R.raw.click);
        uno=(Button) findViewById(R.id.uno);
        due=(Button) findViewById(R.id.due);
        tre=(Button) findViewById(R.id.tre);
        quattro=(Button) findViewById(R.id.quattro);
        
        View.OnTouchListener onTouchListener=new View.OnTouchListener(){
            int colore=0;

            @Override
            public boolean onTouch(View view, MotionEvent motionEvent) {
                GradientDrawable gd = (GradientDrawable) view.getBackground();
                if (inCircle(motionEvent, view.getWidth() / 2.0f, view.getHeight() / 2.0f, view.getWidth() / 2)) {

                    switch(motionEvent.getAction()){
                        case MotionEvent.ACTION_DOWN:
                            gd.setColor(Color.RED);
                            break;
                        case MotionEvent.ACTION_UP:
                            ((GradientDrawable) uno.getBackground()).setColor(0xffffffff);
                            ((GradientDrawable) due.getBackground()).setColor(0xfffddfe0);
                            ((GradientDrawable) tre.getBackground()).setColor(0xffffe4d2);
                            ((GradientDrawable) quattro.getBackground()).setColor(0xfff0e1d9);
                            break;

                    }
                }
                return true;

            }

        };
        uno.setOnTouchListener(onTouchListener);
        due.setOnTouchListener(onTouchListener);
        tre.setOnTouchListener(onTouchListener);
        quattro.setOnTouchListener(onTouchListener);
    }
    
    boolean inCircle(MotionEvent event, float centerX, float centerY, float radius){
        float deltaX=event.getX()-centerX;
        float deltaY=event.getY()-centerY;
        double ipotenusa=Math.sqrt((deltaX*deltaX)+(deltaY*deltaY));
        if(ipotenusa<=radius) return true;
        return false;
    }
}
Questo dovrebbe colorare la view cliccata di rosso, mentre quando si rilascia il dito tutte le views riassumono il loro colore originario.
Proviamola...

E infatti funziona.

C'è un comportamento particolare: se scivolo col dito verso un pulsante più esterno, il colore rosso si congela, mentre ciò non avviene se scivolo verso un pulsante più interno.
Ho posto come condizione che il tocco avvenga entro un limite circolare dato dalle dimensioni del pulsante, sia in battere sia in levare. Se dunque vado all'esterno, viene meno la condizione e quindi il levare non ha effetto, mentre se vado all'interno, dal momento che il listener è impostato anche per gli altri pulsanti, funziona questo restituendo i colori originari.


Ora devo studiare quel fantomatico ACTION_OUTSIDE o qualcosa di simile.
Non riesco a ottenere il funzionamento.
Riesaminiamo le condizioni...

Il ritorno del colore avviene solo se tutte queste azioni vengono svolte entro il limite del pulsante circolare, quindi può darsi che qualunque cosa io faccia non abbia effetto perché esclusa dalla limitazione della circonferenza.

public class MainActivity extends AppCompatActivity {
    RelativeLayout mainLayout;
    private Button uno, due, tre, quattro;
    MediaPlayer mp;
    Context context = this;
    @Override
    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mainLayout = (RelativeLayout)findViewById(R.id.mainLayout);
        mp=MediaPlayer.create(context, R.raw.click);
        uno=(Button) findViewById(R.id.uno);
        due=(Button) findViewById(R.id.due);
        tre=(Button) findViewById(R.id.tre);
        quattro=(Button) findViewById(R.id.quattro);

        View.OnTouchListener onTouchListener=new View.OnTouchListener(){
            int colore=0;

            @Override
            public boolean onTouch(View view, MotionEvent motionEvent) {
                GradientDrawable gd = (GradientDrawable) view.getBackground();

                switch(motionEvent.getAction()){
                    case MotionEvent.ACTION_DOWN:
                        if (inCircle(motionEvent, view.getWidth() / 2.0f, view.getHeight() / 2.0f, view.getWidth() / 2)) {
                            gd.setColor(Color.RED);
                        }
                        break;

                    case MotionEvent.ACTION_UP:
                        ((GradientDrawable) uno.getBackground()).setColor(0xffffffff);
                        ((GradientDrawable) due.getBackground()).setColor(0xfffddfe0);
                        ((GradientDrawable) tre.getBackground()).setColor(0xffffe4d2);
                        ((GradientDrawable) quattro.getBackground()).setColor(0xfff0e1d9);
                        break;

                }

                return true;

            }

        };
        uno.setOnTouchListener(onTouchListener);
        due.setOnTouchListener(onTouchListener);
        tre.setOnTouchListener(onTouchListener);
        quattro.setOnTouchListener(onTouchListener);
    }

    boolean inCircle(MotionEvent event, float centerX, float centerY, float radius){
        float deltaX=event.getX()-centerX;
        float deltaY=event.getY()-centerY;
        double ipotenusa=Math.sqrt((deltaX*deltaX)+(deltaY*deltaY));
        if(ipotenusa<=radius) return true;
        return false;
    }
}
FUNZIONA!.
In fondo era banale!

Nessun commento:

Posta un commento