包含图像的gridlayout的对齐问题
作者：互联网
Android Studio 1.2
你好,
我试图使此对齐方式正确于以下线框.
我只为此使用gridlayout,并且不想使用线性或相对布局或嵌套布局.
我已经使用以下xml将其关闭.只需一些最终修饰的帮助,即可使其看起来完美.
<?xml version="1.0" encoding="utf-8"?>
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="?android:attr/listPreferredItemHeightLarge"
android:columnCount="6"
android:orientation="horizontal"
android:padding="6dp">
<TextView
android:id="@+id/tvDate"
android:layout_gravity="start"
android:text="16 Mar 2015"
android:textSize="18sp"/>
<TextView
android:id="@+id/tvCorrectTxt"
android:layout_gravity="end"
android:layout_columnSpan="2"
android:text="Correct 20"
android:textSize="18sp"/>
<ImageView
android:id="@+id/ivCorrect"
android:layout_columnSpan="2"
android:layout_gravity="top"
android:src="@drawable/ic_action_good"/>
<ImageView
android:id="@+id/ivArrow"
android:layout_rowSpan="2"
android:layout_gravity="center"
android:src="@drawable/ic_action_next_item"/>
<TextView
android:id="@+id/tvTime"
android:layout_gravity="start|bottom"
android:text="22:15"
android:textSize="18sp"/>
<TextView
android:id="@+id/tvIncorrect"
android:layout_gravity="end|bottom"
android:layout_columnSpan="2"
android:text="Incorrect 18"
android:textSize="18sp"/>
<ImageView
android:id="@+id/ivIncorrect"
android:layout_gravity="bottom"
android:src="@drawable/ic_action_bad"/>
</GridLayout>
非常感谢您的任何建议,
解决方法:
您的布局(从图片中)看起来非常静态-没有很多活动部件.为什么不将其实现为自定义Viewgroup？由于您追求的是性能,因此这是您的最佳选择.
子视图的位置将相对于ViewGroup,而不是子视图本身.涉及的数学：
列(childLeft和childRight)
>将可用宽度(actualWidth-paddingLeft-paddingRight)分成6个等距的列
> TextViews电视日期& tvTime向左刷新
> TextViews tvCorrectTxt& tvIncorrect在第4列内部刷新
> ivCorrect& ivIncorrect在第5列内水平居中
> ivArrow在第6列中立即刷新
行(childTop和childBottom)
>我们有两行要显示.为了在行的上方,下方和下方具有相等的间距,我们将第一行的垂直中心与容器的高度/ 3 ==>对齐. y = 0.333 * availableHeight;第二行的垂直中心将位于2 *容器的高度/ 3 ==> y = 0.666 *可用高度
> ivArrow将在可用高度内垂直居中.
CusViewGroup：
public class CusViewGroup extends ViewGroup {
// In case we have to explicitly set the viewgroup's height
private int mDesiredHeight;
public CusViewGroup(Context context, AttributeSet attrs) {
super(context, attrs);
// Attribute array
int[] attrss = new int[] { android.R.attr.listPreferredItemHeightLarge };
TypedArray a = context.getTheme().obtainStyledAttributes(attrss);
// 200 is being used as the default value.
// This should actually be defined in res/values/dimens.xml
// and retrieved using
// getResources.getDimensionPixelSize(R.dimen.defaultListItemHeight)
mDesiredHeight = a.getDimensionPixelSize(0, 200);
a.recycle();
}
@Override
protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
final int count = getChildCount();
final int parentLeft = getPaddingStart();
final int parentRight = right - left - getPaddingEnd();
final int parentTop = getPaddingTop();
final int parentBottom = bottom - top - getPaddingBottom();
final int availableParentWidth = parentRight - parentLeft;
final int availableParentHeight = parentBottom - parentTop;
final int columnWidth = availableParentWidth/6;
for (int i = 0; i < count; i++) {
final View child = getChildAt(i);
if (child.getVisibility() != GONE) {
final int width = child.getMeasuredWidth();
final int height = child.getMeasuredHeight();
int childLeft, childTop;
// We can use the assigned ids and calculate
// view positions.
switch(child.getId()) {
case R.id.tvDate:
childLeft = parentLeft;
childTop = parentTop + availableParentHeight/3 - height/2;
break;
case R.id.tvCorrectTxt:
childLeft = parentLeft + columnWidth*4 - width;
childTop = parentTop + availableParentHeight/3 - height/2;
break;
case R.id.ivCorrect:
childLeft = parentLeft + columnWidth*4 + (columnWidth - width) / 2;
childTop = parentTop + availableParentHeight/3 - height/2;
break;
case R.id.ivArrow:
childLeft = parentRight - width;
childTop = parentTop + (availableParentHeight - height) / 2;
break;
case R.id.tvTime:
childLeft = parentLeft;
childTop = parentTop + 2*availableParentHeight/3 - height/2;
break;
case R.id.tvIncorrect:
childLeft = parentLeft + columnWidth*4 - width;
childTop = parentTop + 2*availableParentHeight/3 - height/2;
break;
case R.id.ivIncorrect:
childLeft = parentLeft + columnWidth*4 + (columnWidth - width) / 2;
childTop = parentTop + 2*availableParentHeight/3 - height/2;
break;
default:
// We shouldn't be here
child.setVisibility(View.GONE);
continue;
}
// layout child
child.layout(childLeft, childTop, childLeft + width, childTop + height);
}
}
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
// We're using an exact value for height & MATCH_PARENT for width
int height = getMeasuredHeight();
if (MeasureSpec.getMode(heightMeasureSpec) != MeasureSpec.EXACTLY) {
// Use mDesiredHeight if heightMeasureSpec is not
// measured exactly.
height = mDesiredHeight;
// Update heightMeasureSpec
heightMeasureSpec = MeasureSpec.makeMeasureSpec(height, MeasureSpec.EXACTLY);
}
setMeasuredDimension(getMeasuredWidth(), height);
final int count = getChildCount();
// measure children
for (int i = 0; i < count; i++) {
final View child = getChildAt(i);
int childWidthMeasureSpec;
int childHeightMeasureSpec;
childWidthMeasureSpec = getChildMeasureSpec(widthMeasureSpec,
0, LayoutParams.WRAP_CONTENT);
childHeightMeasureSpec = getChildMeasureSpec(heightMeasureSpec, 0, LayoutParams.WRAP_CONTENT);
child.measure(childWidthMeasureSpec, childHeightMeasureSpec);
}
}
}
现在,对于xml,我们不需要定义太多.只需扔掉所有子项,然后让onLayout(..)处理展示位置即可.
<?xml version="1.0" encoding="utf-8"?>
<!-- paddingStart=18dp(10dp + 8dp) because ivArrow's size(32dp) - optical square(24dp) = 8dp -->
<your.package.name.CusViewGroup xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="?android:attr/listPreferredItemHeightLarge"
android:paddingStart="18dp"
android:paddingEnd="10dp"
android:background="#ffffff">
<TextView
android:id="@+id/tvDate"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="16 Mar 2015"
android:textColor="#858585"
android:textSize="18sp"/>
<TextView
android:id="@+id/tvCorrectTxt"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Correct 20"
android:textColor="#858585"
android:textSize="18sp"/>
<ImageView
android:id="@+id/ivCorrect"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/ic_action_good"/>
<ImageView
android:id="@+id/ivArrow"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/ic_action_next_item"/>
<TextView
android:id="@+id/tvTime"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="22:15"
android:textSize="18sp"
android:textColor="#858585"/>
<TextView
android:id="@+id/tvIncorrect"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Incorrect 18"
android:textColor="#858585"
android:textSize="18sp"/>
<ImageView
android:id="@+id/ivIncorrect"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/ic_action_bad"/>
</com.appeaser.playground.CusViewGroup>
如果希望子视图支持填充/边距,则可以通过更改onLayout(…)& onMeasure(…).要支持RTL,请修改onLayout(…).
肖像：
景观：
标签：android-gridlayout,android 来源： https://codeday.me/bug/20191120/2045141.html