Vertically aligning suffix with tab space in android TextView

问题

I have rows (of horizontal LinearLayout) with a TextView at the end that displays time. An this is how it looks:

Now I need the suffix (am/pm) in all rows to be aligned vertically. This is not the case in the above layout, as you can see, the last row is misaligned as the displayed time is longer.

I achieved this using the tab character \u0009. This means I would set the text to be for example "7:21\u0009\u0009pm". This produces desired result as show below:

However, I need to know if (1) this is the most efficient way and (2) that this would work on all android devices. If there is an alternative way to achieve this please let me know.

And here is an XML layout of a row for your reference:

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="@dimen/prayer_time_row_height"
            android:layout_marginLeft="48dp"
            android:gravity="center_vertical"
            android:orientation="horizontal">

            <com.devspark.robototextview.widget.RobotoTextView
                style="@style/text_subhead"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="Today"
                android:textColor="@color/material_light_secondary_text"
                android:visibility="invisible" />

            <com.devspark.robototextview.widget.RobotoTextView
                style="@style/text_subhead"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="Event"
                android:textColor="@color/material_light_primary_text" />

            <com.devspark.robototextview.widget.RobotoTextView
                style="@style/text_subhead"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="12:06\u0009\u0009am"
                android:textColor="@color/material_light_primary_text" />

        </LinearLayout>

BONUS

Bonus points for pointing out a way to vertically align the hour-minute separator, i.e., colon character.

回答1:

Maybe using tabs is the most efficient, but the gap is pretty big and not configurable. If you need all those rows in a single view group, you may try to check out RelativeLayout: align am/pm vertically on common left, and put hours to the left and on the baseline. This is the most flexible way, since you can control relative positions and margins, but computation-wise it's less efficient because it requires extra calculation upon laying out elements.

As per aligning colons — in most fonts (not just monospace) digits are designed to take equal space, so just align the numbers on the right (e.g. in relative layout) and it should do.

回答2:

For the colon character, you could try using the character "\uee01" instead of ":". This is what google does with the clock in the lock screen.

https://github.com/android/platform_frameworks_base/blob/master/packages/Keyguard/src/com/android/keyguard/KeyguardStatusView.java#L247

回答3:

You can use a 2-column TableLayout. The first column is the time without AM/PM and the second column is just the AM/PM. Set the gravity of the first column to "end" or "right" and the times will be lined up at the colons if you are using a fixed width font.

来源：https://stackoverflow.com/questions/30409953/vertically-aligning-suffix-with-tab-space-in-android-textview