Consejo Rápido: Crea Texto de Tamaño Automático con Android O

Spanish (Español) translation by Rafael Chavarría (you can also view the original English article)

¡La primera vista previa de desarrollador para Android O ha llegado!

En esta serie de consejos estaremos explorando algunas de las nuevas características UI que puedes esperar en la siguiente liberación de Android O(reo?).

En este primer consejo, estaré trabajando con la nueva característica de tamaño de texto automático de Android O, que te permite crear texto que se contrae y expando automáticamente para encajar en el diseño actual.

Ya que este es nuestro primer vistazo a Android O aquí en Envato Tuts+, comencemos asegurando que nuestro entorno de desarrollo está listo para Android O.

Configura la Vista Previa de Desarrollador

Actualmente, solo puedes acceder a la Vista Previa de Desarrollador Android O vía la última construcción canary de Android Studio.

Las construcciones Canary son la punta de lanza de Android Studio, y son actualizadas típicamente de manera semanal. Mientras que estas construcciones son probadas, son menos estables que las liberaciones oficiales de Android Studio, y por lo tanto no se desarrollan para desarrollo de producción.

Para descargar la última construcción canary y tomar la vista previa Android O, primero ejecuta Android Studio y selecciona Android Studio > Preferences… desde la barra de herramientas. Selecciona Appearance & Behavior > System Settings > Updates y desde el menú desplegable selecciona Canary Channel.

Switch to the Android Studio Canary Channel

Después, da clic al botón Check Now de acompañamiento para descargar la última liberación desde el Canary Channel.

Después, reinicia tu IDE, y abre el SDK Manager. Asegurando que la pestaña SDK Platforms del SDK Manager está seleccionada, selecciona el componente Android O Preview.

Open the Android SDK Manager and download the O Developer Preview

Después cambia a la pestaña SDK Tools, y después selecciona lo siguiente:

Android SDK Build-Tools 26.0.0 (rc1 o superior)
Android SDK Platform-Tools 26.0.0 (rc1 o superior)
Android Emulator 26.0.0
y Support Repository.

Da clic en el botón OK para descargar todos estos componentes.

Finalmente, crea un nuevo proyecto Android que apunte a Android O. Por el bien de la simplicidad, establece el SDK mínimo del proyecto a Android 7+ O Preview y después selecciona Empty Activity.

Configura Tu Archivo Gradle

Una vez que Android Studio ha creado tu proyecto, abre su archivo build.gradle a nivel de módulo y cambia la versión buildToolsVersion y la versión Support Library a las últimas liberaciones:

apply plugin: 'com.android.application'

