Android Studio如何实现图片数组双向滚动及无限横向滑动

问题根源 #

原生GridView仅支持单方向垂直滚动，布局时会强制所有列适配当前屏幕宽度，不会产生横向可滚动的溢出区域，因此无法实现横向滚动，也很难适配双向无限滚动、任意列数配置等需求。推荐改用更灵活的RecyclerView实现，修改步骤如下：

在app模块build.gradle的dependencies代码块中加入RecyclerView依赖：

implementation 'androidx.recyclerview:recyclerview:1.3.2'

activity_main.xml #

替换原有GridView，外层套HorizontalScrollView实现横向滚动：

<?xml version="1.0" encoding="utf-8"?>
<HorizontalScrollView
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fillViewport="true"
    android:scrollbars="horizontal">

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/rv_grid"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:scrollbars="vertical"/>

</HorizontalScrollView>

grid_single.xml #

调整ImageView属性适配任意图片尺寸：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:padding="5dp"
    android:orientation="vertical">

    <ImageView
        android:id="@+id/grid_image"
        android:layout_width="70dp"
        android:layout_height="70dp"
        android:adjustViewBounds="true"
        android:scaleType="fitCenter"/>

</LinearLayout>

新建GridImageAdapter.java：

package com.example.gridview;

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import androidx.annotation.NonNull;
import androidx.recyclerview.widget.RecyclerView;

public class GridImageAdapter extends RecyclerView.Adapter<GridImageAdapter.ViewHolder> {
    private Context mContext;
    private int[] imageId;
    // 可动态配置的参数
    private int columnCount = 4;
    private int imageDpSize = 70;
    private int spacingDp = 20;

    public GridImageAdapter(Context c, int[] Imageid) {
        mContext = c;
        this.imageId = Imageid;
    }

    // 动态修改列数
    public void setColumnCount(int columnCount) {
        this.columnCount = columnCount;
        notifyDataSetChanged();
    }

    // 动态修改图片尺寸
    public void setImageDpSize(int imageDpSize) {
        this.imageDpSize = imageDpSize;
        notifyDataSetChanged();
    }

    @NonNull
    @Override
    public ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        View view = LayoutInflater.from(mContext).inflate(R.layout.grid_single, parent, false);
        return new ViewHolder(view);
    }

    @Override
    public void onBindViewHolder(@NonNull ViewHolder holder, int position) {
        // 无限滚动核心逻辑：取模实现循环展示
        int realPosition = position % imageId.length;
        holder.gridImage.setImageResource(imageId[realPosition]);
        
        // 动态适配图片尺寸
        float density = mContext.getResources().getDisplayMetrics().density;
        int pxSize = (int) (imageDpSize * density);
        ViewGroup.LayoutParams params = holder.gridImage.getLayoutParams();
        params.width = pxSize;
        params.height = pxSize;
        holder.gridImage.setLayoutParams(params);
    }

    @Override
    public int getItemCount() {
        // 返回最大值实现无限滚动
        return Integer.MAX_VALUE;
    }

    public static class ViewHolder extends RecyclerView.ViewHolder {
        ImageView gridImage;
        public ViewHolder(@NonNull View itemView) {
            super(itemView);
            gridImage = itemView.findViewById(R.id.grid_image);
            itemView.setOnClickListener(v -> {
                // 自定义点击事件
            });
        }
    }
}

package com.example.gridview;

import androidx.appcompat.app.AppCompatActivity;
import androidx.recyclerview.widget.GridLayoutManager;
import androidx.recyclerview.widget.RecyclerView;
import android.os.Bundle;
import android.view.ViewGroup;

public class MainActivity extends AppCompatActivity {
    RecyclerView recyclerView;
    int[] imageId = {
            R.drawable.dog,
            R.drawable.elephant,
            R.drawable.tiger,
            R.drawable.fish,
            R.drawable.wolf,
            R.drawable.lion,
            R.drawable.horse,
            R.drawable.house,
            R.drawable.monkey,
            R.drawable.restaurant,
            R.drawable.fox,
            R.drawable.shark,
            R.drawable.nerd,
            R.drawable.confused,
            R.drawable.laughing
    };

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        recyclerView = findViewById(R.id.rv_grid);
        
        GridImageAdapter adapter = new GridImageAdapter(this, imageId);
        // 自定义列数
        adapter.setColumnCount(4);
        // 自定义图片尺寸（单位dp）
        adapter.setImageDpSize(70);
        
        // 垂直GridLayoutManager实现纵向滚动
        GridLayoutManager layoutManager = new GridLayoutManager(this, 4);
        recyclerView.setLayoutManager(layoutManager);
        recyclerView.setAdapter(adapter);
        
        // 设置RecyclerView足够大的宽度，支持横向无限滚动
        float density = getResources().getDisplayMetrics().density;
        int maxWidth = (int) (10000 * density);
        ViewGroup.LayoutParams params = recyclerView.getLayoutParams();
        params.width = maxWidth;
        recyclerView.setLayoutParams(params);
        
        // 初始定位到中间位置，避免一开始就碰到滚动边界
        recyclerView.scrollToPosition(Integer.MAX_VALUE / 2);
    }
}

配置说明 #

• 调整列数直接调用adapter.setColumnCount(目标列数)即可
• 调整图片尺寸直接调用adapter.setImageDpSize(目标dp值)即可
• 任意尺寸图片均可自适应展示，不需要额外修改布局
• 双向无限滚动通过超大宽度布局+取模循环加载图片实现

内容的提问来源于stack exchange，提问作者Ayman Sharaf