Android TableLayout消除行间距及按钮跨两行显示异常问题

解决方法 #

你遇到的两个问题可以通过以下修改解决：

1. 消除按钮0和1的额外间距：当前两个按钮四边都设置了2sp的margin，按钮0的底部margin和按钮1的顶部margin叠加后，中间总间距达到4sp，比X按钮周边的2sp间距大一倍。你可以把按钮0的底部margin改成1sp，按钮1的顶部margin改成1sp，同时给装载这两个按钮的内层TableLayout添加dividerHeight="0sp"和showDividers="none"属性关闭默认行分割线留白，这样调整后中间总间距就是2sp，和X按钮周边的间距完全一致。
2. X按钮跨两行适配：不需要靠修改textSize撑满控件，给X按钮添加android:gravity="center"和android:textAlignment="center"属性，文字就会自动在按钮内居中，适配不同尺寸下的跨两行显示需求。

修正后完整代码 #

<TableLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <TableRow>
        
        <TableLayout 
            android:layout_width="0sp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:dividerHeight="0sp"
            android:showDividers="none">
            <TableRow 
                android:layout_width="0sp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:layout_margin="0sp"
                android:padding="0sp">
                <com.google.android.material.button.MaterialButton
                    android:layout_width="0sp"
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:text="0"
                    android:layout_margin="2sp"
                    android:layout_marginBottom="1sp"
                    />
            </TableRow>
            
            <TableRow
                android:layout_width="0sp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:layout_margin="0sp"
                android:padding="0sp">
                <com.google.android.material.button.MaterialButton
                    android:layout_width="0sp"
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:text="1"
                    android:layout_margin="2sp"
                    android:layout_marginTop="1sp"
                    />
            </TableRow>
        </TableLayout>
        
        <TableLayout
            android:layout_width="0sp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:layout_margin="0sp"
            android:padding="0sp">
            <TableRow
                android:layout_width="match_parent"
                android:layout_height="match_parent">
                <com.google.android.material.button.MaterialButton
                    android:layout_width="0sp"
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:text="X"
                    android:layout_margin="2sp"
                    android:gravity="center"
                    android:textAlignment="center"
                    />
            </TableRow>
        </TableLayout>
        
    </TableRow>
</TableLayout>

可选优化方案 #

如果后续需要扩展更多按键，建议换用GridLayout实现该布局，直接通过layout_rowSpan属性设置X按钮跨2行即可，不需要嵌套多层TableLayout，结构更简洁，适配性更强。

内容的提问来源于stack exchange，提问作者sagalo1