Autore Topic: Gallery solo con immagini che scorrono con pinch to zoom  (Letto 1814 volte)

Offline Nokias

  • Utente junior
  • **
  • Post: 58
  • Respect: +1
    • Mostra profilo
Gallery solo con immagini che scorrono con pinch to zoom
« il: 17 Ottobre 2011, 11:02:02 CEST »
0
Buongiorno a tutti , nel realizzare una gallery volevo imitare una qualsiasi gallery di uno smartphone che prevede di scorrere le immagini una alla volta con il dito e per ognuna è possibile fare il famoso pinch to zoom. Non so se sono riuscito a spiegarmi... comunque visualizzare un img con il pinch to zoom è già possibile con questo tutorial :

http://developer.sonyericsson.com/wp/2010/07/07/android-one-finger-zoom-tutorial-part-4/

Grazie a tutti coloro che potranno aiutarmi!  :-)

Offline Verandi

  • Utente normale
  • ***
  • Post: 378
  • Respect: +75
    • Mostra profilo
  • Sistema operativo:
    Windows 7
Re:Gallery solo con immagini che scorrono con pinch to zoom
« Risposta #1 il: 17 Ottobre 2011, 14:53:49 CEST »
0
Ciao di nuovo.  ;-)
Io userei una gallery così sei a posto per l'animazione a destra e sinistra, il riciclo delle view ecc. Poi aggiungerei un custom adapter e per le child della gallery creerei una custom view che si occupi di ingrandire/rimpicciolire l'immagine che gli setti.
Mi sa che dovrai customizzare anche la classe gallery in modo da "tenere per sé" i movimenti a destra e sinistra del dito, e passare alla child visualizzata gli eventi multitouch.

Offline Nokias

  • Utente junior
  • **
  • Post: 58
  • Respect: +1
    • Mostra profilo
Re:Gallery solo con immagini che scorrono con pinch to zoom
« Risposta #2 il: 17 Ottobre 2011, 19:42:08 CEST »
0
Ma dici che già non si trova qualcosa in giro senza ripartire da zero? No perché ad esser sincero non sono molto convinto di aver capito a cosa ti riferisci...cioè non saprei come trasformare quello che hai detto in codice  :-\ ...comunque grazie mille per l'intervento davvero molto interessante!!Spero che puoi continuare ad aiutarmi!  :-)

Offline Verandi

  • Utente normale
  • ***
  • Post: 378
  • Respect: +75
    • Mostra profilo
  • Sistema operativo:
    Windows 7
Re:Gallery solo con immagini che scorrono con pinch to zoom
« Risposta #3 il: 17 Ottobre 2011, 22:30:31 CEST »
+2
Ti ho fatto uno scheletro. L'ho scritto un po' di fretta, quindi chiedi pure se certe parti non sono chiare.
Questo è il layout dell'activity, main.xml. Ha una gallery che viene visualizzata a schermo intero.
Codice (XML): [Seleziona]
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:orientation="vertical"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent">
        <!-- La gallergy che visualizzerà le immagini. Ho aggiunto uno spacing per
                separare i vari item e ho tolto i fadingedge che non credo ti servano -->
        <Gallery
                android:id="@+id/gallery"
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                android:spacing="10dp"
                android:fadingEdge="none" />
</LinearLayout>

Ogni elemento della gallery sarà una view personalizzata. Ho scelto un linearlayout per comodità. I dati di layout (altezza e larghezza) sono in questo file di layout chiamato item.xml:
Codice (XML): [Seleziona]
<?xml version="1.0" encoding="utf-8"?>
<!-- Usiamo la nostra custom view. Devi cambiare il com.test.gallery.PictureView
        con il percorso del pacchetto che creerai. E' importante aggiungere il background,
        più avanti ti spiegherò perché -->
<com.test.gallery.PictureView
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:orientation="vertical"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:background="#00000000">
</com.test.gallery.PictureView>

Nel codice dell'activity setto il layout, trovo la gallery e le passo il custom adapter presente alla fine del codice, che dirà alla gallery quanti elementi selezionare, come visualizzarli ecc...
Codice (Java): [Seleziona]
public class TestGalleryActivity extends Activity {
        private Gallery mGallery;
        private Context context;

        @Override
        public void onCreate(Bundle savedInstanceState) {
                super.onCreate(savedInstanceState);
                setContentView(R.layout.main);
                context = this;
                mGallery = (Gallery) findViewById(R.id.gallery);
                // Aggiungo l'adapter personalizzato (custom adapter)
                mGallery.setAdapter(new GalleryAdapter());

        }

