Come creare il centro verticale dei due punti in TextView

Question

Ho un tempo di visualizzazione TextView. L'ora si aggiorna ogni secondo.

Ho usato il carattere DIN. Ho impostato TextView per centrare l'allineamento (verticale). Perché il colon si allinea alla linea di base? Chi sa come risolvere questo problema?

Aggiornamento

   <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

questo è il modo di default come il tipo di carattere rende il carattere due punti. Non è possibile in alcun modo modificarlo, a meno che non crei TextViews separate per i due punti. In alternativa puoi usare un font diverso e verificare se uno qualsiasi degli altri font in realtà centra il carattere del colon. Utilizzare la seguente per fare questo:

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) 

Per una migliore spiegazione dei caratteri che possono essere utilizzati, si può verificare il official documentation.

Spero che questo aiuti :)

Answer 2

Una possibilità sarebbe quella di dividere l'intera TextView in 5 diverse TextViews e aggiungere android:layout_marginTop="3px" su quelli con i numeri.

Answer 3

Poiché il colon è una forma così semplice, è possibile crearlo da elementi più piccoli, viste di testo, primitive grafiche o solo due viste, in un layout lineare verticale.

Ad esempio, iniziare con la creazione di un semplice punto come un disegnabile forma (dot.xml nella cartella drawable):

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

creare una vista con questo drawable come sfondo (clock_dot.xml nel layout cartella):

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

Stack due punti per creare il carattere due punti (clock_colon.xml nella cartella layout):

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

creare una visualizzazione di testo con due cifre (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" /> 

Poi costruire un layout timer dal layout cifre e il layout del colon:

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

si ottiene qualcosa di simile: