Центрируйте Textview только по шагам ширины его моноширинных букв

Question

Я пытаюсь создать поддельный ЖК-дисплей.

Он должен состоять из некоторого обычного текста, показывающего некоторые данные, и фона, имитирующего этот LCD-вид:

Я написал этот XML, выровняв 3 TextViews друг над другом.

<?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>

В некоторых случаях работает нормально, но теперь посмотрим, что произойдет, если длина текста самого верхнего представления изменится:

Виды больше не выровнены должным образом, так как только верхний вид изменил свою ширину и поэтому снова отцентрирован.

То, что я спрашиваю, есть ли возможность центрировать TextView, но только с шагом в ширину одной буквы используемого monospace -шрифт

Answer 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() вы можете получить все светодиодные символы следующим образом:

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("");
        }
    }
}