android {
  compileSdkVersion 'android-O'
  buildToolsVersion '26.0.0-rc1'
  defaultConfig {
      applicationId "com.jessicathornsby.myapplication"
      minSdkVersion 'O'
      targetSdkVersion 'O'
      versionCode 1
      versionName "1.0"
      testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
  }

A lo largo de esta serie estaré agregando un número de características Android O a esta app de muestra. Si vas a experimentar estas características en acción, entonces necesitarás crear un AVD que esté ejecutando la imagen de sistema Android O. Lanza el AVD Manager de Android Studio, selecciona Create Virtual Device... y después sigue las instrucciones en pantalla para crear un AVD. Puedes usar los ajustes de tu elección, pero cuando Android Studio te pida seleccionar tu imagen de sistema, asegúrate de que seleccionas O.

Creando Texto Más Dinámico

Una de las nuevas características UI que podemos esperar en Android O, es el tamaño automático de texto. Con la adición de unos cuantos atributos XML, puedes crear TextViews que automáticamente incrementarán o disminuirán el tamaño de tu texto para que siempre encaje perfectamente dentro de los confines del TextView. Este escalamiento automático puede asegurar que tu texto permanece fácil de leer a través del enorme rango de diferentes tamaños y densidades de pantalla de Android. El tamaño automático también puede ayudarte a evitar espacios vacíos extraños en tu diseño, o texto que se corta a mitad de la oración porque intentaste meter demasiadas palabras en un TextView.

Hay dos maneras en que puedes implementar tamaño automático de texto:

Granularidad. Esta aproximación te permite especificar un tamaño de texto mínimo y máximo, ademas de un valor de granularidad, que es cuánto se puede incrementar o disminuir tu texto en tamaño con cada "paso". El TextView entonces escalará tu texto horizontal y verticalmente por su valor incremental, hasta que encaje al TextView perfectamente.
Tamaños preestablecidos. Aquí es donde defines un arreglo de todos los tamaños que tu texto puede ser. Android O seleccionará entonces el tamaño más apropiado desde este arreglo, basado en las dimensiones del TextView.

Sin importar qué método elijas, siempre necesitarás agregar el atributo XML android:autoSizeText="uniform" a tu TextView, así que abre tu archivo layout y agrega este elemento ahora.

Granularidad

Para implementar tamaño automático usando granularidad, necesitarás agregar los siguientes atributos XML a tu TextView:

autoSizeMinTextSize. El Tamaño mínimo que el TextView puede usar.
autoSizeMaxTextSize. El tamaño máximo que el TextView puede usar.
autoSizeStepGranularity. El valor de incremento. Este es 1px por defecto.

Aquí, estoy creando una vista que puede re-dimensionar su texto entre 10sp y 100sp, en incrementos de 2sp:

<TextView
  android:text="This is some auto-scaling text"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:autoSizeText="uniform"
  android:autoSizeMinTextSize="10sp"
  android:autoSizeMaxTextSize="100sp"
  android:autoSizeStepGranularity="2sp"/>

Tamaños Preestablecidos

La otra opción es crear un arreglo de tamaños de texto soportados. Android O elegirá entonces el valor más apropiado de esta lista, basado en la cantidad de texto que tiene que mostrar, las dimensiones del TextView, y su configuración actual de pantalla.

Si tu proyecto no contiene ya un archivo arrays.xml, entonces puedes crear uno dando clic derecho al directorio res/values de tu proyecto y seleccionando New > Values Resource File. En la ventana que aparece, dale a este archivo el nombre arrays, y después da clic en OK.

Pueden entonces abrir tu nuevo archivo res/values/arrays.xml y definir todos los tamaños que quieras que use tu TextView.

<?xml version="1.0" encoding="utf-8"?>
<resources>
  <array
      name="autosize">
      <item>10sp</item>
      <item>15sp</item>
      <item>25sp</item>
      <item>30sp</item>
      <item>100sp</item>
      <item>150sp</item>
  </array>
</resources>

Por último, referencía este arreglo usando el atributo autoSizePresetSizes, por ejemplo:

<TextView
  android:text="This is some auto-scaling text"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:autoSizeText="uniform"
  android:autoSizePresetSizes="@array/autosize" />

¡No Olvides Probar!

Una vez que has agregado tamaño automático a un TextView, inicia tu AVD Android O y echa un vistazo a cómo se genera tu TextView en una pantalla Android O emulada. Para revisar que el tamaño automático está funcionando correctamente, actualiza tu TextView para mostrar diferentes cantidades de texto, y después mira qué impacto tiene esto en la imagen generada final que ves en pantalla.

Si quieres implementar tamaño automático, entonces es importante que pruebes tus vistas de texto a lo largo de un rango de configuraciones de pantalla diferentes, ya que podrías necesitar modificar tus tamaños mínimos y máximos de texto para asegurar que tu texto permanece legible a lo largo de diferentes pantallas.

Conclusión

En este consejo rápido te mostré como crear texto que se escala automáticamente. En el siguiente consejo, estaré viendo como Android O hará mucho más fácil usar fuentes personalizadas en tus aplicaciones Android. Mientras tanto, revisa algunos de nuestros otros tutoriales.