如何布局“网格”屏幕中央的图像数量

Question

我有一组 12 张图像要在布局中显示。该数字是半任意选择的，但纵向模式下水平方向为 3 个，垂直方向上为 4 个，横向方向则相反。

第一个实现是使用 gridview。问题是高度不能强制适应屏幕。 对于解决方法，我当然可以（尝试）缩放图像，但几乎不可能计算网格视图可用的房间：总屏幕尺寸当然是已知的，但您必须“猜测”通知栏的大小，而这并不“这似乎是一个优雅的解决方案。测量的尺寸并不真正可信：我没有在方向改变时完全重新启动（为了速度），但屏幕构建完整空间的方式在现场不可用。 最后的结论是，我不想计算图像的大小，然后相应地缩放它们：我认为最好说视图应该如何适合屏幕，对吧？

所以接下来的尝试就是使用 TableLayout。使用“ShrinkColumns=”*”图像拟合得很好，因此图像的大小现在就是我们想要的大小。但是我们在高度上可能拥有的“额外”空间现在在表格行之间均匀分配。这是可以预料的，但丑陋的是，

当前的代码似乎无关紧要，因为它不起作用，但最终看起来像这样： 我已经删除了所有填充和其他看起来不相关的东西。 （对于肖像：）

<TableLayout
       android:shrinkColumns="*">
    <TableRow>
        <ImageView/>
        <ImageView/>
        <ImageView/>
    </TableRow>
    … (repeat 3 tablerows)
</TableLayout>

为了“缩放”太大的图像，TableLayout 具有“shrinkcolumns=”*”” 属性。

我们怎样才能让三个ImageView在TableRow的中心对齐而不是在宽度上均匀分布呢？垂直列也是如此，我们如何才能将所有内容保持在一起而不分散到屏幕的整个高度上？ 基本上，“多余”空间应该作为填充/边距位于两侧，现在它位于图像之间。

例子： 左边的屏幕截图显示了太多的左/右距离，右边的屏幕截图显示了太多的顶部/底部

Answer 1

我认为使用自定义视图应该不会太难，这应该是一个有趣的练习。这是我的第一个自定义视图；欢迎反馈！

限制

• AspectGrid 完全忽略其子级想要的大小。就您的目的而言，这似乎没问题。如果需要更高级的东西，onMeasure 需要做很多额外的工作。
• 毫不犹豫地使用 AspectGrid 的父级建议的大小。这与上一个问题有关。

屏幕截图

横向屏幕截图 http://tinypic.com/images/404.gif

工作原理

主要参数是列数。行数是自动计算的，因为我们知道子项的数量。另一个主要参数是我们想要用于子项的长宽比（对于正方形设置为 1）。

在onLayout中，我们收到网格的最终大小，因此我们可以计算子项的最大宽度和高度。

然后我们根据纵横比检查这一点。如果孩子们太高，我们会让他们变矮（如肖像示例）。如果它们太宽，我们会使它们变窄（如风景示例中所示）。

这就是全部内容了；其余的只是管道。

代码

com/photogrid/AspectGrid.java：实际的 ViewGroup 类

package com.photogrid;

import android.content.Context;

public class AspectGrid extends ViewGroup {

    private int mNumColumns = 1;
    private int mHorizontalSpacing = 0;
    private int mVerticalSpacing = 0;
    private float mChildAspectRatio = 1.0f;

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

