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

Posted 2023-03-22

【中文标题】Instagram如何布局评论textview和用户名textview合二为一？ [复制]

【英文标题】：How do Instagram layout comment textview and user name textview together as one? [duplicate]

【发布时间】：2020-09-07 18:16:23

【问题描述】：

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

在紫色块中，两个 TextView 对齐为一个，都可以单独点击。一个导航到用户页面，另一个选择评论卡。这怎么可能？我只能将其视为具有两个 textview 的 LinearLayout/RelativeLayout，我们如何才能让它看起来和行为像这样？

 <RelativeLayout
        android:layout_
        android:layout_
        android:layout_marginRight="60dp"
        android:layout_marginBottom="20dp">

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

        <TextView
            android:layout_
            android:layout_
            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 如何使布局看起来像上图？

【问题讨论】：

尝试使用跨度来设置文本样式。阅读更多：medium.com/androiddevelopers/…

这能回答你的问题吗？ How to set the part of the text view is clickable

【参考方案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()

【讨论】：

感谢您对 kotlin 的简洁解释