安卓横向滚动图片库

Question

我想创建一个带有水平图库的应用程序（一行和多列）。 首先我尝试使用网格视图，但它只能用作垂直滚动。 我可以使用ListView或GridView来实现这个目的吗？

- Yuriy Kolbasinskiy

---

可能是HorizontalScrollView inside a ScrollView android的重复问题。 - Shawn

Answer 1

在HorizontalScrollView内创建LinearLayout，然后动态创建一个imageView并将其添加到linearLayout中。

示例代码：

<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>

在onCreate（）方法中，从xml文件获取linearLayout的ID，并将动态创建的ImageView添加到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);
    }

- Saritha

---

我有不同宽高比的图片。我想让它们都填满LinearLayout的高度，进而填满整个HorizontalScrollView。您的解决方案应该如何处理？ - KasparTr

好的，这很棒。你如何使用这种方法进行懒加载？ - justdan0227

工作正常，但我想从ArrayList中加载不同的图像。如何实现这一点？谢谢。 - Punithapriya

Answer 2

您可以在此处查看一个工作的演示。

随着RecyclerView库的发布，您可以轻松实现水平和垂直列表方向。这是通过使用LinearLayoutManager实现的，您可以指定方向为水平或垂直，如下所示...

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

您可以阅读更多

- Daniel Nyamasyo

Answer 3

HorizontalScrollView文档

使用HorizontalScrollView时，您应该只在其中放置一个子元素。我以前使用它来处理像您正在做的图片一样的东西是通过创建TableLayout并将图像添加到TableRows中。TableLayout可以有许多行或仅有1行和许多列。

您可以将ImageViews（或任何其他视图）添加到每一行，然后最终将TableRow添加到TableLayout中。一旦TableLayout完成，您所需要做的就是：

    //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);

- Mark

Answer 4

由于我们不再拥有Gallery小部件，需要一些DIY技巧。您可以使用HorizontalScrollView和嵌套的LinearLayout创建一个水平滚动的缩略图条，并从活动中动态添加图像：

<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>

以下代码取自本教程：http://sourcey.com/android-horizontally-scrolling-pan-scan-and-zoom-image-gallery/ GalleryActivity 实现了您所需的功能，并通过添加 ViewPager 元素来扩展您的请求，以显示所选图像，同时添加了 SubsamplingScaleImageView 以便您可以对所选图像进行平移、扫描和缩放：

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);
        }
    }
}

完整的Android项目已经上传到Github: https://github.com/sourcey/imagegallerydemo 如果您找到了需要的内容，请选择一个答案...

- Kamo

---

你为什么要使用 InjectView 而不是传统的 findViewById？它更好吗？谢谢。 - researcher

不一定是越新的就越好，但Java是一种非常冗长的语言，有助于编写更清晰的代码。 - Kamo

Answer 5

建议使用HorizontalScrollView而不是ListView或GirdView http://developer.android.com/reference/android/widget/HorizontalScrollView.html

- Anil Meenugu

Answer 6

TwoWayView 对我很有帮助。https://github.com/lucasr/twoway-view/

- belen