Galerie d'images avec une vue défilante horizontale

Question

J'essaie de faire un exemple simple d'une galerie d'images en utilisant horizontalscrollview et en ajoutant les images dynamiquement. J'ai cherché des exemples mais la plupart sont trop complexes. Existe-t-il un exemple simple de la manière de procéder ?

Answer 1

Aquí Voici un exemple simple qui a mis en œuvre une vue de défilement horizontal pour ressembler à une galerie d'images.

ceci vous aidera

Ajouter HorizontalScrollView dans le layout :

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent" 
    android:orientation="vertical">

    <HorizontalScrollView
        android:layout_width="match_parent"
        android:layout_height="wrap_content" >
        <LinearLayout
            android:id="@+id/mygallery"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            />
    </HorizontalScrollView>

</LinearLayout>

Le code Java principal :

package com.example.androidhorizontalscrollviewgallery;

import java.io.File;

import android.os.Bundle;
import android.os.Environment;
import android.app.Activity;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.view.Gravity;
import android.view.View;
import android.view.ViewGroup.LayoutParams;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.Toast;

public class MainActivity extends Activity {

 LinearLayout myGallery;

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

        myGallery = (LinearLayout)findViewById(R.id.mygallery);

        String ExternalStorageDirectoryPath = Environment
          .getExternalStorageDirectory()
          .getAbsolutePath();

        String targetPath = ExternalStorageDirectoryPath + "/test/";

        Toast.makeText(getApplicationContext(), targetPath, Toast.LENGTH_LONG).show();
        File targetDirector = new File(targetPath);

        File[] files = targetDirector.listFiles();
        for (File file : files){
         myGallery.addView(insertPhoto(file.getAbsolutePath()));
        }    
    }

    View insertPhoto(String path){
     Bitmap bm = decodeSampledBitmapFromUri(path, 220, 220);

     LinearLayout layout = new LinearLayout(getApplicationContext());
     layout.setLayoutParams(new LayoutParams(250, 250));
     layout.setGravity(Gravity.CENTER);

     ImageView imageView = new ImageView(getApplicationContext());
     imageView.setLayoutParams(new LayoutParams(220, 220));
     imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
     imageView.setImageBitmap(bm);

     layout.addView(imageView);
     return layout;
    }

    public Bitmap decodeSampledBitmapFromUri(String path, int reqWidth, int reqHeight) {
     Bitmap bm = null;

     // First decode with inJustDecodeBounds=true to check dimensions
     final BitmapFactory.Options options = new BitmapFactory.Options();
     options.inJustDecodeBounds = true;
     BitmapFactory.decodeFile(path, options);

     // Calculate inSampleSize
     options.inSampleSize = calculateInSampleSize(options, reqWidth, reqHeight);

     // Decode bitmap with inSampleSize set
     options.inJustDecodeBounds = false;
     bm = BitmapFactory.decodeFile(path, options); 

     return bm;  
    }

    public int calculateInSampleSize(

     BitmapFactory.Options options, int reqWidth, int reqHeight) {
     // Raw height and width of image
     final int height = options.outHeight;
     final int width = options.outWidth;
     int inSampleSize = 1;

     if (height > reqHeight || width > reqWidth) {
      if (width > height) {
       inSampleSize = Math.round((float)height / (float)reqHeight);   
      } else {
       inSampleSize = Math.round((float)width / (float)reqWidth);   
      }   
     }

     return inSampleSize;   
    }

}

Note : dans cet exemple, les bitmaps dans HorizontalScrollView ne seront pas supprimés même s'ils ne sont pas à l'écran. Donc si trop de bitmaps sont chargés, l'erreur java.lang.OutOfMemoryError sera lancée !

Answer 2

Vous pouvez créer un div et définir le débordement sur caché, puis en imbriquer un autre à l'intérieur qui contient les hauteurs ou les largeurs de toutes les images, en fonction de l'animation que vous voulez horizontale, alors choisissez la largeur multipliée par le nombre d'images et n'oubliez pas d'inclure les marges. Vous codez ensuite une animation jQuery à exécuter sur le plus grand div qui le déplacera vers la gauche ou la droite, selon votre préférence.

eg $('pic').animate({left:'_____ <- enter width of single image together with margin here ' +'px','slow' <-- whatever speed you prefer);

Votre gestionnaire peut être en mesure de cliquer sur un autre bouton ou sur l'image... et recommencer à préférer. C'est très flexible sans beaucoup de codage, ce n'est pas la meilleure option pour l'utilisation. Si cela ne vous convient pas, créez un tableau d'images et faites-les défiler en boucle plutôt que d'utiliser ces dimensions spécifiques pour le défilement. Je vous souhaite bonne chance. J'espère vous avoir aidé.