我有一组12张图片要在布局中显示。这个数字是半任意选择的,但是对于纵向模式可以归结为3个横向和4个垂直,而对于横向模式则是另一个。
第一个实现是使用gridview。问题是高度不能强制适合屏幕。 对于一种解决方法,我可以(尝试)缩放课程图像,但几乎不可能计算出网格视图可用的空间:总屏幕尺寸是已知的,但你必须“猜测”通知栏的大小而且不会似乎是一种优雅的溶剂。测量的大小实际上并不值得信任:我没有在方向更改(速度)上完全重新启动,但是屏幕的构建方式不能在现场获得完整的空间。 最后得出的结论是,我不想计算图像的大小,然后相应地进行缩放:我认为最好说出视图应该如何适合屏幕,对吧?
所以接下来的尝试就是使用TableLayout。使用“ShrinkColumns =”*“图像很合适,所以图像的大小现在是我们想要它们的大小。但是我们可能在高度上的'额外'空间现在在桌面之间均匀分配。这是可以预期的,但很难看。
当前代码似乎无关紧要,因为它不起作用,但最终看起来像这样: 我删除了所有填充和其他看起来不相关的东西。 (对于肖像:)
<TableLayout
android:shrinkColumns="*">
<TableRow>
<ImageView/>
<ImageView/>
<ImageView/>
</TableRow>
… (repeat 3 tablerows)
</TableLayout>
要“缩放”过大的图像,TableLayout具有“shrinkcolumns =”*“”属性。
我们怎样才能让三个ImageView在TableRow的中心对齐而不是在宽度上均匀分布?对于垂直列也是如此,我们如何将所有内容保持在一起而不是在屏幕的高度上展开? 基本上,“多余”空间应该作为填充/边距到达两侧,现在它介于图像之间。
实施例: 左侧屏幕截图显示左/右距离太多,右侧有太多顶部/底部
答案 0 :(得分:25)
我认为使用自定义视图不应该太难,这应该是一个有趣的练习。这是我的第一个自定义视图;欢迎提供反馈!
AspectGrid
完全忽略了孩子想要的大小。出于您的目的,这似乎没问题。如果需要更高级的东西,onMeasure
需要做很多额外的工作。AspectGrid
的父级建议的大小无需再考虑使用。这与上一期有关。Landscape screenshot http://i55.tinypic.com/fc8bj4.png
Portrait screenshot http://i55.tinypic.com/zn7qxk.png
主要参数是列数。行数是自动计算的,因为我们知道子项的数量。另一个主要参数是我们想要为孩子们使用的宽高比(对于正方形,设置为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>