Cómo mostrar HTML con Android Compose | de Alexander Zaitsev | junio 2022

La razón para escribir este artículo es que la función de texto componible aún no es compatible con HTML. Dado que hay muchas bibliotecas auxiliares que intentan archivar lo mismo, elegí la forma en que lo implementé, ya que es flexible y personalizable según mis necesidades.Requisitos. Necesito:

  1. Soporte de fuentes.
  2. diseño de texto
  3. Enlaces de apoyo! Esto es especialmente importante para mí, ya que mi aplicación utiliza el visor web integrado en la aplicación para mostrar todos los enlaces.

Veamos cómo se archiva cada uno de los puntos. Para aclarar las cosas, en un nivel alto, esto es solo un envoltorio para la vista de Android. Contenido completo de este artículo. Comience en HtmlText.kt. Por ahora, al menos lea la firma del método: @Composablefun HtmlText(modifier: Modifier = Modifier, html: String,textStyle: TextStyle = Typography.body1,onLink1Clicked: (() -> Unit)? = null,onLink2Clicked: (() -> Unit )?= null) Ver TypefaceSpanCompat.kt en esencia En HtmlText.kt preste atención a estas líneas: val fontResId = when (textStyle.fontWeight) {FontWeight.Medium -> R.font.inter_mediumelse -> R . font.inter_regular}val font = ResourcesCompat.getFont(context, fontResId)Cómo conectar TypefaceSpanCompat.kt a HtmlText.kt se explicará un poco más adelante. De forma predeterminada, HtmlText composable body1 toma TextStyle:textStyle: TextStyle = Typography.body1, y luego lo asigna a los parámetros clásicos de Android. Como ejemplo, veamos Gravity: val gravity = when (textStyle.textAlign) {TextAlign.Center -> Gravity.CENTERTextAlign.End -> Gravity.ENDelse -> Gravity.START}TextStyle se puede cambiar fácilmente. Ejemplo: HtmlText(html = stringResource(id = R.string.create_drive),textStyle = Typography.body1.copy(textAlign = TextAlign.Center, color = Secondary),onLink1Clicked = onLearnMoreClicked)En HtmlText hay las siguientes líneas:movementMethod= DefaultLinkMovementMethod () { enlace ->cuando (enlace) {LINK_1 -> onLink1Clicked?.invoke()LINK_2 -> onLink2Clicked?.invoke() }true}¿Qué es DefaultLinkMovementMethod? Esta es una clase de Java copiada y pegada de Stackoverflow que solo cambia los tramos bajo el capó para permitir los métodos onLinkClick. Puedes leer el código completo aquí.

Estilo izquierdo

Otra cosa es el estilo de los enlaces. En HtmlText puedes ver esta línea: setLinkTextColor(Primary.toArgb()) Otra cosa es el subrayado de los enlaces. Mi diseño requiere que se elimine. Consulte Spannable.removeLinksUnderline a continuación. En HtmlText hay una línea: actualizar = { eso.text = fromHtml(eso.contexto, html) },Donde fromHtml es un método personalizado. Comprobémoslo aquí. Primero toma un String y lo convierte en un Spannable: private fun parse(html: String): Spannable = (HtmlCompat.fromHtml(html, HtmlCompat.FROM_HTML_MODE_COMPACT) as Spannable) Y luego se realizan varias transformaciones Spannables:

  1. Los subrayados de los enlaces se eliminan en Spannable.removeLinksUnderline()
  2. Spannable.styleBold(Contexto:Contexto) :
  • hace que las partes en negrita sean negras (el texto predeterminado para mis componibles HtmlText es gris, pero quiero que las partes en negrita sean negras);
  • establece una fuente dedicada para las partes en negrita.

Finalmente, es importante mostrar cómo declaro cadenas. Esta es una cadena normal con HTML (sin enlaces):Y este es el mismo texto pero con el enlace:Como puede ver, uso link_1 y link_2 hrefs para declarar un enlace. Más tarde, en una devolución de llamada, puedo hacer lo que quiera. En mi caso, abro una página de navegador integrada para solucionarlo. ¡Eso es todo! Con ~100 líneas de código, ahora podemos mostrar casi cualquier código HTML. Veamos el ejemplo:Cadena para este ejemplo:Código:HtmlText(modifier = Modifier.padding(top = SIZE_16, bottom = SIZE_32),html = stringResource(id = R.string.create_drive_pass_description),textStyle = Typography.body1.copy(textAlign = TextAlign.Center, color = Secondary) ,onLink1Clicked = onLearnMoreClicked) ¡Eso es todo! Gracias por leer. Puedes apoyar mi trabajo aplaudiendo o compartiendo este artículo.

Deja una respuesta

Tu dirección de correo electrónico no será publicada.