Autore Topic: Implementare lo swipe in GridView popolata da immagini  (Letto 414 volte)

Offline Freddiekorg

  • Nuovo arrivato
  • *
  • Post: 4
  • Respect: 0
    • Mostra profilo
  • Dispositivo Android:
    Nexus 5
  • Sistema operativo:
    Windows 7
Implementare lo swipe in GridView popolata da immagini
« il: 03 Luglio 2015, 16:06:50 CEST »
0
Salve, 
vi propongo una problematica che mi affligge da qualche giorno.
Seguendo dei tutorial, con l'intento di creare una galleria per la visualizzazione di immagini, ho creato una GridView popolata da risorse drawable.
Cliccando su ogni elemento si visualizza la rispettiva immagine in full screen.
Ora, l'intento è quello di aggiungere una funzionalità che tramite uno swipe laterale, mi consenta di scorrere le immagini una volta aperta la prima. Ho provato a cercare soluzioni e da quello che ho capito mi dovrei servire della classe PagerAdapter fornita da Android, ma non sono riuscito a capire come. Posto il codice  per darvi un'idea di quello che fa.
Spero in un vostro aiuto!  :-)
Codice (Java): [Seleziona]
public class MainActivity extends Activity {

    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        GridView gridview = (GridView) findViewById(R.id.gridview);
        gridview.setAdapter(new ImageAdapter(this));



        gridview.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            public void onItemClick(AdapterView<?> parent, View v,
                                    int position, long id) {
                // Sending image id to FullScreenActivity
                Intent i = new Intent(getApplicationContext(), FullImageActivity.class);
                // passing array index
                i.putExtra("id", position);
                startActivity(i);
            }
        });
    }

}

Codice (Java): [Seleziona]
public class ImageAdapter extends BaseAdapter {
    private Context mContext;
   
    // references to our images
    public Integer[] mThumbIds = {
            R.drawable.sample_2, R.drawable.sample_3,
            R.drawable.sample_4, R.drawable.sample_5,
            R.drawable.sample_6, R.drawable.sample_7,
            R.drawable.sample_0, R.drawable.sample_1,
            R.drawable.sample_2, R.drawable.sample_3,
            R.drawable.sample_4, R.drawable.sample_5,
            R.drawable.sample_6, R.drawable.sample_7,
            R.drawable.sample_0, R.drawable.sample_1,
            R.drawable.sample_2, R.drawable.sample_3,
            R.drawable.sample_4, R.drawable.sample_5,
            R.drawable.sample_6, R.drawable.sample_7
    };


    // Constructor
    public ImageAdapter(Context c) {
        mContext = c;
    }

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

    @Override
    public Object  getItem(int position) {
        return mThumbIds[position];
    }

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

    // create a new ImageView for each item referenced by the Adapter
    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        ImageView imageView = new ImageView(mContext);
        imageView.setImageResource(mThumbIds[position]);
        imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
        imageView.setLayoutParams(new GridView.LayoutParams(
                (int) mContext.getResources().getDimension(R.dimen.width),
                (int) mContext.getResources().getDimension(R.dimen.height)));
        imageView.setPadding(5, 5, 5, 5);
        return imageView;
    }

}

Codice (Java): [Seleziona]
public class FullImageActivity extends Activity {


    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.full_image);

        // get intent data
        Intent i = getIntent();

        // Selected image id
        int position = i.getExtras().getInt("id");
        ImageAdapter imageAdapter = new ImageAdapter(this);

        ImageView imageView = (ImageView) findViewById(R.id.full_image_view);
        imageView.setImageResource(imageAdapter.mThumbIds[position]);
    }

}

Offline Ricky`

  • Amministratore
  • Utente storico
  • *****
  • Post: 3489
  • Respect: +506
    • Github
    • Google+
    • rciovati
    • Mostra profilo
Re:Implementare lo swipe in GridView popolata da immagini
« Risposta #1 il: 03 Luglio 2015, 16:53:44 CEST »
0
Ti manca il ViewPager! :-)

Nel layout full_image.xml:

Codice: [Seleziona]
<android.support.v4.view.ViewPager
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/pager"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

Nell'activity:

Codice (Java): [Seleziona]
public class FullImageActivity extends Activity {


    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.full_image);

        // get intent data
        Intent i = getIntent();

        // Selected image id
        int position = i.getExtras().getInt("id");
        ImageAdapter imageAdapter = new ImageAdapter(this);

        ViewPager pager = (ViewPager) findViewById(R.id.pager);
        pager.setAdapter(imageAdapter);
        pager.setCurrentItem(position);
    }
}

Poi devi modificare l'adapter in modo tale che estenda da PagerAdapter, non da BaseAdapter.

Più informazioni qui: Using ViewPager for Screen Slides | Android Developers
« Ultima modifica: 03 Luglio 2015, 16:55:55 CEST da Ricky` »

