Instagram如何布局评论textview和用户名textview合二为一？

Question

我在考虑 Instagram 评论卡布局。布局边界如下所示，

在紫色块中，两个 TextView 对齐为一个单独的，都可以单独单击。一个导航到用户页面，另一个选择评论卡。这怎么可能？我只能把它想象成一个有两个文本视图的 LinearLayout/RelativeLayout，我们怎样才能让它看起来像这样？

 <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginRight="60dp"
        android:layout_marginBottom="20dp">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="\@someusername"
            android:id="@+id/comment_username"
            android:layout_marginLeft="15dp"
            android:textSize="18sp"
            android:textStyle="bold"/>

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. "
            android:layout_marginLeft="5dp"

            android:textSize="18sp"
            android:layout_toRightOf="@+id/comment_username"
            android:id="@+id/comment"/>
</RelativeLayout>

渲染如下图,

Instagram 如何让布局看起来像上图？

Answer 1

它使用 SpannableString 来设置 TextView 的样式。你可以这样做：

val username = "@username"
val comment = "This is a comment"
val text = username + comment

val startName = text.indexOf(username)
val endName = startName + username.length
val startComment = text.indexOf(comment)
val endComment = text.length

val spannableString = SpannableString(text)
val nameClickableSpan = object : ClickableSpan() {
    override fun onClick(widget: View) {
        // Username clicked
    }

    override fun updateDrawState(ds: TextPaint) {
        super.updateDrawState(ds)
        ds.typeface = Typeface.DEFAULT_BOLD
        ds.isUnderlineText = false
    }
}
val commentClickableSpan = object : ClickableSpan() {
    override fun onClick(widget: View) {
        // Comment clicked
    }

    override fun updateDrawState(ds: TextPaint) {
        super.updateDrawState(ds)
        ds.isUnderlineText = false
    }
}

spannableString.setSpan(nameClickableSpan, startName, endName, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE)
spannableString.setSpan(commentClickableSpan, startComment, endComment, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE)

textView.text = spannableString
textView.movementMethod = LinkMovementMethod.getInstance()

Instagram如何布局评论textview和用户名textview合二为一？

How do Instagram layout comment textview and user name textview together as one?

java

layout

android

reverse-engineering

kotlin