美文网首页
TextView中部分文字换色,并且可以点击(通过ClickSp

TextView中部分文字换色,并且可以点击(通过ClickSp

作者: 业精于勤_荒于嬉 | 来源:发表于2020-05-30 16:02 被阅读0次
    前言

    我们在平时项目开发中,有时会遇到一段文字,可能其中有多种颜色,而且这些带颜色的部分还可以点击,但是这段文字用得是一个TextView。当然如果我们用多个TextView是可以实现,但是这样显得low,并且代码还有点乱,所以不建议这样写。当然通过把文字当做Html,通过调用Html.fromHtml加载,其中要点击事件的部分文字可以加上<u></u>标签也可以解决。在这里,记录一下这个情况的另一种解决方案。

    正文

    比如我们要实现这种效果:


    1.jpg
    <TextView
            android:id="@+id/tv_content"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="联系 智能客服 为您解决"
            android:layout_gravity="center"/>
    
    
    TextView tv_content=findViewById(R.id.tv_content);
            ClickableSpan clickableSpan= new ClickableSpan(){
                @Override
                public void onClick(@NonNull View widget) {
                    Toast.makeText(BlackteaActivity.this,"我是智能客服",Toast.LENGTH_LONG).show();
                }
            };
            String beforeStr="联系 ";
            SpannableStringBuilder style = new SpannableStringBuilder();
            style.append(beforeStr).append("智能客服 为您解决");
            style.setSpan(clickableSpan, beforeStr.length(), beforeStr.length() + 4, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
            tv_content.setText(style);
    
            //设置部分文字颜色
            ForegroundColorSpan foregroundColorSpan1 = new ForegroundColorSpan(getResources().getColor(R.color.color_2440BD));
            style.setSpan(foregroundColorSpan1, beforeStr.length(), beforeStr.length() + 4, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
    
            //设置光标如何移动计量的方法
            tv_content.setMovementMethod(LinkMovementMethod.getInstance());
            //配置给TextView
            tv_content.setText(style);
    

    通过ClickableSpan这个类来设置点击事件:
    如果只是变色,可以注释掉其中的部分代码:

    TextView tv_content=findViewById(R.id.tv_content);
            /*ClickableSpan clickableSpan= new ClickableSpan(){
                @Override
                public void onClick(@NonNull View widget) {
                    Toast.makeText(BlackteaActivity.this,"我是智能客服",Toast.LENGTH_LONG).show();
                }
            };*/
            String beforeStr="联系 ";
            SpannableStringBuilder style = new SpannableStringBuilder();
            style.append(beforeStr).append("智能客服 为您解决");
            /*style.setSpan(clickableSpan, beforeStr.length(), beforeStr.length() + 4, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
            tv_content.setText(style);*/
    
            //设置部分文字颜色
            ForegroundColorSpan foregroundColorSpan1 = new ForegroundColorSpan(getResources().getColor(R.color.color_2440BD));
            style.setSpan(foregroundColorSpan1, beforeStr.length(), beforeStr.length() + 4, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
    
            //设置光标如何移动计量的方法
            tv_content.setMovementMethod(LinkMovementMethod.getInstance());
            //配置给TextView
            tv_content.setText(style);
    

    在这里注意一下:上面我们设置了ClickSpan,但是可点击的文字虽然可以点击,但是出现了一条下划线,那我们怎么去掉这条下划线呢?
    只需要重写ClickableSpan中的updateDrawState方法即可:

    ClickableSpan clickableSpan= new ClickableSpan(){
                @Override
                public void onClick(@NonNull View widget) {
                    Toast.makeText(BlackteaActivity.this,"我是智能客服",Toast.LENGTH_LONG).show();
                }
                //去除连接下划线
                @Override
                public void updateDrawState(TextPaint ds) {
                    /**set textColor**/
                    ds.setColor(ds.linkColor);
                    /**Remove the underline**/
                    ds.setUnderlineText(false);
                }
            };
    

    相关文章

      网友评论

          本文标题:TextView中部分文字换色,并且可以点击(通过ClickSp

          本文链接:https://www.haomeiwen.com/subject/agfhzhtx.html