web-dev-qa-db-fra.com

Android Galerie d'images à défilement horizontal

Je voudrais créer une application avec une galerie d'images horizontale (avec une ligne et plusieurs colonnes). J'essaie d'abord d'utiliser gridview, mais il ne peut être utilisé que comme défilement vertical. Puis-je utiliser ListView ou GridView à cette fin?

Image gallery with horizontal scrolling

androidlistviewgridview
18
Yuriy Kolbasinskiy

créez LinearLayout dans HorizontalScrollView, puis créez une imageView dynamiquement et ajoutez cette imageview à linearLayout.

Exemple de code:

<HorizontalScrollView 
Android:id="@+id/horizontal_scroll"
Android:layout_width="match_parent"
Android:layout_height="wrap_content" >

    <LinearLayout
    Android:id="@+id/linear"
    Android:layout_width="wrap_content"
    Android:layout_height="wrap_content"
    Android:orientation="horizontal" >
    </LinearLayout>

</HorizontalScrollView>

Dans la méthode onCreate (), obtenez l'id de linearLayout à partir du fichier xml et ajoutez ImageView créée dynamiquement à linearlayout:

    LinearLayout layout = (LinearLayout) findViewById(R.id.linear);
    for (int i = 0; i < 10; i++) {
        ImageView imageView = new ImageView(this);
        imageView.setId(i);
        imageView.setPadding(2, 2, 2, 2);
        imageView.setImageBitmap(BitmapFactory.decodeResource(
                getResources(), R.drawable.ic_launcher));
        imageView.setScaleType(ScaleType.FIT_XY);
        layout.addView(imageView);
    }
27
Saritha

Voir une démonstration d'ici

Avec la sortie de la bibliothèque RecyclerView, vous pouvez facilement implémenter l'orientation de liste horizontale et verticale. Ceci est rendu possible en utilisant le LinearLayoutManager pour lequel vous pouvez spécifier l'orientation horizontale ou verticale comme indiqué ci-dessous ...

 LinearLayoutManager horizontalLayoutManager = new LinearLayoutManager(MainActivity.this, LinearLayoutManager.HORIZONTAL, false);

enter image description here

Vous pouvez en savoir plus

2
Daniel Nyamasyo

Puisque nous n'en avons plus le widget Gallery un peu de bricolage nouse est nécessaire. Vous pouvez créer une bande de vignettes à défilement horizontal avec un HorizontalScrollView et un LinearLayout imbriqués, et y ajouter dynamiquement des images à partir de votre activité:

<HorizontalScrollView
    Android:layout_width="match_parent"
    Android:layout_height="72dp"
    Android:layout_gravity="bottom"
    Android:background="@color/black">
    <LinearLayout
        Android:id="@+id/thumbnails"
        Android:layout_width="wrap_content"
        Android:layout_height="match_parent"
        Android:gravity="center_vertical"
        Android:orientation="horizontal"
        Android:paddingTop="2dp"/>
</HorizontalScrollView>

Le code ci-dessous est extrait de ce tutoriel: http://sourcey.com/Android-horizontally-scrolling-pan-scan-and-zoom-image-gallery/ Les implémentations GalleryActivity ce que vous recherchez, et élargit également votre demande en ajoutant un élément ViewPager pour afficher l'image sélectionnée et un SubsamplingScaleImageView afin que vous puissiez effectuer un panoramique, numériser et zoomer l'image sélectionnée:

package com.sourcey.imagegallerydemo;

import Android.content.Context;
import Android.graphics.Bitmap;
import Android.os.Bundle;
import Android.support.v4.view.PagerAdapter;
import Android.support.v7.app.AppCompatActivity;
import Android.support.v4.view.ViewPager;
import Android.util.Log;
import Android.view.LayoutInflater;
import Android.view.View;
import Android.view.ViewGroup;
import Android.widget.FrameLayout;
import Android.widget.ImageButton;
import Android.widget.ImageView;
import Android.widget.LinearLayout;

import com.bumptech.glide.Glide;
import com.bumptech.glide.request.animation.GlideAnimation;
import com.bumptech.glide.request.target.SimpleTarget;
import com.davemorrissey.labs.subscaleview.ImageSource;
import com.davemorrissey.labs.subscaleview.SubsamplingScaleImageView;

import junit.framework.Assert;

import Java.util.ArrayList;

import butterknife.ButterKnife;
import butterknife.InjectView;

