I figured this shouldn't be too hard using a custom view, which should be an interesting exercise. This is my first custom view; feedback is welcome!
Limitations
AspectGrid completely ignores the size that its children want to be. For your purposes, this appears to be okay. If something fancier is needed, onMeasure needs a lot of extra work.- The size that is suggested by
AspectGrid's parent is used without a second thought. This is related to the previous issue.
Screenshots
Landscape screenshot http://tinypic.com/images/404.gif
![Portrait screenshot]()
How it works
A main parameter is the number of columns. The number of rows is computed automatically, because we know the number of children. Another main parameter is the aspect ratio we want to use for the children (set to 1 for squares).
In onLayout, we receive the final size of the grid, so we can compute the maximum width and height of the children.
We then check this against the aspect ratio. If the children are too tall, we make them shorter (as in the portrait example). If they are too wide, we make them narrower (as in the landscape example).
That's all there is to it; the rest is just plumbing.
The code
com/photogrid/AspectGrid.java: The actual ViewGroup class
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: Declaration of attributes for use in the 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: The example used in the screenshots above
<?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>
