Android Compose kullanarak HTML nasıl görüntülenir | tarafından Alexander Zaitsev | Haz, 2022

Android Compose kullanarak HTML nasıl görüntülenir |  tarafından Alexander Zaitsev |  Haz, 2022

Bu yazıyı yazmamın nedeni, Text birleştirilebilir işlev henüz HTML’yi desteklemiyor. Aynı şeyi arşivlemeye çalışan çok sayıda yardımcı program kitaplığı olduğundan, esnek ve ihtiyaçlarıma göre ayarlanabilen uygulama yöntemimi seçtim.

Gereksinimler. İhtiyacım var:

  1. Yazı tipleri desteği.
  2. Metin stili.
  3. Bağlantılar destekleniyor! Uygulamam herhangi bir bağlantıyı görüntülemek için uygulama içi web görüntüleyiciyi kullandığından bu benim için özellikle önemlidir.

Her bir noktanın nasıl arşivlendiğini görelim. İşleri netleştirmek için – yüksek düzeyde bu, Android görünümü için yalnızca bir sarıcıdır. Bu makalenin tam özü.

Dan başla HtmlText.kt. Şimdilik, en azından yöntem imzasını okuyun:

@Composable
fun HtmlText(
modifier: Modifier = Modifier,
html: String,
textStyle: TextStyle = Typography.body1,
onLink1Clicked: (() -> Unit)? = null,
onLink2Clicked: (() -> Unit)? = null
)

bkz. TypefaceSpanCompat.kt içinde öz.

İçinde HtmlText.kt şu satırlara dikkat edin:

val fontResId = when (textStyle.fontWeight) {
FontWeight.Medium -> R.font.inter_medium
else -> R.font.inter_regular
}
val font = ResourcesCompat.getFont(context, fontResId)

nasıl bağlanır TypefaceSpanCompat.kt ile birlikte HtmlText.kt biraz sonra anlatılacaktır.

Varsayılan olarak HtmlText birleştirilebilir çekimler body1 TextStyle:

textStyle: TextStyle = Typography.body1,

Ve sonra onu klasik Android parametrelerine eşler. Örnek olarak şuna bakalım Gravity:

val gravity = when (textStyle.textAlign) {
TextAlign.Center -> Gravity.CENTER
TextAlign.End -> Gravity.END
else -> Gravity.START
}

TextStyle kolayca değiştirilebilir. Örnek:

HtmlText(
html = stringResource(id = R.string.create_drive),
textStyle = Typography.body1.copy(textAlign = TextAlign.Center, color = Secondary),
onLink1Clicked = onLearnMoreClicked
)

İçinde HtmlText sonraki satırlar var:

movementMethod = DefaultLinkMovementMethod() { link ->
when (link) {
LINK_1 -> onLink1Clicked?.invoke()
LINK_2 -> onLink2Clicked?.invoke()
}
true
}

Nedir DefaultLinkMovementMethod? Bu, Stackoverflow’tan kopyalanarak yapıştırılmış bir Java sınıfıdır ve yalnızca kaputun altındaki açıklıkları değiştirir. onLinkClick yöntemlerle mümkündür. Kodun tamamını okuyabilirsiniz burada.

Bağlantı stili

Başka bir şey, bağlantı stilidir. İçinde HtmlText bu satırı görebilirsiniz:

setLinkTextColor(Primary.toArgb())

Başka bir şey, bağlantıların altı çizili olmasıdır. Tasarımım kaldırılmasını gerektiriyor. bkz. Spannable.removeLinksUnderline aşağıda.

İçinde HtmlText bir çizgi var:

update = { it.text = fromHtml(it.context, html) },

Neresi fromHtml özel bir yöntemdir. bir bakalım burada.

İlk başta, bir dize alır ve bir Spannable ondan:

private fun parse(html: String): Spannable =                                             (HtmlCompat.fromHtml(html, HtmlCompat.FROM_HTML_MODE_COMPACT) as Spannable)

Ve sonra birkaç Spannable dönüşümler yapılır:

  1. Bağlantıların alt çizgileri kaldırıldı Spannable.removeLinksUnderline()
  2. Spannable.styleBold(context: Context) :
  • kalın kısımları siyah yapar (benim için varsayılan metin HtmlText birleştirilebilirler gri ama kalın kısımların siyah olmasını istiyorum);
  • kalın kısımlar için özel bir yazı tipi ayarlar.

Son olarak, dizeleri nasıl bildirdiğimi göstermek önemlidir. Bu, HTML içeren normal bir dizedir (bağlantı yok):

<string name="view_recovery_description">
<![CDATA[
<b>For your eyes only!</b> Anyone who has access to your 12 word recovery phrase can access your entire wallet. Learn more
]]>
</string>

Ve bu aynı metin ama bağlantı ile:

<string name="view_recovery_description">
<![CDATA[
<b>For your eyes only!</b> Anyone who has access to your 12 word recovery phrase can access your entire wallet. <a href="link_1">Learn more</a>
]]>
</string>

Gördüğünüz gibi kullanıyorum link_1 ve link_2 hrefs bir bağlantı bildirmek için. Daha sonra, bir geri aramada istediğim zaman yapabilirim. Benim durumumda, işlemek için yerleşik bir tarayıcı sayfası açıyorum.

Bu kadar! ~100 satırlık kod ile artık hemen hemen her HTML’yi görüntüleyebiliyoruz. Örneğe bakalım:

Bu örnek için dize:

<string name="create_drive_pass_description">
<![CDATA[
This password protects your Google Drive backups. <b>Store this password somewhere safe.</b> We cannot recover your password for you. <a href="link_1">Learn more</a>
]]>
</string>

Kod:

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
)

Bu kadar! Okuduğunuz için teşekkürler.

Bu yazıyı alkışlayarak veya paylaşarak çalışmalarıma destek olabilirsiniz.

Bir cevap yazın

E-posta hesabınız yayımlanmayacak.