Jetpack Compose'da Tıklanabilir SpannableText

Daha önce, jetpack compose'da bir metni nasıl yayabileceğimizi anlatan bir makale yayınlamıştım. buraya bakın

Compose'da bir metni tıklanabilir yapmak istiyorsanız Modifer.clickable on a Text veya ClickableText kullanabilirsiniz .

Ama ClickableText'i kullanacağız çünkü o, tıkladığınızda karakter kaymasını da veriyor.

Örneğin

ClickableText("Hello", onClick = { offset ->
    println("You clicked on offset $offset")
})

Bu, yayılma metnine tıklamak istediğinizde, tıklanabilir yayılma alanını kolayca bulabilmemiz için yardımcı olacaktır.

Bir AnnotatedString (Span text) oluşturalım

ClickableText(text = buildAnnotatedString {
                append("I have read ")
                withStyle(style = SpanStyle(color = Color.Red), ) {
                    append("Terms and Condition")
                }
                append(" and ")
                withStyle(style = SpanStyle(color = Color.Red), ) {
                    append("Privacy policy")
                }
            }, onClick = {
                println("Clicked offset $it")
            })

Şimdi yayılma alanımızı tespit edeceğiz, yani withStyle kapsamı içinde yaptığımız şey, yeni pushStringAnnotation satırı ekleyeceğiz , bu açıklamalı dizeyi tutacak ve onu daha sonra bulabiliriz.

Ayrıca, daha iyi anlaşılması için yukarıdaki kodu bu sırayla yeniden düzenliyorum.

1. Yayılabilir değişkenler ekleyelim.

val tnc = "Terms and Condition"
val privacyPolicy = "Privacy policy"

val annotatedString = buildAnnotatedString {
    append("I have read ")
    withStyle(style = SpanStyle(color = Color.Red), ) {
        pushStringAnnotation(tag = tnc, annotation = tnc)
        append(tnc)
    }
    append(" and ")
    withStyle(style = SpanStyle(color = Color.Red), ) {
        pushStringAnnotation(tag = privacyPolicy, annotation = privacyPolicy)
        append(privacyPolicy)
    }
}

ClickableText(text = annotatedString, onClick = { offset ->
    annotatedString.getStringAnnotations(offset, offset)
        .firstOrNull()?.let { span ->
            println("Clicked on ${span.item}")
        }
})

Kullanıcı tıkladığında, ofset kullanarak açıklamalı Dizeyi kolayca bulabiliriz.

Tam kod parçacığı.

val tnc = "Terms and Condition"
val privacyPolicy = "Privacy policy"
val annotatedString = buildAnnotatedString {
    append("I have read ")
    withStyle(style = SpanStyle(color = Color.Red), ) {
        pushStringAnnotation(tag = tnc, annotation = tnc)
        append(tnc)
    }
    append(" and ")
    withStyle(style = SpanStyle(color = Color.Red), ) {
        pushStringAnnotation(tag = privacyPolicy, annotation = privacyPolicy)
        append(privacyPolicy)
    }
}
ClickableText(text = annotatedString, onClick = { offset ->
    annotatedString.getStringAnnotations(offset, offset)
        .firstOrNull()?.let { span ->
            println("Clicked on ${span.item}")
        }
})

Bu yazıda, metnin yayılma alanına nasıl tıklama ekleyebileceğimizi açıklamaya çalıştım. Statik olduğundan. Regex kullanarak aynı şeyi dinamik içerikte de başarabiliriz.

Her seferinde yazmak istemiyorsanız projenizde işinize yarayacak Gist dosyası burada. Sadece kopyalayıp yapıştırın ve sihir gerçekleşecek.

Bu makaleyi okuduğunuz için teşekkür ederiz.

Lütfen biraz alkışlayın ve daha faydalı makaleler için beni takip edin.

Dinamik yayılma için bir makale istiyorsanız, yoruma yazalım.

ŞİMDİ ALKIŞLAR!!!!!!!!