Android中Fragment内GridView图片适配及布局对齐异常问题

嘿，我来帮你搞定这个GridView的布局和图片适配问题！咱们一步步来实现你要的3列×5行无滚动、图片完美对齐的界面：

1. 配置Fragment的GridView布局 #

先创建/修改你的Fragment布局文件（比如fragment_image_grid.xml），给GridView设置关键属性来固定行列、去掉滚动并保证对齐：

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

    <GridView
        android:id="@+id/imageGridView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:numColumns="3"
        android:verticalSpacing="0dp"
        android:horizontalSpacing="0dp"
        android:scrollbars="none"
        android:stretchMode="columnWidth"
        android:gravity="center" />

</LinearLayout>

关键属性说明：

• android:numColumns="3"：强制固定3列布局
• android:verticalSpacing="0dp"/android:horizontalSpacing="0dp"：移除网格间间距，避免图片错位
• android:scrollbars="none"：隐藏滚动条，实现无滚动效果
• android:stretchMode="columnWidth"：让每列自动均分屏幕宽度，保证左右对齐

2. 设计单个网格项的图片布局 #

创建grid_item_image.xml作为GridView的子项布局，确保图片正确缩放且不变形：

<ImageView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/itemImageView"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:scaleType="centerCrop"
    android:adjustViewBounds="true" />

属性说明：

• android:scaleType="centerCrop"：让图片按比例缩放，填满整个ImageView同时裁剪多余部分，保证图片不变形且完全对齐
• android:adjustViewBounds="true"：保持图片原生宽高比，避免拉伸变形

3. 在Fragment中动态固定GridView高度（实现无滚动） #

要让GridView刚好容纳5行内容，我们需要在Fragment的onViewCreated方法中计算并设置固定高度：

Kotlin版本 #

override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
    super.onViewCreated(view, savedInstanceState)
    val gridView = view.findViewById<GridView>(R.id.imageGridView)
    val adapter = ImageGridAdapter(requireContext(), getImageList())
    gridView.adapter = adapter

    // 计算每行高度：3列均分屏幕宽度，图片是正方形，所以行高等于列宽
    val displayMetrics = resources.displayMetrics
    val columnWidth = displayMetrics.widthPixels / 3
    val totalHeight = columnWidth * 5 // 5行总高度

    // 设置GridView固定高度
    val params = gridView.layoutParams
    params.height = totalHeight
    gridView.layoutParams = params
}

// 示例：返回你的15张512×512图片资源列表
private fun getImageList(): List<Int> {
    return listOf(
        R.drawable.img_1, R.drawable.img_2, R.drawable.img_3,
        R.drawable.img_4, R.drawable.img_5, R.drawable.img_6,
        R.drawable.img_7, R.drawable.img_8, R.drawable.img_9,
        R.drawable.img_10, R.drawable.img_11, R.drawable.img_12,
        R.drawable.img_13, R.drawable.img_14, R.drawable.img_15
    )
}

Java版本 #

@Override
public void onViewCreated(@NonNull View view, @Nullable Bundle savedInstanceState) {
    super.onViewCreated(view, savedInstanceState);
    GridView gridView = view.findViewById(R.id.imageGridView);
    ImageGridAdapter adapter = new ImageGridAdapter(requireContext(), getImageList());
    gridView.setAdapter(adapter);

    DisplayMetrics displayMetrics = getResources().getDisplayMetrics();
    int columnWidth = displayMetrics.widthPixels / 3;
    int totalHeight = columnWidth * 5;

    ViewGroup.LayoutParams params = gridView.getLayoutParams();
    params.height = totalHeight;
    gridView.setLayoutParams(params);
}

// 示例：返回你的图片资源列表
private List<Integer> getImageList() {
    List<Integer> list = new ArrayList<>();
    list.add(R.drawable.img_1);
    list.add(R.drawable.img_2);
    // 依次添加剩余13张图片...
    return list;
}

4. 实现GridView的适配器 #

创建ImageGridAdapter来加载你的512×512 PNG图片，这里推荐用Glide优化内存（也可以用原生方式）：

Kotlin版本 #

class ImageGridAdapter(private val context: Context, private val imageList: List<Int>) : BaseAdapter() {
    override fun getCount(): Int = imageList.size
    override fun getItem(position: Int): Any = imageList[position]
    override fun getItemId(position: Int): Long = position.toLong()

    override fun getView(position: Int, convertView: View?, parent: ViewGroup?): View {
        val imageView: ImageView = if (convertView == null) {
            LayoutInflater.from(context).inflate(R.layout.grid_item_image, parent, false) as ImageView
        } else {
            convertView as ImageView
        }
        // 用Glide加载更优，自动处理缩放和内存
        // Glide.with(context).load(imageList[position]).into(imageView)
        // 原生加载方式
        imageView.setImageResource(imageList[position])
        return imageView
    }
}

Java版本 #

public class ImageGridAdapter extends BaseAdapter {
    private Context context;
    private List<Integer> imageList;

    public ImageGridAdapter(Context context, List<Integer> imageList) {
        this.context = context;
        this.imageList = imageList;
    }

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

    @Override
    public Object getItem(int position) {
        return imageList.get(position);
    }

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

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        ImageView imageView;
        if (convertView == null) {
            imageView = (ImageView) LayoutInflater.from(context).inflate(R.layout.grid_item_image, parent, false);
        } else {
            imageView = (ImageView) convertView;
        }
        imageView.setImageResource(imageList.get(position));
        // Glide加载方式：Glide.with(context).load(imageList.get(position)).into(imageView);
        return imageView;
    }
}

额外提示 #

• 确保你的图片数量刚好是15张（3×5），这样GridView会完全填满固定高度，不会出现空白
• 如果希望显示完整图片而非裁剪，可以把scaleType改成fitCenter，但此时网格项可能会出现空白边，你可以调整网格项布局来适配
• 用Glide加载图片能更好地处理大图内存占用，避免出现OOM问题

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