        /**
         * Adapter personalizzato.
         */

        private class GalleryAdapter extends BaseAdapter {
                // Un array di int che conterrà gli id del immagini nella cartella
                // drawable
                int[] bitmaps;

                /**
                 * Costruttore, richiamato nel mGallery.setAdapter(new GalleryAdapter);
                 */

                public GalleryAdapter() {
                        // Creo l'array e lo popolo con gli stessi id, per comodità
                        bitmaps = new int[] { R.drawable.icon, R.drawable.icon,
                                        R.drawable.icon, R.drawable.icon, R.drawable.icon };
                }

                /*
                 * Questo metodo dice alla gallery quante immagini deve visualizzare
                 */

                @Override
                public int getCount() {
                        return bitmaps.length;
                }

                @Override
                public Object getItem(int arg0) {
                        // Tralasciato
                        return null;
                }

                @Override
                public long getItemId(int position) {
                        // Tralasciato
                        return 0;
                }

                /*
                 * Questo è il metodo più importante. Dice alla gallery cosa
                 * visualizzare come item e ti permette di scegliere cosa fare per ogni
                 * item. Se le immagini da visualizzare fossero 100, questo metodo
                 * verrebbe richiamato 100 volte con il parametro "position" che cambia
                 * di volta in volta.
                 */

                @Override
                public View getView(int position, View convertView, ViewGroup parent) {
                        if (convertView == null) {
                                // ConvertView è la view che verrà riciclata per visualizzare
                                // l'item. (In giro è spiegato come funziona il riciclo delle view).
                                // Qui facciamo l'inflate del nostro file del layout per l'item.
                                // Passiamo il parent (che in questo caso è la gallery) perché
                                // il LinearLayout degli item ha "fill_parent" sia in altezza che
                                // larghezza, e quindi prenderanno altezza e larghezza della
                                // gallery. Passiamo anche un false perché il parent ci serve
                                // solo per misurare l'item.
                                convertView = LayoutInflater.from(context).inflate(
                                                R.layout.item, parent, false);
                        }
                        // La convertView è la nostra custom view che abbiamo chiamato
                        // PictureView, nella quale abbiamo aggiunto il metodo setImage(int
                        // id), dove id è la risorsa drawable da visualizzare, che in questo
                        // caso prendiamo dall'array che abbiamo creato usando la posizione
                        // che viene passata da questo metodo come parametro "position"
                        ((PictureView) convertView).setImage(bitmaps[position]);
                        return convertView;
                }

        }

}

Infine questo è il codice nella nostra custom view, che è un linearlayout personalizzato:
Codice (Java): [Seleziona]
/**
 * E' la custom view che si occuperà di visualizzare/trasformare/spostare
 * l'immagine che gli manderemo. Implementa l'interfaccia "onTouchListener" così
 * potremmo gestire gli eventi touch.
 */

public class PictureView extends LinearLayout implements OnTouchListener {
        // L'immagine che vogliamo visualizzare/trasformare/spostare
        private Bitmap mBitmap;

        /**
         * Questi sono i due costruttori. Sono necessari perché uno dei due verrà
         * richiamato durante l'inflate.
         */

        public PictureView(Context context) {
                super(context);
                // Aggiungo a questa view il touchListener (metto this perché abbiamo
                // implementato l'intefaccia onTOuchListener in questa view)
                this.setOnTouchListener(this);
        }

        public PictureView(Context context, AttributeSet attrs) {
                super(context, attrs);
                // Vedi sopra
                this.setOnTouchListener(this);
        }

        /**
         * E' il metodo che richiamiamo nel custom adapter. Semplicemente crea la
         * bitmap partendo dall'id passato.
         */

        public void setImage(int id) {
                mBitmap = BitmapFactory.decodeResource(getResources(), id);
                // Invalidate serve per fare il "refresh" della view. Così verrà
                // richiamato automaticamente (anche) il metodo onDraw();
                invalidate();
        }

        /*
         * Questo è il metodo principale in cui disegneremo quello che ci pare sulla
         * canvas che ci viene passata.
         */

