目录

1. UI we are making
2. Styling the text
3. Making text clickable

我在Google Playstore上的应用程序

• HERE

github代码

• HERE

简介

• 本系列将是对我在开发Android应用程序时面临的任何问题或任何观察结果的非正式演示。本系列中的每个博客文章都将是独特的，并且与其他博客文章是独一无二的，因此请随时环顾四周。

UI我们将重新创建

• 今天的教程，我们将重新创建此UI：

• 你们中有些人可能会注意到它是Tiktok的登录页面的UI

• 具体来说，我们将重新创建文本，我们会以两个步骤进行：

1）造型仅为文本的一个部分。
2）使文本的唯一样式部分可单击。

1）仅造型文本的一个部分。

• 为此，我们将使用buildAnnotatedString函数。这使我们能够做到这一点：

 val highlightedText = buildAnnotatedString {
        append("Don't have an account?")
        withStyle(style= SpanStyle(color= Color(0xFFe63946))){
            append(" Sign up")
        }
    }

• 您可以从上面的代码中看到，我们正在使用append()将普通字符串添加到我们的突出显示变量中。 withStyle()与append()结合使用，使我们只能编辑文本的某个部分。这将为我们提供我们所需的文字。

2）使文本的唯一样式部分可单击。

• 这是事物变得更加复杂的地方，主要是因为我们将使用ClickableText组合：

ClickableText(
            onClick ={ offset ->
                //changeVisiblility()
                Timber.tag("offsets").d("character -> $offset")
                if(offset >=20){
                    clickFunction()
                }
                     },
            text = highLightedText,
            style = MaterialTheme.typography.subtitle1
        )

• 注意onClick{offset ->}函数和offset变量。这对应于用户按下的字母的索引。因此，对于文本Don't have an account? Sign up，有30个字符。然后，我们的代码指出，只要用户在第20个索引或更高时单击我们希望clickFunction()运行。现在，我使用第20个索引给我们的用户提供了一点摆动的空间，而不是按照我们想要的位置，他们不会按照我们的位置。

结论

• 感谢您抽出宝贵的时间阅读我的博客文章。如果您有任何疑问或疑虑，请在下面发表评论或在Twitter上与我联系。