美文网首页
Android给文本中部分文字添加圆角与图片

Android给文本中部分文字添加圆角与图片

作者: 草色陆连清 | 来源:发表于2020-06-09 16:15 被阅读0次
效果图
最近项目中新增的一个页面中,Textview文本需要实现上图效果,特此记录。
参考资料: http://blog.csdn.net/industriously/article/details/53493392

为了实现上述效果,用一个Textview比较好实现。若由多个Textview拼接在布局中,在最后的Texiview换行时,第二行无法从头开始显示文本(如果有相关思路,请在评论区交流)。让一个Textview显示多样的文本,可以用SpannableString类实现。但是常用的场景只是改变文字的颜色以及增加相关文字的点击事件,若要实现上诉效果,我们需要重写ReplacementSpan类:

public class RadiusBackgroundSpan extends ReplacementSpan {
    private int mSize;
    private int mColor;
    private int mRadius;
    private Context mContext;

    /**
     * @param color  背景颜色
     * @param radius 圆角半径
     */
    public RadiusBackgroundSpan(int color, int radius,Context context) {
        mColor = color;
        mRadius = radius;
        mContext = context;
    }

    @Override
    public int getSize(Paint paint, CharSequence text, int start, int end, Paint.FontMetricsInt fm) {
        mSize = (int) (paint.measureText(text, start, end) + 2 * mRadius +25);
        //mSize就是span的宽度,span有多宽,开发者可以在这里随便定义规则
        //我的规则:这里text传入的是SpannableString,start,end对应setSpan方法相关参数
        //可以根据传入起始截至位置获得截取文字的宽度,最后加上左右两个圆角的半径得到span宽度
        return mSize;
    }

    @Override
    public void draw(Canvas canvas, CharSequence text, int start, int end, float x, int top, int y, int bottom, Paint paint) {
        int color = paint.getColor();//保存文字颜色
        paint.setColor(mColor);//设置背景颜色
        paint.setAntiAlias(true);// 设置画笔的锯齿效果
        RectF oval = new RectF(x, y + paint.ascent(), x + mSize, y + paint.descent());
        //设置文字背景矩形,x为span其实左上角相对整个TextView的x值,y为span左上角相对整个View的y值。paint.ascent()获得文字上边缘,paint.descent()获得文字下边缘
        canvas.drawRoundRect(oval, mRadius, mRadius, paint);//绘制圆角矩形,第二个参数是x半径,第三个参数是y半径
        paint.setColor(mContext.getResources().getColor(R.color.white));//恢复画笔的文字颜色
        canvas.drawText(text, start, end, x + mRadius, y, paint);//绘制文字
        //添加文字右侧的图片
        Bitmap bitmap = BitmapFactory.decodeResource( mContext.getResources(),R.drawable.icon_arrow_down);
        //drawBitmap方法第二、第三个参数分别代表图案距TextView左侧距离,以及距TextView上边框距离。
        canvas.drawBitmap(bitmap, x+mSize-40, 10, paint);
    }
}

在Activity或Fragment中:

      int radiusColor = getResources().getColor(R.color.orange_ff);
      String content = "喂,您好!欧阳先生在忙,您找TA有什么事?";
      SpannableString spanString = new SpannableString(content);
      int start = content.indexOf("欧阳先生");
      int end = start + "欧阳先生".length();
      spanString.setSpan(new RadiusBackgroundSpan(radiusColor, 25,SettingCallNameActivity.this),start, end, Spannable.SPAN_INCLUSIVE_EXCLUSIVE);
       //给"欧阳先生"添加点击事件
      spanString.setSpan(new ClickableSpan() {
              @Override
               public void onClick(View view) {
                //点击事件
              }

              @Override
              public void updateDrawState(TextPaint ds) {
                  ds.setUnderlineText(false);                                      //取消下划线
              }
            }, start, end, Spanned.SPAN_INCLUSIVE_EXCLUSIVE);
      mTvCallName.setText(spanString);
      mTvCallName.setMovementMethod(LinkMovementMethod.getInstance());

相关文章

  • Android给文本中部分文字添加圆角与图片

    最近项目中新增的一个页面中,Textview文本需要实现上图效果,特此记录。 参考资料: 为了实现上述效果,用一个...

  • 微信小程序canvas绘图

    圆角矩形 圆角图片 圆形图片 多行文本溢出

  • YYKit之YYLabel

    本文只对富文本中部分文字添加点击事件做简单介绍 1.添加点击事件 YYLabel中给部分文字添加点击事件主要是在富...

  • iOS 图文混排

    创建label 创建富文本 创建图片文本 富文本添加图片 图片和文字居中对齐 图片文本加入富文本中 图片插入文本中...

  • CoreText 学习总结

    === 需求 给出一段多行文本,要求给前面部分文字添加圆角边框(下面简称这个为标签),要求能够控制标签和文字之间的...

  • iOS小知识点05

    UIImageView添加圆角 在项目中提供的图片是矩形的,现要改成圆角图片,于是找了一些资料,下面是添加圆角图片...

  • iOS给图片添加文字水印和图片水印

    加水印的方式有很多,比如给图片添加图片水印、文字水印,或者给视频添加图片水印、文字水印。本文首先讲解如何给图片添加...

  • Android给图片添加文字和水印

    话不多说 上图 在Activity中获取到ImageView对象,并且获取Bitmap对象,对Bitmap进行ca...

  • Android 图片添加圆角和边框

    需求背景 最近在开发二维码支付的时候产品要求二维码中的图片样式为圆角+白色边框,如下图所示: 二维码的生成我们就不...

  • iOS 富文本如何添加图片

    iOS 富文本如何添加图片 iOS 富文本如何添加图片

网友评论

      本文标题:Android给文本中部分文字添加圆角与图片

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