Как создать вертикальный центр двоеточия в TextView

У меня есть 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" />

Ответы

Ответ 1

Это метод по умолчанию, как шрифт отображает символ двоеточия. Невозможно изменить это, если вы не создадите отдельный TextViews для двоеточий. В качестве альтернативы вы можете использовать другой шрифт и проверить, действительно ли какой-либо из других шрифтов центрирует chararacter двоеточия. Для этого выполните следующие действия:

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)

Для лучшего объяснения шрифтов, которые можно использовать, вы можете проверить официальную документацию .

Надеюсь, что это поможет:)

Ответ 2

Параметр должен состоять в том, чтобы разделить весь TextView на 5 различных TextViews и добавить android:layout_marginTop="3px" к номерам с цифрами.

Ответ 3

Поскольку двоеточие является такой простой формой, вы можете построить его из меньших элементов, текстовых представлений, графических примитивов или всего лишь двух видов в вертикальной линейной компоновке.

Например, начните с создания простой точки в виде рисованной формы (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>

Вы получите что-то вроде этого:

Снимок экрана таймера