Offline Freddiekorg

  • Nuovo arrivato
  • *
  • Post: 4
  • Respect: 0
    • Mostra profilo
  • Dispositivo Android:
    Nexus 5
  • Sistema operativo:
    Windows 7
Re:Implementare lo swipe in GridView popolata da immagini
« Risposta #2 il: 05 Luglio 2015, 13:51:39 CEST »
0
 Grazie per la dritta!
però avrei la necessità di fare funzionare il codice fino ad API 8. C'è modo di adattare questo codice?
Grazie

Offline Ricky`

  • Amministratore
  • Utente storico
  • *****
  • Post: 3489
  • Respect: +506
    • Github
    • Google+
    • rciovati
    • Mostra profilo
Re:Implementare lo swipe in GridView popolata da immagini
« Risposta #3 il: 05 Luglio 2015, 14:28:10 CEST »
0
Il ViewPager è back-compatible fino ad API Level 7!

Offline Freddiekorg

  • Nuovo arrivato
  • *
  • Post: 4
  • Respect: 0
    • Mostra profilo
  • Dispositivo Android:
    Nexus 5
  • Sistema operativo:
    Windows 7
Re:Implementare lo swipe in GridView popolata da immagini
« Risposta #4 il: 05 Luglio 2015, 15:59:10 CEST »
0
Erano i fragment dell'esempio! anche se poi con la libreria di supporto v4 funziona tutto.
In ogni caso diciamo che sono riuscito ad utilizzare il PagerAdapter, mi rimane solo un problema che è sicuramente frutto dell'ignoranza più pura:
all'interno del metodo instantiateItem() dell'Adapter con questo codice mi fa visualizzare tutte le foto che ho messo in "immaginiResource" e lo swipe funziona bene
Codice (Java): [Seleziona]
    @Override
    public Object instantiateItem(ViewGroup container, int position) {

        View itemView = mLayoutInflater.inflate(R.layout.pager_item, container, false);


        ImageView imageView = (ImageView) itemView.findViewById(R.id.imageView);
        imageView.setImageResource(immaginiResource[position]);

        container.addView(itemView);

        return itemView;
    }
Il problema è che quando dalla MainActivity mi passo la posizione della foto cliccata con "putExtra", non ho capito come lo devo inserire all'interno del metodo precedente... Ho provato così:
Codice (Java): [Seleziona]
    @Override
    public Object instantiateItem(ViewGroup container, int position) {

        View itemView = mLayoutInflater.inflate(R.layout.pager_item, container, false);

        Intent i = ((Activity) mContext).getIntent();
        position = i.getExtras().getInt("id");

        ImageView imageView = (ImageView) itemView.findViewById(R.id.imageView);
        imageView.setImageResource(immaginiResources[position]);

        container.addView(itemView);

        return itemView;
    }
l'immagine  viene aperta ma  viene visualizzata sempre la stessa   :-(
Hai idea di dove sbaglio? purtroppo sono alle prime armi con questo linguaggio. Grazie!
« Ultima modifica: 05 Luglio 2015, 16:01:02 CEST da Freddiekorg »

Offline Freddiekorg

  • Nuovo arrivato
  • *
  • Post: 4
  • Respect: 0
    • Mostra profilo
  • Dispositivo Android:
    Nexus 5
  • Sistema operativo:
    Windows 7
Re:Implementare lo swipe in GridView popolata da immagini
« Risposta #5 il: 08 Luglio 2015, 20:39:25 CEST »
0
Ok ho risolto! Sono ruscito ad ottenere una GridView con immagini contenute in res/drawable. Le immagini se cliccate vengono aperte nella FullImageActivity ed è possibile scorrerle con lo swipe laterale.
Vorrei sottolineare l'utilizzo della libreria Picasso, che permette di semplificare molto la gestione delle immagini ed ha un ottima gestione della memoria, che consente l'utilizzo fluido anche nei dispositivi più antiquati. Grazie dell'aiuto Ricky!

posto il codice finale se potesse servire a qualcuno:

Codice (Java): [Seleziona]
public class Menu4 extends Activity {

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.menu_four);
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);

        toolbar.setNavigationIcon(R.mipmap.back);
        toolbar.setSubtitle(R.string.Menu4);

        toolbar.setNavigationOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                onBackPressed();
            }
        });

        GridView gridview = (GridView) findViewById(R.id.gridview);
        gridview.setAdapter(new ImageAdapter(this));

        gridview.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
                Intent intent = new Intent(Menu4.this, FullImageActivity.class);
                intent.putExtra("position", position);
                startActivity(intent);
            }
        });

    }

    //    our custom adapter
    private class ImageAdapter extends BaseAdapter {
        private Context mContext;
        private LayoutInflater inflater;

        public ImageAdapter(Context context) {
            mContext = context;
            inflater = LayoutInflater.from(context);
        }

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

        @Override
        public Object getItem(int position) {
            return null;
        }

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

        @Override
        public View getView(int position, View view, ViewGroup parent)
        {
            View v = view;
            ImageView picture;
//            check to see if we have a view
            if (v == null) {


                v = inflater.inflate(R.layout.gridview_item2, parent, false);
                v.setTag(R.id.picture1, v.findViewById(R.id.picture1));
            }
//                use the recycled view object
                picture = (ImageView) v.getTag(R.id.picture1);

            Picasso.with(Menu4.this)
                    .load(mThumbIds[position])
                    .placeholder(R.drawable.empty_photo)
                    .noFade()
                    .resize((int) mContext.getResources().getDimension(R.dimen.width_gallery), (int) mContext.getResources().getDimension(R.dimen.height_gallery))
                    .centerCrop()
                    .into(picture);

            return v;
        }
    }

    static Integer[] mThumbIds = {
            R.drawable.gallery1, R.drawable.gallery2,
            R.drawable.gallery3, R.drawable.gallery4,
            R.drawable.gallery5, R.drawable.gallery6,
            R.drawable.gallery7, R.drawable.gallery8,
            R.drawable.gallery9, R.drawable.gallery10,
            R.drawable.gallery11,R.drawable.gallery12
    };

}

Codice (Java): [Seleziona]
public class FullImageActivity extends Activity {


    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.full_image);

        Intent i = getIntent();
        int position = i.getIntExtra("position", 0);

        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);

        toolbar.setNavigationIcon(R.mipmap.back);
        toolbar.setSubtitle("Foto Ambulatorio");

        toolbar.setNavigationOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                onBackPressed();
            }
        });


        CustomPagerAdapter   mCustomPagerAdapter = new CustomPagerAdapter(this);

        ViewPager mViewPager = (ViewPager) findViewById(R.id.pager);
        mViewPager.setAdapter(mCustomPagerAdapter);
        mViewPager.setCurrentItem(position);

    }
}

Codice (Java): [Seleziona]
class CustomPagerAdapter extends PagerAdapter {

    int[] mResources = {
            R.drawable.gallery1, R.drawable.gallery2,
            R.drawable.gallery3, R.drawable.gallery4,
            R.drawable.gallery5, R.drawable.gallery6,
            R.drawable.gallery7, R.drawable.gallery8,
            R.drawable.gallery9, R.drawable.gallery10,
            R.drawable.gallery11,R.drawable.gallery12
    };

    Context mContext;
    LayoutInflater mLayoutInflater;

    public CustomPagerAdapter(Context context) {
        mContext = context;
        mLayoutInflater = (LayoutInflater) mContext.getSystemService(Context.LAYOUT_INFLATER_SERVICE);

    }

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

    @Override
    public boolean isViewFromObject(View view, Object object) {
        return view == object;
    }

    @Override
    public Object instantiateItem(ViewGroup container, int position) {

        View itemView = mLayoutInflater.inflate(R.layout.pager_item, container, false);

        ImageView imageView = (ImageView) itemView.findViewById(R.id.imageView);

        Picasso.with(mContext)
                .load(mResources[position])
                .into(imageView);


        container.addView(itemView);

        return itemView;
    }

    @Override
    public void destroyItem(ViewGroup container, int position, Object object) {
        container.removeView((LinearLayout) object);
    }


}
« Ultima modifica: 13 Luglio 2015, 00:54:05 CEST da Freddiekorg »