直播带货源码开发中用TextView插入图片

在直播带货源码开发中经常会遇到文字插入小图标,就像下面“图1”这种两个小图片,来吸引用户来购买东西,直播带货源码开发时因为文字需要换行,不能用ImageView+TextView去实现,我们就只能用一个TextView,在里面加入图片:

一、直播带货源码开发之具体实现

具体代码如下、需要注意的是CenterImageSpan类,这个是自定义的,如果用原生的ImageSpan,图片是不能和文字居中的,

要么偏上,要么偏下。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
private fun setDrawableText(context: Context, tv: TextView, str: String?, drawables: IntArray) {
        tv.text = ""
        if (drawables.isNotEmpty()){
            for(i in drawables.indices){
                val drawable = drawables[i]
                val d = ContextCompat.getDrawable(context,drawable)
                d?.setBounds(0,0,d.minimumWidth,d.minimumHeight)
                val span = d?.let { CenterImageSpan(it) }
                val spanStr = SpannableString("custom$i")
                spanStr.setSpan(span, 0, spanStr.length, Spannable.SPAN_INCLUSIVE_EXCLUSIVE)
                tv.append(spanStr)
                tv.append(" ")
            }
        }
        tv.append("$str")
    }

CenterImageSpan类

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
public class CenterImageSpan extends ImageSpan {
  
  
    public CenterImageSpan(@NonNull Drawable drawable) {
        super(drawable);
    }
  
  
    @Override
    public void draw(@NonNull Canvas canvas, CharSequence text, int start, int end, float x, int top, int y, int bottom, @NonNull Paint paint) {
        Drawable b = getDrawable();
        Paint.FontMetricsInt fm = paint.getFontMetricsInt();
        int transY = (y + fm.descent + y + fm.ascent)/ 2- b.getBounds().bottom/2;
        canvas.save();
        canvas.translate(x,transY);
        b.draw(canvas);
        canvas.restore();
    }
}

二、直播带货源码开发之核心代码讲解

我们这里主要是用SpannableString这个类实现,这个类可以实现很多特殊TextView的样式,具体看注释代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
//图片资源转drawable, drawable参数例子 R.drawable.main_tg_yushou
 val d = ContextCompat.getDrawable(context,drawable)
  
  
//设置图片大小
 d?.setBounds(0,0,d.minimumWidth,d.minimumHeight)
  
  
//生成ImageSapn
 val span = d?.let { CenterImageSpan(it) }
  
  
//这里定义一个SpannableString,里面内容不重要,可自己随便定义。
//注意:这里如果有复制功能,那这个图片的内容就是这里面的字符串
 val spanStr = SpannableString("custom$i")
  
  
//把图片设置进Span中
 spanStr.setSpan(span, 0, spanStr.length,Spannable.SPAN_INCLUSIVE_EXCLUSIVE)
  
  
//追加到TextView中
 tv.append(spanStr)

通过以上的操作,我们就可以轻松的将图片插图到文字中,有了这个图片的加入用户在平台商场购买东西是更好挑选到实惠有好用的物品,也让我们开发者在直播带货源码的开发中更加得心用手。

以上就是 直播带货源码开发中用TextView插入图片,更多内容欢迎关注之后的文章。

 

posted @   云豹科技-苏凌霄  阅读(16)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型,支持深度思考和联网搜索!
· 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
· ollama系列01:轻松3步本地部署deepseek,普通电脑可用
· 25岁的心里话
· 按钮权限的设计及实现
历史上的今天:
2022-08-17 直播系统app源码,vue实现简单瀑布流布局
2022-08-17 直播app源码,Echarts 设置 tooltip 背景框颜色文字颜色
2022-08-17 直播网站源码,Vue获取URL图片的宽高
2021-08-17 短视频app源码,加载网络模型与读取各层信息
2021-08-17 一对一直播系统开发如何用Qt5QPainter做出仅边框效果
2021-08-17 HTML+JS实现小视频app源码特效,浮动气泡
点击右上角即可分享
微信分享提示