如何在 TextView 中使冒号垂直居中

Question

我有一个TextView 显示时间。时间每秒更新一次。

我使用了 DIN 字体。我已将TextView 设置为居中对齐（垂直）。为什么冒号与基线对齐？谁知道如何解决这个问题？

更新

               <TextView
                    android:id="@+id/time"
                    android:layout_width="wrap_content"
                    android:layout_height="48px"
                    android:layout_below="@id/temperature"
                    android:layout_centerHorizontal="true"
                    android:layout_marginBottom="-5px"
                    android:fontFamily="DIN"
                    android:gravity="center"
                    android:textColor="@color/white"
                    android:textSize="39px" />

Answer 1

这是字体呈现冒号字符的默认方式。除非您为冒号创建单独的 TextView，否则您无法更改它。或者，您可以使用不同的字体并检查是否有任何其他字体实际上以冒号字符为中心。使用以下方法来做到这一点：

android:fontFamily="sans-serif"           // roboto regular
android:fontFamily="sans-serif-light"     // roboto light
android:fontFamily="sans-serif-condensed" // roboto condensed
android:fontFamily="sans-serif-thin"      // roboto thin (android 4.2)
android:fontFamily="sans-serif-medium"    // roboto medium (android 5.0)

为了更好地解释可以使用的字体，您可以查看official documentation。

希望这会有所帮助:)

Answer 2

一种选择是将整个 TextView 分成 5 个不同的 TextView，并在带有数字的那些上添加 android:layout_marginTop="3px"。

Answer 3

因为冒号是如此简单的形状，您可以在垂直线性布局中从较小的元素（文本视图、图形基元或仅两个视图）构建它。

例如，首先创建一个简单的点作为可绘制形状（drawable 文件夹中的 dot.xml）：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
       android:shape="oval">
    <solid android:color="#ccc"/>
</shape>

以这个可绘制对象为背景创建一个视图（布局文件夹中的clock_dot.xml）：

<?xml version="1.0" encoding="utf-8"?>
<View xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="3sp"
    android:layout_height="3sp"
    android:background="@drawable/dot"
    android:layout_margin="3sp"
    android:layout_weight="0" />

堆叠两个点以创建冒号字符（布局文件夹中的clock_colon.xml）：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
          android:orientation="vertical"
          android:layout_gravity="center_vertical"
          android:gravity="center_vertical"
          android:layout_width="wrap_content"
          android:layout_height="match_parent">
    <include layout="@layout/clock_dot"/>
    <include layout="@layout/clock_dot"/>
</LinearLayout>

用两位数创建一个文本视图 (clock_digits.xml)：

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_weight="0"
    android:textColor="#ccc"
    android:textSize="24sp"
    android:text="12" />

然后从数字布局和冒号布局构建计时器布局：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
          android:orientation="horizontal"
          android:gravity="center_vertical"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content">
    <include layout="@layout/clock_digits"/>
    <include layout="@layout/clock_colon"/>
    <include layout="@layout/clock_digits"/>
    <include layout="@layout/clock_colon"/>
    <include layout="@layout/clock_digits"/>
</LinearLayout>

你会得到这样的东西：