1

我正在尝试创建一个假液晶显示器。

它应该存在一些普通文本，显示一些数据和背景，假装 LCD 外观： img01

我编写了这个 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 的 textlength 发生变化会发生什么： img02

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

我要问的是，是否有可能将 TextView 居中，但只能以所用字体的一个字母的宽度为monospace单位

4

1 回答 1

1

我认为最好的解决方案是TextView为每个字符使用一个可绘制的图形，该图形代表两个图层“ 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("");
        }
    }
}
于 2012-01-14T12:38:21.310 回答