Android TableLayout中TextView文本不居中问题

概述

| 平台
    RK3288 + Android 8.1 + compileSdkVersion 26.

| 问题
    使用了TableLayout布局电话的拨号按键界面, 效果如下图 (正常):

在后续开发过程的某次修改后, 出现效果图(不正常):

合并两张效果图可看得更明显(红线参考位置):

在布局中 TextView 的 android:gravity=center 已经设置, 从图中可以看出在垂直方向的居中失效了

排查

themes.xml

<?xml version="1.0" encoding="utf-8"?>
<resources><item name="dw" type="dimen">60dp</item><item name="dh" type="dimen">42dp</item><style name="TV"><item name="android:textColor">#FF000000</item><item name="android:gravity">center</item><item name="android:textSize">22sp</item><item name="android:layout_width">@dimen/dw</item><item name="android:layout_height">@dimen/dh</item><item name="android:layout_marginLeft">6dp</item><item name="android:layout_marginTop">6dp</item><item name="android:background">@drawable/selector_tv_bg</item></style></resources>

table_layout_test.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent"android:background="#fff7f7f9"><ListView android:id="@+id/lv"android:layout_width="400dp"android:layout_height="400dp"/><RelativeLayout android:id="@+id/rlPhone"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_toRightOf="@id/lv"android:background="#220000FF"><TableLayout android:id="@+id/tl"android:layout_width="wrap_content"android:layout_height="wrap_content"><TableRow><TextView style="@style/TV"android:text="7"/><TextView style="@style/TV"android:text="8"/><TextView style="@style/TV"android:text="9"/></TableRow><TableRow><TextView style="@style/TV"android:text="4"/><TextView style="@style/TV"android:text="5"/><TextView style="@style/TV"android:text="6"/></TableRow><TableRow><TextView style="@style/TV"android:text="1"/><TextView style="@style/TV"android:text="2"/><TextView style="@style/TV"android:text="3"/></TableRow><TableRow><TextView style="@style/TV"android:text="*"/><TextView style="@style/TV"android:text="0"/><TextView style="@style/TV"android:text="#"/></TableRow></TableLayout></RelativeLayout>
</RelativeLayout>

TableLayoutTest.java

public class TableLayoutTest extends Activity implements View.OnClickListener {ListView lv;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.table_layout_test);ViewGroup tl = (ViewGroup) findViewById(R.id.tl);for(int i = 0; i < tl.getChildCount(); i ++){ViewGroup row = (ViewGroup) tl.getChildAt(i);for(int j = 0; j < row.getChildCount(); j ++){row.getChildAt(j).setOnClickListener(this);}}lv = (ListView) findViewById(R.id.lv);lv.setAdapter(new ArrayAdapter<String>(TableLayoutTest.this,R.layout.lv_item,new String[]{"001", "002", "003", "004", "004"}));}@Overridepublic void onClick(View view) {Log.d("TableLayoutTest", "onClick " + ((TextView)view).getText().toString());}
}

布局并不复杂, 一个ListView 加上一个 RelativeLayout, 于是, 把ListView先去带掉, 果然好了, 这问题就很谜了.
这不合理, 于是, 布局不变, 去掉 lv.setAdapter, 结果也是好的…

判断会不会是时序的原因, 于是延迟 3秒 setAdapter:

lv.postDelayed(new Runnable() {@Overridepublic void run() {lv.setAdapter(new ArrayAdapter<String>(TableLayoutTest.this,R.layout.lv_item,new String[]{"001", "002", "003", "004", "004"}));}}, 3000);

好吧, 刚开始是好的, ListView有内容了后, 出现:

---

原因参考自ChatGpt

可能原因

1. TableLayout 的宽度: 由于你使用的是 wrap_content，TableLayout 和 TableRow 的宽度可能根据子元素的内容大小进行调整。如果 TableLayout 或 TableRow 的宽度与 TextView 的内容宽度相近，gravity="center" 可能无法正常生效。

2. TableRow 默认行为: TableRow 中的子元素默认是按内容宽度排列的，而不是平分整个行的宽度。这可能导致 TextView 的内容没有在整个单元格内居中。

解决方法

为了确保 TableLayout 中的 TextView 内容能够正确居中，可以考虑以下方法：

1. 为 TextView 设置 layout_width="0dp" 并加上 layout_weight="1": 这将使每个 TextView 在同一行内平分可用空间，从而使文本居中。

<TableRow><TextViewstyle="@style/TV"android:layout_width="0dp"android:layout_height="wrap_content"android:layout_weight="1"android:gravity="center"android:text="7"/><TextViewstyle="@style/TV"android:layout_width="0dp"android:layout_height="wrap_content"android:layout_weight="1"android:gravity="center"android:text="8"/><TextViewstyle="@style/TV"android:layout_width="0dp"android:layout_height="wrap_content"android:layout_weight="1"android:gravity="center"android:text="9"/>
</TableRow>

2. TableLayout 的 stretchColumns 属性: 你可以使用 TableLayout 的 stretchColumns 属性，使特定列自动拉伸以填充空间，从而在特定情况下实现内容居中。

<TableLayoutandroid:id="@+id/tl"android:layout_width="wrap_content"android:layout_height="wrap_content"android:stretchColumns="*">

这里的 android:stretchColumns="*" 表示所有列都可以被拉伸以适应屏幕宽度。

总结

通过设置 layout_width="0dp" 并配合 layout_weight="1"，可以确保 TextView 在其单元格中居中显示。stretchColumns 属性也可以> 用来调整列的宽度，确保内容的对齐方式更加合理。试试看是否能解决你的问题！

ChatGPT提供的几种方案并没有解决问题, 方案中提及的原因有待验证.

| 解决方案

1. 根布局改为FrameLayout
2. 修改TableLayout的layout_width属性配置, 指定 android:layout_width="match_parent" 或 android:layout_width="300dp" 都可以
3. TableLayout 用 LinearLayout或其他布局替换

4. 指定父容器布局宽度, 并设置 TableRow的宽度
   RelativeLayout android:id=“@+id/rlPhone”
   TableLayout android:id=“@+id/tl”
   TableRow android:layout_width=“200dp”>