        @Override
        protected void onDraw(Canvas canvas) {
                // Quando la view viene creata per la prima volta, la bitmap è nulla
                // perché non gliel'abbiamo ancora passata.
                if (mBitmap != null) {
                        // Coloro di verde il canvas, così vedo chiaramente qual è lo spazio a mia
                        // disposizione
                        canvas.drawColor(Color.GREEN);
                        // Disegno la bitmap
                        canvas.drawBitmap(mBitmap, 0, 0, null);
                }
                // Passo la canvas perché venga disegnata
                super.onDraw(canvas);
        }

        /*
         * Qui analizzi gli eventi touch
         */

        @Override
        public boolean onTouch(View v, MotionEvent event) {
                /*
                 * Qui ti viene passato il primo evento di tocco (action_down). E' molto
                 * importante cosa ritornare. Se vuoi gestire gli eventi successivi
                 * ritorni true, sennò ritorni false. Se ritornerai true, ti verranno
                 * passati anche tutti i successivi eventi. Se ritornerai false, i
                 * successivi eventi non ti verranno passati. Esempio: tocchi lo
                 * schermo. Ti verrà passato qui il primo tocco e ritorni true, così ti
                 * verrà passato anche il secondo. Se il secondo è uno spostamento a
                 * destra o sinistra di un dito, non ti interessano i successivi, quindi
                 * ritornerai false. Altrimenti ritornerai false e ti verranno passati
                 * tutti i successivi eventi. Prova a cambiare il return per vedere come
                 * cambia l'output nel log!
                 */

                Log.e("mmm", "ontouch qui");
                return false;
        }

}

Questa era la mia idea in codice, da adattare alle tue esigenze.  ;-)
« Ultima modifica: 17 Ottobre 2011, 22:32:43 CEST da Verandi »

Offline Nokias

  • Utente junior
  • **
  • Post: 58
  • Respect: +1
    • Mostra profilo
Re:Gallery solo con immagini che scorrono con pinch to zoom
« Risposta #4 il: 17 Ottobre 2011, 22:32:19 CEST »
0
Grazie mille!! ..mi metto subito a studiarlo così vedo come posso adattarlo alle mie esigenze!! ...grazie mille davvero!! ..è difficile trovare una persona così disponibile!!  :-)

Offline TheTodd

  • Utente junior
  • **
  • Post: 58
  • Respect: +3
    • Mostra profilo
  • Dispositivo Android:
    samsung gs2
  • Play Store ID:
    sdmdev
  • Sistema operativo:
    window xp
Re:Gallery solo con immagini che scorrono con pinch to zoom
« Risposta #5 il: 17 Gennaio 2012, 15:32:57 CET »
0
Grazie Verandi. Utilizzando il tuo codice però una class cast exception nel getView dell'activity; qui:
Codice (Java): [Seleziona]
((PictureView) convertView).setImage(bitmaps[position]); Sapresti aiutarmi? Grazie ancora

Offline Verandi

  • Utente normale
  • ***
  • Post: 378
  • Respect: +75
    • Mostra profilo
  • Sistema operativo:
    Windows 7
Re:Gallery solo con immagini che scorrono con pinch to zoom
« Risposta #6 il: 17 Gennaio 2012, 15:41:04 CET »
+1
Ciao! Credo dipenda dal layout dell'item della gallery. Per caso hai inserito il pictureView all'interno di un linearLayout o altro?  ;-)

Offline TheTodd

  • Utente junior
  • **
  • Post: 58
  • Respect: +3
    • Mostra profilo
  • Dispositivo Android:
    samsung gs2
  • Play Store ID:
    sdmdev
  • Sistema operativo:
    window xp
Re:Gallery solo con immagini che scorrono con pinch to zoom
« Risposta #7 il: 17 Gennaio 2012, 16:04:03 CET »
0
grazie, sei un grande! il problema era proprio nel layout dell'item della gallery...non funziona però il pinch2zoom, a te?

Offline Verandi

  • Utente normale
  • ***
  • Post: 378
  • Respect: +75
    • Mostra profilo
  • Sistema operativo:
    Windows 7
Re:Gallery solo con immagini che scorrono con pinch to zoom
« Risposta #8 il: 17 Gennaio 2012, 16:35:32 CET »
0
No, quello è solo un punto di partenza per avere lo schermo intero e l'effetto elastico al cambio di immagine. Il pinch to zoom è da implementare.  ;-)
Per farlo bisognerebbe prima decidere la logica, poi credo si debba anche modificare la gallery in modo da poter gestire quando e quali eventi touch passare alla picture view. In più credo si debba vedere se il riciclo delle view da parte della gallery comporti qualche altra aggiunta al codice.  :D