android - 仅按其等宽字母的宽度将 Textview 居中

Question

我正在尝试创建一个假的 LCD 显示器。

它应该存在一些正常的文本，显示一些数据，和一个背景，伪装成 LCD 的样子:

我编写了这个 xml，将 3 个 TextView 相互对齐。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/footer_linearLayout_footer_parent"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:background="@drawable/dashboard_bottom_background"
    android:gravity="center"
    android:padding="3dip" >

    <TextView
        android:id="@+id/textView_heading"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:ellipsize="none"
        android:lines="1"
        android:text="text"
        android:textColor="@color/holo_blue_light"
        android:textSize="28dip" />

    <TextView
        android:id="@+id/textView_heading2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:alpha="0.15"
        android:ellipsize="none"
        android:gravity="center"
        android:lines="1"
        android:text="88888888888888888888888888888888888"
        android:textColor="@color/holo_blue_light"
        android:textSize="28dip" />

    <TextView
        android:id="@+id/textView_heading3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:alpha="0.15"
        android:gravity="center"
        android:lines="1"
        android:text="XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"
        android:textColor="@color/holo_blue_light"
        android:textSize="28dip" />

</RelativeLayout>

在某些情况下工作正常，但现在看看如果最顶层 View 的文本长度发生变化会发生什么:

Views 不再正确对齐，因为只有上面的 View 改变了它的宽度，因此再次居中。

我想问的是，是否有可能将 TextView 居中，但只能以所用 monospace-font 的一个字母的宽度为步长

Answer 1

我认为最好的解决方案是为每个字符使用一个 TextView，并用一个 drawable 表示两层“8”和“X” >”作为背景。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/textView_heading"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal" >

    <TextView
        android:id="@+id/char_0"
        android:layout_width="0px"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:gravity="center"
        android:text="0"
        android:textColor="@color/holo_blue_light"
        android:textSize="28dip" 
        android:background="@drawable/lcd_char"/>

    <TextView
        android:id="@+id/char_1"
        android:layout_width="0px"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:gravity="center"
        android:text="1"
        android:textColor="@color/holo_blue_light"
        android:textSize="28dip" 
        android:background="@drawable/lcd_char"/>

    <!-- ... -->

    <TextView
        android:id="@+id/char_n"
        android:layout_width="0px"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:gravity="center"
        android:text="n"
        android:textColor="@color/holo_blue_light"
        android:textSize="28dip" 
        android:background="@drawable/lcd_char"/>
</LinearLayout>

但是，如果你愿意，你也可以通过这种方式为每一层使用三个水平的LinearLayout:

<?xml version="1.0" encoding="utf-8"?>
<merge xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <LinearLayout
        android:id="@+id/textView_heading"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="horizontal" >

        <TextView
            android:id="@+id/char_0"
            android:layout_width="0px"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:text="0"
            android:textColor="@color/holo_blue_light"
            android:textSize="28dip" 
            android:background="@drawable/lcd_char"/>

        <!-- ... -->
    </LinearLayout>

    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/textView_heading2"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="horizontal" >

        <TextView
            android:id="@+id/char_8_0"
            android:layout_width="0px"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:alpha="0.15"
            android:text="8"
            android:textColor="@color/holo_blue_light"
            android:textSize="28dip" 
            android:background="@drawable/lcd_char"/>

        <!-- ... -->
    </LinearLayout>

    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/textView_heading3"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="horizontal" >

        <TextView
            android:id="@+id/char_X_0"
            android:layout_width="0px"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:alpha="0.15"
            android:text="X"
            android:textColor="@color/holo_blue_light"
            android:textSize="28dip" 
            android:background="@drawable/lcd_char"/>

        <!-- ... -->
    </LinearLayout>
</merge>

因此在 onCreate() 方法中，您可以通过这种方式检索所有 LED 字符:

TextView[] lcdChars = new TextView[3/*lcd size*/];
for (int i = 0; i < lcdChars.length; i++) {
    int resID = getResources().getIdentifier("char_"+i, "id", getPackageName());
    lcdChars[i] = (TextView) findViewById(resID);
}

然后用这样的方法设置你想要的文本:

private void setLCDText(char[] chars){
    for (int i = 0; i < lcdChars.length; i++) {
        if(i < chars.length){
            lcdChars[i].setText(chars, i, 1);
        }else{
            lcdChars[i].setText("");
        }
    }
}