GridLayout，图像离开屏幕

Question

我正在尝试使用图像创建 GridLayout。网格有 3 列。

我有几个问题：

1. ImageViews 正在离开屏幕，如下图所示。 GridLayout 未正确设置 ImageViews 的宽度以适合。

1. ImageViews 之间没有空格/边距，即使我已为 GridLayout 设置了 horizontalSpacing 和 verticalSpacing 属性。

这是我当前的代码。我应该改变什么来解决我的两个问题？

<GridLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:columnCount="3"
    android:horizontalSpacing="10dp"
    android:verticalSpacing="10dp"
    android:stretchMode="columnWidth">

    <ImageView
        android:layout_width="130dp"
        android:layout_height="130dp"
        android:background="@color/Color_DarkRed" />

    <ImageView
        android:layout_width="130dp"
        android:layout_height="130dp"
        android:background="@color/Color_DarkRed" />

    <ImageView
        android:layout_width="130dp"
        android:layout_height="130dp"
        android:background="@color/Color_DarkRed" />

    <ImageView
        android:layout_width="130dp"
        android:layout_height="130dp"
        android:background="@color/Color_DarkRed" />

    <ImageView
        android:layout_width="130dp"
        android:layout_height="130dp"
        android:background="@color/Color_DarkRed" />

    <ImageView
        android:layout_width="130dp"
        android:layout_height="130dp"
        android:background="@color/Color_DarkRed" />

</GridLayout>

---

更新

按照this answer，我尝试使用以下布局：

<GridLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:columnCount="3">

    <com.my.package.view.SquareImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@color/Color_DarkRed" />

    <com.my.package.view.SquareImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@color/Color_DarkRed" />

    <com.my.package.view.SquareImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@color/Color_DarkRed" />

</GridLayout>

但它看起来像下面的图片。每个ImageView 占据整个屏幕宽度：

http://i.imgur.com/p8AXcKN.png

Answer 1

你应该减少 layout_width="130dp" 因为你的屏幕不能保证是 390dp

Answer 2

更改图像，或者您也可以使用方形图像视图来调整网格项目的大小。

创建一个单独的类来动态定义您的 ImageView 的大小，该类应继承 ImageView 类，如下所示：

    public class SquareImageView extends ImageView {

    public SquareImageView(Context context) {
        super(context);
    }

    public SquareImageView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public SquareImageView(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, widthMeasureSpec);

    int width = getMeasuredWidth();
        setMeasuredDimension(width, width);

    }
}

setMeasuredDimension(width, width);将自动将您的高度设置为宽度。

在 xml 文件中，使用该类作为视图代替 ImageView，如下所示：

<com.packagepath.SquareImageView
    android:id="@+id/Imageview"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" />