    public AspectGrid(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

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

        try {
            TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.AspectGrid);

            setNumColumns(a.getInt(R.styleable.AspectGrid_numColumns, mNumColumns));
            setHorizontalSpacing(a.getDimensionPixelSize(R.styleable.AspectGrid_horizontalSpacing, mHorizontalSpacing));
            setVerticalSpacing(a.getDimensionPixelSize(R.styleable.AspectGrid_verticalSpacing, mVerticalSpacing));
            setChildAspectRatio(a.getFloat(R.styleable.AspectGrid_childAspectRatio, mChildAspectRatio));

            a.recycle();
        } catch (RuntimeException ex) {
            throw ex;
        }
    }

    public int getNumColumns() {
        return mNumColumns;
    }

    public void setNumColumns(int numColumns) {
        if (numColumns < 1)
            throw new IllegalArgumentException("numColumns must be at least 1");
        if (numColumns != mNumColumns) {
            mNumColumns = numColumns;
            requestLayout();
        }
    }

    public int getHorizontalSpacing() {
        return mHorizontalSpacing;
    }

    public void setHorizontalSpacing(int horizontalSpacing) {
        mHorizontalSpacing = horizontalSpacing;
    }

    public int getVerticalSpacing() {
        return mVerticalSpacing;
    }

    public void setVerticalSpacing(int verticalSpacing) {
        mVerticalSpacing = verticalSpacing;
    }

    public float getChildAspectRatio() {
        return mChildAspectRatio;
    }

    public void setChildAspectRatio(float childAspectRatio) {
        if (childAspectRatio <= 0)
            throw new IllegalArgumentException("childAspectRatio must be positive");
        if (childAspectRatio != mChildAspectRatio) {
            mChildAspectRatio = childAspectRatio;
            requestLayout();
        }
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        int widthSize = MeasureSpec.getSize(widthMeasureSpec);
        int heightSize = MeasureSpec.getSize(heightMeasureSpec);
        int measuredWidth = widthSize;
        int measuredHeight = heightSize;
        int width = Math.max(measuredWidth, getSuggestedMinimumWidth());
        int height = Math.max(measuredHeight, getSuggestedMinimumHeight());
        setMeasuredDimension(width, height);
    }

    @Override
    protected void onLayout(boolean changed, int l, int t, int r, int b) {
        int childCount = getChildCount();
        if (childCount <= 0)
            return;

        int innerWidth = r - l - getPaddingLeft() - getPaddingRight();
        int innerHeight = b - t - getPaddingBottom() - getPaddingTop();
        int numRows = (childCount + mNumColumns - 1) / mNumColumns;

        int leftEdge = getPaddingLeft();
        int topEdge = getPaddingTop();
        int horizontalStride = (innerWidth + mHorizontalSpacing) / mNumColumns;
        int verticalStride = (innerHeight + mVerticalSpacing) / numRows;
        int childWidth = horizontalStride - mHorizontalSpacing;
        int childHeight = verticalStride - mVerticalSpacing;

        if (childHeight * mChildAspectRatio > childWidth) {
            childHeight = (int)(childWidth / mChildAspectRatio);
            verticalStride = childHeight + mVerticalSpacing;
            topEdge = (innerHeight + mVerticalSpacing - numRows * verticalStride) / 2; 
        } else {
            childWidth = (int)(childHeight * mChildAspectRatio);
            horizontalStride = childHeight + mHorizontalSpacing;
            leftEdge = (innerWidth + mHorizontalSpacing - mNumColumns * horizontalStride) / 2;
        }

        for (int i = 0; i < childCount; ++i) {
            View child = getChildAt(i);
            int row = i / mNumColumns;
            int column = i % mNumColumns;
            int left = leftEdge + column * horizontalStride;
            int top = topEdge + row * verticalStride;
            child.layout(
                left,
                top,
                left + childWidth,
                top + childHeight);
        }
    }

}

res/values/attrs.xml：在XML

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="AspectGrid">
        <attr name="numColumns" format="integer"/>
        <attr name="horizontalSpacing" format="dimension"/>
        <attr name="verticalSpacing" format="dimension"/>
        <attr name="childAspectRatio" format="float"/>
    </declare-styleable>
</resources>

res/layout/main.xml：上面屏幕截图中使用的示例

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res/com.photogrid"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >
    <com.photogrid.AspectGrid
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:padding="5dp"
        app:numColumns="3"
        app:horizontalSpacing="5dp"
        app:verticalSpacing="5dp"
        app:childAspectRatio="1.0"
        >
        <TextView  
            android:layout_width="wrap_content" 
            android:layout_height="wrap_content"
            android:background="#ffcccc" 
            android:text="Item 1"
            />
        <TextView  
            android:layout_width="wrap_content" 
            android:layout_height="wrap_content"
            android:background="#ccffcc" 
            android:text="Item 2"
            />
        <TextView  
            android:layout_width="wrap_content" 
            android:layout_height="wrap_content"
            android:background="#ccccff" 
            android:text="Item 3"
            />
        <TextView  
            android:layout_width="wrap_content" 
            android:layout_height="wrap_content"
            android:background="#ffffcc" 
            android:text="Item 4"
            />
        <TextView  
            android:layout_width="wrap_content" 
            android:layout_height="wrap_content"
            android:background="#ffccff" 
            android:text="Item 5"
            />
        <TextView  
            android:layout_width="wrap_content" 
            android:layout_height="wrap_content"
            android:background="#ccffff" 
            android:text="Item 6"
            />
    </com.photogrid.AspectGrid>
</LinearLayout>