与包含图像的gridlayout对齐问题

Question

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>

非常感谢任何建议，

Answer 1

我建议您使用属性 columnWeight 来调整单元格的大小。我还建议为图像指定一个特定的尺寸。

看看我编辑的版本，它几乎可以得到理想的结果！ （是的，我正在使用不同的图像资源;））：

这是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="8dp">

    <TextView
        android:id="@+id/tvDate"
        android:layout_gravity="start"
        android:text="16 Mar 2015"
        android:layout_columnWeight="1"
        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="center_horizontal|top"
        android:layout_width="25dp"
        android:layout_height="25dp"
        android:src="@drawable/ic_action_good"/>

    <ImageView
        android:id="@+id/ivArrow"
        android:layout_rowSpan="2"
        android:layout_columnWeight="0"
        android:layout_gravity="center"
        android:src="@drawable/ic_action_next_item"/>

    <TextView
        android:id="@+id/tvTime"
        android:layout_columnWeight="1"
        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:layout_columnWeight="0"
        android:text="Incorrect 18"
        android:textSize="18sp"/>

    <ImageView
        android:id="@+id/ivIncorrect"
        android:layout_columnWeight="2"
        android:layout_width="25dp"
        android:layout_height="25dp"
        android:layout_gravity="center_horizontal|bottom"
        android:src="@drawable/ic_action_bad"/>


</GridLayout>

Answer 2

您的布局（来自图片）看起来相当静态 - 没有多少活动部件。为什么不将其实现为自定义Viewgroup？由于你是在表演之后，这将是你要走的路。

儿童观点的定位将与ViewGroup相关，而不是儿童本身。数学涉及：

列（childLeft＆amp; childRight）

• 将可用宽度（actualWidth - paddingLeft - paddingRight）划分为6个等间距列
• TextViews tvDate＆amp; tvTime向左冲洗
• TextViews tvCorrectTxt＆amp; tvIncorrect正在第4列中刷新
• ivCorrect＆amp; ivIncorrect在第5列内水平居中
• ivArrow在第6列中直接刷新

行（childTop＆amp; childBottom）

• 我们有两行要显示。为了在行的上方，中间和下方具有相等的间距，我们将第一行的垂直中心与container's height/3 ==＆gt;对齐。 y = 0.333*availableHeight;第二行的垂直中心位于2*container's height/3 ==＆gt; y = 0.666*availableHeight
• 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(...)＆amp; onMeasure(...)。要支持RTL，请修改onLayout(...)。

<强>肖像：

---

<强>风景：