public class GalleryActivity extends AppCompatActivity {
    public static final String TAG = "GalleryActivity";
    public static final String EXTRA_NAME = "images";

    private ArrayList<String> _images;
    private GalleryPagerAdapter _adapter;

    @InjectView(R.id.pager) ViewPager _pager;
    @InjectView(R.id.thumbnails) LinearLayout _thumbnails;
    @InjectView(R.id.btn_close) ImageButton _closeButton;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_gallery);
        ButterKnife.inject(this);

        _images = (ArrayList<String>) getIntent().getSerializableExtra(EXTRA_NAME);
        Assert.assertNotNull(_images);

        _adapter = new GalleryPagerAdapter(this);
        _pager.setAdapter(_adapter);
        _pager.setOffscreenPageLimit(6); // how many images to load into memory

        _closeButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Log.d(TAG, "Close clicked");
                finish();
            }
        });
    }

    class GalleryPagerAdapter extends PagerAdapter {

        Context _context;
        LayoutInflater _inflater;

        public GalleryPagerAdapter(Context context) {
            _context = context;
            _inflater = (LayoutInflater) _context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        }

        @Override
        public int getCount() {
            return _images.size();
        }

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

        @Override
        public Object instantiateItem(ViewGroup container, final int position) {
            View itemView = _inflater.inflate(R.layout.pager_gallery_item, container, false);
            container.addView(itemView);

            // Get the border size to show around each image
            int borderSize = _thumbnails.getPaddingTop();

            // Get the size of the actual thumbnail image
            int thumbnailSize = ((FrameLayout.LayoutParams)
                    _pager.getLayoutParams()).bottomMargin - (borderSize*2);

            // Set the thumbnail layout parameters. Adjust as required
            LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(thumbnailSize, thumbnailSize);
            params.setMargins(0, 0, borderSize, 0);

            // You could also set like so to remove borders
            //ViewGroup.LayoutParams params = new ViewGroup.LayoutParams(
            //        ViewGroup.LayoutParams.WRAP_CONTENT,
            //        ViewGroup.LayoutParams.WRAP_CONTENT);

            final ImageView thumbView = new ImageView(_context);
            thumbView.setScaleType(ImageView.ScaleType.CENTER_CROP);
            thumbView.setLayoutParams(params);
            thumbView.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    Log.d(TAG, "Thumbnail clicked");

                    // Set the pager position when thumbnail clicked
                    _pager.setCurrentItem(position);
                }
            });
            _thumbnails.addView(thumbView);

            final SubsamplingScaleImageView imageView =
                    (SubsamplingScaleImageView) itemView.findViewById(R.id.image);

            // Asynchronously load the image and set the thumbnail and pager view
            Glide.with(_context)
                    .load(_images.get(position))
                    .asBitmap()
                    .into(new SimpleTarget<Bitmap>() {
                        @Override
                        public void onResourceReady(Bitmap bitmap, GlideAnimation anim) {
                            imageView.setImage(ImageSource.bitmap(bitmap));
                            thumbView.setImageBitmap(bitmap);
                        }
                    });

            return itemView;
        }

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

Le projet complet Android est en place sur Github: https://github.com/sourcey/imagegallerydemo

Veuillez sélectionner une réponse si vous avez ce que vous cherchez ...

0
Kamo

Documentation HorizontalScrollView

Pour utiliser HorizontalScrollView, vous ne devez avoir qu'un seul enfant à l'intérieur. La façon dont je l'ai utilisé auparavant avec des images comme ce que vous faites est de créer un TableLayout et d'ajouter les images aux TableRows. Le TableLayout peut avoir plusieurs lignes ou seulement 1 ligne et plusieurs colonnes.

Vous pouvez ajouter des ImageViews (ou toute autre vue) à chaque ligne, puis vous ajoutez enfin le TableRow au TableLayout. Une fois la TableLayout créée, il vous suffit de:

    //createTable method is where you would loop through the images to add
    TableLayout table = createTable(rowCount, columnCount);
    HorizontalScrollView hozView = new HorizontalScrollView(this);
    hozView.addView(table);
    setContentView(hozView);
0
Mark

Allez avec HorizontalScrollView au lieu de ListView ou GirdView http://developer.Android.com/reference/Android/widget/HorizontalScrollView.html

0
Anil Meenugu

TwoWayView a bien fonctionné pour moi. https://github.com/lucasr/twoway-view/

0
belen